adapt homepage

impresso · Mar 25, 2024 · 28fe323 · 28fe323
1 parent 405936b
commit 28fe323
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/src/components/HomePage2020.vue b/src/components/HomePage2020.vue
@@ -142,16 +142,11 @@
               </p>
             </section>
 
-            <section class="mx-4">
+            <section>
               <h2>
                 How can newspapers help understand the past? How to explore them?
               </h2>
 
-              <p class="text-white my-5">
-                Take a moment to familiarise yourself with <em>impresso</em>'s
-                <b>advanced search</b> and <b> exploration workflows</b>
-              </p>
-
               <b-container class="challenges my-4 enhance-contents border-0 p-0  shadow">
                 <b-row class="p-0 rounded" style="overflow: hidden">
                   <b-col lg="6" md="12">
@@ -208,7 +203,7 @@
             </p>
             <div class="d-flex flex-wrap">
               <Recipe
-                v-for="recipe in recipes"
+                v-for="recipe in computedRecipesWithQuery"
                 class="m-3 p-3"
                 :key="recipe.caption"
                 :query="recipe.query"
@@ -221,8 +216,23 @@
           </div>
         </div>
       </div>
-
-      <home-page-footer />
+      <!-- video recipes (old) -->
+      <div class="d-flex flex-wrap align-items-center">
+        <h2 class="p-3 m-3 " style="max-width: 480px">
+          Take a moment to familiarise yourself with <em>impresso</em>'s <b>advanced search</b> and
+          <b> exploration workflows</b>
+        </h2>
+        <Recipe
+          v-for="recipe in computedRecipesWithoutQuery"
+          class="p-3 m-3 "
+          :key="recipe.caption"
+          :caption="recipe.caption"
+          :text="recipe.text"
+          :video="recipe.video"
+          :img_src="recipe.img_src"
+        />
+      </div>
+      <HomePageFooter />
     </i-layout-section>
   </i-layout>
 </template>
@@ -306,6 +316,12 @@ export default {
     user() {
       return this.$store.getters['user/user']
     },
+    computedRecipesWithQuery() {
+      return this.recipes.filter(recipe => recipe.query)
+    },
+    computedRecipesWithoutQuery() {
+      return this.recipes.filter(recipe => !recipe.query)
+    },
   },
   methods: {
     handleFiltersChanged(filters) {

diff --git a/src/components/HomePageFooter.vue b/src/components/HomePageFooter.vue
@@ -1,10 +1,10 @@
 <template>
-  <footer class="p-5 bg-dark mt-5">
-    <div class="container">
+  <footer class="bg-dark m-xl-3">
+    <div class="container-fluid">
       <div class="line double my-4"></div>
       <h3 class="mb-3">Partners</h3>
       <div class="row">
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-6 col-xl-3">
           <div class="logo">
             <a
               href="https://dhlab.epfl.ch/"
@@ -19,7 +19,7 @@
             </p>
           </div>
         </div>
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-6 col-xl-3">
           <div class="logo ">
             <a
               href="http://www.cl.uzh.ch/en.html"
@@ -31,15 +31,15 @@
             <p>Institute of Computational Linguistics Zurich University, Switzerland</p>
           </div>
         </div>
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-6 col-xl-3">
           <div class="logo ">
             <a href="/consortium/#unil" title="History department, University of Lausanne, UNIL.">
               <UnilLogo class="mb-3" />
             </a>
             <p>History department, <br />University of Lausanne, UNIL.</p>
           </div>
         </div>
-        <div class="col-sm-12 col-md-6">
+        <div class="col-md-12 col-lg-6 col-xl-3">
           <div class="logo">
             <a
               href="https://www.c2dh.uni.lu"

diff --git a/src/components/Recipe.vue b/src/components/Recipe.vue
@@ -4,11 +4,7 @@
 
     <p>{{ text }}</p>
 
-    <a v-bind:href="video" target="_blank" class="btn btn-secondary text-light small-caps">{{
-      $t('watch_video')
-    }}</a>
-
-    <a v-bind:href="video" target="_blank" class="Recipe__videoWrapper">
+    <a v-if="!query || showVideo" v-bind:href="video" target="_blank" class="Recipe__videoWrapper">
       <div class="position-absolute">
         <img v-bind:src="img_src" alt="video previe" class="img-fluid rounded" />
         <div class="Recipe__videoBackground "></div>
@@ -57,6 +53,7 @@ export default {
     video: String,
     img_src: String,
     query: String,
+    showVideo: Boolean,
   },
 
   data: () => ({}),
@@ -102,6 +99,7 @@ export default {
   right: 0;
   bottom: 0;
   border-radius: var(--impresso-border-radius-md);
+  object-fit: cover;
 }
 
 .Recipe__videoBackground {