From c9deadd981cd872c68ffdd99dabaf0cef73191b3 Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Wed, 2 Oct 2024 10:00:41 +0100 Subject: [PATCH 1/4] add scrolltotop element and styling --- specimen/contexts/archive-page.html | 4 ++-- specimen/style.css | 34 +++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/specimen/contexts/archive-page.html b/specimen/contexts/archive-page.html index 9c08b89d..9315d562 100644 --- a/specimen/contexts/archive-page.html +++ b/specimen/contexts/archive-page.html @@ -16,7 +16,7 @@ - +

@@ -293,7 +293,7 @@

Support Our Work

- + Back to Top diff --git a/specimen/style.css b/specimen/style.css index 2231bd96..2058cc3f 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -1,2 +1,36 @@ @import '../src/css/vocabulary.css' layer(vocabulary); @import '../specimen/tests/grid-test.css' layer(vocabulary); + +:root { + scroll-behavior: smooth; +} + +.scroll-to-top { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #007bff; + color: white; + text-decoration: none; + padding: 10px 15px; + border-radius: 5px; + transition: opacity 0.3s, visibility 0.3s; + z-index: 1000; +} + +.scroll-to-top:focus { + outline: 2px solid #0056b3; +} +.show { + opacity: 1; + visibility: visible; +} +.hide { + opacity: 0; + visibility: hidden; +} +@media (max-width: 600px) { + .scroll-to-top { + display: none; + } +} From 30e94138b2691708894e0b7c80c33903e64dd3a5 Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Wed, 2 Oct 2024 10:14:41 +0100 Subject: [PATCH 2/4] add js to improve scrolltotop actions --- .vscode/settings.json | 3 +++ specimen/contexts/archive-page.html | 1 + src/js/scroll.js | 16 ++++++++++++++++ 3 files changed, 20 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 src/js/scroll.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/specimen/contexts/archive-page.html b/specimen/contexts/archive-page.html index 9315d562..c5597e71 100644 --- a/specimen/contexts/archive-page.html +++ b/specimen/contexts/archive-page.html @@ -294,6 +294,7 @@

Support Our Work

Back to Top + diff --git a/src/js/scroll.js b/src/js/scroll.js new file mode 100644 index 00000000..13b27543 --- /dev/null +++ b/src/js/scroll.js @@ -0,0 +1,16 @@ +document.addEventListener('DOMContentLoaded', function () { + const scrollThreshold = 1000; + const scrollToTopButton = document.querySelector('.scroll-to-top'); + + const scrollToTop = () => { + if (window.scrollY > scrollThreshold) { + scrollToTopButton.classList.add('show'); + scrollToTopButton.classList.remove('hide'); + } else { + scrollToTopButton.classList.remove('show'); + scrollToTopButton.classList.add('hide'); + } + }; + + window.addEventListener('scroll', scrollToTop); +}); From 7b764e88c58f59e401bf905401990d7672bdbe7f Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Wed, 2 Oct 2024 10:21:01 +0100 Subject: [PATCH 3/4] add vscode settings to gitignore and delete vscode folder --- .gitignore | 3 ++- .vscode/settings.json | 3 --- 2 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore index 496ee2ca..2608ec26 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +.vscode \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6b665aaa..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} From 9b7d3f6384511e2fc7b758b9b6a8eea6c9b9d471 Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Wed, 2 Oct 2024 11:34:47 +0100 Subject: [PATCH 4/4] update the button color to match style guide and add scroll to top element to other pages in contexts --- docs/index.html | 5 ++- docs/style.css | 60 +++++++++++++++++++------ specimen/contexts/blog-index.html | 5 ++- specimen/contexts/blog-post.html | 5 ++- specimen/contexts/default-page.html | 5 ++- specimen/contexts/home-index.html | 5 ++- specimen/contexts/license-page.html | 5 ++- specimen/contexts/person-page.html | 5 ++- specimen/contexts/program-index.html | 5 ++- specimen/contexts/program-page.html | 5 ++- specimen/contexts/search-index.html | 5 ++- specimen/contexts/team-index.html | 5 ++- specimen/contexts/walkthrough-page.html | 5 ++- specimen/style.css | 2 +- 14 files changed, 83 insertions(+), 39 deletions(-) diff --git a/docs/index.html b/docs/index.html index fc73658c..a0ca1ab6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,7 +9,7 @@ - +

Vocabulary

@@ -1019,7 +1019,8 @@

Name

--> - +Back to Top + diff --git a/specimen/contexts/blog-post.html b/specimen/contexts/blog-post.html index dccb5d3a..81878384 100644 --- a/specimen/contexts/blog-post.html +++ b/specimen/contexts/blog-post.html @@ -16,7 +16,7 @@ - +

@@ -334,7 +334,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/default-page.html b/specimen/contexts/default-page.html index 123139c3..3510794a 100644 --- a/specimen/contexts/default-page.html +++ b/specimen/contexts/default-page.html @@ -16,7 +16,7 @@ - +

@@ -265,7 +265,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/home-index.html b/specimen/contexts/home-index.html index 627192d6..e231bd81 100644 --- a/specimen/contexts/home-index.html +++ b/specimen/contexts/home-index.html @@ -16,7 +16,7 @@ - +

@@ -440,7 +440,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/license-page.html b/specimen/contexts/license-page.html index 519a047e..10b65ea8 100644 --- a/specimen/contexts/license-page.html +++ b/specimen/contexts/license-page.html @@ -16,7 +16,7 @@ - +

@@ -169,7 +169,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/person-page.html b/specimen/contexts/person-page.html index ad9510e7..de7614b7 100644 --- a/specimen/contexts/person-page.html +++ b/specimen/contexts/person-page.html @@ -16,7 +16,7 @@ - +

@@ -263,7 +263,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/program-index.html b/specimen/contexts/program-index.html index cbfcd3a6..0e337567 100644 --- a/specimen/contexts/program-index.html +++ b/specimen/contexts/program-index.html @@ -16,7 +16,7 @@ - +

@@ -268,7 +268,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/program-page.html b/specimen/contexts/program-page.html index 4c596fc0..3776ca87 100644 --- a/specimen/contexts/program-page.html +++ b/specimen/contexts/program-page.html @@ -16,7 +16,7 @@ - +

@@ -247,7 +247,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/search-index.html b/specimen/contexts/search-index.html index ab5a1494..c49caa16 100644 --- a/specimen/contexts/search-index.html +++ b/specimen/contexts/search-index.html @@ -16,7 +16,7 @@ - +

@@ -286,7 +286,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/team-index.html b/specimen/contexts/team-index.html index 1d895485..fadca4c4 100644 --- a/specimen/contexts/team-index.html +++ b/specimen/contexts/team-index.html @@ -16,7 +16,7 @@ - +

@@ -221,7 +221,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/contexts/walkthrough-page.html b/specimen/contexts/walkthrough-page.html index f3dd379d..767b55fe 100644 --- a/specimen/contexts/walkthrough-page.html +++ b/specimen/contexts/walkthrough-page.html @@ -16,7 +16,7 @@ - +

@@ -177,7 +177,8 @@

Support Our Work

- + Back to Top + diff --git a/specimen/style.css b/specimen/style.css index 2058cc3f..dea8e0e6 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -19,7 +19,7 @@ } .scroll-to-top:focus { - outline: 2px solid #0056b3; + outline: 2px solid #05b5da; } .show { opacity: 1;