milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #3676 from taku0/safe-area-inset

Browse source
This commit is contained in:
Bill Thornton 2022-08-25 09:19:42 -04:00 • committed by GitHub
commit f426747b62
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 56 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/assets/css/librarybrowser.scss
View file

@ -175,6 +175,9 @@
flex-direction: column;
contain: layout style paint;
transition: background ease-in-out 0.5s;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
}
.layout-tv .skinHeader {
@ -1146,10 +1149,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
.padded-left {
padding-left: 3.3%;
padding-left: max(env(safe-area-inset-left), 3.3%);
}
.padded-right {
padding-right: 3.3%;
padding-right: max(env(safe-area-inset-right), 3.3%);
}
.padded-top {
@ -1173,6 +1178,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
@media all and (min-height: 31.25em) {
.padded-right-withalphapicker {
padding-right: 7.5%;
padding-right: max(env(safe-area-inset-left), 7.5%);
}
}

1
src/assets/css/site.scss
View file

@ -84,6 +84,7 @@ div[data-role="page"] {
.pageWithAbsoluteTabs .pageTabContent {
/* provides room for the music controls */
padding-bottom: 5em !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
}
.readOnlyContent {

3
src/assets/css/videoosd.scss
View file

@ -12,8 +12,11 @@
right: 0;
position: fixed;
background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: 7.5em;
padding-bottom: 1.75em;
padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
display: flex;
flex-direction: row;
justify-content: center;

5
src/components/alphaPicker/style.scss
View file

@ -12,6 +12,7 @@
.alphaPicker-fixed {
position: fixed;
bottom: 5.5em;
bottom: max(env(safe-area-inset-bottom), 5.5em);
}
.alphaPickerRow {
@ -45,6 +46,7 @@
@media all and (max-height: 50em) {
.alphaPicker-fixed {
bottom: 5em;
bottom: max(env(safe-area-inset-bottom), 5em);
}
.alphaPickerButton-vertical {
@ -104,15 +106,18 @@
.alphaPicker-fixed.alphaPicker-tv {
bottom: 1%;
bottom: max(env(safe-area-inset-bottom), 1%);
}
.alphaPicker-fixed-right {
right: 0.4em;
right: max(env(safe-area-inset-right), 0.4em);
}
@media all and (min-width: 62.5em) {
.alphaPicker-fixed-right {
right: 1em;
right: max(env(safe-area-inset-right), 1em);
}
}

7
src/components/appFooter/appFooter.scss
View file

@ -6,6 +6,13 @@
bottom: 0;
transition: transform 180ms linear;
contain: layout style;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
.appfooter:empty {
padding: 0;
}
.appfooter.headroom--unpinned {

8
src/components/multiSelect/multiSelect.scss
View file

@ -14,7 +14,13 @@
top: 0;
left: 0;
right: 0;
padding: 1em 0.5em;
padding-left: 0.5em;
padding-left: max(env(safe-area-inset-left), 0.5em);
padding-right: 0.5em;
padding-right: max(env(safe-area-inset-right), 0.5em);
padding-top: 1em;
padding-top: max(env(safe-area-inset-top), 1em);
padding-bottom: 1em;
display: flex;
align-items: center;
z-index: 99999;

3
src/components/remotecontrol/remotecontrol.scss
View file

@ -195,7 +195,10 @@
height: 4.2em;
right: 0;
padding-left: 7.3%;
padding-left: max(env(safe-area-inset-left), 7.3%);
padding-right: 7.3%;
padding-right: max(env(safe-area-inset-right), 7.3%);
padding-bottom: env(safe-area-inset-bottom);
}
.layout-desktop .playlistSectionButton,

7
src/components/toast/toast.scss
View file

@ -4,7 +4,12 @@
bottom: 0;
pointer-events: none;
z-index: 9999999;
padding: 1em;
padding-left: 1em;
padding-left: max(env(safe-area-inset-left), 1em);
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-bottom: max(env(safe-area-inset-bottom), 1em);
display: flex;
flex-direction: column;
}

4
src/elements/emby-scroller/emby-scroller.scss
View file

@ -4,7 +4,9 @@
.emby-scroller {
margin-left: 3.3%;
margin-left: max(env(safe-area-inset-left), 3.3%);
margin-right: 3.3%;
margin-right: max(env(safe-area-inset-right), 3.3%);
}
/* align first card in scroller to heading */
@ -21,7 +23,9 @@
.layout-tv .emby-scroller,
.layout-mobile .emby-scroller {
padding-left: 3.3%;
padding-left: max(env(safe-area-inset-left), 3.3%);
padding-right: 3.3%;
padding-right: max(env(safe-area-inset-right), 3.3%);
margin-left: 0;
margin-right: 0;
}

1
src/index.html
View file

@ -102,6 +102,7 @@
bottom: 0;
z-index: 1;
width: 0.8em;
padding-left: env(safe-area-inset-left);
}
@-webkit-keyframes fadein {

2
src/libraries/navdrawer/navdrawer.scss
View file

@ -4,6 +4,8 @@
top: 0;
bottom: 0;
contain: strict;
box-sizing: border-box;
padding-left: env(safe-area-inset-left);
}
.touch-menu-la {

7
src/plugins/htmlVideoPlayer/style.scss
View file

@ -7,6 +7,10 @@
display: flex;
align-items: center;
background: #000 !important;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.videoPlayerContainer-onTop {
@ -58,6 +62,9 @@ video[controls]::-webkit-media-controls {
right: 0;
color: #fff;
font-size: 170%;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
.videoSubtitlesInner {

4
src/plugins/youtubePlayer/style.scss
View file

@ -7,6 +7,10 @@
right: 0;
display: flex;
align-items: center;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.youtubePlayerContainer.onTop {