Quentin/page bds

components/Article.vue

@@ -82,6 +82,7 @@ export default {
 </script>
 
 <style lang="css" scoped>
+
 #overlay-dots {
   position: absolute;
   bottom: 10%;
@@ -94,4 +95,7 @@ export default {
 #overlay-dots:hover {
   transform: scale(1.4);
 }
-</style>
+.container {
+  margin-bottom: 1rem;
+}
+</style>

components/Builder.vue

@@ -12,12 +12,6 @@
         :scrollTo="component.parallax.scrollTo"
       />
 
-      <Trombinoscope
-        v-else-if="typeOf(component) == 'trombinoscope'"
-        :id="component.trombinoscope.id"
-        :title="component.trombinoscope.title"
-        :members="component.trombinoscope.members"
-      />
       <Scoreboard v-else-if="typeOf(component) == 'scoreboard'" />
       <GraphScore v-else-if="typeOf(component) == 'graphscore'"></GraphScore>
 
@@ -103,6 +97,48 @@
           :features="component.features.data"
         />
       </div>
+
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'clubs'"
+      >
+        <Clubs
+          :clubs="component.clubs.clubs"
+          :color="component.clubs.color"
+        />
+      </div>
+
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'description'"
+      >
+        <Description
+          :quotes="component.description.quotes"
+        />
+      </div>
+
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'social'"
+      >
+        <Social
+          :facebook="component.social.facebook"
+          :instagram="component.social.instagram"
+          :snapchat="component.social.snapchat"
+          :tiktok="component.social.tiktok"
+        />
+      </div>
+
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'trombinoscope'"
+      >
+        <Trombinoscope
+          :title="component.trombinoscope.title"
+          :members="component.trombinoscope.members"
+        />
+      </div>
+
       <p v-else>-</p>
     </div>
   </div>

components/CardTrombinoscope.vue

@@ -15,7 +15,7 @@
       </div>
       <figure class="image is-2by3">
         <img
-          :src="require(`~/assets/trombinoscope/${picture}`)"
+          :src="require(`~/assets/img/${picture}`)"
           :alt="`Photo du trombinoscope du ${poste}`"
         />
       </figure>
@@ -28,7 +28,7 @@ export default {
   name: 'CardTrombinoscope',
   props: {
     poste: { type: String, required: false, default: 'Job not found' },
-    picture: { type: String, required: false, default: 'error.jpg' },
+    picture: { type: String, required: false, default: 'default-profile.webp' },
     url: { type: String, required: false },
     name: { type: String, required: false, default: 'Name not found' },
   },
@@ -38,7 +38,7 @@ export default {
 <style scoped>
 .card-image:hover > div {
   visibility: visible;
-  background: rgba(0, 174, 239, 0.9);
+  background: rgba(160, 160, 160, 0.9);
   transition-duration: 0.6s;
 }
 .card-image:hover > div p {

components/Carousel.vue

@@ -1,5 +1,7 @@
 <template>
-    <b-carousel
+  <section class="container">
+    <p class="actu has-text-centered">Actualités</p>
+  <b-carousel
         pause-text="Défilement automatique en pause"
         pause-info-type="is-info"
         >
@@ -12,6 +14,7 @@
             </section>
         </b-carousel-item>
     </b-carousel>
+  </section>
 </template>
 
 <style scoped>
@@ -20,6 +23,16 @@
         background-repeat:  no-repeat;
         background-size:  cover;
     }
+    .actu {
+       font-size: 60px;
+       font-weight: bold;
+       padding: 20px;
+      font-family: monospace;
+     }
+    .container {
+      margin-top:10px;
+    }
+
 </style>
 
 <script>
@@ -28,4 +41,4 @@ export default {
         carousels: { type: Array, required: true }
     }
 }
-</script>
+</script>

components/Club.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="card feature-card" :style="cardStyle2" >
+    <div class="card-header" :style="cardStyle1" >
+      <h5 class="card-header-title is-centered ">{{ title }}</h5>
+    </div>
+    <div class="card-content" :style="cardStyle2">
+      <div class="media">
+        <div class="media-left">
+          <figure class="image is-128x128">
+            <img :src="image" alt="Placeholder image">
+          </figure>
+        </div>
+        <div class="media-content has-text-centered">
+          <p class="subtitle is-4">Respo(s) :</p>
+          <p class="title is-6 five-lines-max">{{ directedBy }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer has-text-centered" :style="cardStyle2">
+      <p class="card-footer-item"> Heure: {{ hour }}<br>Lieu: {{ location }}</p>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: { type: String, required: true },
+    title: { type: String, required: true },
+    directedBy: { type: String, required: true },
+    hour: { type: String, required: false },
+    location: { type: String, required: false },
+    color: {type: String, default: "rgb(0,156,221)" }
+  },
+  computed: {
+    cardStyle1() {
+      return {
+        "background-color": this.color
+      };
+    },
+    cardStyle2() {
+      return {
+        "border-color": this.color
+      };
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+
+.card-header {
+  background-color: rgb(0,156,221);
+}
+.feature-card:hover {
+  transform: translateY(-10px);
+  transition: transform 0.1s ease-in-out;
+  -o-transition: transform 0.1s ease-in-out;
+  -moz-transition: transform 0.1s ease-in-out;
+  -webkit-transition: transform 0.1s ease-in-out;
+  box-shadow: 0 0 40px grey;
+}
+h5 {
+  color:white;
+}
+
+.card-content {
+  border-bottom:1px solid;
+}
+.card {
+  border:1px solid;
+
+}
+.five-lines-max {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+
+</style>

components/Clubs.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="container">
+    <article class="section is-medium">
+      <p class="title has-text-centered" :style="headerColor">Découvrez nos clubs</p>
+      <br>
+      <div class="columns is-multiline">
+        <div class="column is-one-third" v-for="club in computedClubs" v-bind:key="club.title">
+          <Club
+            :title="club.title"
+            :image="club.image"
+            :directedBy="club.directedBy"
+            :hour="club.hour"
+            :location="club.location"
+            :color="club.color"
+          />
+        </div>
+      </div>
+    </article>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    clubs: { type: Array, required: true },
+    color: { type: String, default: "rgb(0,156,221)"}
+  },
+  computed: {
+    computedClubs(){
+      return this.clubs.map((e) => {
+        e.color = e.color ? e.color : this.color
+        return e
+      })
+    },
+    headerColor() {
+      return {
+        "background-color":this.color }
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+
+.section {
+  padding-top:0px;
+  padding-bottom: 0px;
+}
+
+p {
+  color:white;
+  border-radius: 4px;
+}
+</style>

components/Description.vue

@@ -0,0 +1,44 @@
+<template>
+  <article>
+    <section class="container">
+      <div class="blockquote">
+        <p class="info has-text-centered">Infos</p>
+        <p v-for="quote in quotes" :key="quote"  class="has-text-centered">
+          {{ quote }}
+        </p>
+      </div>
+    </section>
+  </article>
+</template>
+
+<script>
+
+export default {
+  props: {
+    quotes: {Type: Array, required: true}
+  },
+};
+</script>
+
+<style>
+.container {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+.info {
+  font-weight: bold;
+  font-size: 40px;
+}
+.blockquote {
+  padding: 60px;
+  background-color: white;
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+  margin-right: 1.5rem;
+  margin-left: 1.5rem;
+  font-family: "Georgia Pro";
+  font-style: inherit;
+  font-size: 20px;
+}
+
+</style>

components/Footer.vue

@@ -8,6 +8,10 @@
         <ul class="is-list-style">
           <li><small>Axel Duval</small></li>
           <li><small>Florent Hugouvieux</small></li>
+          <li><small>Julien Vendran</small></li>
+          <li><small>Quentin Desbrousses</small></li>
+          <li><small>Alexandre Fernique</small></li>
+          <li><small>Joan Teriihoania</small></li>
         </ul>
       </div>
 
@@ -97,4 +101,4 @@ export default {
     gap: 30px;
   }
 }
-</style>
+</style>

components/Navbar.vue

@@ -194,13 +194,11 @@
         <NuxtLink :to="'/equipe/'" class="navbar-item">
           <div class="navbar-item is-hoverable is-arrowless">
             <p class="navbar-link flex is-arrowless">L'équipe</p>
-            <div id="members"></div>
           </div>
         </NuxtLink>
         <NuxtLink :to="'/intégration/'" class="navbar-item">
           <div class="navbar-item is-hoverable is-arrowless">
             <p class="navbar-link flex is-arrowless">L'1T</p>
-            <div id="members"></div>
           </div>
         </NuxtLink>
 
@@ -210,7 +208,9 @@
           @click="toggle('burger')"
         >
           <NuxtLink to="/compte">
-            <p style="color: #4a4a4a">Mon compte</p>
+            <div class="navbar-item is-hoverable is-arrowless">
+              <p class="navbar-link flex is-arrowless">Mon compte</p>
+            </div>
           </NuxtLink>
         </div>
       </div>