From 4851af65f03197c30bd964dd5c0cc59ba503478c Mon Sep 17 00:00:00 2001 From: Nima GOZALPOUR <nima.gozalpour@uni.lu> Date: Wed, 22 Jan 2025 16:44:41 +0100 Subject: [PATCH 01/11] back to top button is added. based on need css.style, default.html altered. Also back-top-button.js and chevrons-up.svg are added which contain java script of back to top button and icon of button, respectively. --- assets/static/back-top-button.js | 21 ++++++++++++++++ assets/static/chevrons-up.svg | 1 + assets/style.css | 42 ++++++++++++++++++++++++++++++++ templates/default.html | 9 +++++++ 4 files changed, 73 insertions(+) create mode 100644 assets/static/back-top-button.js create mode 100644 assets/static/chevrons-up.svg diff --git a/assets/static/back-top-button.js b/assets/static/back-top-button.js new file mode 100644 index 0000000..c6b2cbe --- /dev/null +++ b/assets/static/back-top-button.js @@ -0,0 +1,21 @@ +// back-top-button.js +document.addEventListener("DOMContentLoaded", () => { + const backToTopButton = document.getElementById("backToTop"); + + // Show the button when scrolling down + window.addEventListener("scroll", () => { + if (window.scrollY > 300) { + backToTopButton.style.display = "block"; + } else { + backToTopButton.style.display = "none"; + } + }); + + // Smooth scroll to top + backToTopButton.addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + }); + }); \ No newline at end of file diff --git a/assets/static/chevrons-up.svg b/assets/static/chevrons-up.svg new file mode 100644 index 0000000..0eaf518 --- /dev/null +++ b/assets/static/chevrons-up.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg> \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 4a19fb4..25432b8 100644 --- a/assets/style.css +++ b/assets/style.css @@ -920,3 +920,45 @@ main { border: 2pt solid #fbb; } } + + +/* back to top button */ +#backToTop { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 50px; + height: 50px; /* Increased height to accommodate the text */ + background-color: white; + border: 2px solid black; + border-radius: 50%; + display: flex; + flex-direction: column; /* Stack arrow and text vertically */ + align-items: center; + justify-content: center; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); + cursor: pointer; + display: none; /* Hidden by default */ + transition: opacity 0.3s ease, transform 0.3s ease; + } + + #backToTop .arrow { + font-size: 20px; + color: black; + } + + #backToTop .text { + font-size: 1.05em; + color: black; + } + + #backToTop:hover { + transform: scale(1.1); /* Slight zoom effect */ + box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5); + } + + #backToTop:active { + transform: scale(0.95); + } + + \ No newline at end of file diff --git a/templates/default.html b/templates/default.html index dd85bb2..346f6c0 100644 --- a/templates/default.html +++ b/templates/default.html @@ -4,6 +4,15 @@ <body> {{> header.html}} {{{body}}} + +<!-- Back to Top Button ▲--> +<button id="backToTop"> + <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> + <span class="text">Top</span> + </button> + +<script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> + {{> footer.html}} </body> </html> -- GitLab From 2193810b2aa9c889d6a747739549d3aa8f1d2c81 Mon Sep 17 00:00:00 2001 From: Nima GOZALPOUR <nima.gozalpour@uni.lu> Date: Tue, 28 Jan 2025 14:08:07 +0100 Subject: [PATCH 02/11] all px metrics to pt, rem or em (relative) metrics in style.css file. remove all transform animations. html of back to top is removed from default.html and added to back_to_top.html.back_to_top.html module is added to top of footer.html --- assets/static/back-top-button.js | 2 +- assets/style.css | 25 ++++++++----------------- templates/default.html | 7 ------- templates/footer.html | 8 ++++++++ 4 files changed, 17 insertions(+), 25 deletions(-) diff --git a/assets/static/back-top-button.js b/assets/static/back-top-button.js index c6b2cbe..3e8358e 100644 --- a/assets/static/back-top-button.js +++ b/assets/static/back-top-button.js @@ -18,4 +18,4 @@ document.addEventListener("DOMContentLoaded", () => { behavior: "smooth" }); }); - }); \ No newline at end of file + }); diff --git a/assets/style.css b/assets/style.css index 25432b8..b2d54b1 100644 --- a/assets/style.css +++ b/assets/style.css @@ -927,38 +927,29 @@ main { position: fixed; bottom: 2rem; right: 2rem; - width: 50px; - height: 50px; /* Increased height to accommodate the text */ + width: 3.2rem; + height: 3.2rem; background-color: white; - border: 2px solid black; + border: 1.5pt solid #ddd; border-radius: 50%; - display: flex; - flex-direction: column; /* Stack arrow and text vertically */ align-items: center; justify-content: center; - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); + box-shadow: 2pt 2pt 6pt #ddd; cursor: pointer; display: none; /* Hidden by default */ transition: opacity 0.3s ease, transform 0.3s ease; } - - #backToTop .arrow { - font-size: 20px; - color: black; - } - + #backToTop .text { font-size: 1.05em; color: black; } #backToTop:hover { - transform: scale(1.1); /* Slight zoom effect */ - box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5); + border-color: #0ad; + box-shadow: 2pt 2pt 6pt #8ce; } - #backToTop:active { - transform: scale(0.95); - } + \ No newline at end of file diff --git a/templates/default.html b/templates/default.html index 346f6c0..7e909a3 100644 --- a/templates/default.html +++ b/templates/default.html @@ -5,13 +5,6 @@ {{> header.html}} {{{body}}} -<!-- Back to Top Button ▲--> -<button id="backToTop"> - <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> - <span class="text">Top</span> - </button> - -<script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> {{> footer.html}} </body> diff --git a/templates/footer.html b/templates/footer.html index 610d581..f06aaa5 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,3 +1,11 @@ + <!-- Back to Top Button ▲--> + <button id="backToTop"> + <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> + <span class="text">Top</span> + </button> + + <script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> + <div class="content-footer"> <div class="flex-fill"></div> <div class="footer-r3"></div> -- GitLab From 30ba17a07ff536160ea08ac6c0ec7f5786801e74 Mon Sep 17 00:00:00 2001 From: Nima GOZALPOUR <nima.gozalpour@uni.lu> Date: Tue, 28 Jan 2025 16:23:41 +0100 Subject: [PATCH 03/11] back_to_top.html is created and insert html of back _to_top.html to first lines of footer.html --- templates/back_to_top.html | 5 +++++ templates/footer.html | 9 ++------- 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 templates/back_to_top.html diff --git a/templates/back_to_top.html b/templates/back_to_top.html new file mode 100644 index 0000000..a0256da --- /dev/null +++ b/templates/back_to_top.html @@ -0,0 +1,5 @@ +<button id="backToTop"> + <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> + <span class="text">Top</span> +</button> +<script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> diff --git a/templates/footer.html b/templates/footer.html index f06aaa5..0664490 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,10 +1,5 @@ - <!-- Back to Top Button ▲--> - <button id="backToTop"> - <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> - <span class="text">Top</span> - </button> - - <script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> + <!-- Back to Top Button--> + {{> back_to_top.html}} <div class="content-footer"> <div class="flex-fill"></div> -- GitLab From 00a458ef4b07476777b3d2b3c3a1ec323bc61945 Mon Sep 17 00:00:00 2001 From: Nima Gozalpour <nima.gozalpour@uni.lu> Date: Tue, 28 Jan 2025 16:42:49 +0100 Subject: [PATCH 04/11] Update default.html --- templates/default.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/templates/default.html b/templates/default.html index 7e909a3..dd85bb2 100644 --- a/templates/default.html +++ b/templates/default.html @@ -4,8 +4,6 @@ <body> {{> header.html}} {{{body}}} - - {{> footer.html}} </body> </html> -- GitLab From da065660e92a2cabd801d0c6facbac1030059f9a Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:43:03 +0100 Subject: [PATCH 05/11] move a bit, unify template naming --- templates/{back_to_top.html => backtopbutton.html} | 0 templates/footer.html | 3 +-- 2 files changed, 1 insertion(+), 2 deletions(-) rename templates/{back_to_top.html => backtopbutton.html} (100%) diff --git a/templates/back_to_top.html b/templates/backtopbutton.html similarity index 100% rename from templates/back_to_top.html rename to templates/backtopbutton.html diff --git a/templates/footer.html b/templates/footer.html index 0664490..d7a53e0 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,5 +1,4 @@ - <!-- Back to Top Button--> - {{> back_to_top.html}} + {{> backtopbutton.html}} <div class="content-footer"> <div class="flex-fill"></div> -- GitLab From 4b71018ac4879026f5305f3b8a7addaf0490d836 Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:43:27 +0100 Subject: [PATCH 06/11] fix endline --- assets/static/chevrons-up.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/static/chevrons-up.svg b/assets/static/chevrons-up.svg index 0eaf518..9019c8b 100644 --- a/assets/static/chevrons-up.svg +++ b/assets/static/chevrons-up.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg> \ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg> -- GitLab From 874efbb606566c5640841c917fae978f0babc92c Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:43:52 +0100 Subject: [PATCH 07/11] simplify, add build nonces --- templates/backtopbutton.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/templates/backtopbutton.html b/templates/backtopbutton.html index a0256da..794f2a8 100644 --- a/templates/backtopbutton.html +++ b/templates/backtopbutton.html @@ -1,5 +1,4 @@ -<button id="backToTop"> - <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}" alt="Up"> - <span class="text">Top</span> +<button id="back-top-button"> + <img src="{{#rawRootUrl}}/static/chevrons-up.svg{{/rawRootUrl}}?build_nonce={{build_nonce}}" alt="Back to top button" title="Back to top"> </button> -<script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}"></script> +<script src="{{#rawRootUrl}}/static/back-top-button.js{{/rawRootUrl}}?build_nonce={{build_nonce}}"></script> -- GitLab From 7262ac3b9dc5a1536b80564ccbc09b6c4904463b Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:44:08 +0100 Subject: [PATCH 08/11] move css to the expectable place, rm unneeded flexbox properties, switch from display-showing to visibility-showing (can transition), replace text by tooltip, kill misalignment --- assets/static/back-top-button.js | 33 +++++++-------- assets/style.css | 71 +++++++++++++++++--------------- 2 files changed, 53 insertions(+), 51 deletions(-) diff --git a/assets/static/back-top-button.js b/assets/static/back-top-button.js index 3e8358e..733dba6 100644 --- a/assets/static/back-top-button.js +++ b/assets/static/back-top-button.js @@ -1,21 +1,18 @@ -// back-top-button.js document.addEventListener("DOMContentLoaded", () => { - const backToTopButton = document.getElementById("backToTop"); - - // Show the button when scrolling down - window.addEventListener("scroll", () => { - if (window.scrollY > 300) { - backToTopButton.style.display = "block"; - } else { - backToTopButton.style.display = "none"; - } - }); - - // Smooth scroll to top - backToTopButton.addEventListener("click", () => { - window.scrollTo({ - top: 0, - behavior: "smooth" - }); + const btn = document.getElementById("back-top-button"); + + window.addEventListener("scroll", () => { + if (window.scrollY > 300) { + btn.classList.add("active"); + } else { + btn.classList.remove("active"); + } + }); + + btn.addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth" }); }); +}); diff --git a/assets/style.css b/assets/style.css index b2d54b1..081072b 100644 --- a/assets/style.css +++ b/assets/style.css @@ -458,6 +458,44 @@ body .external_warning { font-weight: bold; } +/* back-to-top button */ + +#back-top-button { + position: fixed; + bottom: 2rem; + right: 2rem; + + cursor: pointer; + + width: 3rem; + height: 3rem; + + background-color: white; + border: 1.5pt solid #ddd; + border-radius: 50%; + box-shadow: 2pt 2pt 6pt #ddd; + + visibility: hidden; + opacity: 0; + + transition: opacity 250ms, border-color 250ms, box-shadow 250ms, visibility 250ms; +} + +#back-top-button.active { + visibility: visible; + opacity: 1; +} + +#back-top-button img { + width: 1.44rem; + height: 1.44rem; +} + +#back-top-button:hover { + border-color: #0ad; + box-shadow: 2pt 2pt 6pt #8ce; +} + /* search form and related stuff */ .search-form-wrap { @@ -920,36 +958,3 @@ main { border: 2pt solid #fbb; } } - - -/* back to top button */ -#backToTop { - position: fixed; - bottom: 2rem; - right: 2rem; - width: 3.2rem; - height: 3.2rem; - background-color: white; - border: 1.5pt solid #ddd; - border-radius: 50%; - align-items: center; - justify-content: center; - box-shadow: 2pt 2pt 6pt #ddd; - cursor: pointer; - display: none; /* Hidden by default */ - transition: opacity 0.3s ease, transform 0.3s ease; - } - - #backToTop .text { - font-size: 1.05em; - color: black; - } - - #backToTop:hover { - border-color: #0ad; - box-shadow: 2pt 2pt 6pt #8ce; - } - - - - \ No newline at end of file -- GitLab From e99e16e12d80cb5871c252eea54db51cf25add9c Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:46:43 +0100 Subject: [PATCH 09/11] move the back-to-top insert outside of the actual footer --- templates/footer.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/footer.html b/templates/footer.html index d7a53e0..9b8ecc2 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,5 +1,3 @@ - {{> backtopbutton.html}} - <div class="content-footer"> <div class="flex-fill"></div> <div class="footer-r3"></div> @@ -26,6 +24,8 @@ <div class="flex-sidefill-r"></div> </main> +{{> backtopbutton.html}} + <!-- cookie banner kindly provided by analytics.uni.lu --> <div id="lap-cookies-banner"> <div class="banner-intro"> -- GitLab From 4d90ddb9c8369ba16ba01b2cae6ee9874e3c07fd Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:50:57 +0100 Subject: [PATCH 10/11] people shouldn't really be printing the back-to-top button --- assets/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index 081072b..815af72 100644 --- a/assets/style.css +++ b/assets/style.css @@ -934,7 +934,8 @@ main { a.header-local-anchor, .flex-sidefill-l, .flex-sidefill-r, .width-sidebox-placeholder, .width-sidebox-counterwieght, - #lap-cookies-banner { + #lap-cookies-banner, + #back-top-button { display: none; } -- GitLab From 7c566bbe2f69aa371d05a7050fe319742f367d28 Mon Sep 17 00:00:00 2001 From: Mirek Kratochvil <exa.exa@gmail.com> Date: Fri, 7 Feb 2025 11:51:11 +0100 Subject: [PATCH 11/11] hide the back-to-top button on tiny screens; people on phones can just megaswipe --- assets/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/assets/style.css b/assets/style.css index 815af72..27b9246 100644 --- a/assets/style.css +++ b/assets/style.css @@ -479,6 +479,8 @@ body .external_warning { opacity: 0; transition: opacity 250ms, border-color 250ms, box-shadow 250ms, visibility 250ms; + + display: none; /* hidden on small screens */ } #back-top-button.active { @@ -778,6 +780,7 @@ main { * - switch header to "normal" form * - switch headers to normal size * - start growing borders + * - show the back-to-top button */ header { @@ -835,6 +838,12 @@ main { font-size: 120%; } + /* button gets shown, we're likely not on a phone anymore */ + + #back-top-button { + display: block; + } + /* frontpage cards expand here */ div.frontpage-card { -- GitLab