From e48172222df81622f873f9ba9a886a63d77edc0c Mon Sep 17 00:00:00 2001
From: Stacy Talbot <stacy.talbot@unep-wcmc.org>
Date: Wed, 8 Jul 2020 11:35:38 +0100
Subject: [PATCH] Basic responsive styling

---
 app/assets/stylesheets/base/_buttons.scss     | 10 +++++
 .../components/filters/_filters-pame.scss     | 38 +++++++++++++++----
 .../components/table/_table-pame.scss         |  2 +-
 app/javascript/components/pame/Filters.vue    |  2 +-
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
index d642c0931..69f3cb862 100644
--- a/app/assets/stylesheets/base/_buttons.scss
+++ b/app/assets/stylesheets/base/_buttons.scss
@@ -141,6 +141,16 @@ $padding-medium: rem-calc(27);
 @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-filter-trigger {
diff --git a/app/assets/stylesheets/components/filters/_filters-pame.scss b/app/assets/stylesheets/components/filters/_filters-pame.scss
index 9bb500b0a..4718b7509 100644
--- a/app/assets/stylesheets/components/filters/_filters-pame.scss
+++ b/app/assets/stylesheets/components/filters/_filters-pame.scss
@@ -10,12 +10,23 @@ $focus-outline-margin: rem-calc(4);
 // classes
 //--------------------------------------------------
 &--pame {
+  @include breakpoint($medium) {
+    @include flex;
+    @include flex-v-center;
+  }
+
   .filter {
-    margin-right: rem-calc(20);
+    margin-right: rem-calc(10);
+    margin-bottom: rem-calc(10);
 
     display: inline-block;
     position: relative;
 
+    @include breakpoint($medium) { 
+      margin-right: rem-calc(20); 
+      margin-bottom: 0;
+    }
+
     &__title {
       font-size: rem-calc(20);
       margin-right: rem-calc(20);
@@ -89,17 +100,30 @@ $focus-outline-margin: rem-calc(4);
   //**************************************************
     &__options {
       background-color: white;
-      border: solid rem-calc(1) $black;
-      border-radius: $radius-global;
       font-size: rem-calc(16);
-      margin-top: rem-calc(18);
       padding: rem-calc(30 25);
-      min-width: rem-calc(300);
-
+      
       display: none;
-      position: absolute;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       z-index: 1;
 
+      @include breakpoint($small) {
+        border: solid rem-calc(1) $black;
+        border-radius: $radius-global;
+        margin-top: rem-calc(18);
+        min-width: rem-calc(300);
+
+        position: absolute;
+        top: unset;
+        right: unset;
+        bottom: unset;
+        left: unset;
+      }
+
       &--active {
         display: block;
       }
diff --git a/app/assets/stylesheets/components/table/_table-pame.scss b/app/assets/stylesheets/components/table/_table-pame.scss
index fff94cd5f..439fb6092 100644
--- a/app/assets/stylesheets/components/table/_table-pame.scss
+++ b/app/assets/stylesheets/components/table/_table-pame.scss
@@ -48,7 +48,7 @@
       }
 
       // Add copy for the table header
-      // These are shown on mobile only
+      // These are shown on mobile and tablet
       // Check pame_evalutation.rb for the copy
       &:nth-child(1) { &:before { content: 'Name:'; } }
       &:nth-child(2) { &:before { content: 'Designation:'; } }
diff --git a/app/javascript/components/pame/Filters.vue b/app/javascript/components/pame/Filters.vue
index 8f8b3ef39..420b2ad8b 100644
--- a/app/javascript/components/pame/Filters.vue
+++ b/app/javascript/components/pame/Filters.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-v-center flex-between">
+  <div>
     <data-filter 
       v-for="filter, index in filters"
       :key="`${filter.name}-${index}`"