style: Add styles to greeter for not-logged-in users according to Fig…

…ma mockup. (#8009)
openfoodfacts · Feb 3, 2023 · 28741d0 · 28741d0
1 parent dab7ac3
commit 28741d0
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 35 deletions.
diff --git a/html/images/illustrations/puzzle-big.svg b/html/images/illustrations/puzzle-big.svg
diff --git a/lang-default/en/texts/index.html b/lang-default/en/texts/index.html
@@ -1,27 +1,32 @@
-<h1>Open Food Facts</h1>
-
-<div class="row hide-when-logged-in">
-
-	<div class="medium-12 large-6 columns">
-
-<h2>Discover</h2>
-
-<p>Open Food Facts is a food products database made by everyone, for everyone.</p>
-<p>You can use it to make better food choices, and as it is open data, anyone can re-use it for any purpose.</p>
-
-<p>&rarr; <a href="/discover">Learn more about Open Food Facts</a></p>
-
+<div class="hide-when-logged-in homepage-greeter-wrapper">
+<div class="homepage-greeter">
+	<div class="homepage-greeter__discover">
+    <div class="homepage-greeter__discover--content">
+      <div>
+        <h2>Discover</h2>
+        <p>Open Food Facts is a food products database made by everyone, for everyone. You can use it to make better food choices, and as it is open data, anyone can re-use it for any purpose.</p>
+      </div>
+      <a class="button round secondary small homepage-greeter__button" href="/discover"><span class="material-icons">auto_stories</span>Learn more about Open Food Facts</a>
+    </div>
+    <div class="homepage-greeter__discover--image">
+      <img src="images/illustrations/globe.svg" alt="Discover Open Food Facts." />
+    </div>
 	</div>
-
-	<div class="medium-12 large-6 columns">
-
-<h2>Contribute</h2>
-
-<p>Open Food Facts is a non-profit project developed by thousands of volunteers from around the world.
-You can start contributing by <a href="/open-food-facts-mobile-app">adding a product from your kitchen with our app for iPhone or Android</a>, and we have lots of
-exciting projects you can contribute to in many different ways.</p>
-
-<p>&rarr; <a href="/contribute">Learn more about how you can join us</a></p>
-
+	<div class="homepage-greeter__contribute">
+    <div class="homepage-greeter__contribute--content"> 
+      <div>
+        <h2>Contribute</h2>
+        <p>
+        Open Food Facts is a non-profit project developed by thousands of volunteers from around the world.
+        You can start contributing by <a href="/open-food-facts-mobile-app">adding a product from your kitchen with our app for iPhone or Android</a>, and we have lots of
+        exciting projects you can contribute to in many different ways.
+        </p>
+      </div>
+      <a class="button round secondary small homepage-greeter__button" href="/contribute"><span class="material-icons">add_task</span>Learn more about how you can join us</a>
+    </div>
+    <div class="homepage-greeter__contribute--image">
+      <img src="images/illustrations/puzzle-big.svg" alt="Contribute to Open Food Facts." />
+    </div>
 	</div>
 </div>
+</div>
diff --git a/scss/_off.scss b/scss/_off.scss
@@ -47,6 +47,7 @@ $material-icons: "Material Icons";
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
+  font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
@@ -550,11 +551,6 @@ ul.pagination li a {
   color: black;
 }
 
-.share_button,
-.edit_button {
-  //float: right;
-}
-
 .delete_button {
   float: right;
   margin-right: 10px;
@@ -1327,3 +1323,5 @@ $section-blue: #6d85d9;
 #packaging_0_row {
   display:none;
 }
+
+.if-empty-dnone:empty { display: none !important; }
diff --git a/scss/_product-list.scss b/scss/_product-list.scss
@@ -128,6 +128,7 @@ $productsGutter:12;
   display: flex;
   align-items: center;
   gap: 1rem;
+  z-index: 1;
   @media #{$small-only} {
     flex-direction: column;
     padding: .5rem;
@@ -221,3 +222,97 @@ $productsGutter:12;
         height: auto !important;
     }
 }
+
+// Greeter CSS
+// ~/lang-default/en/texts/index.html
+
+$greeter-discover-bgcolor: #E3F6FF;
+$greeter-contribute-bgcolor: #FFF2DF;
+
+// RTL Support
+[dir=rtl] .homepage-greeter-wrapper::before {
+  background: linear-gradient(90deg, $greeter-contribute-bgcolor 50%, $greeter-discover-bgcolor 50%) !important;
+}
+
+[dir=rtl] .homepage-greeter__discover,
+[dir=rtl] .homepage-greeter__contribute {
+  flex-direction: row-reverse !important;
+}
+// end of RTL Support
+
+.homepage-greeter {
+  display: inline-grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  margin-top: -.5rem;
+  @media #{$small-only} { grid-template-rows: max-content; width: 100%; }
+  @media #{$large-up} { max-width: 1280px; grid-template-rows: 300px; }
+  & .show-when-logged-in { display: none; }
+  &-wrapper {
+    display: flex;
+    justify-content: center;
+    z-index: 0;
+    &::before {
+      display: inline-block;
+      content: '';
+      position: absolute;
+      margin-top: -.5rem;
+      width: 100vw;
+      height: 100%;
+      max-height: 300px;
+      background: linear-gradient(90deg, $greeter-discover-bgcolor 50%, $greeter-contribute-bgcolor 50%);
+    }
+  }
+  &__discover, 
+  &__contribute {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    z-index: 1;
+    &--content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      max-width: 100vw;
+      padding: 2rem;
+      z-index: 1;
+    }
+    &--image {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      @media #{$small-only} { display: none; }
+      @media #{$medium-only} { opacity: .25; }
+      img {
+        position: absolute;
+        max-width: none;
+        height: 80%;
+      }
+    }
+  }
+  &__discover { 
+    background-color: $greeter-discover-bgcolor;
+    &--content {
+      @media #{$xlarge-up} { padding-left: 0; }
+    }
+    &--image > img {
+      top: 1rem;
+      right: 1rem;
+    }
+  }
+  &__contribute {
+    background-color: $greeter-contribute-bgcolor;
+    &--image > img {
+      top: 0;
+      right: 0;
+    }
+  }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    background-color: $white !important;
+    margin-top: 2rem;
+    &:hover { background-color: #F6F6F6 !important; }
+  }
+}
diff --git a/templates/web/common/includes/list_of_products.tt.html b/templates/web/common/includes/list_of_products.tt.html
@@ -1,4 +1,5 @@
 <!-- start templates/[% template.name %] --> 
+<!--
 <div> 
   <div class="row"> 
     [% IF error %]
@@ -34,7 +35,8 @@
     [% END %]
   </div>
 [% END %]
-
+-->
+
 <div class="block short block_ristreto">
   <div class="row">
     <div class="small-12 columns filterProducts">

diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html
@@ -246,20 +246,20 @@ <h1 itemprop="name">[% title %]
                   </h1>
 										</div>
 									</div>
-									[% content %]
+								  [% content %]
 								</div>
 							[% ELSE %]
 								<div class="row">
-									<div class="small-12 column v-space-short">
-										<h1>[% title %]</h1>
+                  <div class="small-12 column"> 
+										<h1 class="if-empty-dnone">[% title %]</h1>
 									</div>
 								</div>
 								[% content %]
 							[% END %]
 						[% ELSE %]
 							<div class="row">
-								<div class="small-12 column v-space-short">
-									<h1>[% title %]</h1>
+								<div class="small-12 column">
+									<h1 class="if-empty-dnone">[% title %]</h1>
 									[% content %]
 								</div>
 							</div>