prepare subscription page

assets/css/src/header.css

@@ -1,3 +1,11 @@
+main {
+  pointer-events: none;
+}
+
+.page-cover > * {
+  pointer-events: all;
+}
+
 #main-header {
   position: fixed;
   box-sizing: border-box;

assets/css/src/home.css

@@ -1,13 +1,3 @@
-[data-template="home"] main {
-  pointer-events: none;
-}
-
-.home-baseline,
-.main-edito-btn,
-.open-nav {
-  pointer-events: all;
-}
-
 .main-edito-btn {
   display: inline-block;
   margin-right: calc(2 * var(--unit--horizontal));

assets/css/src/nav.css

@@ -165,35 +165,6 @@ button.see-more {
   nav.panel {
     width: 40rem;
   }
-  #subscribe-btn-wrapper {
-    height: 2.5rem;
-    margin-bottom: 0.2rem;
-  }
-
-  #subscribe-form {
-    position: relative;
-    width: fit-content;
-  }
-
-  #subscribe-form input {
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid #fff;
-    box-sizing: border-box;
-    padding-bottom: 0.3rem;
-    padding-right: 2rem;
-    color: #fff;
-    width: 15rem;
-  }
-  #subscribe-form input:focus-visible {
-    outline: none;
-  }
-  #subscribe-form button[type="submit"] {
-    color: #fff;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
 
   .panel {
     z-index: 4;

assets/css/src/newsletter.css

@@ -0,0 +1,29 @@
+#subscribe-btn-wrapper {
+  height: 2.5rem;
+  margin-bottom: 0.2rem;
+}
+
+#subscribe-form {
+  position: relative;
+  width: fit-content;
+}
+
+#subscribe-form input {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid #fff;
+  box-sizing: border-box;
+  padding-bottom: 0.3rem;
+  padding-right: 2rem;
+  color: #fff;
+  width: 15rem;
+}
+#subscribe-form input:focus-visible {
+  outline: none;
+}
+#subscribe-form button[type="submit"] {
+  color: #fff;
+  position: absolute;
+  top: 0;
+  right: 0;
+}

assets/css/style.css

@@ -8,6 +8,7 @@
 @import url("src/virtual.css");
 @import url("src/home.css");
 @import url("src/grid.css");
+@import url("src/newsletter.css");
 @import url("src/footer.css");
 @import url("src/print.css");
 :root {

assets/js/script.js

@@ -76,19 +76,6 @@ function slugify(str) {
   return removeAccents(str.toLowerCase());
 }
 
-const subscribeBtn = document.querySelector("#subscribe-btn");
-function showSubscribeField(event) {
-  event.preventDefault();
-  const button = event.target;
-  const li = button.parentNode;
-  const form = li.querySelector("#subscribe-form");
-  const input = form.querySelector("input");
-
-  form.classList.remove("hidden");
-  button.classList.add("hidden");
-  input.focus();
-}
-
 function subscribe(event) {
   event.preventDefault();
   const email = document.querySelector("#subscribe-form input");

site/blueprints/pages/newsletter.yml

@@ -3,6 +3,11 @@ title: Liste de diffusion
 tabs:
   content:
     columns:
+      - width: 1/1
+        fields:
+          body:
+            label: Texte
+            type: writer
       - width: 1/2
         fields:
           subscribers:

site/config/menu.php

@@ -37,10 +37,10 @@ return [
         return Str::contains($path, 'pages/a-propos');
     }
   ],
-  'newsletter' => [
+  'subscription' => [
     'icon' => 'email',
     'label' => 'Liste de diffusion',
-    'link' => 'pages/liste-de-diffusion',
+    'link' => 'pages/inscription',
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/liste-de-diffusion');

site/snippets/footer.php

@@ -1,12 +1,18 @@
     <footer id="main-footer">
       <ul id="links">
-        <li 
-          id="subscribe-btn-wrapper"
-        >
-          <a id="subscribe-btn" class="plus">
-            s'inscrire
-          </a>
-        </li>
+        <?php if ($page->is(page('inscription'))): ?>
+          <li>
+            <a href="<?= $site->url() ?>">
+              accueil
+            </a>
+          </li>    
+        <?php else: ?>
+          <li>
+            <a href="/inscription" id="subscribe-btn" class="plus">
+              s'inscrire
+            </a>
+          </li>
+        <?php endif ?>
         <li>
           <a href="<?= $site->find('a-propos')->url() ?>">
             à propos

site/templates/newsletter.php

@@ -0,0 +1,19 @@
+<?php snippet('header') ?>
+<main id="<?= $page->template() ?>">
+  <article>
+    <?php snippet('cover', array('isOpen' => true), slots: true) ?>
+      <?php slot('title') ?>
+      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
+      <?= $page->body() ?>
+      <form id="subscribe-form">
+        <label for="email">
+          <input type="email" name="email" id="email" placeholder="votre e-mail">
+          <button type="submit" onclick="subscribe(event)">→</button>
+        </label>
+      </form>
+      <?php endslot() ?>
+    <?php endsnippet() ?>
+  </article>
+</main>
+
+<?php snippet('footer') ?>