Make LocaleChooser responsive

Positioning of LocaleChooser is updated with css grid properties. This PR updates styling of the App and LocaleChooser components to be mobile-first.
creativecommons · May 24, 2020 · 08d46fc · 08d46fc
1 parent 856cbc0
commit 08d46fc
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 80 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -14,7 +14,7 @@
                         {{ $t('select-license.instructions') }}
                     </p>
                 </div>
-                <LocaleChooser />
+                <LocaleChooser class="locale-chooser" />
             </div>
             <div class="columns">
                 <Stepper v-model="currentStepId" />
@@ -112,19 +112,19 @@ export default {
         counter-reset: step-counter;
     }
     #site-container {
-        padding-top: 2rem;
-        padding-bottom: 2%;
+        padding: 0.75rem;
     }
     .page-head {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
         grid-gap: 1.5rem;
-        .select-license-column {
-            grid-column: 1;
-        }
-        .locale-chooser {
-            grid-column: 2;
-        }
+        grid-template-areas: "localechooser" "heading";
+    }
+    .selected-license-column {
+        grid-area: heading;
+    }
+    .locale-chooser {
+        grid-area: localechooser;
     }
     .stepper-instructions {
         margin-bottom: 14px;
@@ -134,43 +134,31 @@ export default {
         top: 10px;
     }
     .selected-license-card {
-        // Margin is added to make the left column long enough for the right column to stay sticky when scrolling
+        // Margin is added to make the left column long enough
+        // for the right column to stay sticky when scrolling
         margin-bottom: 32px;
     }
-    @media only screen and (max-width: 1025px) {
-        #site-container {
-            margin-left: 2%;
-            margin-right: 2%;
-        }
-        .mobile-hide {
-            display: none;
-        }
-        .mobile-show {
-            display: block;
-        }
+    footer.footer.chooser-footer {
+        margin-top: 2rem;
     }
-    @media only screen and (max-width: 768px) {
+    @media only screen and (min-width: 769px) {
         #site-container {
-            padding-top: 0;
+            padding-top: 2rem;
         }
         .page-head {
-            grid-template-columns: 100%;
-            grid-gap: 1rem;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 1.5rem;
+            grid-template-areas: "heading localechooser";
         }
-        .select-license-column {
-            order: 2;
-        }
-        .locale-chooser {
-            padding-top: 1rem;
-            height: auto;
-            grid-column: auto;
-            order: 1;
+        footer {
+            margin-top: 5rem;
         }
     }
-    @media only screen and (max-width: 670px) {
+    @media only screen and (min-width: 1025px) {
         #site-container {
-            margin-left: 3%;
-            margin-right: 3%;
+            padding-left: 0;
+            padding-right: 0;
         }
     }
+
 </style>
diff --git a/src/components/LocaleChooser.vue b/src/components/LocaleChooser.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="locale-chooser">
+    <div>
         <b-field
             :label="this.$t('locale-selector.label')"
             :class="'locale-chooser-field'"
@@ -40,51 +40,48 @@ export default {
 </script>
 
 <style>
-.locale-chooser {
-    height: 132px;
-}
-.locale-chooser-field {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-.locale-chooser-field .label {
-    justify-self: end;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 36px;
-    padding-right: 16px;
-}
-.locale-chooser-field .control,
-.locale-chooser-field .select,
-.locale-chooser-field select {
-    width: 100%;
-}
-.locale-chooser-field .control .select select {
-    padding-left: 2.5em;
-    z-index: -1;
-}
-.locale-chooser-field .control .select::before {
-    content: url("../assets/language.png");
-    position: absolute;
-    left:10px;
-    top:8px;
-}
-.locale-chooser .select:not(.is-multiple):not(.is-loading)::after {
-     z-index: 0;
- }
-@media only screen and (max-width: 768px) {
-    .locale-chooser {
-        height: auto;
-        margin-bottom: 1rem;
-    }
     .locale-chooser-field {
-        width: 100%;
         display: grid;
-        grid-template-columns: 100%;
+        grid-template-columns: 1fr;
     }
     .locale-chooser-field .label {
-        justify-self: auto;
+        padding-right: 1rem;
+    }
+    .locale-chooser-field .control .select::before {
+        content: url("../assets/language.png");
+        position: absolute;
+        left: 10px;
+        top: 8px;
+        z-index: 1;
+    }
+    .locale-chooser-field .control,
+    .locale-chooser-field .select,
+    .locale-chooser-field select {
+        width: 100%;
+    }
+    .locale-chooser-field .control .select select {
+        padding-left: 2.5em;
+    }
+    .locale-chooser-field label.label {
+        font-weight: normal;
+        font-size: 1rem;
+        line-height: 2.25rem;
+        margin-bottom: 0;
+    }
+    @media only screen and (min-width:769px) {
+        .locale-chooser {
+            justify-self: end;
+        }
+    }
+    @media only screen and (min-width:1024px) {
+        .locale-chooser-field {
+            padding-top:0.5rem;
+            display: grid;
+            grid-template-columns: 1fr minmax(210px, 1fr);
+        }
+        .locale-chooser-field .label {
+            padding-right: 0.5rem;
+            justify-self: end;
+        }
     }
-}
 </style>