jdr-et-univers/erratum
2
1
Fork 1
Code Issues 26 Pull requests 1 Projects 2 Activity

fix: resposnive part 1

Browse source
This commit is contained in:
Kazhnuz 2024-10-16 18:37:21 +02:00
parent cc4fcc8d07
commit b662772a0f
5 changed files with 140 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/layouts/base.njk
View file

@ -2,7 +2,7 @@
layout: layouts/parent.njk
---
<div id="core">
<main id="skip">
<main id="skip" class="visible">
<div>
{{ content | safe }}
</div>
@ -18,7 +18,7 @@ layout: layouts/parent.njk
</div>
{%- endif -%}
<div class="card">
<div class="card" id="sommaire">
<h2>Sommaire</h2>
{{ content | toc | safe }}
</div>

4
_includes/layouts/home.njk
View file

@ -2,7 +2,7 @@
layout: layouts/parent.njk
---
<div id="core">
<main id="skip">
<main id="skip" class="visible">
<div>
{{ content | safe }}
</div>
@ -18,7 +18,7 @@ layout: layouts/parent.njk
</div>
{%- endif -%}
<div class="card">
<div class="card" id="sommaire">
<h2>Sommaire</h2>
{{ content | toc | safe }}
</div>

16
_includes/layouts/parent.njk
View file

@ -27,19 +27,6 @@
<h1>
<a href="/" class="home-link"><img src="/img/logo-small.png" alt=""><span class="visually-hidden">{{ metadata.title }}</span></a>
</h1>
<nav>
<h2 class="visually-hidden">Top level navigation menu</h2>
<ul class="nav">
<li class="nav-item"><a href="/">Accueil</a></li>
<li class="nav-item"><a href="/about/">À propos</a></li>
<li class="nav-item"><a href="/tl-dr/">TL; DR</a></li>
</ul>
<ul class="nav">
<li class="nav-item"><a href="/fiches/">Fiches téléchargeables</a></li>
<li class="nav-item"><a href="https://git.kobold.cafe/univers/erratum">Code Source</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<nav id="sidebar">
@ -56,6 +43,9 @@
<!-- Current page: {{ page.url | htmlBaseUrl }} -->
<div class="mobile-buttons"><button id="menu-button">Menu</button><button id="sommaire-button">Sommaire</button></div>
<script src="/js/mobile-sidebar.js"></script>
<script>
const myTable = document.querySelector("#dataTable table");

87
public/css/index.css
View file

@ -94,8 +94,10 @@ header h1 a {
h1 img {
display:block;
height:128px;
max-height:128px;
max-width: 100%;
width:auto;
height:auto;
margin:auto 0;
}
@ -294,4 +296,85 @@ th {
tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.03);
}
}
p > img:only-child {
display: block;
max-width: 100%;
height: auto;
}
.mobile-buttons {
display: none;
}
@media screen and (max-width: 1000px) {
html {
width: 100%;
}
#more-info,
#sidebar {
width: 100%;
}
#more-info:not(.visible),
#sidebar:not(.visible),
main:not(.visible) {
display:none;
}
main {
margin:16px;
}
footer {
width: 100%;
padding:16px;
margin-bottom:48px;
}
.mobile-buttons {
display: flex;
justify-content: space-around;
position: fixed;
bottom:0;
height:48px;
width:100%;
background-color: white;
box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.4);
}
.mobile-buttons button {
border: none;
background-color: transparent;
margin:3px;
padding: 8px 24px;
border-radius:999px;
}
.mobile-buttons button:hover {
background-color: rgba(0,0,0,0.2)!important;
}
.mobile-buttons button.active {
background-color: rgba(0,0,0,0.15);
}
}
@media screen and (max-width: 600px) {
header h1 a {
font-size:4rem;
}
}
@media screen and (max-width: 480px) {
header h1 a {
font-size:3rem;
}
}

48
public/js/mobile-sidebar.js Normal file
View file

@ -0,0 +1,48 @@
const sidebar = document.getElementById('sidebar');
const sommaire = document.getElementById('more-info');
const main = document.getElementById('skip');
const btn_menu = document.getElementById('menu-button');
const btn_sommaire = document.getElementById('sommaire-button');
btn_menu.addEventListener('click', function () {
if (sidebar.classList.contains('visible')) {
sidebar.classList.remove('visible');
sommaire.classList.remove('visible');
main.classList.add('visible');
btn_menu.classList.remove('active');
btn_sommaire.classList.remove('active');
} else {
sidebar.classList.add('visible');
sommaire.classList.remove('visible');
main.classList.remove('visible');
btn_menu.classList.add('active');
btn_sommaire.classList.remove('active');
}
});
btn_sommaire.addEventListener('click', function () {
if (sommaire.classList.contains('visible')) {
sidebar.classList.remove('visible');
sommaire.classList.remove('visible');
main.classList.add('visible');
btn_menu.classList.remove('active');
btn_sommaire.classList.remove('active');
} else {
sidebar.classList.remove('visible');
sommaire.classList.add('visible');
main.classList.remove('visible');
btn_menu.classList.remove('active');
btn_sommaire.classList.add('active');
}
});
document.querySelectorAll('#sommaire a').forEach(function (link) {
link.addEventListener('click', function() {
sidebar.classList.remove('visible');
sommaire.classList.remove('visible');
main.classList.add('visible');
btn_menu.classList.remove('active');
btn_sommaire.classList.remove('active');
});
});