Fix layout
This commit is contained in:
15
src/App.vue
15
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user