fix: bugs (epicmaxco#616)

src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue

@@ -101,6 +101,9 @@ export default {
     border-radius: .5rem;
 
     .color-picker-dropdown {
+      display: flex;
+      justify-content: center;
+
       &__badge {
         /* Badges have 0.5rem to the right by default */
         margin-left: 0.5rem;

src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue

@@ -1,33 +1,34 @@
 <template>
-    <va-dropdown
-      class="notification-dropdown"
-      offset="15px, 0"
-    >
-      <va-icon
-        slot="anchor"
-        name="i-nav-notification"
-        class="notification-dropdown__icon"
-        :class="{'notification-dropdown__icon--unread': !allRead}"
-      />
-      <div class="notification-dropdown__content py-3 px-2">
-        <div
-          v-for="option in computedOptions"
-          :key="option.id"
-          class="notification-dropdown__item pr-3 row"
-          :class="{'notification-dropdown__item--unread': option.unread}"
-          @click="option.unread = false"
-         >
-          <img v-if="option.details.avatar" class="mr-1 notification-dropdown__item__avatar" :src="option.details.avatar"/>
-          <span class="ellipsis">
-            <span class="text--bold" v-if="option.details.name">{{option.details.name}}</span> {{$t(`notifications.${option.name}`, { type: option.details.type })}}
-          </span>
-        </div>
-        <div class="row justify--space-between">
-          <va-button class="m-0 mr-1" small>{{ $t('notifications.all') }}</va-button>
-          <va-button class="m-0" small outline @click="markAllAsRead" :disabled="allRead">{{ $t('notifications.mark_as_read') }}</va-button>
-        </div>
+  <va-dropdown
+    class="notification-dropdown"
+    offset="15px, 0"
+    boundary-body
+  >
+    <va-icon
+      slot="anchor"
+      name="i-nav-notification"
+      class="notification-dropdown__icon"
+      :class="{'notification-dropdown__icon--unread': !allRead}"
+    />
+    <div class="notification-dropdown__content py-3 px-2">
+      <div
+        v-for="option in computedOptions"
+        :key="option.id"
+        class="notification-dropdown__item pr-3 row"
+        :class="{'notification-dropdown__item--unread': option.unread}"
+        @click="option.unread = false"
+      >
+        <img v-if="option.details.avatar" class="mr-1 notification-dropdown__item__avatar" :src="option.details.avatar"/>
+        <span class="ellipsis">
+          <span class="text--bold" v-if="option.details.name">{{option.details.name}}</span> {{$t(`notifications.${option.name}`, { type: option.details.type })}}
+        </span>
       </div>
-    </va-dropdown>
+      <div class="row justify--space-between">
+        <va-button class="m-0 mr-1" small>{{ $t('notifications.all') }}</va-button>
+        <va-button class="m-0" small outline @click="markAllAsRead" :disabled="allRead">{{ $t('notifications.mark_as_read') }}</va-button>
+      </div>
+    </div>
+  </va-dropdown>
 </template>
 
 <script>
@@ -50,7 +51,11 @@ export default {
         },
         {
           name: 'uploadedZip',
-          details: { name: 'Oleg M', avatar: 'https://picsum.photos/100', type: 'typography component' },
+          details: {
+            name: 'Oleg M',
+            avatar: 'https://picsum.photos/100',
+            type: 'typography component',
+          },
           unread: true,
           id: 2,
         },
@@ -70,7 +75,10 @@ export default {
   },
   methods: {
     markAllAsRead () {
-      this.computedOptions = this.computedOptions.map(item => ({ ...item, unread: false }))
+      this.computedOptions = this.computedOptions.map(item => ({
+        ...item,
+        unread: false,
+      }))
     },
   },
 }
@@ -81,6 +89,7 @@ export default {
 
 .notification-dropdown {
   cursor: pointer;
+
   .notification-dropdown__icon {
     position: relative;
     display: flex;
@@ -99,20 +108,24 @@ export default {
       border-radius: .187rem;
     }
   }
+
   &__content {
     background-color: $dropdown-background;
     box-shadow: $gray-box-shadow;
     border-radius: .5rem;
-    max-width: 25rem;
+    max-width: 19rem;
   }
+
   &__item {
     cursor: pointer;
     margin-bottom: .75rem;
     color: $brand-secondary;
     flex-wrap: nowrap;
     position: relative;
+
     &--unread {
       color: $vue-darkest-blue;
+
       &:after {
         content: '';
         position: absolute;
@@ -126,9 +139,11 @@ export default {
         border-radius: .187rem;
       }
     }
+
     &:hover {
       color: $vue-green;
     }
+
     &__avatar {
       border-radius: 50%;
       width: 1.5rem;

src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue

@@ -1,13 +1,16 @@
 <template>
   <va-dropdown
     class="profile-dropdown"
-    @show="toggleVisibility(true)"
-    @hide="toggleVisibility(false)"
-    offset="15px, 0"
+    trigger="none"
+    v-model="isShown"
+    boundary-body
   >
     <span
-      class="profile-dropdown__actuator" slot="anchor"
+      class="profile-dropdown__anchor" slot="anchor"
       :style="{color: this.$themes.primary}"
+      @focus="toggleVisibility"
+      @blur="toggleVisibility"
+      tabindex="1"
     >
       <slot/>
       <va-icon
@@ -52,8 +55,8 @@ export default {
     },
   },
   methods: {
-    toggleVisibility (val) {
-      this.isShown = val
+    toggleVisibility () {
+      this.isShown = !this.isShown
     },
   },
 }
@@ -62,8 +65,10 @@ export default {
 <style lang="scss">
 .profile-dropdown {
   cursor: pointer;
-  &__actuator {
-    color: $vue-green;
+  &__anchor {
+    &:focus {
+      outline: none;
+    }
   }
   .va-dropdown-popper__anchor {
     display: flex;
@@ -73,6 +78,7 @@ export default {
     background-color: $dropdown-background;
     box-shadow: $gray-box-shadow;
     border-radius: .5rem;
+    width: 6rem;
   }
   &__item {
     display: block;

src/components/admin/app-sidebar/NavigationRoutes.js

@@ -205,6 +205,10 @@ export const navigationRoutes = {
       },
       disabled: true,
       children: [
+        {
+          name: 'login',
+          displayName: 'Login/Signup',
+        },
         {
           name: '404-pages',
           displayName: '404 Pages',

src/components/admin/app-sidebar/components/SidebarLinkGroup.vue

@@ -214,9 +214,10 @@ export default {
   }
 
   &--minimized {
-    .va-dropdown-popper {
-      width: 100%;
-      max-width: 100%;
+    .va-dropdown{
+      &__anchor {
+        width: 100%;
+      }
     }
     .va-sidebar-link-group__submenu {
       width: 10rem;

src/components/auth/AuthLayout.vue

@@ -1,30 +1,31 @@
 <template>
-  <div class="auth-layout flex-center flex-column">
-    <router-link class="auth-layout__container" to="/">
-      <va-icon-vuestic class="auth-layout__logo"/>
+<div class="auth-layout row align-content--center">
+  <div class="flex xs12 lg6 pa-3 flex-center">
+    <router-link class="py-5 flex-center" to="/">
+      <va-icon-vuestic />
     </router-link>
+  </div>
 
-    <div class="auth-layout__card">
-      <va-card>
+  <div class="flex xs12 lg6 pa-3">
+    <div class="d-flex justify--center">
+      <va-card class="auth-layout__card">
         <va-tabs
           v-model="tabIndex"
           center
         >
-          <va-tab>
-            {{$t('auth.login')}}
-          </va-tab>
-          <va-tab>
-            {{$t('auth.createNewAccount')}}
-          </va-tab>
+          <va-tab>{{ $t('auth.login') }}</va-tab>
+          <va-tab>{{ $t('auth.createNewAccount') }}</va-tab>
         </va-tabs>
+
         <va-separator/>
 
-        <div class="auth-layout__form">
+        <div class="pa-3">
           <router-view/>
         </div>
       </va-card>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -66,37 +67,10 @@ export default {
 .auth-layout {
   min-height: 100vh;
   background-image: linear-gradient(to right, #0e4ac4, #002c85);
-  padding: 1rem;
 
   &__card {
-    height: 30rem;
-    @include media-breakpoint-down(xs) {
-      width: 100%;
-    }
-  }
-
-  &__form {
-    padding: .875rem 0 0;
-    @include media-breakpoint-up(sm) {
-      padding: 2.875rem 3.75rem .625rem;
-      width: 30rem;
-    }
-  }
-
-  &__container {
-    height: $auth-logo-height;
-    width: 100%;
-    margin-bottom: 5.625rem;
-  }
-
-  &__logo {
-    height: 100%;
     width: 100%;
-    margin-bottom: 5.625rem;
-  }
-
-  @include media-breakpoint-down(sm) {
-    padding-top: 6%;
+    max-width: 600px;
   }
 }
 </style>

src/components/auth/login/Login.vue

@@ -1,31 +1,30 @@
 <template>
-  <form class="login" @submit.prevent="onsubmit">
-      <va-input
-        class="mb-2"
-        v-model="email"
-        type="email"
-        :label="$t('auth.email')"
-        :error="!!emailErrors.length"
-        :error-messages="emailErrors"
-      />
-    <div>
-      <va-input
-        class="mb-2"
-        v-model="password"
-        type="password"
-        :label="$t('auth.password')"
-        :error="!!passwordErrors.length"
-        :error-messages="passwordErrors"
-      />
-    </div>
-    <div class="d-flex align--center justify--space-between mb-4">
-      <va-checkbox v-model="keepLoggedIn" class="mb-0" :label="$t('auth.keep_logged_in')"/>
-      <router-link class="ml-1" :to="{name: 'recover-password'}">{{$t('auth.recover_password')}}</router-link>
-    </div>
-    <div class="flex-center">
-      <va-button type="submit" class="my-0">{{ $t('auth.login') }}</va-button>
-    </div>
-  </form>
+<form @submit.prevent="onsubmit">
+  <va-input
+    v-model="email"
+    type="email"
+    :label="$t('auth.email')"
+    :error="!!emailErrors.length"
+    :error-messages="emailErrors"
+  />
+
+  <va-input
+    v-model="password"
+    type="password"
+    :label="$t('auth.password')"
+    :error="!!passwordErrors.length"
+    :error-messages="passwordErrors"
+  />
+
+  <div class="d-flex align--center justify--space-between">
+    <va-checkbox v-model="keepLoggedIn" class="mb-0" :label="$t('auth.keep_logged_in')"/>
+    <router-link class="ml-1 link" :to="{name: 'recover-password'}">{{$t('auth.recover_password')}}</router-link>
+  </div>
+
+  <div class="d-flex justify--center mt-3">
+    <va-button type="submit" class="my-0">{{ $t('auth.login') }}</va-button>
+  </div>
+</form>
 </template>
 
 <script>
@@ -59,7 +58,5 @@ export default {
 </script>
 
 <style lang="scss">
-.login {
-
-}
+@import '../../../vuestic-theme/vuestic-sass/resources/resources';
 </style>