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

redesign nav and logo

Browse source
This commit is contained in:
isUnknown 2024-11-26 09:53:05 +01:00
parent 48bfd23600
commit cf867bbc14
14 changed files with 315 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

57
site/collections/categories.php
View file

@ -1,41 +1,44 @@
<?php
function createCategories($textsPage) {
$categories = array();
foreach ($textsPage->categories()->split() as $category) {
$categories[$category] = array(
'title' => $category,
'texts' => new Pages()
);
}
function createEmptyCategories() {
$categories = new Pages();
foreach (page('textes')->categories()->split() as $categoryName) {
$category = new Page([
'slug' => Str::slug($categoryName),
'template' => 'category',
'status' => 'listed',
'content' => [
'title' => $categoryName,
],
'children' => []
]);
$categories->add($category);
}
return $categories;
}
function fillCategoriesWithTexts($emptyCategories, $texts) {
$filledCategories = $emptyCategories;
foreach ($texts as $text) {
function createCategories() {
$emptyCategories = createEmptyCategories();
foreach (page('textes')->grandChildren() as $text) {
try {
$textCategory = $text->category()->value();
$filledCategories[$textCategory]['texts']->add($text);
$textCategoryName = $text->category()->value();
$emptyCategories
->findBy('slug', Str::slug($textCategoryName))
->children()
->add($text);
} catch (\Throwable $th) {
throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage()));
throw new Exception($th->getFile() . ' : ' . $th->getMessage());
}
}
// exclude empty categories
return array_filter($filledCategories, function($category) {
return count($category['texts']) > 0;
return $emptyCategories->filter(function ($category) {
return $category->children()->count() > 0;
});
}
return function ($site) {
$textsPage = $site->find('textes');
$years = $textsPage->children();
$texts = $years->children()->index();
$emptyCategories = createCategories($textsPage);
$filledCategories = fillCategoriesWithTexts($emptyCategories, $texts);
return $filledCategories;
$categories = createCategories();
return $categories;
};

14
site/snippets/cover.php
View file

@ -14,13 +14,7 @@ $isOpen = isset($isOpen) ? $isOpen : false;
</div>
<?php endif ?>
</header>
<div id="entry-btns">
<button
class="entry-btn entry-btn--left toggle-btn--left"
onclick="togglePanel('left', event)"
>années</button>
<button
class="entry-btn entry-btn--right toggle-btn--right"
onclick="togglePanel('right', event)"
>categories</button>
</div>
<button
class="open-nav"
>textes</button>

12
site/snippets/header.php
View file

@ -36,11 +36,11 @@ $entryTopPos = $entryTopPos ?? 20;
</head>
<body class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" data-template="<?= $page->template() ?>" >
<header id="main-header">
<div id="logo" >
<a id="logo__link" href="/" class="no-line">
<h1 id="actuel">actuel</h1>
<h1 id="inactuel">inactuel</h1>
</a>
</div>
<a id="logo" href="/" class="no-line">
<h1>
<span id="actuel">actuel</span>
<span id="inactuel">inactuel</span>
</h1>
</a>
</header>
<?php snippet('nav') ?>

52
site/snippets/nav.php
View file

@ -1,17 +1,37 @@
<?php snippet('desktop-nav') ?>
<?php snippet('panel--years') ?>
<button
onclick="togglePanel('years')"
class="panel-close"
>fermer</button>
</nav>
<?php snippet('panel--categories') ?>
<button
onclick="togglePanel('categories')"
class="panel-close"
>fermer</button>
<nav
class="panel"
x-data="{search: ''}"
>
<header>
<p class="sort-btns">
<button class="sort-btn sort-btn--years active">années</span></button>
<button class="sort-btn sort-btn--categories">catégories</button>
<button class="sort-btn sort-btn--all">voir tout</button>
</p>
<div class="search">
<input
class="search__input"
type="text"
placeholder="Chercher"
x-model="search"
>
<img
x-show="search.length === 0"
src="<?= url('assets/images/icons/search.svg') ?>"
class="search__icon"
alt="Icône loupe indiquant le champ de recherche."
>
<button
x-show="search.length > 0"
@click="search = ''"
class="search__icon"
>
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
</button>
</div>
</header>
<?php snippet('nav__texts--all') ?>
<?php snippet('nav__texts--collection', ["collection" => "categories"]) ?>
<?php snippet('nav__texts--collection', ["collection" => "years"]) ?>
<button class="panel-close">fermer</button>
</nav>

32
site/snippets/nav__texts--all.php Normal file
View file

@ -0,0 +1,32 @@
<ul class="panel__all-texts panel-item-content__texts hidden">
<?php foreach(page('textes')->grandChildren()->sortBy('published', 'desc') as $article): ?>
<?php
$author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
?>
<li
class="text"
x-data="{
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
author: '<?= $author ?>',
category: '<?= $article->category() ?>',
}"
x-show="
slugify(title).includes(slugify(search))
|| slugify(author).includes(slugify(search))
|| slugify(category).includes(slugify(search))
"
>
<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($author) ?>"><?= $author ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->toPage()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endforeach ?>
</ul>

75
site/snippets/nav__texts--collection.php Normal file
View file

@ -0,0 +1,75 @@
<ul class="panel__collection panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>">
<?php foreach($kirby->collection($collection) as $section): ?>
<li
class="panel__item "
x-data='{ isOpen: false }'
>
<a class="no-line" href="#<?= $section->slug() ?>" id="<?= $section->slug() ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3><?= $section->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="isOpen || search.length > 0"
x-data='{ edito: false }'
>
<?php if ($collection === "years"): ?>
<div
class="panel-item-content__edito"
:class="edito ? '' : 'short'"
x-show="search.length === 0"
>
<?= $section->edito() ?>
</div>
<button
:class="edito ? 'open' : 'close'"
x-show="search.length === 0"
class="see-more toggle-btn toggle-btn--left"
@click="edito = !edito"
>Lire</button>
<?php endif ?>
<ul class="panel-item-content__texts">
<?php foreach($section->children() as $article): ?>
<?php
$author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
?>
<li
class="text"
x-data="{
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
author: '<?= $author ?>',
category: '<?= $article->category() ?>',
}"
x-show="
slugify(title).includes(slugify(search))
|| slugify(author).includes(slugify(search))
|| slugify(category).includes(slugify(search))
"
>
<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($author) ?>"><?= $author ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->toPage()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endforeach ?>
</ul>
</div>
</li>
<?php endforeach ?>
</ul>

92
site/snippets/panel--categories.php
View file

@ -1,92 +0,0 @@
<nav
class="panel panel--right panel--categories"
x-data="{search: ''}"
>
<div class="search">
<input
class="search__input"
type="text"
placeholder="titre / auteur / année / catégorie"
x-model="search"
>
<img
x-show="search.length === 0"
src="<?= url('assets/images/icons/search.svg') ?>"
class="search__icon"
alt="Icône loupe indiquant le champ de recherche."
>
<button
x-show="search.length > 0"
@click="search = ''"
class="search__icon"
>
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
</button>
</div>
<ul class="panel__items">
<?php
$categories = $kirby->collection('categories');
shuffle($categories);
foreach($categories as $category):
?>
<li
class="panel__item "
x-data='{ isOpen: false }'
>
<a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3><?= $category['title'] ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="isOpen || search.length > 0"
>
<ul class="panel-item-content__texts">
<?php
$category['texts'];
foreach($category['texts'] as $article):
?>
<?php
$author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
?>
<li
class="text"
x-data="{
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
author: '<?= $author ?>',
yearParent: '<?= $article->parent()->title()->value() ?>',
category: '<?= $article->category() ?>',
}"
x-show="
slugify(title).includes(slugify(search))
|| slugify(author).includes(slugify(search))
|| slugify(yearParent).includes(slugify(search))
|| slugify(category).includes(slugify(search))
"
>
<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($author) ?>"><?= $author ?></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>
</div>
</li>
<?php endforeach ?>
</ul>

