Basic responsive styling

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

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}`"