From 92ec1c03dafa5a7fb9f7cff9f0233d2a49949ec7 Mon Sep 17 00:00:00 2001
From: kurbezz <kurbanovbul@gmail.com>
Date: Tue, 1 Sep 2020 14:04:02 +0300
Subject: [PATCH] Fix layout

---
 src/App.vue              | 15 +++++++++++----
 src/components/Album.vue | 12 +++++++++++-
 src/views/Home.vue       | 13 ++++++++++++-
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0b519cf..74591c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@
           @click="switchLeftPanel()">
           <LottieAnimation
             class="close-btn-icon"
+           :class="{'close-btn-icon-when-left-panel-open': !leftPanelClosed}"
             path="./animations/menu-close2.json"
            :width="30"
            :autoPlay="false"
@@ -143,11 +144,17 @@ body, #app {
   }
 
   .close-btn-icon {
-    position: absolute;
+    position: fixed;
+    height: 50px!important;
     left: 14px;
+    transition: left linear .3s;
     z-index: 2;
   }
 
+  .close-btn-icon-when-left-panel-open {
+    left: 205px;
+  }
+
   .close-btn-label {
     position: absolute;
     font-size: 13px;
@@ -158,7 +165,7 @@ body, #app {
   }
 
   .vertical-panel-when-left-panel-open {
-    position: absolute;
+    position: fixed;
     width: 58px;
     height: 100%;
     background: white!important;
@@ -176,7 +183,7 @@ body, #app {
 
 @media (min-width: 960px) {
   .close-btn {
-    position: absolute;
+    position: fixed;
     width: 58px;
     height: 100%;
     outline: none!important;
@@ -210,7 +217,7 @@ body, #app {
 }
 
 .left-panel {
-  position: absolute;
+  position: fixed;
   width: 192px;
   background-color: white;
   transition: margin-left linear .3s;
diff --git a/src/components/Album.vue b/src/components/Album.vue
index 5782ee8..2b92b6b 100644
--- a/src/components/Album.vue
+++ b/src/components/Album.vue
@@ -61,18 +61,28 @@ export default class Album extends Vue {
 @media (max-width: 461px) {
   .album {
     flex: 1 100%;
+    max-width: 100%;
   }
 }
 
 @media (min-width: 460px) and (max-width: 1401px) {
   .album {
     flex: 1 50%;
+    max-width: 50%;
   }
 }
 
-@media (min-width: 1400px) and (max-width: 1801px) {
+@media (min-width: 1400px) and (max-width: 1501px) {
   .album {
     flex: 1 33%;
+    max-width: 33%;
+  }
+}
+
+@media (min-width: 1500px) {
+  .album {
+    flex: 1 25%;
+    max-width: 25%;
   }
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2641597..8743415 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -76,10 +76,21 @@ export default class Home extends Vue {
 <style scoped>
 .albums-wrapper {
   display: inline-block;
-  width: calc(100vw - 425px);
   vertical-align: top;
 }
 
+@media (max-width: 961px) {
+  .albums-wrapper {
+    width: calc(100vw);
+  }
+}
+
+@media (min-width: 960px) {
+  .albums-wrapper {
+    width: calc(100vw - 425px);
+  }
+}
+
 .albums {
   display: flex;
   flex-direction: row;