Skip to content

Commit

Permalink
Add Luxon library and dynamic timestamping JS code
Browse files Browse the repository at this point in the history
  • Loading branch information
@nelsonni
nelsonni committed Aug 14, 2020
1 parent 6781b45 commit 8898798
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 46 deletions.
12 changes: 12 additions & 0 deletions js/timestamp.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
var DateTime = luxon.DateTime;

function timeSince(isoTime) {
var timestamp = DateTime.fromISO(isoTime);
var now = DateTime.local();
var delta = now.diff(timestamp, ['months', 'days', 'hours']).toObject();

if (delta.months > 0) return `Last updated ${delta.months} months ago`;
if (delta.days > 0) return `Last updated ${delta.days} days ago`;
if (delta.hours > 0) return `Last updated ${Math.floor(delta.hours)} hours ago`;
return `Last updated now`;
}
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 12 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"title": "Full Width Pics",
"name": "startbootstrap-full-width-pics",
"version": "4.1.1",
"description": "A HTML template featuring sections with full width image backgrounds built with Bootstrap",
"title": "EPICLab",
"name": "epiclab",
"version": "1.0.0",
"description": "The End-user centric, Privacy, Inclusion and Cognition laboratory at Oregon State University",
"keywords": [
"css",
"sass",
Expand All @@ -11,26 +11,27 @@
"theme",
"template"
],
"homepage": "https://startbootstrap.com/template-overviews/full-width-pics",
"homepage": "https://epiclab.github.io/",
"bugs": {
"url": "https://github.com/BlackrockDigital/startbootstrap-full-width-pics/issues",
"email": "feedback@startbootstrap.com"
"url": "https://github.com/EPICLab/EPICLab.github.io/issues",
"email": "anita.sarma@oregonstate.edu"
},
"license": "MIT",
"author": "Start Bootstrap",
"author": "EPICLab",
"contributors": [
"David Miller (http://davidmiller.io/)"
],
"repository": {
"type": "git",
"url": "https://github.com/BlackrockDigital/startbootstrap-full-width-pics.git"
"url": "https://github.com/EPICLab/EPICLab.github.io.git"
},
"dependencies": {
"bootstrap": "^4.2.1",
"jquery": "3.5.0"
"jquery": "3.5.0",
"luxon": "^1.24.1"
},
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2"
}
}
}
88 changes: 53 additions & 35 deletions research.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>EPICLab</title>
<script src="vendor/luxon/luxon.min.js"></script>
<script type="text/javascript" src="js/timestamp.js"></script>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>EPICLab</title>

<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">

<body>
</head>

<div class="page-content">
<body>

<div class="page-content">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="https://epiclab.github.io/">EPICLab</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
Expand Down Expand Up @@ -55,45 +59,59 @@
<div class="card">
<img src="media/research/csimage.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<a class="title" style="font-weight: 500; font-size: 20px" id="target" href="usable-privacy-&-security.html">Usable Privacy & Security<i class="fas fa-link" ID="popup"></i></a>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<a class="title" style="font-weight: 500; font-size: 20px" id="target"
href="usable-privacy-&-security.html">Usable Privacy & Security<i class="fas fa-link"
ID="popup"></i></a>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="card-text"><small id="usable-privacy-&-security" class="text-muted"></small>
</p>
</div>
</div>
<div class="card">
<img src="media/research/csimage.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<a class="title" style="font-weight: 500; font-size: 20px" id="target" href="inclusivity-in-software-engineering.html">Inclusivity in Software Engineering<i class="fas fa-link" ID="popup"></i></a>
<a class="title" style="font-weight: 500; font-size: 20px" id="target"
href="inclusivity-in-software-engineering.html">Inclusivity in Software Engineering<i
class="fas fa-link" ID="popup"></i></a>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<p class="card-text"><small id="inclusivity-in-software-engineering" class="text-muted"></small></p>
</div>
</div>
<div class="card">
<img src="media/research/csimage.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<a class="title" style="font-weight: 500; font-size: 20px" id="target" href="human-factors-in-development-environments.html">Human Factors in Development Environments<i class="fas fa-link" ID="popup"></i></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<a class="title" style="font-weight: 500; font-size: 20px" id="target"
href="human-factors-in-development-environments.html">Human Factors in Development Environments<i
class="fas fa-link" ID="popup"></i></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small id="human-factors-in-development-environments" class="text-muted"></small></p>
</div>
</div>
</div>
</div>
</section>

</div>

<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<p class="footer-text">Copyright &copy; Anita Sarma 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<p class="footer-text">Copyright &copy; Anita Sarma 2020</p>
</div>
<!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
document.getElementById("usable-privacy-&-security").innerText = timeSince('2020-05-25T09:45');
document.getElementById("inclusivity-in-software-engineering").innerText = timeSince('2020-08-14T09:45');
document.getElementById("human-factors-in-development-environments").innerText = timeSince('2020-08-12T09:45');
</script>

</body>
</body>

</html>
</html>
1 change: 1 addition & 0 deletions vendor/luxon/luxon.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 8898798

Please sign in to comment.