Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add back to top button #16979

Merged
merged 8 commits into from Mar 26, 2023
Merged

docs: add back to top button #16979

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6e9eb2c
docs: add back to top button
Tanujkanti4441 Mar 12, 2023
b484539
fix: spacing errors of previous commit
Tanujkanti4441 Mar 12, 2023
1e83bd5
docs: update css of scrollup button
Tanujkanti4441 Mar 14, 2023
361aafc
docs: add css comments for color
Tanujkanti4441 Mar 14, 2023
eb701bc
fix: spacing issues of last commit
Tanujkanti4441 Mar 14, 2023
cd9f9aa
docs: set the scroll btn to work without js
Tanujkanti4441 Mar 18, 2023
dbfb1d5
docs: update previous code
Tanujkanti4441 Mar 20, 2023
5aa9eab
docs: update previous code
Tanujkanti4441 Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/src/_includes/layouts/base.html
View file
Open in desktop
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ config.lang }}" class="no-js">
<html lang="{{ config.lang }}" class="no-js" id="site_top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down Expand Up @@ -154,6 +154,7 @@
<script src="{{ '/assets/js/focus-visible.js' | url }}"></script>
<script src="{{ '/assets/js/main.js' | url }}"></script>
<script src="{{ '/assets/js/tabs.js' | url }}"></script>
<script src="{{ '/assets/js/scroll-up-btn.js' | url }}"></script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<script src="{{ '/assets/js/scroll-up-btn.js' | url }}"></script>

{% include 'partials/analytics.html' %}

{%- if hook == "component-library" -%}
Expand Down
3 changes: 3 additions & 0 deletions docs/src/_includes/layouts/doc.html
View file
Open in desktop
Expand Up @@ -102,6 +102,9 @@ <h1>{{ title }}</h1>
{% include "partials/docs-footer.html" %}
</div>
</div>
<a id="scroll_up_btn" href="#site_top">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"><line x1="12" x2="12" y1="19" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
</a>
</div>

<script src="{{ '/assets/js/tabs.js' | url }}"></script>
13 changes: 13 additions & 0 deletions docs/src/assets/js/scroll-up-btn.js
View file
Open in desktop
@@ -0,0 +1,13 @@
(function () {
const scrollUpBtn = document.getElementById("scroll_up_btn");

if(window.innerWidth < 1400) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a suggestion here. This width check can be removed and media query can be used instead to show or hide scroll button for desktop. In no-js right now it will show in desktop device too?

window.addEventListener("scroll", function () {
if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
scrollUpBtn.style.display = "flex";
} else {
scrollUpBtn.style.display = "none";
}
});
}
})();
41 changes: 36 additions & 5 deletions docs/src/assets/scss/docs.scss
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ html {
grid-row: 1 / 2;
padding-top: var(--space-l-xl);
padding-block-start: var(--space-l-xl);
font-size: .875rem;
font-size: 0.875rem;
display: grid;
grid-auto-rows: max-content;
align-items: start;
Expand Down Expand Up @@ -142,10 +142,10 @@ pre[class*="language-"] {
.c-btn.c-btn--playground {
position: absolute;
font-size: var(--step--1);
bottom: .5rem;
right: .5rem;
offset-block-end: .5rem;
offset-inline-end: .5rem;
bottom: 0.5rem;
right: 0.5rem;
offset-block-end: 0.5rem;
offset-inline-end: 0.5rem;

@media all and (max-width: 768px) {
display: none;
Expand All @@ -157,3 +157,34 @@ pre[class*="language-"] {
opacity: 1;
}
}

#scroll_up_btn {
width: 50px;
height: 50px;
display: none;
position: fixed;
right: 50px;
bottom: 35px;
font-size: 1.5rem;
border-radius: 50%;
color: #fff;
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved
text-decoration: none;
justify-content: center;
align-items: center;
background-color: rgba(75, 50, 195, 0.9); // rgba of #4b32c3
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: 4px 4px 15px #8e8a8a;
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved

@media (max-width: 800px) {
right: 35px;
}

@media (max-width: 600px) {
right: 25px;
}

[data-theme="dark"] & {
background-color: rgba(251, 251, 255, 0.9); // rgba of #fbfbff
color: #000;
box-shadow: none;
}
harish-sethuraman marked this conversation as resolved.
Show resolved Hide resolved
}