Fix layout

This commit is contained in:
2020-09-01 14:04:02 +03:00
parent 0ef02edde9
commit 92ec1c03da
3 changed files with 34 additions and 6 deletions

View File

@@ -14,6 +14,7 @@
@click="switchLeftPanel()"> @click="switchLeftPanel()">
<LottieAnimation <LottieAnimation
class="close-btn-icon" class="close-btn-icon"
:class="{'close-btn-icon-when-left-panel-open': !leftPanelClosed}"
path="./animations/menu-close2.json" path="./animations/menu-close2.json"
:width="30" :width="30"
:autoPlay="false" :autoPlay="false"
@@ -143,11 +144,17 @@ body, #app {
} }
.close-btn-icon { .close-btn-icon {
position: absolute; position: fixed;
height: 50px!important;
left: 14px; left: 14px;
transition: left linear .3s;
z-index: 2; z-index: 2;
} }
.close-btn-icon-when-left-panel-open {
left: 205px;
}
.close-btn-label { .close-btn-label {
position: absolute; position: absolute;
font-size: 13px; font-size: 13px;
@@ -158,7 +165,7 @@ body, #app {
} }
.vertical-panel-when-left-panel-open { .vertical-panel-when-left-panel-open {
position: absolute; position: fixed;
width: 58px; width: 58px;
height: 100%; height: 100%;
background: white!important; background: white!important;
@@ -176,7 +183,7 @@ body, #app {
@media (min-width: 960px) { @media (min-width: 960px) {
.close-btn { .close-btn {
position: absolute; position: fixed;
width: 58px; width: 58px;
height: 100%; height: 100%;
outline: none!important; outline: none!important;
@@ -210,7 +217,7 @@ body, #app {
} }
.left-panel { .left-panel {
position: absolute; position: fixed;
width: 192px; width: 192px;
background-color: white; background-color: white;
transition: margin-left linear .3s; transition: margin-left linear .3s;

View File

@@ -61,18 +61,28 @@ export default class Album extends Vue {
@media (max-width: 461px) { @media (max-width: 461px) {
.album { .album {
flex: 1 100%; flex: 1 100%;
max-width: 100%;
} }
} }
@media (min-width: 460px) and (max-width: 1401px) { @media (min-width: 460px) and (max-width: 1401px) {
.album { .album {
flex: 1 50%; flex: 1 50%;
max-width: 50%;
} }
} }
@media (min-width: 1400px) and (max-width: 1801px) { @media (min-width: 1400px) and (max-width: 1501px) {
.album { .album {
flex: 1 33%; flex: 1 33%;
max-width: 33%;
}
}
@media (min-width: 1500px) {
.album {
flex: 1 25%;
max-width: 25%;
} }
} }
</style> </style>

View File

@@ -76,10 +76,21 @@ export default class Home extends Vue {
<style scoped> <style scoped>
.albums-wrapper { .albums-wrapper {
display: inline-block; display: inline-block;
width: calc(100vw - 425px);
vertical-align: top; vertical-align: top;
} }
@media (max-width: 961px) {
.albums-wrapper {
width: calc(100vw);
}
}
@media (min-width: 960px) {
.albums-wrapper {
width: calc(100vw - 425px);
}
}
.albums { .albums {
display: flex; display: flex;
flex-direction: row; flex-direction: row;