add sectioned template

assets/css/src/calendar-strip.css

@@ -2,12 +2,9 @@
   --padding-vertical: calc(var(--space-m) / 2);
   position: relative;
   background-color: var(--color-yellow);
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 .calendar-strip__selector {

assets/css/src/callout.css

@@ -4,8 +4,6 @@ section.callout {
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 section.callout h4 {

assets/css/src/collapsable-section.css

@@ -0,0 +1,19 @@
+.collapsable-sections {
+  background-color: var(--color-yellow);
+}
+
+.collapsable button.toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.collapsable__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
+}
+.collapsable__content {
+  max-height: 100%;
+  overflow: hidden;
+}

assets/css/src/event-key-infos.css

@@ -0,0 +1,21 @@
+section.key-infos {
+  width: 100%;
+}
+
+section.key-infos ul {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+section.key-infos p {
+  display: inline;
+}
+
+section.key-infos .key-infos__key {
+  color: var(--color-accent);
+}
+
+section.key-infos .key-infos__key:not(:last-child) {
+  margin-right: 3rem;
+}

assets/css/src/event-presentation.css

@@ -0,0 +1,21 @@
+.presentation {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  column-gap: 1rem;
+}
+
+.presentation__title {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+.presentation__authors {
+  color: var(--color-accent);
+}
+
+.presentation__chapo {
+  margin: var(--space-m) 0;
+}
+
+.presentation__description {
+  font-size: var(--font-size-s);
+}

assets/css/src/newsletter.css

@@ -1,8 +1,6 @@
 section.newsletter {
   --padding-vertical: var(--space-m);
   background-color: var(--color-brown-light);
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 section.newsletter h2 {
@@ -23,7 +21,7 @@ section.newsletter form > *:last-child {
 }
 
 section.newsletter form input {
-  border-bottom: 1px solid #000;
+  border-bottom: var(--border);
   padding-bottom: var(--space-vertical);
   width: 100%;
 }

assets/css/src/text.css

@@ -10,7 +10,7 @@
 }
 body {
   font-family: "Joker", sans-serif;
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-m);
 }
 
 h1,

assets/css/src/vanilla.css

@@ -1,7 +1,12 @@
-section,
+section:not(.collapsable),
 footer {
+  box-sizing: border-box;
   padding: var(--padding-vertical) var(--space-m);
 }
+section:not(:last-child) {
+  border-bottom: var(--border);
+}
+
 picture {
   background-color: #ddd;
   display: flex !important;

assets/css/src/variables.css

@@ -1,7 +1,9 @@
 :root {
   --border: 1px solid #000;
 
-  --font-size-body: 1.25rem;
+  --font-size-s: 1rem;
+  --font-size-m: 1.25rem;
+
   --font-size-h5: 1.5625rem;
   --font-size-h4: 1.5625rem;
   --font-size-h3: 1.5625rem;

assets/css/style.css

@@ -10,4 +10,7 @@
 @import url("src/events-grid.css");
 @import url("src/callout.css");
 @import url("src/newsletter.css");
+@import url("src/event-key-infos.css");
+@import url("src/event-presentation.css");
+@import url("src/collapsable-section.css");
 @import url("src/footer.css");

assets/images/icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4265 27.4221L0.266152 14.1466L4.02624 10.3865L11.4697 18.4822C11.086 17.5614 10.7791 15.9499 10.7791 13.8397V0.794486H16.0355V13.8397C16.0355 15.9499 15.7669 17.5614 15.3832 18.4822L22.8267 10.3865L26.5868 14.1466L13.4265 27.4221Z" fill="black"/>
+</svg>

site/blueprints/blocks/heading.yml

@@ -0,0 +1,32 @@
+name: field.blocks.heading.name
+icon: title
+wysiwyg: true
+preview: heading
+fields:
+  level:
+    label: field.blocks.heading.level
+    type: toggles
+    empty: false
+    default: "h2"
+    labels: false
+    options:
+      - value: h2
+        icon: h2
+        text: H2
+      - value: h3
+        icon: h3
+        text: H3
+      - value: h4
+        icon: h4
+        text: H4
+      - value: h5
+        icon: h5
+        text: H5
+      - value: h6
+        icon: h6
+        text: H6
+  text:
+    label: field.blocks.heading.text
+    type: writer
+    inline: true
+    placeholder: field.blocks.heading.placeholder

site/blueprints/blocks/image.yml

@@ -0,0 +1,31 @@
+name: field.blocks.image.name
+icon: image
+preview: image
+fields:
+  image:
+    label: field.blocks.image.name
+    type: files
+    query: model.images
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
+  src:
+    label: field.blocks.image.url
+    type: url
+    when:
+      location: web
+  alt:
+    label: field.blocks.image.alt
+    type: text
+    icon: title
+  caption:
+    label: field.blocks.image.caption
+    type: writer
+    icon: text
+    inline: true
+  link:
+    label: field.blocks.image.link
+    type: text
+    icon: url

site/blueprints/blocks/links-list.yml

@@ -0,0 +1,28 @@
+name: Liste de liens
+icon: table
+preview: fields
+wysiwyg: true
+fields:
+  items:
+    label: false
+    type: structure
+    columns:
+      firstText:
+        width: 1/3
+      secondText:
+        width: 1/3
+      link:
+        width: 1/3
+    fields:
+      firstText:
+        type: text
+        label: 1er texte
+        width: 1/3
+      secondText:
+        type: text
+        label: 2ème texte
+        width: 1/3
+      link:
+        type: url
+        label: Lien
+        width: 1/3

site/blueprints/blocks/text.yml

@@ -0,0 +1,19 @@
+name: field.blocks.text.name
+icon: text
+wysiwyg: true
+preview: text
+fields:
+  leftMargin:
+    label: ⇥ Marge gauche
+    type: radio
+    columns: 4
+    default: false
+    options:
+      false: Aucune
+      small: Petite
+      medium: Moyenne
+      large: Grande
+  text:
+    label: Texte
+    type: writer
+    placeholder: field.blocks.text.placeholder

site/blueprints/fields/color.yml

@@ -0,0 +1,16 @@
+label: Couleur
+type: color
+mode: options
+default: "#fff"
+options:
+  "#ed268f": Rose
+  "#ff4f4b": Saumon
+  "#9e00ff": Violet
+  "#d6ff00": Jaune
+  "#ff5c00": Orange
+  "#ff3300": Rouge
+  "#2e8799": Colvert
+  "#009eff": Bleu
+  "#00b477": Vert
+  "#a59478": Brun
+  "#fff": Blanc

site/blueprints/pages/event.yml

@@ -156,6 +156,9 @@ tabs:
     label: Réglages
     icon: cog
     fields:
+      color: fields/color
+      mapadoLine:
+        type: line
       isMapadoEvent:
         label: Connecter à Mapado
         type: toggle

site/blueprints/pages/free.yml

@@ -1 +0,0 @@
-title: Page libre

site/blueprints/pages/section.yml

@@ -0,0 +1,21 @@
+title: Section
+image: false
+
+tabs:
+  contentTab:
+    label: Constructeur
+    icon: dashboard
+    fields:
+      section:
+        label: Section
+        type: layout
+        layouts:
+          - "1/1"
+          - "1/2, 1/2"
+          - "1/3, 1/3, 1/3"
+        fieldsets:
+          - heading
+          - text
+          - image
+          - links-list
+  filesTab: tabs/files

site/blueprints/pages/sectioned.yml

@@ -0,0 +1,13 @@
+title: Page sectionnées
+image:
+  icon: divider
+  back: black
+  color: white
+
+tabs:
+  contentTab:
+    sections:
+      sectionsSection:
+        label: Sections
+        type: pages
+        template: section

site/blueprints/site.yml

@@ -86,8 +86,11 @@ tabs:
         type: pages
         label: Pages principales
         templates:
-          - free
+          - sectioned
           - program
+        create:
+          - sectioned
+        info: "{{ page.blueprint.title }}"
   contactTab:
     label: Contact
     icon: email

site/snippets/collapsable-section.php

@@ -0,0 +1,11 @@
+<section class="collapsable" x-data="{
+  open: false
+}">
+  <button class="toggle" @click="open = !open" title="Ouvrir la section">
+    <h4>Prenez vos places !</h4>
+    <?= svg('assets/images/icons/arrow-down.svg') ?>
+  </button>
+  <div class="collapsable__content" :class="open ? 'open' : ''">
+    test
+  </div>
+</section>

site/snippets/header.php

@@ -9,12 +9,19 @@
 
     <link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css?version-cache-prevent') . rand(0, 1000) ?>">
     <meta name="robots" content="noindex,nofollow">
-    <?php if ($page->isHomePage()): ?>
+    <?php if ($page->isHomePage() || $page->template() == 'event'): ?>
       <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
       <?= js('/assets/js/calendar.js') ?>
     <?php endif ?>
+    <?php if ($page->color()->exists()): ?>
+        <style>
+          :root {
+            --color-accent: <?= $page->color() ?>;
+          }
+        </style>
+    <?php endif ?>
   </head>
   <body>
   <?php if ($page->isHomePage()): ?>

site/templates/event.php

@@ -0,0 +1,24 @@
+<?php snippet('header') ?>
+<section class="key-infos">
+  <ul>
+    <li><p class="key-infos__key">Dates</p><p class="key-infos__info"><?= $page->schedule() ?></p></li>
+    <li><p class="key-infos__key">Durée</p><p class="key-infos__info"><?= e($page->isMapadoEvent(), $page->remoteDuration(), $page->duration()) ?></p></li>
+    <li><p class="key-infos__key">Public</p><p class="key-infos__info"><?= $page->public() ?></p></li>
+    <li><p class="key-infos__key">Lieu</p><p class="key-infos__info"><?= $page->place() ?></p></li>
+  </ul>
+</section>
+
+<section class="presentation">
+  <?php snippet('picture', ['file' => $page->gallery()->toFiles()->first()]) ?>
+  <div class="presentation__text">
+    <h2 class="h1 presentation__title"><?= $page->title() ?></h2>
+    <h3 class="h2 presentation__authors"><?= $page->authors() ?></h3>
+    <div class="presentation__chapo"><?= $page->chapo() ?></div>
+    <div class="presentation__description"><?= $page->description() ?></div>
+  </div>
+</section>
+
+<section class="collapsable-sections">
+  <?php snippet('collapsable-section') ?>
+</section>
+<?php snippet('footer') ?>

vendor/composer/autoload_psr4.php

@@ -16,7 +16,7 @@ return array(
     'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
     'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
     'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
-    'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src', $baseDir . '/kirby/src'),
+    'Kirby\\' => array($baseDir . '/kirby/src', $vendorDir . '/getkirby/composer-installer/src'),
     'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
     'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
 );

vendor/composer/autoload_static.php

@@ -96,8 +96,8 @@ class ComposerStaticInit749a661738bcd5b9428c88a1da847bc7
         ),
         'Kirby\\' => 
         array (
-            0 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
-            1 => __DIR__ . '/../..' . '/kirby/src',
+            0 => __DIR__ . '/../..' . '/kirby/src',
+            1 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
         ),
         'Composer\\Semver\\' => 
         array (

vendor/composer/installed.php

@@ -1,9 +1,9 @@
 <?php return array(
     'root' => array(
         'name' => 'getkirby/plainkit',
-        'pretty_version' => '4.3.0',
-        'version' => '4.3.0.0',
-        'reference' => null,
+        'pretty_version' => 'dev-main',
+        'version' => 'dev-main',
+        'reference' => '3008e231cb1bbf24da4c475bf23c5e1d050945a2',
         'type' => 'project',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -65,9 +65,9 @@
             'dev_requirement' => false,
         ),
         'getkirby/plainkit' => array(
-            'pretty_version' => '4.3.0',
-            'version' => '4.3.0.0',
-            'reference' => null,
+            'pretty_version' => 'dev-main',
+            'version' => 'dev-main',
+            'reference' => '3008e231cb1bbf24da4c475bf23c5e1d050945a2',
             'type' => 'project',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),