From b273bdbf995dc1e7a77440ca318f507b5d9fd795 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sat, 31 Jul 2021 10:15:33 -0400 Subject: [PATCH] add loading spinner to /projects --- assets/js/src/projects.js | 8 +++++- assets/sass/components/_animation.scss | 4 --- assets/sass/pages/_projects.scss | 35 +++++++++++++++++--------- assets/sass/pages/_single.scss | 10 ++++++++ layouts/_default/projects.html | 2 ++ package.json | 5 ++-- yarn.lock | 30 +++++++++++----------- 7 files changed, 60 insertions(+), 34 deletions(-) diff --git a/assets/js/src/projects.js b/assets/js/src/projects.js index b7553e89..0730026e 100644 --- a/assets/js/src/projects.js +++ b/assets/js/src/projects.js @@ -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`, }); diff --git a/assets/sass/components/_animation.scss b/assets/sass/components/_animation.scss index 0d846531..dd6637fc 100644 --- a/assets/sass/components/_animation.scss +++ b/assets/sass/components/_animation.scss @@ -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; diff --git a/assets/sass/pages/_projects.scss b/assets/sass/pages/_projects.scss index 296bc900..477d1b2c 100644 --- a/assets/sass/pages/_projects.scss +++ b/assets/sass/pages/_projects.scss @@ -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; } } } diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 224f93ec..ad3388b2 100644 --- a/assets/sass/pages/_single.scss +++ b/assets/sass/pages/_single.scss @@ -53,6 +53,16 @@ div.layout-single { } } } + + div#hit-spinner { + display: inline-block; + width: 20px; + + > div { + width: 5px; + height: 10px; + } + } } h1.title { diff --git a/layouts/_default/projects.html b/layouts/_default/projects.html index 79d3b916..cc557739 100644 --- a/layouts/_default/projects.html +++ b/layouts/_default/projects.html @@ -3,6 +3,8 @@

{{ .Title | markdownify }}

+ +

View more on GitHub...

diff --git a/package.json b/package.json index 3338fdc4..4f3c0f0c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 4db16206..16ee7c63 100644 --- a/yarn.lock +++ b/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"