Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

set content un years panel. Styles problems

Browse source
This commit is contained in:
isUnknown 2024-04-07 12:24:40 +02:00
parent 92625d2fb9
commit 76b98eb2e3
6 changed files with 130 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/css/src/header.css
View file

@ -1,12 +1,13 @@
#main-header { #main-header {
position: fixed; position: fixed;
z-index: 1; z-index: 3;
top: 0; top: 0;
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
width: 100vw; width: 100vw;
height: calc(var(--unit--vertical) * 5); height: calc(var(--unit--vertical) * 4);
padding: var(--unit--vertical) var(--unit--horizontal); padding: var(--unit--vertical) var(--unit--horizontal);
padding-bottom: 0;
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
} }
#logo { #logo {

66
assets/css/src/nav.css
View file

@ -1,15 +1,17 @@
#entries { /* ================= ENTRIES BTNS ================= */
#entry-btns {
position: sticky; position: sticky;
top: calc(var(--unit--vertical) * 8); top: calc(var(--unit--vertical) * 8);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
z-index: 2;
} }
.entry-btn { .entry-btn {
transition: all 0.5s var(--curve-sine); transition: all 0.5s var(--curve-sine);
} }
[data-template="linear"] #entries { [data-template="linear"] #entry-btns {
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4)); transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
} }
@ -25,17 +27,67 @@
margin-right: var(--unit--horizontal); margin-right: var(--unit--horizontal);
} }
#entries.minimized { #entry-btns.minimized {
color: var(--color-secondary); color: var(--color-secondary);
} }
#entries.minimized .entry-btn::before, #entry-btns.minimized .entry-btn::before,
#entries.minimized .entry-btn::after { #entry-btns.minimized .entry-btn::after {
font-weight: bold; font-weight: bold;
} }
#entries.minimized .entry-btn--left { #entry-btns.minimized .entry-btn--left {
margin-left: calc(-4px - var(--width)); margin-left: calc(-4px - var(--width));
} }
#entries.minimized .entry-btn--right { #entry-btns.minimized .entry-btn--right {
margin-right: calc(-4px - var(--width)); margin-right: calc(-4px - var(--width));
} }
/* ================= PANELS ================= */
.panel {
position: fixed;
width: 100%;
height: 100svh;
top: 0;
background-color: #000;
outline: 1px solid #fff;
transition: all 0.5s var(--curve-sine);
z-index: 2;
padding: 0 var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) * 5);
box-sizing: border-box;
overflow: auto;
}
.panel--left {
left: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right {
right: calc(-100% - var(--unit--horizontal) * 2 - 1px);
}
.panel--right.open {
right: 0;
}
.panel--left.open {
left: 0;
}
.panel-close {
position: fixed;
top: 0;
border: none;
outline: none;
height: 100svh;
width: calc(var(--unit--horizontal) * 2);
font-size: 0.8rem;
display: flex;
}
.panel--left .panel-close {
right: 0;
justify-content: flex-end;
}
.panel-close::after {
content: "◀";
}

7
assets/js/script.js
View file

@ -74,7 +74,7 @@ function roundToNearestHalf(num) {
} }
function enableToggleEntriesVisibility() { function enableToggleEntriesVisibility() {
const entries = document.querySelector("#entries"); const entries = document.querySelector("#entry-btns");
const leftBtn = entries.querySelector(".entry-btn--left"); const leftBtn = entries.querySelector(".entry-btn--left");
const rightBtn = entries.querySelector(".entry-btn--right"); const rightBtn = entries.querySelector(".entry-btn--right");
@ -116,6 +116,11 @@ function toggleLogoState() {
} }
} }
function togglePanel(side) {
document.querySelector(`.panel--${side}`).classList.toggle("open");
document.querySelector("#main-header").classList.remove("minimized");
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
window.window.scrollTo({ window.window.scrollTo({
top: 0, top: 0,

4
site/snippets/header.php
View file

@ -5,11 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title> <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
<link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" /> <link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
<script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" type="module" defer></script> <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<meta name="robots" content="noindex, nofollow, noarchive"> <meta name="robots" content="noindex, nofollow, noarchive">
</head> </head>
<body class="grid" data-template="<?= $page->template() ?>"> <body class="grid" data-template="<?= $page->template() ?>" >
<header id="main-header"> <header id="main-header">
<div id="logo" > <div id="logo" >
<a href="/" class="no-line"> <a href="/" class="no-line">

62
site/snippets/nav.php
View file

@ -1,4 +1,58 @@
<nav id="entries">
<button class="entry-btn entry-btn--left">années</button> <div id="entry-btns">
<button class="entry-btn entry-btn--right">categories</button> <button
</nav> class="entry-btn entry-btn--left"
onclick="togglePanel('left')"
>années</button>
<button
class="entry-btn entry-btn--right"
onclick="togglePanel('right')"
>categories</button>
</div>
<nav class="panel panel--left">
<ul
x-show="activeTab === 'texts'">
<?php foreach($kirby->collection('years') as $year): ?>
<div
x-data='{
isOpen: false
}'
:class="isOpen ? '' : 'short'"
class="
texts__year
| full-width
flex column
bottom"
style="
--content: center;
--bottom: 2;"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div class="year__edito">
<?= $year->edito() ?>
</div>
<button
:class="isOpen ? 'open' : 'close'"
class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
</div>
<?php foreach($year->children() as $article): ?>
<?php snippet(
'text-item',
[
'article' => $article
]
) ?>
<?php endforeach ?>
<?php endforeach ?>
</ul>
<button
onclick="togglePanel('left')"
class="panel-close">
</button>
</nav>
<nav
onclick="togglePanel('right')"
class="panel panel--right"></nav>

4
site/snippets/tabs.php
View file

@ -70,8 +70,8 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
<?php snippet( <?php snippet(
'text-item', 'text-item',
[ [
'article' => $article 'article' => $article
] ]
) ?> ) ?>
<?php endif ?> <?php endif ?>
<?php endforeach ?> <?php endforeach ?>