set content un years panel. Styles problems
This commit is contained in:
isUnknown
parent
92625d2fb9
commit
76b98eb2e3
6 changed files with 130 additions and 18 deletions
|
|
@ -1,12 +1,13 @@
|
|||
#main-header {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: calc(var(--unit--vertical) * 5);
|
||||
height: calc(var(--unit--vertical) * 4);
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
padding-bottom: 0;
|
||||
transition: height 0.2s ease-in-out;
|
||||
}
|
||||
#logo {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
#entries {
|
||||
/* ================= ENTRIES BTNS ================= */
|
||||
#entry-btns {
|
||||
position: sticky;
|
||||
top: calc(var(--unit--vertical) * 8);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.entry-btn {
|
||||
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));
|
||||
}
|
||||
|
||||
|
|
@ -25,17 +27,67 @@
|
|||
margin-right: var(--unit--horizontal);
|
||||
}
|
||||
|
||||
#entries.minimized {
|
||||
#entry-btns.minimized {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
#entries.minimized .entry-btn::before,
|
||||
#entries.minimized .entry-btn::after {
|
||||
#entry-btns.minimized .entry-btn::before,
|
||||
#entry-btns.minimized .entry-btn::after {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#entries.minimized .entry-btn--left {
|
||||
#entry-btns.minimized .entry-btn--left {
|
||||
margin-left: calc(-4px - var(--width));
|
||||
}
|
||||
#entries.minimized .entry-btn--right {
|
||||
#entry-btns.minimized .entry-btn--right {
|
||||
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: "◀";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function roundToNearestHalf(num) {
|
|||
}
|
||||
|
||||
function enableToggleEntriesVisibility() {
|
||||
const entries = document.querySelector("#entries");
|
||||
const entries = document.querySelector("#entry-btns");
|
||||
|
||||
const leftBtn = entries.querySelector(".entry-btn--left");
|
||||
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", () => {
|
||||
window.window.scrollTo({
|
||||
top: 0,
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<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>
|
||||
<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>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
</head>
|
||||
<body class="grid" data-template="<?= $page->template() ?>">
|
||||
<body class="grid" data-template="<?= $page->template() ?>" >
|
||||
<header id="main-header">
|
||||
<div id="logo" >
|
||||
<a href="/" class="no-line">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,58 @@
|
|||
<nav id="entries">
|
||||
<button class="entry-btn entry-btn--left">années</button>
|
||||
<button class="entry-btn entry-btn--right">categories</button>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -70,8 +70,8 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
|||
<?php snippet(
|
||||
'text-item',
|
||||
[
|
||||
'article' => $article
|
||||
]
|
||||
'article' => $article
|
||||
]
|
||||
) ?>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue