Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: improve mobile layout on modals

Browse source
This commit is contained in:
Tim 2022-02-17 10:11:09 +01:00
parent 4e945bbe68
commit 484e9f51ca
5 changed files with 69 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/common/ColorInput/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';
.color-input-container {
position: relative;
@ -32,4 +33,10 @@
.color-picker-container {
margin: 1rem 0;
}
@media only screen and (max-width: @minimum) {
.color-picker-container {
text-align: center;
}
}

37
src/common/ModalDialog/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';
.modal-container {
display: flex;
@ -117,4 +118,40 @@
text-align: center;
color: @color-surface-light5-90;
}
}
@media only screen and (max-width: @minimum) {
.modal-container {
.modal-dialog-container {
width: 90%;
max-width: initial;
gap: 0.5em;
.close-button-container {
position: absolute;
margin: 0.75rem 0.75rem 0 0;
padding: 0.25rem;
}
.title-container {
max-height: initial;
margin: 0;
padding: 1em 1.5em;
}
.modal-dialog-content {
margin: 0;
padding: 0 1.5rem;
}
.buttons-container {
margin: 0;
padding: 1.5em;
&:last-child {
margin-bottom: 0;
}
}
}
}
}

10
src/routes/Addons/styles.less
View file

@ -267,4 +267,14 @@
}
}
}
.add-addon-modal-container, .share-modal-container {
.addon-modal-content {
width: auto;
.notice {
margin-bottom: 1rem;
}
}
}
}

9
src/routes/Intro/PasswordResetModal/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';
:import('~stremio/common/ModalDialog/styles.less') {
password-reset-modal-content: modal-dialog-content;
@ -50,4 +51,12 @@
color: @color-surface-dark4-90;
}
}
}
@media only screen and (max-width: @minimum) {
.password-reset-modal-container {
.password-reset-modal-content {
width: auto;
}
}
}

6
src/routes/Settings/styles.less
View file

@ -380,4 +380,10 @@
}
}
}
.configure-server-url-modal-container {
.configure-server-url-modal-content {
width: auto;
}
}
}