style desktop nav panel
This commit is contained in:
parent
57e9ca74da
commit
81454b3e4e
16 changed files with 157 additions and 136 deletions
|
|
@ -1,12 +1,12 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
return array(
|
||||
'debug' => true,
|
||||
'panel' => [
|
||||
'panel' => array(
|
||||
'menu' => require __DIR__ . '/menu.php',
|
||||
],
|
||||
'routes' => [
|
||||
),
|
||||
'routes' => array(
|
||||
require __DIR__ . '/routes/virtual-author.php',
|
||||
require __DIR__ . '/routes/virtual-category.php',
|
||||
]
|
||||
];
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
|
|||
</header>
|
||||
<div id="entry-btns">
|
||||
<button
|
||||
class="entry-btn entry-btn--left toggle-btn left"
|
||||
onclick="togglePanel('left')"
|
||||
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')"
|
||||
class="entry-btn entry-btn--right toggle-btn--right"
|
||||
onclick="togglePanel('right', event)"
|
||||
>categories</button>
|
||||
</div>
|
||||
|
|
@ -7,16 +7,19 @@ $entryTopPos = $entryTopPos ?? 20;
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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)?>" defer></script>
|
||||
<script defer src="<?= url('assets/js/alpine.min.js') ?>"></script>
|
||||
<script defer src="<?= url('assets/js/ragadjust.js') ?>"></script>
|
||||
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
</head>
|
||||
<body class="grid" data-template="<?= $page->template() ?>" >
|
||||
<header id="main-header">
|
||||
<div id="logo" >
|
||||
<a href="/" class="no-line">
|
||||
<a id="logo__link" href="/" class="no-line">
|
||||
<h1 id="actuel">actuel</h1>
|
||||
<h1 id="inactuel">inactuel</h1>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,29 @@
|
|||
<sidebar id="desktop-nav">
|
||||
<ul>
|
||||
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
|
||||
années
|
||||
</button>
|
||||
</li>
|
||||
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
|
||||
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
|
||||
catégories
|
||||
</button>
|
||||
</li>
|
||||
<li class="empty
|
||||
"></li>
|
||||
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
|
||||
<a href="#">
|
||||
s'abonner
|
||||
</a>
|
||||
</li>
|
||||
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
|
||||
<a href="<?= $site->find('a-propos')->url() ?>">
|
||||
à propos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</sidebar>
|
||||
|
||||
<nav
|
||||
class="panel panel--left"
|
||||
|
|
@ -7,7 +33,7 @@
|
|||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
placeholder="titre / auteur / année / catégor…"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
|
|
@ -58,7 +84,7 @@
|
|||
<button
|
||||
:class="edito ? 'open' : 'close'"
|
||||
x-show="search.length === 0"
|
||||
class="see-more toggle left"
|
||||
class="see-more toggle-btn toggle-btn--left"
|
||||
@click="edito = !edito"
|
||||
>Lire</button>
|
||||
<ul class="panel-item-content__texts">
|
||||
|
|
@ -111,7 +137,7 @@
|
|||
<input
|
||||
class="search__input"
|
||||
type="text"
|
||||
placeholder="titre / auteur / année / catégorie"
|
||||
placeholder="titre / auteur / année / catégor…"
|
||||
x-model="search"
|
||||
>
|
||||
<img
|
||||
|
|
@ -131,8 +157,8 @@
|
|||
<ul class="panel__items">
|
||||
<?php
|
||||
$categories = $kirby->collection('categories');
|
||||
shuffle($categories);
|
||||
foreach($categories as $category): ?>
|
||||
shuffle($categories);
|
||||
foreach($categories as $category): ?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
|
|
@ -156,8 +182,8 @@
|
|||
>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article): ?>
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article): ?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
|||
><?= $left['label'] ?></button>
|
||||
<?php endif ?>
|
||||
<button
|
||||
class="toggle right"
|
||||
class="toggle-btn toggle-btn--right"
|
||||
:class="activeTab === 'texts' ? 'open' : 'close'"
|
||||
title="Voir tous les textes"
|
||||
@click="toggleTab($data, 'texts')"
|
||||
|
|
@ -69,9 +69,9 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
|||
<?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
|
||||
<?php snippet(
|
||||
'text-item',
|
||||
[
|
||||
'article' => $article
|
||||
]
|
||||
array(
|
||||
'article' => $article
|
||||
)
|
||||
) ?>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
>
|
||||
<h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle() ?></h2>
|
||||
<p
|
||||
class="main-edito-btn | toggle-btn left"
|
||||
class="main-edito-btn | toggle-btn toggle-btn--left"
|
||||
>édito</p>
|
||||
</a>
|
||||
<?php endslot() ?>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<main id="<?= $page->template() ?>">
|
||||
<div id="entry-btns">
|
||||
<button
|
||||
class="entry-btn entry-btn--left toggle-btn left"
|
||||
class="entry-btn entry-btn--left toggle-btn toggle-btn--left"
|
||||
onclick="togglePanel('left')"
|
||||
>années</button>
|
||||
<button
|
||||
class="entry-btn entry-btn--right toggle-btn right"
|
||||
class="entry-btn entry-btn--right toggle-btn toggle-btn--right"
|
||||
onclick="togglePanel('right')"
|
||||
>categories</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue