Merge pull request #480 from unepwcmc/ticket-55

Ticket 55
unepwcmc · Aug 17, 2020 · 6666679 · 6666679
2 parents 3fdb584 + 537dcc2
commit 6666679
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 34 deletions.
diff --git a/app/assets/stylesheets/components/_sticky.scss b/app/assets/stylesheets/components/_sticky.scss
@@ -4,40 +4,63 @@
 $sticky-bar-background-color: $white;
 $sticky-bar-padding: rem-calc(10);
 
+@mixin sticky-bar-stuck {
+  @include box-shadow-grey-light;
+  width: 100%;
+
+  display: block;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+@mixin sticky-bar-wrapper {
+  background-color: $sticky-bar-background-color;
+  z-index: 1;
+}
+
 //----------------------------------------
 // sticky bar
 //----------------------------------------
-.sticky-bar {
-  &--basic {
-    @include gutters;
-    width: 100%;
-
-    @include breakpoint($large) { padding: 0; }
-
-    .sticky-bar {
-      &__wrapper {
-        background-color: $sticky-bar-background-color;
-        padding-top: $sticky-bar-padding;
-        padding-bottom: $sticky-bar-padding;
-        z-index: 1;
-
-        &.sticky-bar--stuck {
-          @include box-shadow-grey-light;
-          width: 100%;
-
-          display: block;
-          position: fixed;
-          top: 0;
-          right: 0;
-          left: 0;
-
-          .sticky-bar__content { @include gutters; }
-        }
+.sticky-bar--basic {
+  @include gutters;
+  width: 100%;
+
+  @include breakpoint($large) { padding: 0; }
+
+  .sticky-bar {
+    &__wrapper {
+      @include sticky-bar-wrapper;
+      padding-top: $sticky-bar-padding;
+      padding-bottom: $sticky-bar-padding;
+
+      &.sticky-bar--stuck {
+        @include sticky-bar-stuck;
+
+        .sticky-bar__content { @include gutters; }
       }
+    }
+
+    &__content {
+      margin: 0 auto;
+      max-width: $site-width;
+    }
+  }
+}
+
+.sticky-bar--slide-in {
+  width: 100%;
+
+  .sticky-bar {
+    &__wrapper {
+      @include sticky-bar-wrapper;
+      top: rem-calc(-200);
+
+      &.sticky-bar--stuck {
+        @include sticky-bar-stuck;
 
-      &__content {
-        margin: 0 auto;
-        max-width: $site-width;
+        transition: top linear .25s;
       }
     }
   }

diff --git a/app/views/green_list/index.html.erb b/app/views/green_list/index.html.erb
@@ -1,3 +1,5 @@
+<%= render partial: "./partials/bars/topbar-secondary" %>
+
 <%= render partial: "./layouts/partials/hero-thematic", locals: { 
   button_text: t('thematic_area.green_list.hero.button_text'),
   button_url: search_areas_path(filters: @filters),

diff --git a/app/views/partials/bars/_topbar-secondary.html.erb b/app/views/partials/bars/_topbar-secondary.html.erb
@@ -1,7 +1,13 @@
 <div class="topbar--secondary">
-  <div class="topbar__container container">
-    <%= render "partials/social/sharing" %>
+  <sticky-bar 
+    class="sticky-bar--slide-in"
+    trigger-element=".sm-trigger-sticky-bar"
+  >
+    <div class="topbar__container container">
+      <%= render "partials/social/sharing" %>
 
-    <%= render partial: "partials/download/download", locals: { classes: 'download--small' } %>
-  </div>
-</div>
+      <%= render partial: "partials/download/download", locals: { classes: 'download--small' } %>
+    </div>
+  </sticky-bar>
+</div>
+<span class="sm-trigger-sticky-bar"></span>