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