AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better screen usage for smaller mobile size (#1348)

Browse source 
* Updating styles to use space better for smaller mobile

* Fixing side-nav issue
This commit is contained in:
Robbie Davis 2022-07-01 14:46:41 -04:00 • committed by GitHub
parent 3430a61480
commit b5f7ff5aac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/app.component.scss
View file

@ -19,7 +19,7 @@
} }
.content-wrapper { .content-wrapper {
padding: 0 10px 0; padding: 0 5px 0;
overflow: hidden; overflow: hidden;
&.closed { &.closed {

4
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
View file

@ -47,6 +47,10 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
@media (max-width: 576px) {
padding: 0 10px 0 5px;
}
.btn { .btn {
text-decoration: none; text-decoration: none;
color: hsla(0,0%,100%,.7); color: hsla(0,0%,100%,.7);

6
UI/Web/src/app/sidenav/side-nav/side-nav.component.scss
View file

@ -2,7 +2,7 @@
padding-bottom: 10px; padding-bottom: 10px;
width: 190px; width: 190px;
background-color: var(--side-nav-bg-color); background-color: var(--side-nav-bg-color);
height: calc(100vh - 85px); height: calc((var(--vh)*100) - 85px);
position: fixed; position: fixed;
margin: 0; margin: 0;
left: 10px; left: 10px;
@ -36,7 +36,7 @@
padding: 10px 0; padding: 10px 0;
width: 55vw; width: 55vw;
background-color: var(--side-nav-mobile-bg-color); background-color: var(--side-nav-mobile-bg-color);
height: calc(100vh - 56px); height: calc((var(--vh)*100) - 56px);
position: fixed; position: fixed;
margin: 0; margin: 0;
left: 0; left: 0;
@ -61,7 +61,7 @@
.side-nav-overlay { .side-nav-overlay {
background-color: var(--side-nav-overlay-color); background-color: var(--side-nav-overlay-color);
width: 100vw; width: 100vw;
height: calc(100vh - 56px); height: calc((var(--vh)*100) - 56px);
position: absolute; position: absolute;
left: 0; left: 0;
z-index: 998; z-index: 998;