100
site/snippets/panel--years.php
View file

@ -1,100 +0,0 @@
<nav
class="panel panel--left panel--years"
x-data="{search: ''}"
>
<div class="search">
<input
class="search__input"
type="text"
placeholder="titre / auteur / année / catégorie"
x-model="search"
>
<img
x-show="search.length === 0"
src="<?= url('assets/images/icons/search.svg') ?>"
class="search__icon"
alt="Icône loupe indiquant le champ de recherche."
>
<button
x-show="search.length > 0"
@click="search = ''"
class="search__icon"
>
<img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
</button>
</div>
<ul class="panel__items">
<?php foreach($kirby->collection('years') as $year): ?>
<li
class="panel__item "
x-data='{ isOpen: false }'
>
<a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
<button
class="panel__toggle-btn"
:class="isOpen ? '' : 'short'"
@click="isOpen = !isOpen"
>
<h3><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="isOpen || search.length > 0 ? '-' : '+'"
></div>
</button>
</a>
<div
class="panel-item-content"
x-show="isOpen || search.length > 0"
x-data='{ edito: false }'
>
<div
class="panel-item-content__edito"
:class="edito ? '' : 'short'"
x-show="search.length === 0"
>
<?= $year->edito() ?>
</div>
<button
:class="edito ? 'open' : 'close'"
x-show="search.length === 0"
class="see-more toggle-btn toggle-btn--left"
@click="edito = !edito"
>Lire</button>
<ul class="panel-item-content__texts">
<?php foreach($year->children() as $article): ?>
<?php
$author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
?>
<li
class="text"
x-data="{
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
author: '<?= $author ?>',
yearParent: '<?= $article->parent()->title()->value() ?>',
category: '<?= $article->category() ?>',
}"
x-show="
slugify(title).includes(slugify(search))
|| slugify(author).includes(slugify(search))
|| slugify(yearParent).includes(slugify(search))
|| slugify(category).includes(slugify(search))
"
>
<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($author) ?>"><?= $author ?></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>
</div>
</li>
<?php endforeach ?>
</ul>