start footer

2024-07-31 12:09:03 +02:00 · 2024-07-31 12:09:03 +02:00 · 1945557d93
commit 1945557d93
parent 41a7b7b4cb
21 changed files with 195 additions and 77 deletions
--- a/assets/css/src/callout.css
+++ b/assets/css/src/callout.css
@ -0,0 +1,20 @@
+section.callout {
+  --padding-vertical: var(--space-m);
+  background-color: var(--color-salmon);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+section.callout h4 {
+  margin-bottom: 2rem;
+}
+
+section.callout a {
+  display: flex;
+  align-items: center;
+}
+
+section.callout .ticket {
+  margin-right: 1rem;
+}
--- a/assets/css/src/events-grid.css
+++ b/assets/css/src/events-grid.css
@ -10,8 +10,8 @@
  margin-bottom: calc(var(--space-m) / 2);
 }

-.event-card__infos h5 {
-  max-width: 95%;
+.event-card__infos > div a {
+  max-width: 85%;
 }

 .event-card__infos .ticket {
@ -25,7 +25,3 @@
 .event-card__infos > div:first-child {
  margin-bottom: calc(var(--space-m) / 2);
 }
-
-.event-card__infos > div > *:not(h5):last-child {
-  /* place-self: end; */
-}
--- a/assets/css/src/footer.css
+++ b/assets/css/src/footer.css
@ -0,0 +1,9 @@
+.main-footer {
+  background-color: var(--color-yellow-fluo);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.main-footer p {
+  margin-bottom: 1rem;
+}
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@ -29,53 +29,16 @@ body.progress * {
  object-fit: cover;
 }

-@keyframes vibrate {
-  0%,
-  100% {
-    scale: 1;
-    transform: rotate(0deg);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: rotate(5deg);
-  }
-
-  20% {
-    scale: 0.95;
-  }
-
-  50% {
-    scale: 1.05;
-  }
-
-  80% {
-    scale: 0.95;
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: rotate(-5deg);
-  }
+.logo {
+  font-weight: normal;
+  transition: opacity 0.2s ease-in-out;
+  font-size: var(--font-size-h2);
 }

-.ticket {
-  display: inline-flex;
+.logo > * {
+  display: block;
 }

-.ticket:hover svg {
-  animation: vibrate 0.5s forwards;
-}
-
-.ticket:hover svg path:not(.dot) {
-  fill: var(--color-salmon);
-  stroke: var(--color-salmon);
-}
-
-.ticket:hover svg path.dot {
-  fill: #fff;
+.logo > *:not(:first-child) {
+  margin-left: 2.4ch;
 }
--- a/assets/css/src/nav.css
+++ b/assets/css/src/nav.css
@ -7,20 +7,6 @@
  padding: 1rem;
 }

-.main-nav .logo {
-  font-weight: normal;
-  transition: opacity 0.2s ease-in-out;
-  font-size: var(--font-size-h2);
-}
-
-.main-nav .logo > * {
-  display: block;
-}
-
-.main-nav .logo > *:not(:first-child) {
-  margin-left: 2.4ch;
-}
-
 .main-nav__right {
  display: flex;
 }
--- a/assets/css/src/reset.css
+++ b/assets/css/src/reset.css
@ -76,8 +76,17 @@ input {
 ::placeholder {
  color: #000;
  opacity: 1; /* Firefox */
+  transition: all 0.2s ease-in-out;
 }
 ::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #000;
+  transition: color 0.2s ease-in-out;
+}
+:focus::placeholder {
+  opacity: 0.5; /* Firefox */
+}
+::-ms-input-placeholder {
+  /* Edge 12 -18 */
+  color: rgba(0, 0, 0, 125);
 }
--- a/assets/css/src/ticket.css
+++ b/assets/css/src/ticket.css
@ -0,0 +1,58 @@
+@keyframes vibrate {
+  0%,
+  100% {
+    scale: 1;
+    transform: rotate(0deg);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: rotate(5deg);
+  }
+
+  20% {
+    scale: 0.95;
+  }
+
+  50% {
+    scale: 1.05;
+  }
+
+  80% {
+    scale: 0.95;
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: rotate(-5deg);
+  }
+}
+
+.ticket {
+  display: inline-flex;
+}
+
+a:hover .ticket svg,
+.ticket:hover svg {
+  animation: vibrate 0.5s forwards;
+}
+
+.ticket:hover svg path:not(.dot) {
+  fill: var(--color-salmon);
+  stroke: var(--color-salmon);
+}
+a:hover .ticket svg path:not(.dot) {
+  fill: #fff;
+  stroke: #fff;
+}
+
+.ticket:hover svg path.dot {
+  fill: #fff;
+}
+a:hover .ticket svg path.dot {
+  fill: var(--color-salmon);
+}
--- a/assets/css/src/vanilla.css
+++ b/assets/css/src/vanilla.css
@ -1,4 +1,5 @@
-section {
+section,
+footer {
  padding: var(--padding-vertical) var(--space-m);
 }
 picture {
--- a/assets/css/src/variables.css
+++ b/assets/css/src/variables.css
@ -9,6 +9,7 @@
  --font-size-h1: 2.8125rem;

  --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --padding-vertical: 2rem;
  --space-m: 4vw;

  --color-pink: #ed268f;
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -6,5 +6,8 @@
@import url("src/nav.css");
@import url("src/hero.css");
@import url("src/calendar-strip.css");
+@import url("src/ticket.css");
@import url("src/events-grid.css");
+@import url("src/callout.css");
@import url("src/newsletter.css");
+@import url("src/footer.css");
--- a/assets/images/icons/facebook.svg
+++ b/assets/images/icons/facebook.svg
--- a/assets/images/icons/instagram.svg
+++ b/assets/images/icons/instagram.svg
@ -0,0 +1,12 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_174)">
+<path d="M13.7213 5.81116H8.51882C7.03565 5.81116 5.8339 7.01291 5.82629 8.50369V13.7138C5.82629 15.197 7.02804 16.3987 8.51882 16.4063H13.7213C15.2045 16.4063 16.4063 15.2046 16.4139 13.7138V8.51129C16.4139 7.02812 15.2121 5.82637 13.7213 5.81876M11.1733 14.3147C9.40112 14.3147 7.96359 12.8771 7.96359 11.1049C7.96359 9.33274 9.40112 7.89521 11.1733 7.89521C12.9455 7.89521 14.3831 9.33274 14.3831 11.1049C14.3831 12.8771 12.9455 14.3147 11.1733 14.3147ZM14.5732 8.44284C14.1473 8.44284 13.8126 8.10057 13.8126 7.67463C13.8126 7.2487 14.1549 6.91403 14.5808 6.91403C15.0068 6.91403 15.3414 7.2563 15.3414 7.68224C15.3414 8.10057 14.9992 8.44284 14.5732 8.44284Z" fill="black"/>
+<path d="M11.1734 9.05115C10.0401 9.05115 9.11975 9.97148 9.11975 11.1048C9.11975 12.2381 10.0401 13.1584 11.1734 13.1584C12.3067 13.1584 13.227 12.2381 13.227 11.1048C13.227 9.97148 12.3067 9.05115 11.1734 9.05115Z" fill="black"/>
+<path d="M11.12 0C4.98194 0 0 4.98194 0 11.12C0 17.2581 4.98194 22.24 11.12 22.24C17.2581 22.24 22.24 17.2581 22.24 11.12C22.24 4.98194 17.2657 0 11.12 0ZM17.6384 13.706C17.6384 15.8662 15.8814 17.6231 13.7213 17.6231H8.51874C6.35863 17.6231 4.60164 15.8662 4.60164 13.706V8.49592C4.60164 6.33581 6.35863 4.57882 8.51874 4.57882H13.7213C15.8814 4.57882 17.6384 6.33581 17.6384 8.49592V13.706Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_7_174">
+<rect width="22.24" height="22.24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/site/config/config.php
+++ b/site/config/config.php
@ -42,5 +42,6 @@ return [
  'date'  => [
    'handler' => 'intl'
  ],
-  'locale' => 'fr_FR.UTF-8'
+  'locale' => 'fr_FR.UTF-8',
+  'ticketingUrl' => 'https://cdn-besancon.mapado.com/'
 ];
--- a/site/config/hooks/update-mapado-event.php
+++ b/site/config/hooks/update-mapado-event.php
@ -45,7 +45,7 @@ return function($newPage, $oldPage) {
    $startTime = substr($session->startDate, 11, 5);
    $eventDateId = explode('/', $session->{'@id'});
    $eventDateId = $eventDateId[count($eventDateId) - 1];
-    $ticketingUrl = 'https://cdn-besancon.mapado.com/event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId;
+    $ticketingUrl = option('ticketingUrl') . 'event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId;
    
    if (isset($session->endDate) && !$duration) {
      $endTime = substr($session->endDate, 11 , 5);
--- a/site/config/routes/month-dates.php
+++ b/site/config/routes/month-dates.php
@ -85,7 +85,7 @@ return [
            $startTime = substr($session->startDate, 11, 5);
            $eventDateId = explode('/', $session->{'@id'});
            $eventDateId = $eventDateId[count($eventDateId) - 1];
-            $ticketingUrl = 'https://cdn-besancon.mapado.com/event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId;
+            $ticketingUrl = option('ticketingUrl') . 'event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId;
            
            if (isset($session->endDate) && !$duration) {
              $endTime = substr($session->endDate, 11 , 5);
--- a/site/config/routes/update-mapado-event.php
+++ b/site/config/routes/update-mapado-event.php
@ -51,7 +51,7 @@ return [
          "day" => $day,
          "time" => str_replace(':', 'h', $startTime),
          "duration" => $duration,
-          "ticketingUrl" => 'https://cdn-besancon.mapado.com/event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId
+          "ticketingUrl" => option('ticketingUrl') . 'event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId
        ]);

        $sessionsToSave[] = [
--- a/site/snippets/event-card.php
+++ b/site/snippets/event-card.php
@ -8,7 +8,7 @@
          <h5><?= $event->title() ?></h5>
        </a>
        <?php if ($event->isMapadoEvent() == 'true'): ?>
-          <?php snippet('ticket', ['link' => 'https://cdn-besancon.mapado.com/event/' . $event->mapadoSlug()]) ?>
+          <?php snippet('ticket', ['link' => option('ticketingUrl') . 'event/' . $event->mapadoSlug()]) ?>
        <?php endif ?>
      </div>
      <div>
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@ -1,2 +1,43 @@
+<footer class="main-footer">
+  <h1 class="logo">
+    <span>Nouveau</span>
+    <span>Théâtre</span>
+    <span>Besançon</span>
+  </h1>
+  <form action="">
+    <p>S'inscrire à la newsletter</p>
+    <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email">
+  </form>
+  <div class="main-footer__infos">
+    <p><strong>Contact</strong></p>
+
+    <p>
+      Nouveau Théâtre de Besançon<br>
+      2 avenue Édouard Droz<br>
+      Parc du Casino<br>
+      25000 Besançon
+    </p>
+
+    <p><strong>Accueil</strong></p>
+
+    <p>
+      accueil@ntbesancon.fr<br>
+      03 81 88 55 11
+    </p>
+  </div>
+
+  <div class="main-footer__socials">
+    <p><strong>Suivez nous</strong></p>
+    <ul class="social-icons">
+      <li>
+        <a href="" target="_blank" title="Voir la page Instagram du NTB"><?= svg('assets/images/icons/instagram.svg') ?></a>
+      </li>
+      <li>
+        <a href="" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
+      </li>
+    </ul>
+    <a href="#">Contacts et Mentions légales</a>
+  </div>
+</footer>
 </body>
 </html>
--- a/site/snippets/nav.php
+++ b/site/snippets/nav.php
@ -22,9 +22,7 @@
          </li>
        <?php endforeach ?>
      </ul>
-      <button class="main-nav__ticket">
-        <?= svg('/assets/images/icons/ticket.svg') ?>
-      </button>
+      <?php snippet('ticket', ['link' => option('ticketingUrl')]) ?>
      <button class="main-nav__search">
        <?= svg('/assets/images/icons/search.svg') ?>
      </button>
--- a/site/snippets/ticket.php
+++ b/site/snippets/ticket.php
@ -1,3 +1,9 @@
-<a class="ticket" href="<?= $link ?>" target="_blank" title="Aller à la billetterie">
-  <?= svg('assets/images/icons/ticket.svg') ?>
-</a>
+<?php if (isset($link)): ?>  
+  <a class="ticket" href="<?= $link ?>" target="_blank" title="Aller à la billetterie">
+    <?= svg('assets/images/icons/ticket.svg') ?>
+  </a>
+<?php else: ?>
+  <figure class="ticket" target="_blank" title="Aller à la billetterie">
+    <?= svg('assets/images/icons/ticket.svg') ?>
+  </figure>
+<?php endif; ?>
--- a/site/templates/home.php
+++ b/site/templates/home.php
@ -30,4 +30,9 @@

 <?php snippet('events-grid', ['events' => $orderedEvents->slice(2, 5)]) ?>

+<section class="callout">
+  <h4><?= $site->callout() ?></h4>
+  <a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+</section>
+
 <?php snippet('footer') ?>