Skip to content

Commit

Permalink
Feature/bootstrap add new show (#5509)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@p0psicles
p0psicles authored Oct 29, 2018
1 parent d544aa6 commit e6a7958
Show file tree
Hide file tree
Showing 9 changed files with 307 additions and 202 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
8 changes: 6 additions & 2 deletions themes-default/slim/static/css/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
30 changes: 23 additions & 7 deletions themes-default/slim/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
134 changes: 75 additions & 59 deletions themes-default/slim/views/addShows_newShow.mako
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,65 +518,81 @@ window.app = new Vue({
</span>
</div>
<div v-else class="stepDiv">
<input type="text" v-model.trim="nameToSearch" ref="nameToSearch" @keyup.enter="searchIndexers" class="form-control form-control-inline input-sm input350"/>
&nbsp;&nbsp;
<language-select @update-language="indexerLanguage = $event" ref="indexerLanguage" :language="indexerLanguage" :available="validLanguages.join(',')" class="form-control form-control-inline input-sm"></language-select>
<b>*</b>
&nbsp;
<select v-model.number="indexerId" class="form-control form-control-inline input-sm">
<option v-for="(indexer, indexerId) in indexers" :value="indexerId">{{indexer.name}}</option>
</select>
&nbsp;
<input class="btn-medusa btn-inline" type="button" value="Search" @click="searchIndexers" />
<p style="padding: 20px 0;">
<b>*</b> This will only affect the language of the retrieved metadata file contents and episode filenames.<br>
This <b>DOES NOT</b> allow Medusa to download non-english TV episodes!
</p>
<div v-show="displayStatus === 'searching'">
<img :src="spinnerSrc" height="32" width="32" />
Searching <b>{{ currentSearch.query }}</b>
on {{ currentSearch.indexerName }}
in {{ currentSearch.languageName }}...
</div>
<div v-show="displayStatus === 'status'" v-html="searchStatus"></div>
<div v-if="displayStatus === 'results'" class="search-results">
<legend class="legendStep">Search Results:</legend>
<table v-if="searchResults.length !== 0" class="search-results">
<thead>
<tr>
<th></th>
<th>Show Name</th>
<th class="premiere">Premiere</th>
<th class="network">Network</th>
<th class="indexer">Indexer</th>
</tr>
</thead>
<tbody>
<tr v-for="result in searchResults" @click="selectResult(result)" :class="{ selected: selectedShowSlug === result.slug }">
<td class="search-result">
<input v-if="!result.alreadyAdded" v-model="selectedShowSlug" type="radio" :value="result.slug" />
<app-link v-else :href="result.alreadyAdded" title="Show already added - jump to show page">
<img height="16" width="16" src="images/ico/favicon-16.png" />
</app-link>
</td>
<td>
<app-link :href="result.indexerShowUrl" title="Go to the show's page on the indexer site">
<b>{{ result.showName }}</b>
</app-link>
</td>
<td class="premiere">{{ result.premiereDate }}</td>
<td class="network">{{ result.network }}</td>
<td class="indexer">
{{ result.indexerName }}
<img height="16" width="16" :src="result.indexerIcon" />
</td>
</tr>
</tbody>
</table>
<div v-else class="no-results">
<b>No results found, try a different search.</b>
<div class="row">
<div class="col-lg-12 show-add-options">
<div class="show-add-option">
<input type="text" v-model.trim="nameToSearch" ref="nameToSearch" @keyup.enter="searchIndexers" class="form-control form-control-inline input-sm input350"/>
</div>
<div class="show-add-option">
<language-select @update-language="indexerLanguage = $event" ref="indexerLanguage" :language="indexerLanguage" :available="validLanguages.join(',')" class="form-control form-control-inline input-sm"></language-select>
<b>*</b>
</div>
<div class="show-add-option">
<select v-model.number="indexerId" class="form-control form-control-inline input-sm">
<option v-for="(indexer, indexerId) in indexers" :value="indexerId">{{indexer.name}}</option>
</select>
</div>
<div class="show-add-option">
<input class="btn-medusa btn-inline" type="button" value="Search" @click="searchIndexers" />
</div>
<div style="display: inline-block">
<p style="padding: 20px 0;">
<b>*</b> This will only affect the language of the retrieved metadata file contents and episode filenames.<br>
This <b>DOES NOT</b> allow Medusa to download non-english TV episodes!
</p>
</div>
<div>
<div v-show="displayStatus === 'searching'">
<img :src="spinnerSrc" height="32" width="32" />
Searching <b>{{ currentSearch.query }}</b>
on {{ currentSearch.indexerName }}
in {{ currentSearch.languageName }}...
</div>
<div v-show="displayStatus === 'status'" v-html="searchStatus"></div>
<div v-if="displayStatus === 'results'" class="search-results">
<legend class="legendStep">Search Results:</legend>
<table v-if="searchResults.length !== 0" class="search-results">
<thead>
<tr>
<th></th>
<th>Show Name</th>
<th class="premiere">Premiere</th>
<th class="network">Network</th>
<th class="indexer">Indexer</th>
</tr>
</thead>
<tbody>
<tr v-for="result in searchResults" @click="selectResult(result)" :class="{ selected: selectedShowSlug === result.slug }">
<td class="search-result">
<input v-if="!result.alreadyAdded" v-model="selectedShowSlug" type="radio" :value="result.slug" />
<app-link v-else :href="result.alreadyAdded" title="Show already added - jump to show page">
<img height="16" width="16" src="images/ico/favicon-16.png" />
</app-link>
</td>
<td>
<app-link :href="result.indexerShowUrl" title="Go to the show's page on the indexer site">
<b>{{ result.showName }}</b>
</app-link>
</td>
<td class="premiere">{{ result.premiereDate }}</td>
<td class="network">{{ result.network }}</td>
<td class="indexer">
{{ result.indexerName }}
<img height="16" width="16" :src="result.indexerIcon" />
</td>
</tr>
</tbody>
</table>
<div v-else class="no-results">
<b>No results found, try a different search.</b>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
30 changes: 23 additions & 7 deletions themes/dark/assets/css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions themes/dark/assets/css/themed.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e6a7958

Please sign in to comment.