From daa45934d7239da13d5f34a35063771ebea22219 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sat, 27 Aug 2022 16:10:27 +0200
Subject: [PATCH] feat [front]: "infos-pratiques" page

---
 front/assets/img/ligne-10.svg      |   1 +
 front/assets/img/ligne-7.svg       |   1 +
 front/assets/img/ligne-b.svg       |  15 ++++
 front/components/layout/NavBar.vue |   6 +-
 front/css/app.sass                 |   1 +
 front/pages/infos-pratiques.vue    | 110 +++++++++++++++++++++++++++++
 6 files changed, 131 insertions(+), 3 deletions(-)
 create mode 100644 front/assets/img/ligne-10.svg
 create mode 100644 front/assets/img/ligne-7.svg
 create mode 100644 front/assets/img/ligne-b.svg
 create mode 100644 front/pages/infos-pratiques.vue

diff --git a/front/assets/img/ligne-10.svg b/front/assets/img/ligne-10.svg
new file mode 100644
index 0000000..f0608f2
--- /dev/null
+++ b/front/assets/img/ligne-10.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1050 1050"><circle fill="#E4B327" cx="500" cy="500" r="500"/><path fill="#231F20" d="M379.74 765.04V235.13h-92.366c-24.056 18.722-81.097 54.049-142.52 83.443l-32.381 14.919 36.053 81.18 27.859-14.419c19.372-9.784 72.688-37.59 90.756-51.703v416.5h112.6M649.64 224.66c-159.84 0-194.52 154.6-194.52 277.02 0 122.431 31.597 277.04 191.46 277.04 160.06 0 194.439-154.609 194.439-277.04.021-122.41-31.439-277.02-191.379-277.02zm-1.52 465.36c-74.88 0-78.82-134.93-78.82-188.329 0-54.194 2.248-187.65 78.82-187.65 75.84 0 78.185 132.07 78.185 187.65 0 52.649-2.93 188.329-78.18 188.329h-.005z"/></svg>
\ No newline at end of file
diff --git a/front/assets/img/ligne-7.svg b/front/assets/img/ligne-7.svg
new file mode 100644
index 0000000..b1c8d3f
--- /dev/null
+++ b/front/assets/img/ligne-7.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1050 1050"><circle fill="#F2A4B7" cx="500" cy="500" r="500"/><path fill="#231F20" d="M678 337.67v-86.297H307.29v88.547h257.38l-129.02 240.2c-46.576 86.524-65.308 131.24-65.308 201.36h120.891c-.011-83.36 70.35-241.73 186.77-443.811"/></svg>
\ No newline at end of file
diff --git a/front/assets/img/ligne-b.svg b/front/assets/img/ligne-b.svg
new file mode 100644
index 0000000..1d870d3
--- /dev/null
+++ b/front/assets/img/ligne-b.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny" id="Premier_plan"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92"
+	 overflow="visible" xml:space="preserve">
+<path id="XMLID_9_" fill="#3C91DC" d="M71.3000031,92.0000076H20.7000008C9.2677059,92.0000076,0,82.7323074,0,71.3000107
+	V20.7000008C0,9.2677059,9.2677059,0,20.7000008,0h50.6000023C82.7322922,0,92,9.2677059,92,20.7000008v50.6000099
+	C92,82.7323074,82.7322922,92.0000076,71.3000031,92.0000076z"/>
+<path id="XMLID_1_" fill="#FFFFFF" d="M44.860424,70.3215942h-17.737608V21.5950356h18.4982853
+	c9.1079559,0,17.668457,2.4851685,17.668457,12.3538017c0,5.0394859-4.0050812,8.8342285-7.7998238,9.5243111v0.1383057
+	c5.1057587,0.6900826,9.3874474,4.6937256,9.3874474,11.5960045C64.877182,67.4921036,54.1095695,70.3215942,44.860424,70.3215942z
+	 M43.2036476,29.7391796h-5.3132172V40.920269h5.4515228c5.6589775,0,9.3874474-0.897541,9.3874474-5.52211
+	C52.7294006,30.913332,49.415844,29.7391796,43.2036476,29.7391796z M43.6877136,48.649498h-5.7972832v13.5971069h6.350502
+	c6.8316879,0,9.5228729-2.1394043,9.5228729-7.3157578C53.7638054,49.547039,48.5888939,48.649498,43.6877136,48.649498z"/>
+</svg>
diff --git a/front/components/layout/NavBar.vue b/front/components/layout/NavBar.vue
index 1848432..7fa9770 100644
--- a/front/components/layout/NavBar.vue
+++ b/front/components/layout/NavBar.vue
@@ -64,14 +64,14 @@ const menuItems = [
     label: "Calendrier",
     link: "/calendrier",
   },
