Jelajahi Sumber

fix css and list on components

Benjamin Kornblum 7 bulan lalu
induk
melakukan
39019018bb

+ 1 - 1
src/components/Components.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="component in componentStore.components">
+  <div v-for="component in componentStore.components" :key="component.id">
     <div v-if="component.bg === true" class="component component-bg-top"> </div>
     <div :class="`component ${component.type}`">
         <h3>{{component.label}}</h3>

+ 1 - 1
src/components/Navigation.vue

@@ -3,7 +3,7 @@
 
         <RouterLink to="/">{{ t("Home") }}</RouterLink>
 
-        <RouterLink v-for="link in links" v-model="links" :to="`${link.page.path}`">
+        <RouterLink v-for="link in links" v-model="links" :to="`${link.page.path}`" :key="link.id">
             {{ link.Label }}
         </RouterLink>
         <select @change="changeLocale()" v-model="$i18n.locale">

+ 4 - 4
src/components/Timeline.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="timeline">
-        <div v-for="timeline in timelineStore.timelines" :class="`container ${timeline.posittion}`">
+        <div v-for="timeline in timelineStore.timelines" :class="`container ${timeline.posittion}`" :key="timeline.id">
             <div class="content">
               <p :class="`text-${timeline.posittion}`">{{moment(timeline.date).format("DD.MMM.YYYY HH:mm")}}</p>
               <h2>{{timeline.label}}</h2>
@@ -153,14 +153,14 @@ body {
 @media screen and (max-width: 1200px) {
 /* Place the timelime to the left */
   .timeline::after {
-    left: 45px;
+    left: 48px;
   }
 
 /* Full-width containers */
   .container {
     width: 100%;
     padding-left: 88px;
-    padding-right: 25px;
+    padding-right: 0px;
   }
 
 /* Make sure that all arrows are pointing leftwards */
@@ -177,7 +177,7 @@ body {
   }
 
   .left, .right{
-    top: 45px;
+    top: 10px;
     left: 15px;
   }
   .text-left{

+ 1 - 1
src/views/HomeView.vue

@@ -27,7 +27,7 @@
           <Countdown/>
       </div>
       <div class="component component-bg-top"> </div>
-      <div class="component"><Timeline/></div>
+      <div class="component component-padding"><Timeline/></div>
       <div class="component component-bg-bottom"> </div>
       <!--<div class="component component-dark component-padding">
         <Map q="Abendkamp%2017,%2029646%20Bispingen"/>