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

fix sticky problems

Browse source
This commit is contained in:
isUnknown 2024-04-10 14:55:34 +02:00
parent d9dcd940af
commit ba450cbb1f
15 changed files with 212 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

13
site/snippets/cover.php
View file

@ -8,5 +8,14 @@ $isOpen = isset($isOpen) ? $isOpen : false;
<div class="title-wrapper">
<?= $slots->title() ?>
</div>
<?= $slots->tabs() ?>
</header>
</header>
<div id="entry-btns">
<button
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>

11
site/snippets/header.php
View file

@ -1,3 +1,6 @@
<?php
$entryTopPos = $entryTopPos ?? 20;
?>
<!DOCTYPE html>
<html lang="en">
<head>
@ -8,6 +11,11 @@
<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>
<meta name="robots" content="noindex, nofollow, noarchive">
<style>
:root {
--entry-btns-top: calc(var(--unit--vertical-relative) * <?= $entryTopPos ?>);
}
</style>
</head>
<body class="grid" data-template="<?= $page->template() ?>" >
<header id="main-header">
@ -17,4 +25,5 @@
<h1 id="inactuel">inactuel</h1>
</a>
</div>
</header>
</header>
<?php snippet('panels') ?>

67
site/snippets/nav.php → site/snippets/panels.php
View file

@ -1,15 +1,4 @@
<div id="entry-btns">
<button
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"
x-data="{search: ''}"
@ -39,22 +28,24 @@
<?php foreach($kirby->collection('years') as $year): ?>
<li
class="panel__item "
x-data='{ year: false }'
x-data='{ isOpen: false }'
>
<button
class="panel__toggle-btn"
:class="year ? '' : 'short'"
@click="year = !year"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="year || search.length > 0 ? '-' : '+'"
></div>
</button>
<a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="year || search.length > 0"
x-show="isOpen || search.length > 0"
x-data='{ edito: false }'
>
<div
@ -144,22 +135,24 @@
foreach($categories as $category): ?>
<li
class="panel__item "
x-data='{ category: false }'
x-data='{ isOpen: false }'
>
<button
class="panel__toggle-btn"
:class="category ? '' : 'short'"
@click="category = !category"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="category || search.length > 0 ? '-' : '+'"
></div>
</button>
<a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="category || search.length > 0"
x-show="isOpen || search.length > 0"
>
<ul class="panel-item-content__texts">
<?php