mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 13:56:22 -04:00
add loading spinner to /projects
This commit is contained in:
parent
053e5922c6
commit
b273bdbf99
GPG Key ID:
2B0C9CF251E69A39
@ -7,6 +7,7 @@ import twemoji from "twemoji";
|
||||
|
||||
// don't continue if there isn't a span#meta-hits element on this page
|
||||
const wrapper = document.getElementById("github-cards");
|
||||
const spinner = document.getElementById("loading-spinner");
|
||||
|
||||
if (wrapper) {
|
||||
dayjs.extend(relativeTime); // https://day.js.org/docs/en/plugin/relative-time
|
||||
@ -76,7 +77,12 @@ if (wrapper) {
|
||||
wrapper.appendChild(div);
|
||||
});
|
||||
|
||||
// these elements were added after the first twemoji parsing
|
||||
// we're done, hide the loading spinner
|
||||
if (spinner) {
|
||||
spinner.style.display = "none";
|
||||
}
|
||||
|
||||
// the repo descriptions were added after the first twemoji parsing
|
||||
twemoji.parse(wrapper, {
|
||||
callback: (icon) => `/assets/emoji/${icon}.svg`,
|
||||
});
|
||||
|
||||
@ -18,13 +18,9 @@
|
||||
|
||||
// modified from https://tobiasahlin.com/spinkit/
|
||||
.spinner {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
> div {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
animation: loader 1.4s infinite ease-in-out both;
|
||||
|
||||
|
||||
@ -20,6 +20,17 @@ div.layout-projects {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#loading-spinner {
|
||||
width: 40px;
|
||||
display: block;
|
||||
margin: 1.2em auto 0 auto;
|
||||
|
||||
> div {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
div#github-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -31,11 +42,11 @@ div.layout-projects {
|
||||
div.github-card {
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
width: 416px;
|
||||
padding: 12px 16px;
|
||||
margin: 8px;
|
||||
width: 416px; // magic number
|
||||
padding: 1em 1.2em;
|
||||
margin: 0.6em;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
border-radius: 0.5em;
|
||||
font-size: 0.9em;
|
||||
|
||||
@include themes.themed(color, "medium-dark");
|
||||
@ -47,12 +58,12 @@ div.layout-projects {
|
||||
}
|
||||
|
||||
p.repo-description {
|
||||
margin: 4px 0 8px 0;
|
||||
margin: 0.3em 0 0.6em 0;
|
||||
}
|
||||
|
||||
div.repo-meta {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
margin-right: 1.2em;
|
||||
font-size: 0.925em;
|
||||
|
||||
@include themes.themed(color, "medium");
|
||||
@ -60,19 +71,19 @@ div.layout-projects {
|
||||
svg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 2px;
|
||||
top: 0.25em;
|
||||
margin-right: 0.2em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
span.repo-language-color {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-right: 2px;
|
||||
top: 0.235em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,6 +53,16 @@ div.layout-single {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#hit-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
|
||||
> div {
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1.title {
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<div id="content">
|
||||
<div id="loading-spinner" class="spinner"><div class="spin-bounce1"></div><div class="spin-bounce2"></div><div class="spin-bounce3"></div></div>
|
||||
|
||||
<div id="github-cards"></div>
|
||||
|
||||
<p><a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener">View more on GitHub...</a></p>
|
||||
|
||||
@ -70,8 +70,9 @@
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"css-loader": "^6.2.0",
|
||||
"css-minimizer-webpack-plugin": "^3.0.2",
|
||||
"debug": "^4.3.2",
|
||||
"del": "^6.0.0",
|
||||
"eslint": "~7.31.0",
|
||||
"eslint": "~7.32.0",
|
||||
"eslint-config-prettier": "~8.3.0",
|
||||
"eslint-plugin-compat": "~3.11.1",
|
||||
"eslint-plugin-import": "~2.23.4",
|
||||
@ -101,7 +102,7 @@
|
||||
"postcss-svgo": "^5.0.2",
|
||||
"prettier": "^2.3.2",
|
||||
"pretty-quick": "^3.1.1",
|
||||
"sass": "^1.36.0",
|
||||
"sass": "^1.37.0",
|
||||
"sass-loader": "^12.1.0",
|
||||
"simple-git-hooks": "^2.5.1",
|
||||
"stylelint": "~13.13.1",
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -1273,9 +1273,9 @@
|
||||
form-data "^3.0.0"
|
||||
|
||||
"@types/node@*":
|
||||
version "16.4.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.7.tgz#f7afa78769d4b477f5092d7c3468e2e8653d779c"
|
||||
integrity sha512-aDDY54sst8sx47CWT6QQqIZp45yURq4dic0+HCYfYNcY5Ejlb/CLmFnRLfy3wQuYafOeh3lB/DAKaqRKBtcZmA==
|
||||
version "16.4.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.8.tgz#ef4974f47524448428542365db2fe7b638f928e5"
|
||||
integrity sha512-VL7RZyCpfYEmbyd3/Eq5RNYhZt7yoL1JThZQ3KzimzhLya2Qa86U1ZZmioNWAAjiz99z1ED1xF9NUV2srvfVrA==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.1"
|
||||
@ -3206,7 +3206,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
|
||||
debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
|
||||
version "4.3.2"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
|
||||
integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
|
||||
@ -3666,9 +3666,9 @@ ee-first@1.1.1:
|
||||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.723:
|
||||
version "1.3.791"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.791.tgz#e38f325ff22470bdcff34409d58c0baf9c2e3e93"
|
||||
integrity sha512-Tdx7w1fZpeWOOBluK+kXTAKCXyc79K65RB6Zp0+sPSZZhDjXlrxfGlXrlMGVVQUrKCyEZFQs1UBBLNz5IdbF0g==
|
||||
version "1.3.792"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.792.tgz#791b0d8fcf7411885d086193fb49aaef0c1594ca"
|
||||
integrity sha512-RM2O2xrNarM7Cs+XF/OE2qX/aBROyOZqqgP+8FXMXSuWuUqCfUUzg7NytQrzZU3aSqk1Qq6zqnVkJsbfMkIatg==
|
||||
|
||||
emoji-regex@^7.0.1:
|
||||
version "7.0.3"
|
||||
@ -3981,10 +3981,10 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
|
||||
integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
|
||||
|
||||
eslint@~7.31.0:
|
||||
version "7.31.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.31.0.tgz#f972b539424bf2604907a970860732c5d99d3aca"
|
||||
integrity sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA==
|
||||
eslint@~7.32.0:
|
||||
version "7.32.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
|
||||
integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.12.11"
|
||||
"@eslint/eslintrc" "^0.4.3"
|
||||
@ -8993,10 +8993,10 @@ sass-loader@^12.1.0:
|
||||
klona "^2.0.4"
|
||||
neo-async "^2.6.2"
|
||||
|
||||
sass@^1.36.0:
|
||||
version "1.36.0"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
|
||||
integrity sha512-fQzEjipfOv5kh930nu3Imzq3ie/sGDc/4KtQMJlt7RRdrkQSfe37Bwi/Rf/gfuYHsIuE1fIlDMvpyMcEwjnPvg==
|
||||
sass@^1.37.0:
|
||||
version "1.37.0"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.0.tgz#f1b03a9d072ee9053a29d125c8130c78e92827c2"
|
||||
integrity sha512-B+Tu6cSAG8ffs/cqsZl/bgSH2pCmavDaPTYAoW8QA1qNHh/RqndNfVKuABKYkLjUQ5aq/BnCENVpE80cqdSM1w==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user