Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: implement basic layout for mobile

Browse source
This commit is contained in:
Tim 2022-02-16 11:48:14 +01:00
parent d19b95baf4
commit 73b829d8c5
3 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/App/styles.less
View file

@ -135,4 +135,11 @@ html {
html {
font-size: 14px;
}
}
@media only screen and (max-width: @xsmall) {
html {
min-width: inherit !important;
min-height: inherit !important;
}
}

14
src/common/MainNavBars/styles.less
View file

@ -1,4 +1,5 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.main-nav-bars-container {
position: relative;
@ -28,4 +29,17 @@
left: var(--vertical-nav-bar-size);
z-index: 0;
}
}
@media only screen and (max-width: @xsmall) {
.main-nav-bars-container {
.nav-content-container {
left: 0 !important;
bottom: var(--vertical-nav-bar-size) !important;
}
.vertical-nav-bar {
top: initial !important;
}
}
}

21
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2020 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.vertical-nav-bar-container {
width: var(--vertical-nav-bar-size);
@ -24,4 +25,24 @@
margin-bottom: 1rem;
}
}
}
@media only screen and (max-width: @xsmall) {
.vertical-nav-bar-container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: var(--vertical-nav-bar-size) !important;
width: 100% !important;
overflow: hidden !important;
overflow-x: auto !important;
.nav-tab-button {
flex: none;
&:first-child {
margin-top: 0 !important;
}
}
}
}