feat: implement responsive header

package-lock.json

@@ -7571,6 +7571,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-click-outside": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
+      "integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
+    },
     "vue-datetime": {
       "version": "1.0.0-beta.13",
       "resolved": "https://registry.npmjs.org/vue-datetime/-/vue-datetime-1.0.0-beta.13.tgz",

package.json

@@ -18,6 +18,7 @@
     "sass-loader": "^9.0.2",
     "vee-validate": "^2.2.8",
     "vue": "^2.6.10",
+    "vue-click-outside": "^1.1.0",
     "vue-datetime": "^1.0.0-beta.11",
     "vue-router": "^3.0.6",
     "vue-select": "^3.4.0",

src/_components/layout/Header.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="header">
+  <div class="header d-flex align-items-center">
     <div class="d-flex justify-content-center align-items-center container ">
       <img src="/small-BubbleLogo-Horizontal-BlackText.png" height="40" />
       <div class="flex-grow-1"></div>
-      <div class="navbar d-flex justify-content-center align-items-center ">
+      <div
+        class="navbar justify-content-center align-items-center d-none d-md-flex"
+      >
         <router-link to="/help" class="d-flex align-items-center">
           <Button link>
             {{ messages.button_label_help || 'Help' }}
@@ -20,6 +22,25 @@
           </Button>
         </router-link>
       </div>
+      <div class="navbar d-md-none" @click="toggleNavbar()">
+        <i class="fas fa-bars"></i>
+      </div>
+    </div>
+
+    <div
+      class="dropdown-menu dropdown-menu-right d-md-none w-100 my-0"
+      :class="{ show: menuVisible }"
+      v-click-outside="hide"
+    >
+      <router-link class="dropdown-item" to="#">
+        Help
+      </router-link>
+      <router-link class="dropdown-item" to="/new_pages/login">
+        Sign In
+      </router-link>
+      <router-link class="dropdown-item" to="/new_pages/logout">
+        Sign Out
+      </router-link>
     </div>
   </div>
 </template>
@@ -27,20 +48,32 @@
 <style lang="scss" scoped>
 .header {
   background-color: white;
-
+  position: relative;
   height: 80px;
+  min-height: 80px;
 
   .navbar {
     height: 100%;
   }
-  .navbar a {
-    height: 100%;
-    text-decoration: none;
-  }
+}
+
+.dropdown-menu {
+  border-radius: 4px;
+  box-shadow: 0px 2px 10px -5px rgb(0, 0, 0);
+
+  font-size: 1em;
+}
+
+.dropdown-item {
+  padding: 0.5rem 1.5rem;
+
+  font-size: 1em;
 }
 </style>
 
 <script>
+import ClickOutside from 'vue-click-outside';
+
 import { mapState } from 'vuex';
 import { Button } from '~/_components/shared';
 
@@ -48,8 +81,27 @@ export default {
   components: {
     Button,
   },
+  directives: {
+    ClickOutside,
+  },
+
+  data() {
+    return {
+      menuVisible: false,
+    };
+  },
+
   computed: {
     ...mapState('system', ['messages']),
   },
+
+  methods: {
+    toggleNavbar() {
+      this.menuVisible = !this.menuVisible;
+    },
+    hide() {
+      this.menuVisible = false;
+    },
+  },
 };
 </script>

src/_pages/auth/Layout.vue

@@ -8,12 +8,19 @@
 </template>
 
 <style lang="scss" scoped>
+@import '../../_scss/breakpoints';
+
 .content {
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position-x: center;
 
   padding: 80px;
+
+  @include respond-below(sm) {
+    background-size: 200%, auto;
+    padding: 20px;
+  }
 }
 
 .background1 {

src/_pages/auth/Register.vue

@@ -83,7 +83,7 @@
     <h2 class="covered-section-title text-center">
       {{ messages.marketing_message_got_you_covered_title }}
     </h2>
-    <div class="row">
+    <div class="row" v-if="messages">
       <div
         v-for="(item, index) in messages.marketing_message_topics.split(',')"
         :key="index"

src/_scss/_breakpoints.scss

@@ -0,0 +1,72 @@
+// A map of breakpoints.
+$breakpoints: (
+  xs: 576px,
+  sm: 768px,
+  md: 992px,
+  lg: 1200px,
+);
+
+// Respond above.
+@mixin respond-above($breakpoint) {
+  // If the breakpoint exists in the map.
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Get the breakpoint value.
+    $breakpoint-value: map-get($breakpoints, $breakpoint);
+
+    // Write the media query.
+    @media (min-width: $breakpoint-value) {
+      @content;
+    }
+
+    // If the breakpoint doesn't exist in the map.
+  } @else {
+    // Log a warning.
+    @warn 'Invalid breakpoint: #{$breakpoint}.';
+  }
+}
+
+@mixin respond-below($breakpoint) {
+  // If the breakpoint exists in the map.
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Get the breakpoint value.
+    $breakpoint-value: map-get($breakpoints, $breakpoint);
+
+    // Write the media query.
+    @media (max-width: ($breakpoint-value - 1)) {
+      @content;
+    }
+
+    // If the breakpoint doesn't exist in the map.
+  } @else {
+    // Log a warning.
+    @warn 'Invalid breakpoint: #{$breakpoint}.';
+  }
+}
+
+@mixin respond-between($lower, $upper) {
+  // If both the lower and upper breakpoints exist in the map.
+  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
+    // Get the lower and upper breakpoints.
+    $lower-breakpoint: map-get($breakpoints, $lower);
+    $upper-breakpoint: map-get($breakpoints, $upper);
+
+    // Write the media query.
+    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
+      @content;
+    }
+
+    // If one or both of the breakpoints don't exist.
+  } @else {
+    // If lower breakpoint is invalid.
+    @if (map-has-key($breakpoints, $lower) == false) {
+      // Log a warning.
+      @warn 'Your lower breakpoint was invalid: #{$lower}.';
+    }
+
+    // If upper breakpoint is invalid.
+    @if (map-has-key($breakpoints, $upper) == false) {
+      // Log a warning.
+      @warn 'Your upper breakpoint was invalid: #{$upper}.';
+    }
+  }
+}

src/_scss/_variables.scss

@@ -75,6 +75,8 @@ $bright-cyan-10: #def8f0;
 $background-color: #e5e5e5;
 $default-text-color: #666666;
 $border-color: lightgrey;
+$checkbox-color: #0897ff;
 
 // fonts
 $default-font-family: 'Lato';
+

src/_scss/components/_form.scss

@@ -1,6 +1,8 @@
-@import "../variables";
+@import '../variables';
+@import '../breakpoints';
 
 $form-box-shadow: 0px 5px 15px -10px #777;
+
 $form-border-radius: 2px;
 
 .form-title {
@@ -16,20 +18,28 @@ $form-border-radius: 2px;
   box-shadow: $form-box-shadow;
 
   width: 450px;
-  max-width: 90%;
+  max-width: 100%;
   margin: 80px auto 0;
   padding: 40px 36px;
 
   border-radius: $form-border-radius;
+
+  .form-control {
+    font-size: 14px;
+  }
+
+  @include respond-below(sm) {
+    margin-top: 40px;
+  }
 }
 
 .auth-form-submit {
-  margin-top: 55px;
+  margin-top: 3rem;
 }
 
 .description {
   font-size: 14px;
-  width: 290px;
+  max-width: 290px;
   margin: 0 auto;
   color: #666666;
   text-align: center;
@@ -39,4 +49,4 @@ $form-border-radius: 2px;
   height: 1px;
   width: 100%;
   background-color: $border-color;
-}
+}

src/_scss/components/_text.scss

@@ -1,8 +1,27 @@
+@import '../breakpoints';
+
 .white-text {
   color: white;
 }
 
-a {
+a,
+a:hover {
   color: $vivid-navy;
   text-decoration: none;
 }
+
+html {
+  font-size: 16px;
+
+  @include respond-below(sm) {
+    font-size: 10px;
+  }
+}
+
+body {
+  font-size: 16px;
+
+  @include respond-below(sm) {
+    font-size: 14px;
+  }
+}