Make table responsive

unepwcmc · Jul 8, 2020 · f52c6b3 · f52c6b3
1 parent 3c39ba7
commit f52c6b3
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/app/assets/stylesheets/components/table/_table-pame.scss b/app/assets/stylesheets/components/table/_table-pame.scss
@@ -2,26 +2,65 @@
 // classes
 //----------------------------------------
 &--pame { 
+  margin-top: rem-calc(30);
   margin-bottom: rem-calc(24);
 
+  @include breakpoint($medium) { margin-top: 0; }
+
   .table {
     &__row {
-      @include flex;
+      background-color: $grey-xlight;
+      margin-bottom: rem-calc(18);
+      padding: rem-calc(6 0);      
+
+      @include breakpoint($medium) { 
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+      }
 
-      &:nth-child(odd) { background-color: $grey-xlight; }
+      &:nth-child(even) { 
+        @include breakpoint($medium) { background-color: $white; }
+      }
     }
 
-      &__cell {
+    &__cell {
+      margin: 0;
+      padding: rem-calc(4 14);
+      width: 100%;
+
+      @include breakpoint($medium) {
         @include table-pame-column-widths;
         border-left: dotted white 2px;
-        margin: 0;
-        padding: 1rem 0.875rem;
+        padding: rem-calc(16 14);
 
         display: inline-block;
+      }
+
+      &:first-child { border-left: none; }
 
-        &:first-child { border-left: none; }
+      &:before {
+        font-weight: bold; 
+        margin-right: rem-calc(6);
+
+        @include breakpoint($medium){ display: none; }
       }
 
+      // Add copy for the table header
+      // These are shown on mobile only
+      // Check pame_evalutation.rb for the copy
+      &:nth-child(1) { &:before { content: 'Name:'; } }
+      &:nth-child(2) { &:before { content: 'Designation:'; } }
+      &:nth-child(3) { &:before { content: 'WDPA ID:'; } }
+      &:nth-child(4) { &:before { content: 'Assessment ID:'; } }
+      &:nth-child(5) { &:before { content: 'Country:'; } }
+      &:nth-child(6) { &:before { content: 'Methodology:'; } }
+      &:nth-child(7) { &:before { content: 'Year of assessment:'; } }
+      &:nth-child(8) { &:before { content: 'Link to assessment:'; } }
+      &:nth-child(9) { &:before { content: 'Metadata ID:'; } }
+    }
+
     &__sorting {
       opacity: .7;
       vertical-align: middle;
@@ -31,21 +70,21 @@
       &:hover { opacity: .9; }
     }
 
-      &__sort {
-        cursor: pointer;
-        width: rem-calc(8); height: rem-calc(6);
+    &__sort {
+      cursor: pointer;
+      width: rem-calc(8); height: rem-calc(6);
 
-        display: block;
+      display: block;
 
-        &--ascending {
-          background-image: image-url('icons/arrow-up-white.svg');
-          margin-bottom: rem-calc(1);
-        }
+      &--ascending {
+        background-image: image-url('icons/arrow-up-white.svg');
+        margin-bottom: rem-calc(1);
+      }
 
-        &--descending {
-          background-image: image-url('icons/arrow-down-white.svg');
-        }
+      &--descending {
+        background-image: image-url('icons/arrow-down-white.svg');
       }
+    }
 
     &__note { font-size: rem-calc(14); }
   }

diff --git a/app/javascript/components/pame/Filters.vue b/app/javascript/components/pame/Filters.vue
@@ -1,7 +1,5 @@
 <template>
   <div class="flex flex-v-center flex-between">
-    <span class="filter__title bold">Filters:</span>
-
     <data-filter 
       v-for="filter, index in filters"
       :key="`${filter.name}-${index}`"

diff --git a/app/models/pame_evaluation.rb b/app/models/pame_evaluation.rb
@@ -48,7 +48,7 @@ class PameEvaluation < ApplicationRecord
       field: 'year'
     },
     {
-      title: 'Link To Assessment',
+      title: 'Link to assessment',
       field: 'url'
     },
     {