tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 20:00:15 +00:00
Code Issues Projects Releases Wiki Activity

fix mobile layout for playlist pages

Browse Source
This commit is contained in:
simon 2021-11-25 17:22:52 +07:00
parent 39304ff2bd
commit 408b0a0c34
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
tubearchivist/static/css/style.css
View File

@ -224,7 +224,7 @@ button:hover {
/* navigation */ /* navigation */
.top-nav { .top-nav {
display: block; display: block;
padding: 15px 0; padding: 5px 0;
position: relative; position: relative;
} }
@ -936,13 +936,15 @@ button:hover {
} }
.video-list.grid, .video-list.grid,
.dl-list.grid, .dl-list.grid,
.channel-list.grid { .channel-list.grid,
.playlist-list.grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.dl-thumb.list { .dl-thumb.list {
width: 35%; width: 35%;
} }
.video-item.list { .video-item.list,
.playlist-item.list {
display: grid; display: grid;
grid-template-columns: 35% auto; grid-template-columns: 35% auto;
} }
@ -952,6 +954,16 @@ button:hover {
.two-col > div { .two-col > div {
width: 100%; width: 100%;
} }
.top-nav {
flex-wrap: wrap-reverse;
display: flex;
}
.nav-icons {
width: 100%;
justify-content: center;
position: unset;
transform: unset;
}
} }
/* phone */ /* phone */
@ -962,9 +974,14 @@ button:hover {
.video-list.grid, .video-list.grid,
.dl-list.grid, .dl-list.grid,
.channel-list.grid, .channel-list.grid,
.video-item.list { .video-item.list,
.playlist-list.list,
.playlist-list.grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.playlist-item.list {
display: block;
}
.video-desc.grid { .video-desc.grid {
height: unset; height: unset;
display: flex; display: flex;
@ -979,25 +996,19 @@ button:hover {
.toggle { .toggle {
flex-wrap: wrap; flex-wrap: wrap;
} }
.top-nav { .nav-items {
flex-wrap: wrap-reverse; display: grid;
display: flex; grid-template-columns: 1fr 1fr;
}
.nav-icons {
width: 100%;
justify-content: center;
position: unset;
transform: unset;
} }
.nav-item { .nav-item {
padding: unset; padding: 5px 0;
margin: 15px; margin: 15px;
text-align: center;
} }
.sort { .sort {
display: block; display: block;
} }
.sort select { .sort select {
width: 100%;
margin: unset; margin: unset;
} }
.info-box-2, .info-box-2,