-  {
+  /*  {
     label: "Analyses",
     link: "/analyses",
-  },
+  },*/
   {
     label: "Informations pratiques",
     link: "/infos-pratiques",
-  },*/
+  },
   {
     label: "À propos",
     link: "/a-propos",
diff --git a/front/css/app.sass b/front/css/app.sass
index b54697f..5dc06f9 100644
--- a/front/css/app.sass
+++ b/front/css/app.sass
@@ -15,6 +15,7 @@
 @import "bulma/sass/elements/image"
 @import "bulma/sass/elements/notification"
 @import "bulma/sass/elements/other"
+@import "bulma/sass/elements/table"
 @import "bulma/sass/elements/tag"
 @import "bulma/sass/elements/title"
 @import "bulma/sass/form/_all"
diff --git a/front/pages/infos-pratiques.vue b/front/pages/infos-pratiques.vue
new file mode 100644
index 0000000..8a32218
--- /dev/null
+++ b/front/pages/infos-pratiques.vue
@@ -0,0 +1,110 @@
+<template>
+  <main>
+    <section class="section">
+      <h1 class="title is-2">Informations pratiques</h1>
+      <div class="content is-size-5">
+        <p>
+          Le ciné-club de l’ÉNS est un club étudiant de PSL. Nous organisons
+          <span class="has-text-weight-bold">chaque mercredi soir</span> à
+          <span class="has-text-weight-bold">20h30</span> une séance,
+          généralement en 35mm.
+        </p>
+        <p>
+          Nous sommes ouverts à des séances en
+          <span class="has-text-weight-bold">partenariat</span> : vous
+          choisissez le film et apportez votre public, avec de l’animation ou
+          non. N’hésitez pas à
+          <a href="mailto:cineclub-contact@ens.fr">nous contacter</a> !
+        </p>
+        <p>
+          Si vous voulez <span class="has-text-weight-bold">participer</span> en
+          collant des affiches, en tenant la caisse, en apprenant le montage et
+          le démontage de la sainte bobine, en proposant des films, n’hésitez
+          pas à venir nous parler un soir en Dussane ou a nous écrire : vous
+          êtes les bienvenu⋅e⋅s !
+        </p>
+      </div>
+      <div class="is-flex card-container">
+        <div class="card">
+          <header class="card-content">
+            <h3 class="title is-4 mb-0">Lieu</h3>
+          </header>
+          <div class="card-content columns">
+            <div class="column is-two-fifths">
+              Salle Dussane<br />45 rue d'Ulm<br />Paris 5e
+            </div>
+            <div class="column is-three-fifths">
+              <ul>
+                <li
+                  v-for="(transport, index) in transports"
+                  :key="index"
+                  class="is-flex mb-2"
+                >
+                  <img :src="transport.iconPath" class="mr-2" width="24" />
+                  <div v-html="transport.stations.join('<br>')" />
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="card" style="width: fit-content">
+          <header class="card-content">
+            <h3 class="title is-4 mb-0">Tarifs</h3>
+          </header>
+          <div class="card-content">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>COF</th>
+                  <th>Non-COF</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>1 séance</th>
+                  <td>4€</td>
+                  <td>5€</td>
+                </tr>
+                <tr>
+                  <th>Carte 10 séances</th>
+                  <td>30€</td>
+                  <td>35€</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import lineB from "~/assets/img/ligne-b.svg"
+import line7 from "~/assets/img/ligne-7.svg"
+import line10 from "~/assets/img/ligne-10.svg"
+
+const transports = [
+  {
+    iconPath: lineB,
+    stations: ["Luxembourg"],
+  },
+  {
+    iconPath: line7,
+    stations: ["Place Monge", "Censier Daubenton"],
+  },
+  {
+    iconPath: line10,
+    stations: ["Cardinal Lemoine"],
+  },
+]
+</script>
+
+<style scoped lang="sass">
+.card-container
+  justify-content: space-evenly
+
+  .card
+    flex-basis: 400px
+</style>