mirror of
https://github.com/vinta/awesome-python.git
synced 2026-03-22 06:02:02 -05:00
refactor(website): move back-to-top button into sticky table header
Replaces the fixed-position floating button with an inline button inside the last column of the sticky table header. Removes the hidden attribute toggle and float positioning in favour of opacity/pointer- events toggling, keeping the visibility logic intact. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -282,7 +282,6 @@ if (searchInput) {
|
||||
// Back to top
|
||||
var backToTop = document.querySelector('.back-to-top');
|
||||
if (backToTop) {
|
||||
backToTop.hidden = false;
|
||||
var scrollTicking = false;
|
||||
window.addEventListener('scroll', function () {
|
||||
if (!scrollTicking) {
|
||||
|
||||
@@ -545,39 +545,26 @@ th[data-sort].sort-asc::after {
|
||||
|
||||
/* === Back to Top === */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
margin-left: -2rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(0.5rem);
|
||||
transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s, color 0.15s;
|
||||
z-index: 50;
|
||||
transition: opacity 0.15s ease, color 0.15s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.back-to-top[hidden] { display: none; }
|
||||
|
||||
.back-to-top.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.back-to-top:active {
|
||||
transform: scale(0.95);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.back-to-top:focus-visible {
|
||||
@@ -585,10 +572,6 @@ th[data-sort].sort-asc::after {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.back-to-top { bottom: 1.25rem; }
|
||||
}
|
||||
|
||||
/* === Noscript === */
|
||||
.noscript-msg {
|
||||
text-align: center;
|
||||
|
||||
@@ -37,8 +37,6 @@
|
||||
|
||||
<main id="content">{% block content %}{% endblock %}</main>
|
||||
|
||||
<button class="back-to-top" aria-label="Back to top" hidden>↑ Top</button>
|
||||
|
||||
<footer class="footer">
|
||||
<span
|
||||
>Made by
|
||||
|
||||
@@ -76,7 +76,9 @@
|
||||
<th class="col-stars" data-sort="stars">GitHub Stars</th>
|
||||
<th class="col-commit" data-sort="commit-time">Last Commit</th>
|
||||
<th class="col-cat">Category</th>
|
||||
<th class="col-arrow"><span class="sr-only">Details</span></th>
|
||||
<th class="col-arrow">
|
||||
<button class="back-to-top" aria-label="Back to top">↑</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user