From 014419231870b5d773b12bd7a323246b3a67a4c4 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 25 Jan 2020 20:38:29 +0100 Subject: [PATCH 1/9] Adjust header margins and padding --- src/assets/css/librarybrowser.css | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index e5f45f7ab1..7cdd584cec 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -115,7 +115,7 @@ display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; - margin: 0.3em 0 0 0.5em; + margin: 0 0 0 0.5em; height: 1.7em; -webkit-box-align: center; -webkit-align-items: center; @@ -272,7 +272,26 @@ } } -@media all and (min-width:84em) { +@media all and (min-width: 84em) { + .headerTop { + padding: 1.25em 1.25em; + } + + .headerTabs { + -webkit-align-self: center; + align-self: center; + width: auto; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-top: -3em; + position: relative; + top: -1.05em; + } + .libraryPage:not(.noSecondaryNavPage) { padding-top: 4.6em !important; } @@ -426,7 +445,7 @@ .desktopMiscInfoContainer { position: absolute; - bottom: .75em + bottom: 0.75em; } .layout-mobile .detailPagePrimaryContainer { From 072118ab6599f458a01829a7def2ee3f9947566f Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 25 Jan 2020 20:39:03 +0100 Subject: [PATCH 2/9] Center text vertically in listviews --- src/components/listview/listview.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css index 9c32d01222..b653502dae 100644 --- a/src/components/listview/listview.css +++ b/src/components/listview/listview.css @@ -111,6 +111,10 @@ text-overflow: ellipsis; } +.layout-desktop .listItemBodyText { + margin: 0.25em 0 0 0; +} + .listItemBodyText-nowrap { white-space: nowrap; } From 1b45bf1aae4830affccb3869709135718ef34d0c Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 25 Jan 2020 20:39:26 +0100 Subject: [PATCH 3/9] Fix misaligned server select card in TV layout --- src/components/emby-scroller/emby-scroller.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css index 11c2c73271..d2157f9355 100644 --- a/src/components/emby-scroller/emby-scroller.css +++ b/src/components/emby-scroller/emby-scroller.css @@ -13,6 +13,11 @@ margin-right: 1.2em; } +.servers > .card > .cardBox { + margin-left: .6em; + margin-right: .6em; +} + .layout-tv .emby-scroller, .layout-mobile .emby-scroller { padding-left: 3.3%; From f2ca10aae951a86219b561c8e0c7dd69676c2a0a Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 25 Jan 2020 23:37:58 +0100 Subject: [PATCH 4/9] Align section title with chevron --- src/assets/css/librarybrowser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 7cdd584cec..a2ae5aac43 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -969,7 +969,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .sectionTitleTextButton > .sectionTitle { - margin-bottom: 0; + margin-bottom: 0.35em; margin-top: 0; } From 19ce5531605ee7e2b20f0fbd5450700ab70190f3 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 25 Jan 2020 23:49:42 +0100 Subject: [PATCH 5/9] Align text with icons in navigation drawer --- src/assets/css/librarybrowser.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index a2ae5aac43..662ac3bf6c 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -201,6 +201,7 @@ .navMenuOptionText { white-space: nowrap; + margin-top: 0.25em; } .sidebarHeader { From b59ab3605ef0daaec33449de6efb38c223bcd8b3 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 1 Feb 2020 18:56:19 +0100 Subject: [PATCH 6/9] Fix some rebasing issues --- package.json | 2 +- src/assets/css/librarybrowser.css | 128 +++++++++--------- src/components/alphapicker/style.css | 1 - .../emby-scroller/emby-scroller.css | 4 +- src/elements/emby-input/emby-input.css | 4 +- 5 files changed, 69 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 02ae28eaa7..4392f12153 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "serve": "webpack-dev-server --config webpack.dev.js --open", "build": "webpack --config webpack.prod.js", "lint": "eslint \"src\"", - "stylelint": "stylelint src/**/*.css", + "stylelint": "stylelint \"src/**/*.css\"", "prepare": "webpack --config webpack.prod.js" } } diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 662ac3bf6c..0210641029 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -449,9 +449,41 @@ bottom: 0.75em; } -.layout-mobile .detailPagePrimaryContainer { +.parentName { display: block; - position: relative; + margin-bottom: 0.5em; +} + +.mainDetailButtons { + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + margin: 1em 0; +} + +.detailButton, +.mainDetailButtons { + display: flex; + display: -webkit-box; + display: -webkit-flex; +} + +.itemName { + margin: 0.5em 0; +} + +.itemMiscInfo { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; } .layout-mobile .parentName, @@ -463,14 +495,6 @@ justify-content: center; } -.layout-mobile .infoText { - white-space: normal; -} - -.layout-tv .detailPagePrimaryContainer { - position: relative; -} - .detailPagePrimaryContainer { display: flex; align-items: center; @@ -480,6 +504,15 @@ z-index: 2; } +.layout-mobile .detailPagePrimaryContainer { + display: block; + position: relative; +} + +.layout-tv .detailPagePrimaryContainer { + position: relative; +} + .detailSticky { background-color: #101010; } @@ -495,6 +528,10 @@ text-align: left; } +.layout-mobile .infoText { + white-space: normal; +} + .detailPageSecondaryContainer { margin: 1.25em 0; } @@ -562,9 +599,9 @@ -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } -@media all and (max-width:62.5em) { +@media all and (max-width: 62.5em) { .detailPageWrapperContainer { - position: relative + position: relative; } .btnPlaySimple { @@ -578,11 +615,6 @@ } } -.parentName { - display: block; - margin-bottom: 0.5em; -} - .btnSyncComplete { background: #673ab7 !important; } @@ -633,17 +665,6 @@ } } -.detailButton, -.mainDetailButtons { - display: flex; - display: -webkit-box; - display: -webkit-flex; -} - -.itemName { - margin: 0.5em 0; -} - .empty { margin: 0; } @@ -656,16 +677,6 @@ margin-top: 0; } -.mainDetailButtons { - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - align-items: center; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - margin: 1em 0; -} - .recordingFields button { margin-left: 0; margin-right: 0.5em; @@ -690,24 +701,24 @@ padding: 0.5em 0.7em !important; } -@media all and (min-width:29em) { +@media all and (min-width: 29em) { .detailButton { - padding-left: .75em !important; - padding-right: .75em !important + padding-left: 0.75em !important; + padding-right: 0.75em !important; } } -@media all and (min-width:32em) { +@media all and (min-width: 32em) { .detailButton { - padding-left: .8em !important; - padding-right: .8em !important + padding-left: 0.8em !important; + padding-right: 0.8em !important; } } -@media all and (min-width:35em) { +@media all and (min-width: 35em) { .detailButton { - padding-left: .85em !important; - padding-right: .85em !important + padding-left: 0.85em !important; + padding-right: 0.85em !important; } } @@ -740,7 +751,7 @@ } .detailButton-text { - margin-top: .7em; + margin-top: 0.7em; font-size: 80%; font-weight: 400; } @@ -751,13 +762,13 @@ } .detailButtonHideonMobile { - display: none !important + display: none !important; } } -@media all and (min-width:62.5em) { +@media all and (min-width: 62.5em) { .headerTop { - padding: 0.8em 0 + padding: 0.8em 0; } .headerTabs { @@ -774,7 +785,7 @@ } .personBackdrop { - display: none !important + display: none !important; } .mainDetailButtons { @@ -789,17 +800,6 @@ } } -.itemMiscInfo { - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -webkit-align-items: center; - align-items: center; -} - @media all and (max-width: 31.25em) { .mobileDetails .itemMiscInfo { text-align: center; @@ -1000,7 +1000,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { margin-bottom: -1em; } -@media all and (min-height:31.25em) { +@media all and (min-height: 31.25em) { .padded-right-withalphapicker { padding-right: 7.5%; } diff --git a/src/components/alphapicker/style.css b/src/components/alphapicker/style.css index 2f396d1fec..4e94c0f754 100644 --- a/src/components/alphapicker/style.css +++ b/src/components/alphapicker/style.css @@ -112,7 +112,6 @@ } @media all and (min-width: 62.5em) { - .alphaPicker-fixed-right { right: 1em; } diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css index d2157f9355..d4d2c69c85 100644 --- a/src/components/emby-scroller/emby-scroller.css +++ b/src/components/emby-scroller/emby-scroller.css @@ -14,8 +14,8 @@ } .servers > .card > .cardBox { - margin-left: .6em; - margin-right: .6em; + margin-left: 0.6em; + margin-right: 0.6em; } .layout-tv .emby-scroller, diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 683498455b..18ad37a87a 100644 --- a/src/elements/emby-input/emby-input.css +++ b/src/elements/emby-input/emby-input.css @@ -21,8 +21,8 @@ border: 0; } -.emby-input:required { - box-shadow: none; +.emby-input:required { + box-shadow: none; } .inputContainer { From 65de99f6dd3b275d38bbe7dda425b38d5a2bc461 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 2 Feb 2020 10:20:33 +0100 Subject: [PATCH 7/9] Correct page title margin --- src/assets/css/librarybrowser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 0210641029..f5b3103038 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -115,7 +115,7 @@ display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; - margin: 0 0 0 0.5em; + margin: 0.3em 0 0 0.5em; height: 1.7em; -webkit-box-align: center; -webkit-align-items: center; From d104d03e5ce2be27ad6ee39ff7fbc27beb7c40a0 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 2 Feb 2020 11:10:26 +0100 Subject: [PATCH 8/9] Adjust tabs top margin --- src/assets/css/librarybrowser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index f5b3103038..dd47651d3f 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -290,7 +290,7 @@ justify-content: center; margin-top: -3em; position: relative; - top: -1.05em; + top: -0.35em; } .libraryPage:not(.noSecondaryNavPage) { From c9de45e55a813b04e4eef07a10cab0e1ef8812c6 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 2 Feb 2020 11:56:45 +0100 Subject: [PATCH 9/9] Small tab improvements --- src/assets/css/librarybrowser.css | 10 +++++----- src/components/emby-tabs/emby-tabs.css | 5 ++++- src/themes/dark/theme.css | 8 ++++++++ 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index dd47651d3f..8475b72b2f 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -275,7 +275,7 @@ @media all and (min-width: 84em) { .headerTop { - padding: 1.25em 1.25em; + padding: 0.8em 0.8em; } .headerTabs { @@ -288,9 +288,8 @@ -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; - margin-top: -3em; position: relative; - top: -0.35em; + margin-top: -4.3em; } .libraryPage:not(.noSecondaryNavPage) { @@ -768,7 +767,8 @@ @media all and (min-width: 62.5em) { .headerTop { - padding: 0.8em 0; + padding-left: 0.8em; + padding-right: 0.8em; } .headerTabs { @@ -776,7 +776,7 @@ width: auto; align-items: center; justify-content: center; - margin-top: -3.34em; + margin-top: -4.3em; position: relative; } diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css index 8d1ac464fb..733a05fb0b 100644 --- a/src/components/emby-tabs/emby-tabs.css +++ b/src/components/emby-tabs/emby-tabs.css @@ -1,4 +1,7 @@ .emby-tab-button { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; background: transparent; box-shadow: none; cursor: pointer; @@ -10,7 +13,7 @@ vertical-align: middle; flex-shrink: 0; margin: 0; - padding: 1em 0.9em; + padding: 1.5em; position: relative; height: auto; min-width: initial; diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 4912e591c7..58e9ab1856 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -311,6 +311,14 @@ html { .emby-tab-button-active { color: #fff; + border-bottom: 2px solid #fff; + padding-top: 1.55em; + padding-bottom: 1.38em; +} + +.layout-mobile .emby-tab-button-active { + padding-top: 1.56em; /* Add one pixel to get a better fit in mobile layout */ + padding-bottom: 1.38em; } .emby-tab-button.show-focus:focus {