From e6a79582741ea75183c9d77f8f02a273e1fce3ac Mon Sep 17 00:00:00 2001 From: p0ps Date: Mon, 29 Oct 2018 06:12:22 +0100 Subject: [PATCH] Feature/bootstrap add new show (#5509) * Made add-new-show responsive. With allot of css hacking. Need to run tests on the supported browsers. * fix color for light theme. * Fixed width for chrome and firefox. * Fixed lint-css warnings. Replaced maring-left with padding-right. Makes it align better, when floating to next row. * Added changelog. * Finally was able to build the theme. --- CHANGELOG.md | 1 + themes-default/slim/static/css/dark.css | 8 +- themes-default/slim/static/css/style.css | 30 +++- .../slim/views/addShows_newShow.mako | 134 ++++++++++-------- themes/dark/assets/css/style.css | 30 +++- themes/dark/assets/css/themed.css | 8 +- themes/dark/templates/addShows_newShow.mako | 134 ++++++++++-------- themes/light/assets/css/style.css | 30 +++- themes/light/templates/addShows_newShow.mako | 134 ++++++++++-------- 9 files changed, 307 insertions(+), 202 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37933490ed..d02224570f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Vueified restart page, moved JS files to Vue, added `state-switch` component and misc changes ([#5159](https://github.com/pymedusa/Medusa/pull/5159)) - Added support for SABnzbd's Direct Unpack feature ([#5385](https://github.com/pymedusa/Medusa/pull/5385)) - Added config/search values to apiv2 ([#5079](https://github.com/pymedusa/Medusa/pull/5079)) +- Improved the add new show page responsiveness on smaller width viewports ([#5509](https://github.com/pymedusa/Medusa/pull/5509)) #### Fixes - Fixed many release name parsing issues as a result of updating `guessit` ([#4244](https://github.com/pymedusa/Medusa/pull/4244)) diff --git a/themes-default/slim/static/css/dark.css b/themes-default/slim/static/css/dark.css index 46ac8dec2c..ef79f793e4 100644 --- a/themes-default/slim/static/css/dark.css +++ b/themes-default/slim/static/css/dark.css @@ -787,12 +787,16 @@ legend.legendStep { margin-bottom: 0; } -div.stepsguide .step p { +div.stepsguide .step { margin: 12px 0; border-bottom: 4px solid rgb(35, 175, 220); } -div.stepsguide .disabledstep p { +div.stepsguide .step p { + margin: 12px 0; +} + +div.stepsguide .disabledstep { border-bottom: 4px solid rgb(17, 120, 179); } diff --git a/themes-default/slim/static/css/style.css b/themes-default/slim/static/css/style.css index 3313c22146..c4b79e42c5 100644 --- a/themes-default/slim/static/css/style.css +++ b/themes-default/slim/static/css/style.css @@ -522,6 +522,12 @@ div.xem { line-height: 40px; } +.show-add-options > div { + float: left; + padding-right: 10px; + line-height: 40px; +} + .show-grid { display: none; margin-bottom: 60px !important; @@ -884,6 +890,14 @@ home_newShow.mako font-size: 13px; } +#addShowForm > div { + width: 100% !important; +} + +#addShowForm > div:nth-child(2) > div { + position: relative !important; +} + .newShowPortal { max-width: 960px; padding: 10px 0; @@ -3343,11 +3357,15 @@ select.input-sm { formWizard.css ========================================================================== */ +div.stepsguide .step p { + margin: 12px 0; +} + fieldset.sectionwrap { - width: 800px; padding: 5px; text-align: left; border-width: 0; + width: 100%; } legend.legendStep { @@ -3360,25 +3378,23 @@ div.stepsguide { overflow: hidden; text-align: left; cursor: pointer; + display: table; } div.stepsguide .step { - float: left; + display: table-cell; width: 33%; font: bold 24px Arial, sans-serif; -} - -div.stepsguide .step p { - margin: 12px 0; border-bottom: 4px solid rgb(87, 68, 43); } div.stepsguide .disabledstep { color: rgb(196, 196, 196); + border-bottom: 4px solid rgb(138, 119, 94); } div.stepsguide .disabledstep p { - border-bottom: 4px solid rgb(138, 119, 94); + border-bottom: none; } div.stepsguide .step .smalltext { diff --git a/themes-default/slim/views/addShows_newShow.mako b/themes-default/slim/views/addShows_newShow.mako index 2eacd7dfea..bae60935f3 100644 --- a/themes-default/slim/views/addShows_newShow.mako +++ b/themes-default/slim/views/addShows_newShow.mako @@ -518,65 +518,81 @@ window.app = new Vue({
- -    - - * -   - -   - - -

- * This will only affect the language of the retrieved metadata file contents and episode filenames.
- This DOES NOT allow Medusa to download non-english TV episodes! -

- -
- - Searching {{ currentSearch.query }} - on {{ currentSearch.indexerName }} - in {{ currentSearch.languageName }}... -
-
-
- Search Results: - - - - - - - - - - - - - - - - - - - -
Show NamePremiereNetworkIndexer
- - - - - - - {{ result.showName }} - - {{ result.premiereDate }}{{ result.network }} - {{ result.indexerName }} - -
-
- No results found, try a different search. +
+
+
+ +
+ +
+ + * +
+ +
+ +
+ +
+ +
+ +
+

+ * This will only affect the language of the retrieved metadata file contents and episode filenames.
+ This DOES NOT allow Medusa to download non-english TV episodes! +

+
+ +
+
+ + Searching {{ currentSearch.query }} + on {{ currentSearch.indexerName }} + in {{ currentSearch.languageName }}... +
+
+
+ Search Results: + + + + + + + + + + + + + + + + + + + +
Show NamePremiereNetworkIndexer
+ + + + + + + {{ result.showName }} + + {{ result.premiereDate }}{{ result.network }} + {{ result.indexerName }} + +
+
+ No results found, try a different search. +
+
+
diff --git a/themes/dark/assets/css/style.css b/themes/dark/assets/css/style.css index 3313c22146..c4b79e42c5 100644 --- a/themes/dark/assets/css/style.css +++ b/themes/dark/assets/css/style.css @@ -522,6 +522,12 @@ div.xem { line-height: 40px; } +.show-add-options > div { + float: left; + padding-right: 10px; + line-height: 40px; +} + .show-grid { display: none; margin-bottom: 60px !important; @@ -884,6 +890,14 @@ home_newShow.mako font-size: 13px; } +#addShowForm > div { + width: 100% !important; +} + +#addShowForm > div:nth-child(2) > div { + position: relative !important; +} + .newShowPortal { max-width: 960px; padding: 10px 0; @@ -3343,11 +3357,15 @@ select.input-sm { formWizard.css ========================================================================== */ +div.stepsguide .step p { + margin: 12px 0; +} + fieldset.sectionwrap { - width: 800px; padding: 5px; text-align: left; border-width: 0; + width: 100%; } legend.legendStep { @@ -3360,25 +3378,23 @@ div.stepsguide { overflow: hidden; text-align: left; cursor: pointer; + display: table; } div.stepsguide .step { - float: left; + display: table-cell; width: 33%; font: bold 24px Arial, sans-serif; -} - -div.stepsguide .step p { - margin: 12px 0; border-bottom: 4px solid rgb(87, 68, 43); } div.stepsguide .disabledstep { color: rgb(196, 196, 196); + border-bottom: 4px solid rgb(138, 119, 94); } div.stepsguide .disabledstep p { - border-bottom: 4px solid rgb(138, 119, 94); + border-bottom: none; } div.stepsguide .step .smalltext { diff --git a/themes/dark/assets/css/themed.css b/themes/dark/assets/css/themed.css index 46ac8dec2c..ef79f793e4 100644 --- a/themes/dark/assets/css/themed.css +++ b/themes/dark/assets/css/themed.css @@ -787,12 +787,16 @@ legend.legendStep { margin-bottom: 0; } -div.stepsguide .step p { +div.stepsguide .step { margin: 12px 0; border-bottom: 4px solid rgb(35, 175, 220); } -div.stepsguide .disabledstep p { +div.stepsguide .step p { + margin: 12px 0; +} + +div.stepsguide .disabledstep { border-bottom: 4px solid rgb(17, 120, 179); } diff --git a/themes/dark/templates/addShows_newShow.mako b/themes/dark/templates/addShows_newShow.mako index 2eacd7dfea..bae60935f3 100644 --- a/themes/dark/templates/addShows_newShow.mako +++ b/themes/dark/templates/addShows_newShow.mako @@ -518,65 +518,81 @@ window.app = new Vue({
- -    - - * -   - -   - - -

- * This will only affect the language of the retrieved metadata file contents and episode filenames.
- This DOES NOT allow Medusa to download non-english TV episodes! -

- -
- - Searching {{ currentSearch.query }} - on {{ currentSearch.indexerName }} - in {{ currentSearch.languageName }}... -
-
-
- Search Results: - - - - - - - - - - - - - - - - - - - -
Show NamePremiereNetworkIndexer
- - - - - - - {{ result.showName }} - - {{ result.premiereDate }}{{ result.network }} - {{ result.indexerName }} - -
-
- No results found, try a different search. +
+
+
+ +
+ +
+ + * +
+ +
+ +
+ +
+ +
+ +
+

+ * This will only affect the language of the retrieved metadata file contents and episode filenames.
+ This DOES NOT allow Medusa to download non-english TV episodes! +

+
+ +
+
+ + Searching {{ currentSearch.query }} + on {{ currentSearch.indexerName }} + in {{ currentSearch.languageName }}... +
+
+
+ Search Results: + + + + + + + + + + + + + + + + + + + +
Show NamePremiereNetworkIndexer
+ + + + + + + {{ result.showName }} + + {{ result.premiereDate }}{{ result.network }} + {{ result.indexerName }} + +
+
+ No results found, try a different search. +
+
+
diff --git a/themes/light/assets/css/style.css b/themes/light/assets/css/style.css index 3313c22146..c4b79e42c5 100644 --- a/themes/light/assets/css/style.css +++ b/themes/light/assets/css/style.css @@ -522,6 +522,12 @@ div.xem { line-height: 40px; } +.show-add-options > div { + float: left; + padding-right: 10px; + line-height: 40px; +} + .show-grid { display: none; margin-bottom: 60px !important; @@ -884,6 +890,14 @@ home_newShow.mako font-size: 13px; } +#addShowForm > div { + width: 100% !important; +} + +#addShowForm > div:nth-child(2) > div { + position: relative !important; +} + .newShowPortal { max-width: 960px; padding: 10px 0; @@ -3343,11 +3357,15 @@ select.input-sm { formWizard.css ========================================================================== */ +div.stepsguide .step p { + margin: 12px 0; +} + fieldset.sectionwrap { - width: 800px; padding: 5px; text-align: left; border-width: 0; + width: 100%; } legend.legendStep { @@ -3360,25 +3378,23 @@ div.stepsguide { overflow: hidden; text-align: left; cursor: pointer; + display: table; } div.stepsguide .step { - float: left; + display: table-cell; width: 33%; font: bold 24px Arial, sans-serif; -} - -div.stepsguide .step p { - margin: 12px 0; border-bottom: 4px solid rgb(87, 68, 43); } div.stepsguide .disabledstep { color: rgb(196, 196, 196); + border-bottom: 4px solid rgb(138, 119, 94); } div.stepsguide .disabledstep p { - border-bottom: 4px solid rgb(138, 119, 94); + border-bottom: none; } div.stepsguide .step .smalltext { diff --git a/themes/light/templates/addShows_newShow.mako b/themes/light/templates/addShows_newShow.mako index 2eacd7dfea..bae60935f3 100644 --- a/themes/light/templates/addShows_newShow.mako +++ b/themes/light/templates/addShows_newShow.mako @@ -518,65 +518,81 @@ window.app = new Vue({
- -    - - * -   - -   - - -

- * This will only affect the language of the retrieved metadata file contents and episode filenames.
- This DOES NOT allow Medusa to download non-english TV episodes! -

- -
- - Searching {{ currentSearch.query }} - on {{ currentSearch.indexerName }} - in {{ currentSearch.languageName }}... -
-
-
- Search Results: - - - - - - - - - - - - - - - - - - - -
Show NamePremiereNetworkIndexer
- - - - - - - {{ result.showName }} - - {{ result.premiereDate }}{{ result.network }} - {{ result.indexerName }} - -
-
- No results found, try a different search. +
+
+
+ +
+ +
+ + * +
+ +
+ +
+ +
+ +
+ +
+

+ * This will only affect the language of the retrieved metadata file contents and episode filenames.
+ This DOES NOT allow Medusa to download non-english TV episodes! +

+
+ +
+
+ + Searching {{ currentSearch.query }} + on {{ currentSearch.indexerName }} + in {{ currentSearch.languageName }}... +
+
+
+ Search Results: + + + + + + + + + + + + + + + + + + + +
Show NamePremiereNetworkIndexer
+ + + + + + + {{ result.showName }} + + {{ result.premiereDate }}{{ result.network }} + {{ result.indexerName }} + +
+
+ No results found, try a different search. +
+
+