From a73186d7aa7c338eb7734d847d482d2a28be2c70 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 23 Dec 2022 13:06:24 -0500 Subject: [PATCH 1/9] Fixed scss problems --- src/assets/css/librarybrowser.scss | 58 +++++++++++++++--------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 0d7cbf6f67..68103114de 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -597,11 +597,6 @@ display: flex; flex-direction: column; - .layout-mobile & { - padding-left: 5%; - padding-right: 5%; - } - .layout-desktop &, .layout-tv & { .emby-scroller { @@ -626,6 +621,11 @@ } } +.layout-mobile .detailPageContent { + padding-left: 5%; + padding-right: 5%; +} + .detailSectionContent a { color: inherit; } @@ -744,12 +744,16 @@ .layout-mobile .mainDetailButtons { align-items: center; justify-content: center; - text-align: center; + text-align: center !important; } .layout-mobile .mainDetailButtons { margin-top: 1em; margin-bottom: 0.5em; +} + +.layout-mobile [dir="ltr"] .mainDetailButtons { + margin-left: 0; @include header-poster-padding; @@ -758,20 +762,16 @@ margin-bottom: 0; padding-left: 0; } +} - [dir="ltr"] & { - margin-left: 0; - } +.layout-mobile [dir="rtl"] .mainDetailButtons { + margin-right: 0; - [dir="rtl"] & { - margin-right: 0; - padding-left: unset !important; + @include header-poster-padding-rtl; - @include header-poster-padding-rtl; - - @media all and (max-width: 32em) { - padding-right: 0 !important; - } + @media all and (max-width: 32em) { + margin-bottom: 0; + padding-right: 0; } } @@ -839,22 +839,22 @@ min-width: 0; max-width: 100%; flex: 1 0 0; +} - .layout-mobile & { - [dir="ltr"] { - @include header-poster-padding; - } - - [dir="rtl"] & { - @include header-poster-padding-rtl; - } - - @media all and (max-width: 32em) { - position: relative; - } +.layout-mobile .infoWrapper { + @media all and (max-width: 32em) { + position: relative; } } +.layout-mobile [dir="ltr"] .infoWrapper { + @include header-poster-padding; +} + +.layout-mobile [dir="rtl"] .infoWrapper { + @include header-poster-padding-rtl; +} + .infoText { min-width: 0; max-width: 100%; From 7e286ceaf0edeb888a24aa0d91a8235c279c90f3 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 23 Dec 2022 16:24:53 -0500 Subject: [PATCH 2/9] Some css reorganization --- src/assets/css/librarybrowser.scss | 94 ++++++++++++++---------------- 1 file changed, 45 insertions(+), 49 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 68103114de..1fc4aeb48a 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -619,11 +619,11 @@ padding-right: 32.45vw; padding-left: 2%; } -} -.layout-mobile .detailPageContent { - padding-left: 5%; - padding-right: 5%; + .layout-mobile & { + padding-left: 5%; + padding-right: 5%; + } } .detailSectionContent a { @@ -747,31 +747,33 @@ text-align: center !important; } -.layout-mobile .mainDetailButtons { - margin-top: 1em; - margin-bottom: 0.5em; -} +.mainDetailButtons { + .layout-mobile [dir="ltr"] & { + margin-left: 0; -.layout-mobile [dir="ltr"] .mainDetailButtons { - margin-left: 0; + @include header-poster-padding; - @include header-poster-padding; - - // The buttons row is full width on small screens - @media all and (max-width: 32em) { - margin-bottom: 0; - padding-left: 0; + // The buttons row is full width on small screens + @media all and (max-width: 32em) { + margin-bottom: 0; + padding-left: 0; + } } -} -.layout-mobile [dir="rtl"] .mainDetailButtons { - margin-right: 0; + .layout-mobile [dir="rtl"] & { + margin-right: 0; - @include header-poster-padding-rtl; + @include header-poster-padding-rtl; - @media all and (max-width: 32em) { - margin-bottom: 0; - padding-right: 0; + @media all and (max-width: 32em) { + margin-bottom: 0; + padding-right: 0; + } + } + + .layout-mobile & { + margin-top: 1em; + margin-bottom: 0.5em; } } @@ -794,6 +796,16 @@ align-content: center; z-index: 2; + .layout-desktop [dir="rtl"] &, + .layout-tv [dir="rtl"] & { + padding-right: 32.45vw; + } + + .layout-desktop [dir="ltr"] &, + .layout-tv [dir="ltr"] & { + padding-left: 32.45vw; + } + .layout-mobile & { display: block; position: relative; @@ -809,22 +821,6 @@ } } -.layout-desktop [dir="rtl"] .detailPagePrimaryContainer { - padding-right: 32.45vw; -} - -.layout-desktop [dir="ltr"] .detailPagePrimaryContainer { - padding-left: 32.45vw; -} - -.layout-tv [dir="rtl"] .detailPagePrimaryContainer { - padding-right: 32.45vw; -} - -.layout-tv [dir="ltr"] .detailPagePrimaryContainer { - padding-left: 32.45vw; -} - .layout-desktop .detailRibbon { margin-top: -7.2em; height: 7.2em; @@ -839,20 +835,20 @@ min-width: 0; max-width: 100%; flex: 1 0 0; -} -.layout-mobile .infoWrapper { - @media all and (max-width: 32em) { - position: relative; + .layout-mobile [dir="ltr"] & { + @include header-poster-padding; } -} -.layout-mobile [dir="ltr"] .infoWrapper { - @include header-poster-padding; -} + .layout-mobile [dir="rtl"] & { + @include header-poster-padding-rtl; + } -.layout-mobile [dir="rtl"] .infoWrapper { - @include header-poster-padding-rtl; + .layout-mobile & { + @media all and (max-width: 32em) { + position: relative; + } + } } .infoText { From a0c65a6eef4efaa2f7fdec34af792f13660fcd28 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 23 Dec 2022 16:29:24 -0500 Subject: [PATCH 3/9] Revert "Some css reorganization" This reverts commit 6b54c59321b60fd8d31a737c121dadbd3bdc662d. --- src/assets/css/librarybrowser.scss | 94 ++++++++++++++++-------------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 1fc4aeb48a..68103114de 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -619,11 +619,11 @@ padding-right: 32.45vw; padding-left: 2%; } +} - .layout-mobile & { - padding-left: 5%; - padding-right: 5%; - } +.layout-mobile .detailPageContent { + padding-left: 5%; + padding-right: 5%; } .detailSectionContent a { @@ -747,33 +747,31 @@ text-align: center !important; } -.mainDetailButtons { - .layout-mobile [dir="ltr"] & { - margin-left: 0; +.layout-mobile .mainDetailButtons { + margin-top: 1em; + margin-bottom: 0.5em; +} - @include header-poster-padding; +.layout-mobile [dir="ltr"] .mainDetailButtons { + margin-left: 0; - // The buttons row is full width on small screens - @media all and (max-width: 32em) { - margin-bottom: 0; - padding-left: 0; - } + @include header-poster-padding; + + // The buttons row is full width on small screens + @media all and (max-width: 32em) { + margin-bottom: 0; + padding-left: 0; } +} - .layout-mobile [dir="rtl"] & { - margin-right: 0; +.layout-mobile [dir="rtl"] .mainDetailButtons { + margin-right: 0; - @include header-poster-padding-rtl; + @include header-poster-padding-rtl; - @media all and (max-width: 32em) { - margin-bottom: 0; - padding-right: 0; - } - } - - .layout-mobile & { - margin-top: 1em; - margin-bottom: 0.5em; + @media all and (max-width: 32em) { + margin-bottom: 0; + padding-right: 0; } } @@ -796,16 +794,6 @@ align-content: center; z-index: 2; - .layout-desktop [dir="rtl"] &, - .layout-tv [dir="rtl"] & { - padding-right: 32.45vw; - } - - .layout-desktop [dir="ltr"] &, - .layout-tv [dir="ltr"] & { - padding-left: 32.45vw; - } - .layout-mobile & { display: block; position: relative; @@ -821,6 +809,22 @@ } } +.layout-desktop [dir="rtl"] .detailPagePrimaryContainer { + padding-right: 32.45vw; +} + +.layout-desktop [dir="ltr"] .detailPagePrimaryContainer { + padding-left: 32.45vw; +} + +.layout-tv [dir="rtl"] .detailPagePrimaryContainer { + padding-right: 32.45vw; +} + +.layout-tv [dir="ltr"] .detailPagePrimaryContainer { + padding-left: 32.45vw; +} + .layout-desktop .detailRibbon { margin-top: -7.2em; height: 7.2em; @@ -835,20 +839,20 @@ min-width: 0; max-width: 100%; flex: 1 0 0; +} - .layout-mobile [dir="ltr"] & { - @include header-poster-padding; +.layout-mobile .infoWrapper { + @media all and (max-width: 32em) { + position: relative; } +} - .layout-mobile [dir="rtl"] & { - @include header-poster-padding-rtl; - } +.layout-mobile [dir="ltr"] .infoWrapper { + @include header-poster-padding; +} - .layout-mobile & { - @media all and (max-width: 32em) { - position: relative; - } - } +.layout-mobile [dir="rtl"] .infoWrapper { + @include header-poster-padding-rtl; } .infoText { From a01b4285876036bff1d3260ebccfdf5ac06175ad Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Fri, 23 Dec 2022 16:36:48 -0500 Subject: [PATCH 4/9] Some scss reorganizing --- src/assets/css/librarybrowser.scss | 42 +++++++++++++----------------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 68103114de..181df7c92b 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -807,22 +807,16 @@ .layout-tv & { display: block; } -} -.layout-desktop [dir="rtl"] .detailPagePrimaryContainer { - padding-right: 32.45vw; -} + .layout-desktop [dir="rtl"] &, + .layout-tv [dir="rtl"] & { + padding-right: 32.45vw; + } -.layout-desktop [dir="ltr"] .detailPagePrimaryContainer { - padding-left: 32.45vw; -} - -.layout-tv [dir="rtl"] .detailPagePrimaryContainer { - padding-right: 32.45vw; -} - -.layout-tv [dir="ltr"] .detailPagePrimaryContainer { - padding-left: 32.45vw; + .layout-desktop [dir="ltr"] &, + .layout-tv [dir="ltr"] & { + padding-left: 32.45vw; + } } .layout-desktop .detailRibbon { @@ -839,20 +833,20 @@ min-width: 0; max-width: 100%; flex: 1 0 0; -} -.layout-mobile .infoWrapper { - @media all and (max-width: 32em) { - position: relative; + .layout-mobile & { + @media all and (max-width: 32em) { + position: relative; + } } -} -.layout-mobile [dir="ltr"] .infoWrapper { - @include header-poster-padding; -} + .layout-mobile [dir="ltr"] & { + @include header-poster-padding; + } -.layout-mobile [dir="rtl"] .infoWrapper { - @include header-poster-padding-rtl; + .layout-mobile [dir="rtl"] & { + @include header-poster-padding-rtl; + } } .infoText { From 1421daa99f5ace4bb3d4469f878bfcce754cdc2d Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 21 Jan 2023 16:53:24 -0500 Subject: [PATCH 5/9] Some fixes --- src/assets/css/librarybrowser.scss | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 181df7c92b..d0796ceb88 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -610,6 +610,11 @@ } } + .layout-mobile & { + padding-left: 5% !important; + padding-right: 5% !important; + } + [dir="ltr"] & { padding-left: 32.45vw; padding-right: 2%; @@ -621,11 +626,6 @@ } } -.layout-mobile .detailPageContent { - padding-left: 5%; - padding-right: 5%; -} - .detailSectionContent a { color: inherit; } @@ -738,6 +738,18 @@ } } +[dir=ltr] .mainDetailButtons { + @media all and (max-width: 62.5em) { + margin-left: -0.5em; + } +} + +[dir=rtl] .mainDetailButtons { + @media all and (max-width: 62.5em) { + margin-right: -0.5em; + } +} + .layout-mobile .parentName, .layout-mobile .itemName, .layout-mobile .itemMiscInfo, @@ -1135,10 +1147,6 @@ div.itemDetailGalleryLink.defaultCardBackground { } @media all and (max-width: 62.5em) { - .mainDetailButtons { - margin-left: -0.5em; - } - .detailButtonHideonMobile { display: none !important; } From 7285f12f134343876fdc174c3628322b5006648f Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 21 Jan 2023 16:54:02 -0500 Subject: [PATCH 6/9] cleanup --- src/assets/css/librarybrowser.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index d0796ceb88..4f510926e3 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -669,11 +669,6 @@ margin: 1em 0; } -.detailButton, -.mainDetailButtons { - display: flex; -} - .itemName { margin: 0.5em 0; font-weight: 600; From 0579c43122b105fb5866c1c4163d6c06fcfd8a90 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Sat, 21 Jan 2023 18:46:14 -0500 Subject: [PATCH 7/9] Fixed scss ordering --- src/assets/css/librarybrowser.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 4f510926e3..a05a7a2ff1 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -610,11 +610,6 @@ } } - .layout-mobile & { - padding-left: 5% !important; - padding-right: 5% !important; - } - [dir="ltr"] & { padding-left: 32.45vw; padding-right: 2%; @@ -624,6 +619,11 @@ padding-right: 32.45vw; padding-left: 2%; } + + .layout-mobile & { + padding-left: 5%; + padding-right: 5%; + } } .detailSectionContent a { From 4e3635bbe3723ed22dbe30b25a5c73e4463c2030 Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 30 Jan 2023 20:12:23 -0500 Subject: [PATCH 8/9] Removed useless margins --- src/assets/css/librarybrowser.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index a05a7a2ff1..0a996f6441 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -733,18 +733,6 @@ } } -[dir=ltr] .mainDetailButtons { - @media all and (max-width: 62.5em) { - margin-left: -0.5em; - } -} - -[dir=rtl] .mainDetailButtons { - @media all and (max-width: 62.5em) { - margin-right: -0.5em; - } -} - .layout-mobile .parentName, .layout-mobile .itemName, .layout-mobile .itemMiscInfo, From 7bfc452272be9952d592ed60cebc592bd2a796ae Mon Sep 17 00:00:00 2001 From: Hadi Charara Date: Mon, 30 Jan 2023 20:23:32 -0500 Subject: [PATCH 9/9] Fixed text-align. --- src/assets/css/librarybrowser.scss | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 0a996f6441..66e9aad7d8 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -739,7 +739,7 @@ .layout-mobile .mainDetailButtons { align-items: center; justify-content: center; - text-align: center !important; + text-align: center; } .layout-mobile .mainDetailButtons { @@ -847,14 +847,6 @@ .infoText { min-width: 0; max-width: 100%; - - [dir="ltr"] & { - text-align: left; - } - - [dir="rtl"] & { - text-align: right; - } } .detailPageSecondaryContainer {