redesign nav and logo
This commit is contained in:
isUnknown
parent
48bfd23600
commit
cf867bbc14
14 changed files with 315 additions and 297 deletions
|
|
@ -79,10 +79,12 @@ body {
|
|||
}
|
||||
|
||||
/* ================= BUTTONS ================= */
|
||||
.toggle-btn--left::after {
|
||||
.toggle-btn--left::after,
|
||||
.plus-btn::after {
|
||||
margin-left: var(--unit--horizontal);
|
||||
}
|
||||
.toggle-btn--left::after {
|
||||
.toggle-btn--left::after,
|
||||
.plus-btn::after {
|
||||
content: "+";
|
||||
}
|
||||
.toggle-btn--left.open::after {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,42 @@
|
|||
#main-header {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#logo * {
|
||||
font-size: 26.65vw;
|
||||
font-weight: var(--font-weight-extra-bold);
|
||||
}
|
||||
|
||||
#logo span {
|
||||
height: 20vw;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1vw;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logo {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#logo #actuel,
|
||||
#logo #inactuel {
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
#logo #inactuel {
|
||||
transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
#main-header.minimized #inactuel {
|
||||
margin-top: -20vw;
|
||||
transform: translateX(-2px) translateY(-2px);
|
||||
}
|
||||
|
||||
/* #main-header {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
|
|
@ -41,7 +79,7 @@
|
|||
|
||||
#main-header.minimized #logo #inactuel {
|
||||
top: 0.1vw;
|
||||
}
|
||||
} */
|
||||
|
||||
body {
|
||||
--entry-btns-height: 10svh;
|
||||
|
|
@ -91,15 +129,11 @@ button.toggle.right::before {
|
|||
transition: all 0.5s var(--curve-sine);
|
||||
content: "+";
|
||||
}
|
||||
.entry-btn--left::after {
|
||||
button.open-nav::after {
|
||||
margin-left: var(--unit--horizontal);
|
||||
}
|
||||
.entry-btn--right::before {
|
||||
margin-right: var(--unit--horizontal);
|
||||
}
|
||||
|
||||
#entry-btns .entry-btn--left::before,
|
||||
#entry-btns .entry-btn--right::after {
|
||||
button.open-nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
|
|
@ -109,13 +143,6 @@ button.toggle.right::before {
|
|||
transition: all 0.5s var(--curve-sine);
|
||||
}
|
||||
|
||||
#entry-btns .entry-btn--left::before {
|
||||
right: 0;
|
||||
}
|
||||
#entry-btns .entry-btn--right::after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#entry-btns.minimized {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -139,12 +166,12 @@ button.toggle.right::before {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
#logo {
|
||||
/* #logo {
|
||||
width: 100%;
|
||||
}
|
||||
#logo * {
|
||||
font-size: 25.8vw;
|
||||
}
|
||||
} */
|
||||
|
||||
.page-cover:not(
|
||||
[data-template="author"] .page-cover,
|
||||
|
|
|
|||
|
|
@ -3,43 +3,59 @@
|
|||
display: none;
|
||||
}
|
||||
.panel {
|
||||
display: none;
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
top: 0;
|
||||
background-color: #000;
|
||||
outline: 1px solid #fff;
|
||||
transition: all 0.5s var(--curve-sine);
|
||||
z-index: 2;
|
||||
padding-top: calc(var(--unit--vertical) * 5);
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search,
|
||||
.panel__items {
|
||||
padding: 0 var(--unit--horizontal);
|
||||
.panel.panel--visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel--left {
|
||||
left: calc(-100vw - 1px);
|
||||
}
|
||||
.panel--right {
|
||||
right: calc(-100vw - 1px);
|
||||
.panel header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: #000;
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.panel--left.open {
|
||||
left: 0;
|
||||
.sort-btns {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.panel--right.open {
|
||||
right: 0;
|
||||
|
||||
.sort-btns button {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
|
||||
.sort-btns button:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.sort-btns button.active {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: var(--unit--vertical);
|
||||
background-color: #000;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
|
|
@ -66,24 +82,26 @@
|
|||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
padding: 0.5rem;
|
||||
bottom: 0;
|
||||
right: var(--unit--horizontal);
|
||||
transform: translateX(0.5rem) translateY(-0.2rem);
|
||||
right: 0;
|
||||
transform: translateX(0.5rem) translateY(0.2rem);
|
||||
}
|
||||
button.search__icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel__items {
|
||||
.panel__collection {
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
padding-top: var(--unit--vertical);
|
||||
overflow: auto;
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
}
|
||||
|
||||
.panel-close {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
width: calc(100% - 2 * var(--unit--horizontal));
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border-top: 1px solid #fff;
|
||||
font-size: var(--font-size-m);
|
||||
|
|
@ -119,7 +137,7 @@ button.search__icon {
|
|||
}
|
||||
|
||||
.panel-item-content__texts {
|
||||
margin-top: var(--unit--vertical);
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
}
|
||||
|
||||
/* ================= TEXT ITEM ================= */
|
||||
|
|
|
|||
|
|
@ -17,11 +17,6 @@
|
|||
font-family: "Switzer-Variable", sans-serif;
|
||||
}
|
||||
|
||||
#logo * {
|
||||
font-size: 25vw;
|
||||
font-weight: var(--font-weight-extra-bold);
|
||||
}
|
||||
|
||||
h1,
|
||||
h1 *,
|
||||
h2,
|
||||
|
|
@ -45,7 +40,7 @@ h2 {
|
|||
h3,
|
||||
.h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
article h2 {
|
||||
|
|
|
|||
|
|
@ -204,4 +204,42 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
event.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
const navSortBtns = document.querySelectorAll("nav .sort-btn");
|
||||
const navSections = document.querySelectorAll(
|
||||
".panel__all-texts, .panel__collection"
|
||||
);
|
||||
|
||||
navSortBtns.forEach((sortBtn) => {
|
||||
sortBtn.addEventListener("click", () => {
|
||||
navSortBtns.forEach((btn) => btn.classList.remove("active"));
|
||||
sortBtn.classList.add("active");
|
||||
|
||||
const sections = {
|
||||
"sort-btn--all": ".panel__all-texts",
|
||||
"sort-btn--years": ".panel__collection--years",
|
||||
"sort-btn--categories": ".panel__collection--categories",
|
||||
};
|
||||
|
||||
navSections.forEach((navSection) => navSection.classList.add("hidden"));
|
||||
|
||||
Object.keys(sections).forEach((key) => {
|
||||
if (sortBtn.classList.contains(key)) {
|
||||
document.querySelector(sections[key]).classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const panelNav = document.querySelector(".panel");
|
||||
|
||||
const openNavBtn = document.querySelector("button.open-nav");
|
||||
openNavBtn.addEventListener("click", () => {
|
||||
panelNav.classList.add("panel--visible");
|
||||
});
|
||||
|
||||
const closeNavBtn = document.querySelector(".panel-close");
|
||||
closeNavBtn.addEventListener("click", () => {
|
||||
panelNav.classList.remove("panel--visible");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
@ -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') ?>
|
||||
|
|
@ -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
32
site/snippets/nav__texts--all.php
Normal 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
75
site/snippets/nav__texts--collection.php
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
6
vite.config.js
Normal file
6
vite.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue