Header, navigation, other components adaptive complete

Dual-Ice · May 17, 2020 · e55ea33 · e55ea33
1 parent e0c1ce5
commit e55ea33
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 72 deletions.
diff --git a/src/admin/App.vue b/src/admin/App.vue
@@ -69,6 +69,15 @@ export default {
     font-size: 21px;
     font-weight: 700;
     margin-bottom: 60px;
+
+    @include tablets {
+      margin-bottom: 50px;
+    }
+
+    @include phonesLg {
+      font-size: 18px;
+      margin-bottom: 40px;
+    }
   }
 
   .nav-container {
@@ -81,76 +90,6 @@ export default {
     padding-top: 60px;
   }
 
-  .add-new-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    color: $links-color;
-    font-weight: 600;
-    padding: 3px;
-    border: none;
-    font-size: 16px;
-
-    &:before {
-      content: "";
-      display: block;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: svg-load('cross.svg', fill=$white, width=15px, height=15px, transform='rotate(45deg)') center center no-repeat, linear-gradient(to right, #006aed, #3f35cb);
-      color: $white;
-      flex-shrink: 0;
-      flex-basis: 40px;
-      font-size: 30px;
-      line-height: 40px;
-    } 
-
-    &--small {
-      &:before {
-        content: "";
-        background: svg-load('cross.svg', fill=$white, width=8px, height=8px, transform='rotate(45deg)') center center no-repeat, linear-gradient(to right, #006aed, #3f35cb);
-        width: 20px;
-        height: 20px;
-        flex-basis: 20px;
-        font-size: 18px;
-        margin-right: 13px;
-        line-height: 1;
-      }
-    }
-  }
-
-  .add-new-btn-plain {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
-    border: none;
-    background-image: linear-gradient(to right, #006aed 0%, #3f35cb 100%);
-  }
-
-  .btn-text {
-    color: $white;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 25px;
-
-    &:before {
-      display: flex;
-      content: '+';
-      font-weight: 300;
-      font-size: 72px;
-      justify-content: center;
-      align-items: center;
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-      border: 2px solid currentColor;
-      margin-bottom: 30px;
-    }
-  }
-
   .form__btn {
     color: $white;
     font-weight: 700;
@@ -159,20 +98,33 @@ export default {
     background-image: linear-gradient(to right, #006aed 0%, #3f35cb 100%);
     border-radius: 30px;
 
+    @include phonesLg {
+      font-size: 14px;
+    }
+
     &--big {
-      padding: 25px 45px;
+      padding: 20px 35px;
       border-radius: 35px;
     }
 
     &--plain {
+      text-transform: initial;
       background: transparent;
       color: #383bcf;
       margin-right: 10px;
+      padding: 20px 30px;
     }
   }
     
   .card {
     box-shadow: 4px 3px 20px rgba(0, 0, 0, 0.07);
     background-color: $white;
   }
+
+  .blocked {
+    opacity: 0.5;
+    filter: grayscale(100%);
+    pointer-events: none;
+    user-select: none;
+  }
 </style>
diff --git a/src/admin/components/AddBtn.vue b/src/admin/components/AddBtn.vue
@@ -44,6 +44,10 @@ export default {
     border: none;
     font-size: 16px;
 
+    @include tablets {
+      font-size: 14px;
+    }
+
     &:before {
       content: "";
       display: block;

diff --git a/src/admin/components/Header.vue b/src/admin/components/Header.vue
@@ -5,7 +5,9 @@
         .user
           .user__avatar
               img(src="../../images/userfiles/admin.jpg").user__avatar-img
-          .user__name Максим Стогний
+          .user__name
+            span Максим Стогний
+            a.exit-btn(href="#") Выйти
       .header__title Панель Администрирования
       .header__btn
         a.exit-btn(href="#") Выйти
@@ -16,6 +18,8 @@ export default {
 }
 </script>
 <style lang="postcss" scooped>
+  @import url("../../styles/mixins.pcss");
+
   .header {
     color: $white;
   }
@@ -32,6 +36,10 @@ export default {
   .header__title {
     opacity: .5;
     font-size: 14px;
+
+    @include phones {
+      display: none;
+    }
   }
 
   .user {
@@ -59,10 +67,28 @@ export default {
   .user__name {
     font-size: 18px;
     font-weight: 600;
+
+    @include phones {
+      font-size: 16px;
+    }
+
+    .exit-btn {
+      display: none;
+      font-size: 14px;
+      @include phones {
+        display: block;
+      }
+    }
   }
 
   .exit-btn {
     opacity: .7;
     text-decoration: underline;
+    font-size: 16px;
+    font-weight: 400;
+
+    @include phones {
+      display: none;
+    }
   }
 </style>
diff --git a/src/admin/components/Navigation.vue b/src/admin/components/Navigation.vue
@@ -32,10 +32,16 @@ export default {
 }
 </script>
 <style lang="postcss" scooped>
+  @import url("../../styles/mixins.pcss");
+  
   .nav__list {
     display: flex;
     align-items: center;
     height: 77px;
+
+    @include phones {
+      justify-content: center;
+    }
   }
 
   .nav__item {
@@ -45,6 +51,10 @@ export default {
     &:last-child {
       margin-right: 0;
     }
+
+    @include phones {
+      flex: 1;
+    }
   }
 
   .nav__link {
@@ -62,6 +72,10 @@ export default {
       border-color: currentColor;
       font-weight: 600;
     }
+
+    @include phones {
+      padding: 0;
+    }
   }
 
 </style>