Quentin/page bda

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,6 +11,7 @@
         :size="component.parallax.size"
         :scrollTo="component.parallax.scrollTo"
       />
+
       <div
         class="background-gradient-lines"
         v-else-if="typeOf(component) == 'article'"
@@ -24,7 +25,7 @@
           :picture="component.article.picture"
         />
       </div>
-      
+
       <div
         class="background-gradient-lines"
         v-else-if="typeOf(component) == 'timeline'"
@@ -33,7 +34,16 @@
           :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'"
@@ -97,13 +107,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"
+          :membres="component.trombinoscope.membres"
+        />
+      </div>
+
       <p v-else>-</p>
     </div>
   </div>
 </template>
 
 <script>
+
+import SocialNetworks from '~/components/Social';
+import Trombinoscope from '~/components/Trombinoscope';
 export default {
+  components: { Trombinoscope, SocialNetworks },
   props: {
     components: { type: Array, required: true, default: () => [] },
   },

components/CardTrombinoscope.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title is-centered">
+          {{poste}}
+        </p>
+      </header>
+      <div class="card-image">
+        <div>
+            <p>
+              <strong>{{name}}</strong><br>{{ description }}<br>
+           <a v-if="url" :href="url">Lien: Facebook</a> </p>
+        </div>
+        <figure class="image is-2by3">
+          <img v-if="picture" :src="require(`~/assets/img/bds/trombinoscope/${picture}`)" :alt="`${picture}`">
+        </figure>
+      </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+  props:{
+    poste:{type:String ,required: false , default:"Job not found"},
+    picture :{type:String, required: false,default:"logo.PNG" },
+    url:{type:String,required:false},
+    name:{type:String,required:true,default:"Name not found" },
+    description:{type:String, required: false }
+
+  },
+
+};
+
+</script>
+
+<style scoped>
+
+.card-image:hover>div {
+  visibility: visible;
+  background: rgba(160, 160, 160, 0.9);
+  transition-duration: 0.6s;
+
+}
+.card-image:hover>div p{
+  transform: translateY(0%);
+  transition-duration: 0.6s;
+}
+a{
+  color: white;
+  text-decoration:underline;
+}
+.card-image div p{
+  transform: translateY(80%);
+  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 25px grey;
+}
+
+</style>

components/Carousel.vue

@@ -1,5 +1,8 @@
 <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 +15,8 @@
             </section>
         </b-carousel-item>
     </b-carousel>
+  </section>
+
 </template>
 
 <style scoped>
@@ -20,6 +25,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 +43,5 @@ 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>