Merge pull request #468 from unepwcmc/ticket-128

Ticket 128

app/assets/stylesheets/base/_base.scss

@@ -70,6 +70,10 @@ sup {
   font-size: .6em;
 }
 
+input {
+  &:focus { @include input-custom-focus; }
+}
+
 //--------------------------------------------------
 // site structure
 //--------------------------------------------------

app/assets/stylesheets/base/_buttons.scss

@@ -20,6 +20,7 @@ $padding-medium: rem-calc(27);
   font-family: $body-font;
   padding: 0;
   text-decoration: none;
+  &:focus { @include input-custom-focus; }
   &:hover { text-decoration: none; }
 }
 @mixin button-font {

app/assets/stylesheets/base/mixins/_cards.scss

@@ -0,0 +1,72 @@
+//--------------------------------------------------
+// shared mixins
+//--------------------------------------------------
+@mixin card-news {
+  .card {
+    background-color: $grey-xlight;
+    margin-bottom: rem-calc(20);
+    text-decoration: none;
+    width: 100%;
+
+    @include breakpoint($small) {
+      margin-bottom: rem-calc(30);
+      width: 48.5%;
+    }
+  }
+
+  .card__content {
+    @include responsive(padding, rem-calc(26 20), rem-calc(28 20), rem-calc(30 20));
+  }
+
+  .card__date { 
+    font-size: rem-calc(14);
+    margin: 0; 
+  }
+
+  .card__h3 { margin: .5em 0; }
+
+  .card__icon { @include image-placeholder(); }
+
+  .card__image {
+    @include flex-center;
+    background-color: $grey-light;
+    background-position: center;
+    background-size: cover;
+    width: 100%; height: rem-calc(265);
+  }
+
+  .card__summary { margin: 0 }
+}
+
+@mixin card-resource($per-row: 4) {
+  .card {
+    margin-bottom: rem-calc(20);
+    padding: rem-calc(12 10);
+    width: 100%;
+
+    @include breakpoint($small) {
+      margin-bottom: rem-calc(50);
+      width: 50%;
+    }
+
+    @include breakpoint($medium) { 
+      @if $per-row == 3 { width: 33%; }
+      @if $per-row == 4 { width: 25%; }
+      min-height: rem-calc(200);
+    }
+  }
+
+  .card--link {
+    border: solid 1px $white;
+    cursor: pointer;
+
+    &:hover { border-color: $grey-dark; }
+  }
+
+  .card__date { 
+    @include text-small; 
+    margin-top: 0;
+  }
+
+  .card__link { text-decoration: none; }
+}

app/assets/stylesheets/components/_hero.scss

@@ -21,12 +21,21 @@
 }
 
 @mixin hero-medium {
-  @include responsive(min-height, rem-calc(200), rem-calc(350), rem-calc(505));
-  @include responsive(padding, rem-calc(30 0 40 0), rem-calc(40 0 40 0), rem-calc(50 0 60 0));
+  min-height: rem-calc(200);
+  @include breakpoint($small) { min-height: rem-calc(350); }
+  @include breakpoint($medium) { min-height: rem-calc(505); }
+}
+
+@mixin hero-padding {
   background: $grey-light center no-repeat;
   background-size: cover;
+  padding: rem-calc(30 0 40 0);
+
+  @include breakpoint($small) { padding: rem-calc(40 0 40 0); }
+  @include breakpoint($medium) { padding: em-calc(50 0 60 0); }
 }
 
+
 @mixin hero-stat-text {
   color: $white;
   font-weight: $bold;
@@ -67,5 +76,6 @@
   @import './hero/hero-area-type';
   @import './hero/hero-basic';
   @import './hero/hero-home';
+  @import './hero/hero-small';
   @import './hero/hero-thematic';
 }

app/assets/stylesheets/components/_listing.scss

@@ -0,0 +1,74 @@
+//--------------------------------------------------
+// variables
+//--------------------------------------------------
+
+//--------------------------------------------------
+// mixins
+//--------------------------------------------------
+
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+.listing {
+  &__bar {
+    @include box-shadow-bottom-grey;
+    background-color: $white;
+    border-bottom: solid 1px $grey;
+    padding: rem-calc(12 0); 
+  }
+
+  &__bar-content {
+    @include container;
+    @include site-width;
+    @include flex;
+    @include flex-v-center;
+  }
+
+  &__cards-news {
+    @include card-news;
+    @include flex;
+    @include flex-h-between;
+    @include flex-wrap;
+  }
+
+  &__cards-resources {
+    @include card-resource($per-row: 3);
+    @include flex;
+    @include flex-wrap;
+  }
+
+  &__filters {
+    @include flex-no-shrink;
+
+    @include breakpoint($small) { 
+      padding-right: rem-calc(24); 
+      width: 33%;
+    }
+
+    @include breakpoint($medium) { width: 25%; }
+  }
+
+  &__filters-trigger { @include button-filter-trigger; }
+
+  &__main {
+    @include container;
+    @include site-width;
+
+    @include breakpoint($small) { display: flex; }
+  }
+
+  &__results {
+    margin-top: rem-calc(24);
+    min-height: rem-calc(300);
+
+    @include breakpoint($small) { min-height: rem-calc(600); }
+  }
+
+  &__results-wrapper { 
+    @include flex-grow;
+  }
+
+  &__spinner {
+    margin-top: rem-calc(55);
+  }
+}

app/assets/stylesheets/components/cards/cards/_cards-articles.scss

@@ -2,41 +2,13 @@
 // classes
 //--------------------------------------------------
 &--articles {
+  @include card-news;
+
   .cards {
     &__cards {
       @include flex;
       @include flex-h-between;
       @include flex-wrap;
     }
   }
-
-  .card {
-    @include responsive(margin-bottom, rem-calc(20), rem-calc(30), rem-calc(30));
-    @include responsive(width, 100%, 48.5%, 48.5%);
-    text-decoration: none;
-
-    &__content {
-      @include responsive(padding, rem-calc(26 20), rem-calc(28 20), rem-calc(30 20));
-    }
-
-      &__date { 
-        font-size: rem-calc(14);
-        margin: 0; 
-      }
-
-      &__h3 { margin: .5em 0; }
-      &__summary { margin: 0 }
-
-    &__image {
-      @include flex-center;
-      background-color: $grey-light;
-      background-position: center;
-      background-size: cover;
-      width: 100%; height: rem-calc(265);
-    }
-
-    &__icon {
-      @include image-placeholder();
-    }
-  }
-} 
+}

app/assets/stylesheets/components/cards/cards/_cards-resources.scss

@@ -2,6 +2,8 @@
 // classes
 //--------------------------------------------------
 &--resources {
+  @include card-resource;
+
   .cards {
     &__cards {
       @include flex;
@@ -15,23 +17,4 @@
       }
     }
   }
-
-  .card {
-    @include responsive(margin-bottom, rem-calc(20), rem-calc(50), rem-calc(50));
-    @include responsive(width, 100%, 50%, 25%);
-    padding: rem-calc(12 10);
-
-    &--link {
-      border: solid 1px $white;
-      cursor: pointer;
-      text-decoration: none;
-
-      &:hover { border-color: $grey-dark; }
-    }
-
-      &__date { 
-        @include text-small; 
-        margin-top: 0;
-      }
-  }
 }

app/assets/stylesheets/components/form/_checkbox.scss

@@ -24,16 +24,17 @@
       @include input-hidden;
 
       &:checked + .checkbox__input-fake {
-        // @include input-custom-checkbox-selected();
         background-color: $primary;
       }
 
-      &:focus + .checkbox__input-fake { @include input-custom-focus; } 
+      &:focus + .checkbox__input-fake { 
+        @include input-custom-focus;
+      } 
     }
 
     &__input-fake {
-      // @include input-custom-checkbox(rem-calc(20)); 
       background-color: $white;
+      border: solid 1px $grey-light;
       border-radius: $radius-global;
       width: 100%; height: calc(100% - 5px);
 

app/assets/stylesheets/components/hero/_hero-area-type.scss

@@ -3,6 +3,7 @@
 //--------------------------------------------------
 &--area-type {
   @include hero-medium;
+  @include hero-padding;
   @include hero-stat-bubble;
   z-index: 0;
 

app/assets/stylesheets/components/hero/_hero-basic.scss

@@ -3,6 +3,7 @@
 //--------------------------------------------------
 &--basic {
   @include hero-medium;
+  @include hero-padding;
   @include flex;
   @include flex-v-center;
   z-index: 0;

app/assets/stylesheets/components/hero/_hero-small.scss

@@ -0,0 +1,10 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+&--small {
+  @include hero-padding;
+  min-height: rem-calc(150);
+
+  @include breakpoint($small) { min-height: rem-calc(210); }
+  @include breakpoint($medium) { min-height: rem-calc(315); }
+}

app/assets/stylesheets/components/hero/_hero-thematic.scss

@@ -3,6 +3,7 @@
 //--------------------------------------------------
 &--thematic {
   @include hero-medium;
+  @include hero-padding;
 
   .hero__container { @include hero-container; }
 

app/assets/stylesheets/helpers/_form-fields.scss

@@ -25,14 +25,8 @@
 }
 
 @mixin input-custom-focus {
-  outline-width: rem-calc(2);
-  outline-style: solid;
-  outline-color: Highlight;
-
-  @media (-webkit-min-device-pixel-ratio:0) {
-    outline-color: -webkit-focus-ring-color;
-    outline-style: auto;
-  }
+  border: solid 2px $black;
+  outline: 0;
 }
 
 //--------------------------------------------------

app/controllers/application_controller.rb

@@ -140,6 +140,7 @@ def store_location
 
   def set_host_for_local_storage
     Rails.application.routes.default_url_options[:host] = request.base_url if Rails.application.config.active_storage.service == :local
-    #ActiveStorage::Current.host = request.base_url if Rails.application.config.active_storage.service == :local
+    # TODO Check why this is not set automatically
+    ActiveStorage::Current.host = request.base_url if Rails.application.config.active_storage.service == :local
   end
 end