Merge pull request #400 from unepwcmc/pame-integration

Pame integration
unepwcmc · Aug 4, 2020 · ef2364d · ef2364d
2 parents d9d6f35 + 810c5f7
commit ef2364d
Show file tree

Hide file tree

Showing 42 changed files with 2,031 additions and 301 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,8 +1,13 @@
 source 'https://rubygems.org'
+source 'https://wcmc-gems:[email protected]/'
 
 gem 'rails', '5.2.0'
 gem 'webpacker', '~> 4.0.2'
 
+#gem 'wcmc-components', path: "../web-components/gems/wcmc_components"
+gem 'wcmc-components', '~>0.0.5'
+
+
 gem 'bourbon'
 gem "neat"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -7,6 +7,7 @@ GIT
 
 GEM
   remote: https://rubygems.org/
+  remote: https://wcmc-gems:[email protected]/
   specs:
     actioncable (5.2.0)
       actionpack (= 5.2.0)
@@ -1281,6 +1282,7 @@ GEM
     vuejs-rails (2.3.2)
     warden (1.2.8)
       rack (>= 2.0.6)
+    wcmc-components (0.0.5)
     webmock (1.22.6)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
@@ -1363,6 +1365,7 @@ DEPENDENCIES
   turnout (~> 2.5.0)
   uglifier (~> 4.1.17)
   vuejs-rails (~> 2.3.2)
+  wcmc-components (~> 0.0.5)
   webmock (~> 1.22.0)
   webpacker (~> 4.0.2)
   whenever

diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
@@ -166,6 +166,8 @@ $site-width-rem: rem-calc($site-width);
 // $site-width-medium-laptop: 78%;
 $site-width-medium-desktop: rem-calc(750);
 
+$filters-menu-max-height: rem-calc(300);
+
 //--------------------------------------------------
 // tables
 //--------------------------------------------------

diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
@@ -79,15 +79,16 @@ $padding-medium: rem-calc(27);
     display: inline-block;
   }
 }
-@mixin button-outline ($colour: $black) {
+@mixin button-outline ($colour: $black, $border-size: 1px) {
   @include button-basic;
   @include button-font;
   @include button-height;
   @include button-padding;
   @include button-radius;
-  border: solid 2px $colour;
+  border: solid $border-size $colour;
   color: $colour;
 }
+
 //--------------------------------------------------
 // mixins for classes
 //--------------------------------------------------
@@ -121,11 +122,28 @@ $padding-medium: rem-calc(27);
   @include button-with-icon;
   &::after { @include icon-chevron-black-up; }
 }
+
+@mixin button-dropdown-filter {
+  @include button-dropdown;
+  @include button-outline($black, 1px);
+
+  @include breakpoint-down($medium) {
+    font-size: rem-calc(16);
+    padding: rem-calc(1 11);
+    height: rem-calc(34);
+  }
+
+  &:after {
+    @include breakpoint-down($medium) { display: none; }
+  }
+}
+
 @mixin button-external {
   @include button-with-icon;
   &::after { 
     @include icon-arrow-external; 
     display: inline-block;
+
   }
 }
 @mixin button-filter-trigger {
@@ -153,6 +171,7 @@ $padding-medium: rem-calc(27);
     }
   }
 }
+@mixin button-primary { @include button-block; }
 @mixin button-next { @include button-basic; }
 @mixin button-prev { @include button-basic; }
 @mixin button-search {
@@ -239,5 +258,5 @@ $padding-medium: rem-calc(27);
   }
   &--outline-black { @include button-outline($black); }
   &--outline-white { @include button-outline($white); }
-  &--primary { @include button-block; }
-}
+  &--primary { @include button-primary; }
+}
diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss
@@ -1,83 +1,11 @@
 //--------------------------------------------------
 // variables
 //--------------------------------------------------
-$filters-button-close: 70;
-$filters-title-height: 54;
 
 //--------------------------------------------------
 // classes
 //--------------------------------------------------
