mirror of https://github.com/lidarr/Lidarr
knobs look way better
This commit is contained in:
parent
f7c340d795
commit
acf16f6bd3
|
@ -93,3 +93,8 @@
|
|||
font-size : 56px;
|
||||
color : white;
|
||||
}
|
||||
|
||||
.label-large {
|
||||
padding: 4px 6px;
|
||||
font-size: 16px;
|
||||
}
|
|
@ -475,6 +475,7 @@
|
|||
) return;
|
||||
|
||||
s.val(v);
|
||||
s.$.trigger('change', v);
|
||||
}
|
||||
, kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<fieldset>
|
||||
<legend>General</legend>
|
||||
<legend>Misc</legend>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label">Backlog Searching</label>
|
||||
|
@ -49,9 +49,9 @@
|
|||
<div class="controls">
|
||||
<textarea rows="3" name="nzbRestrictions" class="nzb-restrictions"></textarea>
|
||||
<span class="help-inline">
|
||||
<i class="icon-question-sign" title="White list or black list nzbs based on these rules<br/>White list: +:LoL<br/>Black list: -:French"/>
|
||||
<i class="icon-question-sign" title="Blacklist NZBs based on these words (case-insensitive)"/>
|
||||
</span>
|
||||
<span class="text-area-help">Newline-delimited set of rules in the form of +|-:</span>
|
||||
<span class="text-area-help">Newline-delimited set of rules</span>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
|
@ -1,8 +1,20 @@
|
|||
<div class="quality-size-item">
|
||||
<h2 class="center-block">{{name}}</h2>
|
||||
<div class="size">
|
||||
<div class="size-value-wrapper">
|
||||
<div>
|
||||
<span class="label label-large label-warning x-size-thirty"
|
||||
name="thirtyMinuteSize"
|
||||
title="Maximum size for a 30 minute episode in Megabytes">
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label label-large label-info x-size-sixty"
|
||||
name="sixtyMinuteSize"
|
||||
title="Maximum size for a 60 minute episode in Megabytes">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" name="maxSize" class="knob x-knob" />
|
||||
</div>
|
||||
<div class="size-value">30 minute limit: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB</div>
|
||||
<div class="size-value">60 minute limit: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB</div>
|
||||
</div>
|
|
@ -8,16 +8,17 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
|
|||
|
||||
ui: {
|
||||
knob : '.x-knob',
|
||||
thirtyMinuteSize: '.thirty-minute-size',
|
||||
sixtyMinuteSize : '.sixty-minute-size'
|
||||
thirtyMinuteSize: '.x-size-thirty',
|
||||
sixtyMinuteSize : '.x-size-sixty'
|
||||
},
|
||||
|
||||
events: {
|
||||
'change .x-knob': '_changeMaxSize'
|
||||
// 'change .x-knob': '_changeMaxSize'
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
this.qualityProfileCollection = options.qualityProfiles;
|
||||
this.model.on('change:maxSize', this._changeMaxSize, this)
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
|
@ -26,15 +27,14 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
|
|||
max : 200,
|
||||
step : 10,
|
||||
cursor : 25,
|
||||
width : 100,
|
||||
stopper : true
|
||||
width : 150,
|
||||
stopper : true,
|
||||
displayInput : false
|
||||
});
|
||||
},
|
||||
|
||||
_changeMaxSize: function (e, value) {
|
||||
this.model.set({
|
||||
maxSize: value
|
||||
});
|
||||
_changeMaxSize: function (e) {
|
||||
var value = this.model.get('maxSize');
|
||||
|
||||
this.ui.thirtyMinuteSize.html(value * 30);
|
||||
this.ui.sixtyMinuteSize.html(value * 60);
|
||||
|
|
|
@ -32,17 +32,18 @@
|
|||
.quality-size-item {
|
||||
|
||||
.card;
|
||||
text-align: center;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
height: 220px;
|
||||
padding: 10px 15px;
|
||||
|
||||
h3 {
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.size {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
|
@ -52,8 +53,14 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.size-value {
|
||||
text-align: center;
|
||||
.size-value-wrapper {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue