wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Respect safe area (notch) of mobile devices

Browse Source 
This adds paddings to various containers so that buttons and contents are not
hidden by the notch or the Home indicator (the gray bar at the bottom).

- `src/assets/css/librarybrowser.scss`
  - `.skinHeader`: menu bar at the top.
  - `.padded-left` and `.padded-right`: the heading of library.

- `src/assets/css/site.scss`
  - `.content-primary`, `.padded-bottom-page`, `.page`,
    `.pageWithAbsoluteTabs`, and `.pageTabContent`: settings and dashboards.

- `src/elements/emby-scroller/emby-scroller.scss`
  - `.emby-scroller`: the library items.

- `src/assets/css/videoosd.scss`
  - `.videoOsdBottom`: the video playback control buttons and the progress bar.

- `src/components/alphaPicker/style.scss`
  - `.alphaPicker-fixed` and `.alphaPicker-fixed-right`: the alphabet picker.

- `src/components/appFooter/appFooter.scss`
  - `.appfooter`: the bottom bar showing the currently playing media.

- `src/components/multiSelect/multiSelect.scss`
  - `.selectionCommandsPanel`: the top bar when selecting multiple media.
    Shown when long-pressing media.

- `src/components/remotecontrol/remotecontrol.scss`
  - `.playlistSectionButton`: the bottom bar for current playlist.
    Shown when touching `.appfooter`.

- `src/components/toast/toast.scss`
  - `.toastContainer`: the toast.  Shown when refreshing metadata.

- `src/index.html`
  - `.mainDrawerHandle`: gesture area for the drawer.
    It seems conflicting with gestures of Safari.

- `src/libraries/navdrawer/navdrawer.scss`
  - `.tmla-mask` and `.touch-menu-la`: the drawer.

- `src/plugins/htmlVideoPlayer/style.scss`
  - `.videoPlayerContainer`: the video area when not fullscreen.
  - `.videoSubtitles`: the video subtitles for some devices, not including
    iPhone.

- `src/plugins/youtubePlayer/style.scss`
  - `.youtubePlayerContainer` container for the YouTube plugin.  Not tested.
This commit is contained in:
taku0
2022-05-29 22:20:15 +09:00
parent 864f4646dd
commit 3d51c68725
13 changed files with 56 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/librarybrowser.scss
+6
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%);
}
}
src/assets/css/site.scss
+1
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 {
src/assets/css/videoosd.scss
+3
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;
src/components/alphaPicker/style.scss
+5
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);
}
}
src/components/appFooter/appFooter.scss
+7
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 {
src/components/multiSelect/multiSelect.scss
+7 -1
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;
src/components/remotecontrol/remotecontrol.scss
+3
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,
src/components/toast/toast.scss
+6 -1
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;
}
src/elements/emby-scroller/emby-scroller.scss
+4
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;
}
src/index.html
+1
View File
@@ -102,6 +102,7 @@
bottom: 0;
z-index: 1;
width: 0.8em;
padding-left: env(safe-area-inset-left);
}
@-webkit-keyframes fadein {
src/libraries/navdrawer/navdrawer.scss
+2
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 {
src/plugins/htmlVideoPlayer/style.scss
+7
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 {
src/plugins/youtubePlayer/style.scss
+4
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 {