-.filter {
-  &__pane {
-    @include responsive(background-color, $grey-xlight, transparent, transparent);
-    @include responsive(top, 0, unset, unset);
-    @include responsive(left, 0, unset, unset);
-    width: 100%; height: 100vh;
-
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: $z-100;
-
-    @include breakpoint($small) {
-      border-right: solid 1px $grey;
-      margin-right: rem-calc(24);
-      height: 100%;
-
-      position: initial;
-      top: unset;
-      bottom: unset;
-    }
-  }
-
-  &__pane-view {
-    @include flex;
-    @include flex-center;
-    background-color: $grey-xdark;
-    color: $white;
-    font-size: rem-calc(20);
-    font-weight: $bold;
-    width: 100%; height: rem-calc(63);
-
-    position: absolute;
-    bottom: 0;
-
-    @include breakpoint($small) { display: none; }
-  }
-
-  &__pane-topbar {
-    @include flex;
-    @include flex-v-center;
-    border-bottom: solid 1px $grey;
-    padding-right: rem-calc(24);
-    padding-left: rem-calc(24);
-    width: 100%; height: calc(#{$filters-title-height}px);
-
-    @include breakpoint($small) { display: none; }
-  }
-
-  &__pane-title { font-size: rem-calc(18); }
-
-  &__filter-groups {
-    @include responsive(overflow, scroll, initial, initial);
-    @include responsive(padding, rem-calc(24 22), rem-calc(24 22 24 0), rem-calc(24 22 24 0));
-    @include responsive(height, calc(100vh - #{$filters-title-height}px - #{$filters-button-close}px), 100%, 100%);
-    width: 100%;
-  }
-
-  &__group {
-    margin-bottom: rem-calc(24);  
-  }
-
-  &__options {
-    @include text-filter;
-    overflow-y: scroll;
-    max-height: rem-calc(250);
-  }
-
-  &__trigger {
-    @include button-filter-trigger;
-
-    &.disabled { @include button-disabled; }
-  }
-}
+.filters {
+  @import './filters/filters-pame';
+  @import './filters/filters-sidebar';
+}
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
@@ -11,7 +11,6 @@ $table-horizontal-scroll-row-width-mobile: $table-horizontal-scroll-cell-width-m
 $table-horizontal-scroll-row-width-tablet: $table-horizontal-scroll-cell-width-tablet * 4;
 $table-horizontal-scroll-row-width-desktop: 80vw;
 
-
 //--------------------------------------------------
 // mixins
 //--------------------------------------------------
@@ -25,124 +24,39 @@ $table-horizontal-scroll-row-width-desktop: 80vw;
   @include responsive(margin-bottom, rem-calc(30), rem-calc(32), rem-calc(32), rem-calc(16));
 }
 
+// fix the columns widths so that they don't change
+// size when you use the pagination
+@mixin table-pame-column-widths() {
+  &:first-child { width: 142px; }
+  &:nth-child(2) { width: 138px; }
+  &:nth-child(3) { width: 127px; }
+  &:nth-child(4) { width: 128px; }
+  &:nth-child(5) { width: 100px; }
+  &:nth-child(6) { width: 138px; }
+  &:nth-child(7) { width: 128px; }
+  &:nth-child(8) { width: 128px; }
+  &:nth-child(9) { width: 110px; }
+}
+
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+.filtered-table {
+  min-height: $filters-menu-max-height + rem-calc(80);
+}
+
 //--------------------------------------------------
 // table head
 //--------------------------------------------------
 .table-head {
-  &--horizontal-scroll {
-    @include responsive(display, none, none, none, flex);
-    @include flex-nowrap;
-    @include box-shadow-grey;
-    background-color: $table-head-bg-color;
-    color: $white;
-    margin-top: rem-calc(26);
-  }
-
-  .table-head {
-    &__cell {
-      @include flex;
-      @include flex-h-start;
-      @include flex-v-start;
-      @include table-cell-basic;
-    }
-
-    &__title { margin-right: rem-calc(6); }
-
-    &__tooltip { margin-left: auto; }
-
-    &__sort {
-      @include button-plain;
-      @include icon-sort;
-      padding: rem-calc(3 6);
-    }
-  }
-
-  .tooltip__target {
-    color: $grey-xdark;
-  }
+  @import './table/table-head-horizontal-scroll';
+  @import './table/table-head-pame';
 }
 
-.table {
 //--------------------------------------------------
-// tables
+// table body
 //--------------------------------------------------
-  &--horizontal-scroll {
-
-    .table {      
-      &__row {
-        @include table-row-spacing;
-        border: none; //temp-refresh needed to override conflicting old styles
-
-        @include breakpoint($large) {
-          border: solid 1px $grey;
-        }
-      }
-
-        &__row-title {
-          @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0);
-          @include responsive(margin-right, $gutter-small, $gutter-medium, $gutter-medium, 0);
-          @include responsive(display, block, block, block, none);
-          font-size: rem-calc(18);
-          font-weight: 700;
-          margin-bottom: rem-calc(10);
-        }
-
-        &__scroll-wrapper {
-          overflow-x: scroll;
-          @include breakpoint($large) { overflow-x: inherit; }
-        }
-
-          &__scroll {
-            @include flex-nowrap;
-            @include responsive(width, $table-horizontal-scroll-row-width-mobile, $table-horizontal-scroll-row-width-tablet, $table-horizontal-scroll-row-width-tablet, 100%);
-            display: flex;
-          }
-
-            &__cell {
-              @include table-cell-basic;
-              @include box-shadow-grey-light;
-              border: solid 1px $grey-light;
-
-              display: flex; //temp-refresh
-              flex-direction: column; //temp-refresh
-
-              @include breakpoint($large) { 
-                border: none;
-                box-shadow: none; 
-              }
-
-              &:first-child {
-                @include responsive(display, none, none, none, flex);
-              }
-
-              &:nth-child(2) {
-                @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0);
-              }
-            }
-
-              &__cell-titles {
-                @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0);
-                @include responsive(display, flex, flex, flex, none);
-                justify-content: space-between; //temp refresh
-              }
-
-              &__cell-title {
-                font-size: rem-calc(17);
-                font-weight: 500;
-              }
-
-              &__cell-link {
-                font-weight: 900;
-              }
-
-              &__cell-chart:nth-child(2) { margin-bottom: rem-calc(12); }
-
-              &__cell-index {
-                @include responsive(display, block, block, block, none);
-                font-size: rem-calc(12);
-                font-weight: 500;
-                margin-top: auto;
-              }
-    }
-  }
+.table {
+  @import './table/table-horizontal-scroll';
+  @import './table/table-pame';
 }
diff --git a/app/assets/stylesheets/components/cards/cards/_cards-articles.scss b/app/assets/stylesheets/components/cards/cards/_cards-articles.scss
@@ -39,4 +39,4 @@
       @include image-placeholder();
     }
   }
-} 
+} 
diff --git a/app/assets/stylesheets/components/cards/cards/_cards-search-results-areas.scss b/app/assets/stylesheets/components/cards/cards/_cards-search-results-areas.scss
@@ -60,4 +60,4 @@ $card-search-results-areas-height: rem-calc(155);
           margin: rem-calc(12 0 2 0);
         }
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,4 +39,4 @@ @@
           @include image-placeholder();
         }
       }
-    }
+    }