knobs look way better

This commit is contained in:
Mark McDowall 2013-06-28 01:20:15 -07:00
parent f7c340d795
commit acf16f6bd3
6 changed files with 47 additions and 22 deletions

View File

@ -93,3 +93,8 @@
font-size : 56px;
color : white;
}
.label-large {
padding: 4px 6px;
font-size: 16px;
}

View File

@ -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};

View File

@ -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>

View File

@ -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>

View File

@ -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);

View File

@ -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;
}
}
}