perco/mountycrawl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.7.1 : encyclopedie - section Templates + menu de nav + scroll-to-top

Browse Source 
treasures.js : charge /api/reference/templates (TEMPLATES_DB) ; section
'Templates de drop' (templateCard reutilise GEAR_MOD_LABELS) ; menu .tz-nav
collant avec ancres vers chaque section (ids tz-sec-*) ; bouton flottant
#tz-top (remonter), visible apres 400px de scroll. window.scrollTo au lieu
du scrollTop d'element (la fenetre scrolle, .screen n'a pas d'overflow).
CSS : .tz-nav sticky, .tz-top, scroll-margin-top sur .tz-section.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
perco
2026-06-14 08:46:32 +02:00
co-authored by Claude Opus 4.8
parent 00a4669928
commit 48145f6977
5 changed files with 104 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+42
View File
@@ -569,7 +569,49 @@ header h1 { font-size: 1.3em; color: #FFFFCC; text-shadow: 1px 1px 2px #000; }
border-bottom: 2px solid #000000;
margin: 24px 0 12px;
font-size: 1.3em;
scroll-margin-top: 64px; /* pour que l'ancre ne passe pas sous le menu collant */
}
/* Menu de navigation entre sections (collant en haut). */
.tz-nav {
position: sticky;
top: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0;
margin: 8px 0 4px;
background: #FFFFEE url("../img/mh/tableau1.jpg");
border-bottom: 1px solid #000000;
}
.tz-nav a {
padding: 5px 10px;
font-size: .9em;
text-decoration: none;
color: #333300;
background: #EBEDAB url("../img/mh/tableau2.jpg");
border: 1px solid #666633;
}
.tz-nav a:hover { border-color: #990000; color: #990000; }
/* Bouton « remonter en haut » flottant. */
.tz-top {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 6;
width: 44px;
height: 44px;
font-size: 1.4em;
line-height: 1;
color: #FFFFCC;
background: #666633;
border: 1px solid #000000;
border-radius: 50%;
cursor: pointer;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}
.tz-top:hover { background: #990000; }
.tz-top.hidden { display: none; }
.tz-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));