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

design virtual pages

Browse source
This commit is contained in:
isUnknown 2024-04-10 16:52:41 +02:00
parent 8e65a1cc64
commit c70b4890f8
12 changed files with 131 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/src/article.css
View file

@ -1,2 +1,3 @@
article .content {
margin-top: calc(var(--unit--vertical) * 2);
}

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

@ -33,18 +33,26 @@
bottom: 0%;
}
.page-cover {
position: relative;
height: 80svh;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: calc(var(--unit--vertical-relative) * 5);
body {
--entry-btns-height: 10svh;
}
body[data-template="home"] {
--entry-btns-height: 30svh;
}
.page-cover.open + * {
margin-top: calc(var(--unit--vertical-relative) * 19);
.page-cover {
position: relative;
height: calc(100svh - var(--entry-btns-height));
box-sizing: border-box;
padding-top: calc(var(--unit--vertical-relative) * 5);
display: flex;
flex-direction: column;
}
.page-cover .text-wrapper {
height: 100%;
overflow: auto;
}
[data-template="home"] .page-cover {
@ -56,7 +64,7 @@
position: sticky;
position: -webkit-sticky;
top: calc(var(--unit--vertical) * 3);
height: 20svh;
height: var(--entry-btns-height);
display: flex;
justify-content: space-between;
}

4
assets/css/src/html.css
View file

@ -37,7 +37,7 @@ html {
* {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -52,7 +52,7 @@ html {
}
*::-webkit-scrollbar-thumb {
background-color: transparent;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 0px;
border: none;
}

6
assets/css/src/texts.css
View file

@ -38,6 +38,12 @@ h2 {
font-size: var(--font-size-xl);
}
h3,
.h3 {
font-size: var(--font-size-xl);
color: var(--color-secondary);
}
article h2 {
margin-bottom: calc(var(--unit--vertical) / 2);
}

4
assets/css/src/virtual.css Normal file
View file

@ -0,0 +1,4 @@
/* ================= SPECIFIC TO VIRTUAL PAGES ================= */
[data-template="year"] .edito {
margin-bottom: var(--unit--vertical);
}

1
assets/css/style.css
View file

@ -5,6 +5,7 @@
@import url("src/header.css");
@import url("src/nav.css");
@import url("src/article.css");
@import url("src/virtual.css");
@import url("src/home.css");
@import url("src/footer.css");
:root {

5
site/snippets/cover.php
View file

@ -8,6 +8,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
<div class="title-wrapper">
<?= $slots->title() ?>
</div>
<?php if ($slots->text()): ?>
<div class="text-wrapper">
<?= $slots->text() ?>
</div>
<?php endif ?>
</header>
<div id="entry-btns">
<button

8
site/snippets/panels.php
View file

@ -36,7 +36,7 @@
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<h3><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
@ -79,7 +79,7 @@
"
>
<a href="<?= $article->url() ?>" class="text__title no-line">
<h3><?= $article->title() ?></h3>
<h4><?= $article->title() ?></h4>
</a>
<div class="text__infos">
<p>
@ -143,7 +143,7 @@
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
<h3><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
@ -174,7 +174,7 @@
"
>
<a href="<?= $article->url() ?>" class="text__title no-line">
<h3><?= $article->title() ?></h3>
<h4><?= $article->title() ?></h4>
</a>
<div class="text__infos">
<p>

34
site/templates/author.php
View file

@ -4,16 +4,32 @@
<article>
<?php snippet('cover', slots: true) ?>
<?php slot('title') ?>
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
<?php endslot() ?>
<?php slot('tabs') ?>
<?php snippet('tabs', [
'left' => [
'label' => 'Présentation',
'content' => $page->presentation()
],
'authorFilter' => $page->author()
]) ?>
<?php slot('text') ?>
<?= $page->presentation() ?>
<p class="h3">textes :</p>
<ul class="texts">
<?php foreach($site->index()->filterBy('template', 'in', array('linear', 'grid')) as $article): ?>
<?php if ($article->author()->isNotEmpty() && $article->author()->toUser()->name() == $page->title()->value()): ?>
<li
class="text"
>
<a href="<?= $article->url() ?>" class="text__title no-line">
<h4><?= $article->title() ?></h4>
</a>
<div class="text__infos">
<p>
<span class="light">par</span>
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endif ?>
</ul>
<?php endforeach ?>
<?php endslot() ?>
<?php endsnippet() ?>
</article>

74
site/templates/category.php
View file

@ -4,55 +4,33 @@
<article>
<?php snippet('cover', slots: true) ?>
<?php slot('title') ?>
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
<p class="light">catégorie</p>
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
<?php endslot() ?>
<?php slot('text') ?>
<ul class="texts">
<?php foreach($kirby->collection('categories') as $category): ?>
<?php if ($category['title'] == $page->title()->value()): ?>
<?php foreach($category['texts'] as $article): ?>
<li
class="text"
>
<a href="<?= $article->url() ?>" class="text__title no-line">
<h4><?= $article->title() ?></h4>
</a>
<div class="text__infos">
<p>
<span class="light">par</span>
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
<?php endforeach ?>
<?php endslot() ?>
<?php endsnippet() ?>
<div
class="active-tab"
>
<ul>
<?php foreach($kirby->collection('years') as $year): ?>
<?php if (A::some($year->children()->toArray(), function ($text) use ($page) {
return $text['content']['category'] == $page->title()->value();
})): ?>
<li>
<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>
<ul>
<?php foreach($year->children() as $article): ?>
<?php if ($article->category() == $page->title()->value()) : ?>
<?php snippet('text-item', array('article' => $article)) ?>
<?php endif ?>
<?php endforeach ?>
</ul>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
</article>
</main>

12
site/templates/linear.php
View file

@ -8,15 +8,9 @@
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
<p>
<span class="light">par</span>
<a
class="author"
href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>"
title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"
>
<?= $page->author()->toUser()->name() ?>
</a><br>
<span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?>
<span class="light">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
<a class="author" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>"><?= $page->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $page->parent()->url() ?>"><?= $page->parent()->title() ?></a> / <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
</p>
<?php endslot() ?>
<?php endsnippet() ?>

34
site/templates/year.php
View file

@ -0,0 +1,34 @@
<?php snippet('header'); ?>
<main id="<?= $page->template() ?>">
<article>
<?php snippet('cover', slots: true) ?>
<?php slot('title') ?>
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
<?php endslot() ?>
<?php slot('text') ?>
<div class="edito"><?= $page->edito() ?></div>
<ul class="texts">
<?php foreach($page->children() as $article): ?>
<li
class="text"
>
<a href="<?= $article->url() ?>" class="text__title no-line">
<h4><?= $article->title() ?></h4>
</a>
<div class="text__infos">
<p>
<span class="light">par</span>
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endforeach ?>
</ul>
<?php endslot() ?>
<?php endsnippet() ?>
</article>
</main>