Quentin/page bde

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

@@ -11,7 +11,6 @@
         :size="component.parallax.size"
         :scrollTo="component.parallax.scrollTo"
       />
-
       <Trombinoscope
         v-else-if="typeOf(component) == 'trombinoscope'"
         :id="component.trombinoscope.id"
@@ -35,6 +34,32 @@
         />
       </div>
 
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'timeline'"
+      >
+        <Timeline
+          :items="component.timeline.items"
+        />
+      </div>
+
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'carousel'"
+      >
+        <Carousel
+        :carousels="component.carousel.carousels"
+        />
+      </div>
+      <div
+        class="background-gradient-lines"
+        v-else-if="typeOf(component) == 'carousel'"
+      >
+        <Carousel
+        :carousels="component.carousel.carousels"
+        />
+      </div>
+
       <div
         class="background-gradient-lines"
         v-else-if="typeOf(component) == 'timeline'"
@@ -103,15 +128,60 @@
           :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"
+          :mail="component.social.mail"
+        />
+      </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>
 </template>
 
 <script>
+import SocialNetworks from '~/components/Social';
 import GraphScore from '~/components/GraphScore';
+import Trombinoscope from '~/components/Trombinoscope';
 export default {
-  components: { GraphScore },
+  components: { Trombinoscope, SocialNetworks, GraphScore},
   props: {
     components: { type: Array, required: true, default: () => [] },
   },

components/CardTrombinoscope.vue

@@ -6,17 +6,21 @@
       </p>
     </header>
     <div class="card-image">
-      <div>
-        <p>
-          <strong>{{ name }}</strong
-          ><br /><br /><br />
-          <a v-if="url" :href="url">Lien: Facebook</a>
+      <div class="card-desc">
+        <p class="has-text-centered">
+          <strong class="has-text-white">{{ name }}</strong>
+          <template v-if="description"> <br />{{ description }} </template>
+          <template v-if="url">
+            <br />
+            <a :href="url">Lien: Facebook</a>
+          </template>
         </p>
       </div>
       <figure class="image is-2by3">
         <img
-          :src="require(`~/assets/trombinoscope/${picture}`)"
-          :alt="`Photo du trombinoscope du ${poste}`"
+          v-if="picture"
+          :src="require(`~/assets/img/${picture}`)"
+          :alt="`${picture}`"
         />
       </figure>
     </div>
@@ -25,49 +29,44 @@
 
 <script>
 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: 'logo380.png' },
     url: { type: String, required: false },
-    name: { type: String, required: false, default: 'Name not found' },
+    name: { type: String, required: true, default: 'Name not found' },
+    description: { type: String, required: false },
   },
 };
 </script>
 
 <style scoped>
-.card-image:hover > div {
+.card-desc {
+  width: 100%;
+}
+.card-image:hover > .card-desc {
   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 {
+.card-image:hover > .card-desc p {
   transform: translateY(0%);
   transition-duration: 0.6s;
 }
 a {
-  color: white;
   text-decoration: underline;
 }
-.card-image div p {
-  transform: translateY(80%);
+.card-image .card-desc p {
+  transform: translateY(20%);
   margin: auto;
 }
 div .card-image div {
   position: absolute;
   visibility: hidden;
   display: flex;
   font-size: x-large;
-  color: white;
-  text-align: center;
-  width: -webkit-fill-available;
-  height: -webkit-fill-available;
   z-index: 1;
 }
-p strong {
-  color: white;
-}
 .card {
-  box-shadow: 0 0 100px grey;
+  box-shadow: 0 0 25px grey;
 }
 </style>

components/Carousel.vue

@@ -1,31 +1,58 @@
 <template>
-    <b-carousel
+  <section class="mt-2">
+    <p
+      class="
+        py-6
+        is-size-1
+        has-text-weight-bold
+        is-family-monospace
+        has-text-centered
+      "
+    >
+      Actualités
+    </p>
+    <div class="px-6">
+      <b-carousel
         pause-text="Défilement automatique en pause"
         pause-info-type="is-info"
-        >
+      >
         <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
-            <section class="hero is-large bg-img" v-bind:style="{'background-image': `url('${carousel.picture}')`}">
-                <div class="hero-body has-text-centered" style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )">
-                    <h1 class="title has-text-white">{{carousel.title}}</h1>
-                    <p class="has-text-white">{{ carousel.content }}</p>
-                </div>
-            </section>
+          <b-image
+            class="image is-5by3"
+            :src="
+              carousel.picture ? carousel.picture : 'https://picsum.photos/1000'
+            "
+          />
+          <div class="has-text-centered carousel-item-desc py-6">
+            <h1 class="title has-text-white">{{ carousel.title }}</h1>
+            <p
+              class="has-text-white"
+              v-for="(line, j) in carousel.content"
+              :key="j"
+            >
+              {{ line }}
+            </p>
+          </div>
         </b-carousel-item>
-    </b-carousel>
+      </b-carousel>
+    </div>
+  </section>
 </template>
 
-<style scoped>
-    .bg-img {
-        background-position: center center;
-        background-repeat:  no-repeat;
-        background-size:  cover;
-    }
-</style>
-
 <script>
 export default {
-    props: {
-        carousels: { type: Array, required: true }
-    }
+  props: {
+    carousels: { type: Array, required: true },
+  },
+};
+</script>
+
+<style scoped>
+.carousel-item-desc {
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
 }
-</script>
+</style>
+

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>