From 6636b77489a6758e715c50cf54061014a2cb80e8 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Thu, 25 Apr 2013 19:44:39 -0700 Subject: [PATCH] Replaced bootstrap switch with css only version! --- Gruntfile.js | 1 - UI/Content/base.less | 8 + UI/Content/bootstrapSwitch.css | 233 ----------------- UI/Content/form.less | 62 ++--- UI/Content/toggle-switch.css | 216 +--------------- UI/Index.html | 4 +- UI/JsLibraries/bootstrap.switch.js | 251 ------------------- UI/Mixins/backbone.bootstrap.switch.mixin.js | 59 ----- UI/Mixins/backbone.modelbinder.mixin.js | 1 - UI/Settings/Naming/NamingTemplate.html | 58 ++++- 10 files changed, 89 insertions(+), 804 deletions(-) delete mode 100644 UI/Content/bootstrapSwitch.css delete mode 100644 UI/JsLibraries/bootstrap.switch.js delete mode 100644 UI/Mixins/backbone.bootstrap.switch.mixin.js diff --git a/Gruntfile.js b/Gruntfile.js index 9addc2676..c57e76824 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -13,7 +13,6 @@ module.exports = function (grunt) { 'UI/JsLibraries/backbone.shortcuts.js' : 'http://raw.github.com/bry4n/backbone-shortcuts/master/backbone.shortcuts.js', //'UI/JsLibraries/bootstrap.js': //'UI/JsLibraries/bootstrap.slider.js': - 'UI/JsLibraries/bootstrap.switch.js' : 'http://raw.github.com/nostalgiaz/bootstrap-switch/master/static/js/bootstrapSwitch.js', 'UI/JsLibraries/handlebars.runtime.js' : 'http://raw.github.com/wycats/handlebars.js/master/dist/handlebars.runtime.js', 'UI/JsLibraries/jquery.cookie.js' : 'http://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js', 'UI/JsLibraries/jquery.js' : 'http://code.jquery.com/jquery.js', diff --git a/UI/Content/base.less b/UI/Content/base.less index b6dbe0b50..63446cdf0 100644 --- a/UI/Content/base.less +++ b/UI/Content/base.less @@ -78,3 +78,11 @@ html { margin-top: 10px; margin-bottom: 30px; } + +button::-moz-focus-inner, a::-moz-focus-inner { + border: 0; +} + +a:focus { + outline: none; +} \ No newline at end of file diff --git a/UI/Content/bootstrapSwitch.css b/UI/Content/bootstrapSwitch.css deleted file mode 100644 index 77b2640ba..000000000 --- a/UI/Content/bootstrapSwitch.css +++ /dev/null @@ -1,233 +0,0 @@ -/* ============================================================ - * bootstrapSwitch v1.2 by Larentis Mattia @spiritualGuru - * http://www.larentis.eu/switch/ - * ============================================================ - * Licensed under the Apache License, Version 2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * ============================================================ */ -/* line 18, ../sass/bootstrapSwitch.scss */ -.has-switch { - display: inline-block; - cursor: pointer; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - border: 1px solid; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - background: #e6e6e6; - position: relative; - text-align: left; - overflow: hidden; - line-height: 8px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-width: 102px; -} - -/* line 40, ../sass/bootstrapSwitch.scss */ -.has-switch.switch-mini { - min-width: 72px; -} - -/* line 44, ../sass/bootstrapSwitch.scss */ -.has-switch.switch-small { - min-width: 81px; -} - -/* line 48, ../sass/bootstrapSwitch.scss */ -.has-switch.switch-large { - min-width: 120px; -} - -/* line 52, ../sass/bootstrapSwitch.scss */ -.has-switch.deactivate { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - opacity: 0.5; - cursor: default !important; -} - -/* line 55, ../sass/bootstrapSwitch.scss */ -.has-switch.deactivate label, .has-switch.deactivate span { - cursor: default !important; -} - -/* line 59, ../sass/bootstrapSwitch.scss */ -.has-switch > div { - display: inline-block; - width: 150%; - position: relative; - top: 0; -} - -/* line 65, ../sass/bootstrapSwitch.scss */ -.has-switch > div.switch-animate { - -webkit-transition: left 0.5s; - -moz-transition: left 0.5s; - -o-transition: left 0.5s; - transition: left 0.5s; -} - -/* line 68, ../sass/bootstrapSwitch.scss */ -.has-switch > div.switch-off { - left: -50%; -} - -/* line 71, ../sass/bootstrapSwitch.scss */ -.has-switch > div.switch-on { - left: 0%; -} - -/* line 75, ../sass/bootstrapSwitch.scss */ -.has-switch input[type=checkbox] { - display: none; -} - -/* line 83, ../sass/bootstrapSwitch.scss */ -.has-switch span, .has-switch label { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - cursor: pointer; - position: relative; - display: inline-block; - height: 100%; - padding-bottom: 4px; - padding-top: 4px; - font-size: 14px; - line-height: 20px; -} - -/* line 96, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-mini, .has-switch label.switch-mini { - padding-bottom: 4px; - padding-top: 4px; - font-size: 10px; - line-height: 9px; -} - -/* line 103, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-small, .has-switch label.switch-small { - padding-bottom: 3px; - padding-top: 3px; - font-size: 12px; - line-height: 18px; -} - -/* line 110, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-large, .has-switch label.switch-large { - padding-bottom: 9px; - padding-top: 9px; - font-size: 16px; - line-height: normal; -} - -/* line 118, ../sass/bootstrapSwitch.scss */ -.has-switch label { - background: white; - margin-top: -1px; - margin-bottom: -1px; - z-index: 100; - width: 33.333333%; - border-left: 1px solid #e6e6e6; - border-right: 1px solid #e6e6e6; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); -} - -/* line 130, ../sass/bootstrapSwitch.scss */ -.has-switch span { - color: white; - text-align: center; - z-index: 1; - width: 33.333333%; -} - -/* line 136, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-left { - -moz-border-radius-topleft: 4px; - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -/* line 140, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-right { - color: black; - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); - background-image: -webkit-linear-gradient(bottom, #ffffff, #e6e6e6); - background-image: -moz-linear-gradient(bottom, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(bottom, #ffffff, #e6e6e6); - background-image: linear-gradient(bottom, #ffffff, #e6e6e6); -} - -/* line 147, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-primary, .has-switch span.switch-left { - color: white; - background: #0088cc; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0088cc), color-stop(100%, #0055cc)); - background-image: -webkit-linear-gradient(bottom, #0088cc, #0055cc); - background-image: -moz-linear-gradient(bottom, #0088cc, #0055cc); - background-image: -o-linear-gradient(bottom, #0088cc, #0055cc); - background-image: linear-gradient(bottom, #0088cc, #0055cc); -} - -/* line 152, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-info { - color: white; - background: #5bc0de; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4)); - background-image: -webkit-linear-gradient(bottom, #5bc0de, #2f96b4); - background-image: -moz-linear-gradient(bottom, #5bc0de, #2f96b4); - background-image: -o-linear-gradient(bottom, #5bc0de, #2f96b4); - background-image: linear-gradient(bottom, #5bc0de, #2f96b4); -} - -/* line 158, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-success { - color: white; - background: #62c462; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #62c462), color-stop(100%, #51a351)); - background-image: -webkit-linear-gradient(bottom, #62c462, #51a351); - background-image: -moz-linear-gradient(bottom, #62c462, #51a351); - background-image: -o-linear-gradient(bottom, #62c462, #51a351); - background-image: linear-gradient(bottom, #62c462, #51a351); -} - -/* line 164, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-warning { - color: white; - background: #dbb450; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dbb450), color-stop(100%, #f89406)); - background-image: -webkit-linear-gradient(bottom, #dbb450, #f89406); - background-image: -moz-linear-gradient(bottom, #dbb450, #f89406); - background-image: -o-linear-gradient(bottom, #dbb450, #f89406); - background-image: linear-gradient(bottom, #dbb450, #f89406); -} - -/* line 170, ../sass/bootstrapSwitch.scss */ -.has-switch span.switch-danger { - color: white; - background: #ee5f5b; - background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f)); - background-image: -webkit-linear-gradient(bottom, #ee5f5b, #bd362f); - background-image: -moz-linear-gradient(bottom, #ee5f5b, #bd362f); - background-image: -o-linear-gradient(bottom, #ee5f5b, #bd362f); - background-image: linear-gradient(bottom, #ee5f5b, #bd362f); -} diff --git a/UI/Content/form.less b/UI/Content/form.less index fa8414ad7..40723b113 100644 --- a/UI/Content/form.less +++ b/UI/Content/form.less @@ -1,19 +1,4 @@ -.form-horizontal .controls i { - font-size: 16px; - /*color: #3A87AD;*/ - /* Info blue */ - color: #595959; - cursor: default; -} - -.form-horizontal .controls i.warning { - color: #f89406; -} - -.form-horizontal .controls i.danger { - color: #b94a48; -} -.form-horizontal { +.form-horizontal { .controls { i.danger { color: #b94a48; @@ -26,41 +11,30 @@ color: #595959; cursor: default; } + .checkbox { + width: 100px; + margin-left: 0px; + display: inline-block; + padding-top: 0px; + margin-bottom: 0px; + } + + .help-inline-checkbox { + padding-left: 5px; + display: inline-block; + margin-top: -20px; + margin-bottom: 0; + vertical-align: middle; + } } } -.switch { - float: left; -} + .text-area-help { display: block; color: #777777; font-size: 12px; } -textarea.nzb-restrictions { - width: 260px; -} -.help-inline-checkbox { - float: left; - padding-left: 7px; - padding-top: 3px; -} - -.help-inline-checkbox { - float: left; - padding-left: 7px; - padding-top: 3px; -} - -.switch { - float: left; -} textarea.nzb-restrictions { - width: 260px; -} - -.text-area-help { - display: block; - color: #777777; - font-size: 12px; + width: 260px; } \ No newline at end of file diff --git a/UI/Content/toggle-switch.css b/UI/Content/toggle-switch.css index 05c9aebca..5604b2415 100644 --- a/UI/Content/toggle-switch.css +++ b/UI/Content/toggle-switch.css @@ -32,7 +32,6 @@ https://github.com/ghinda/css-toggle-switch .toggle label { position: relative; z-index: 3; - display: block; width: 100%; } @@ -48,11 +47,9 @@ https://github.com/ghinda/css-toggle-switch .toggle p { position: absolute; left: -100px; - width: 100%; margin: 0; padding-right: 100px; - text-align: left; } @@ -61,12 +58,11 @@ https://github.com/ghinda/css-toggle-switch top: 0; left: 0; z-index: 5; - display: block; width: 50%; margin-left: 100px; - text-align: center; + color: #F5F5F5; } .toggle p span:last-child { @@ -78,8 +74,7 @@ https://github.com/ghinda/css-toggle-switch right: 0; top: 0; z-index: 4; - - display: block; + display: inline; width: 50%; height: 100%; padding: 0; @@ -198,11 +193,11 @@ https://github.com/ghinda/css-toggle-switch .toggle .slide-button { display: block; - -webkit-transition: all 0.3s ease-out; - -moz-transition: all 0.3s ease-out; - -ms-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-in 0s; + -moz-transition: all 0.3s ease-in 0s; + -ms-transition: all 0.3s ease-in 0s; + -o-transition: all 0.3s ease-in 0s; + transition: all 0.3s ease-in 0s; } .toggle label, @@ -217,10 +212,11 @@ https://github.com/ghinda/css-toggle-switch } /* Outline the toggles when the inputs are focused */ - .toggle input:focus ~ .slide-button, - .switch input:focus + label { - outline: 1px dotted #888; - } + /*.toggle input:focus ~ .slide-button,*/ + /* WHY?! It looks awful and it seems to bug out in FF */ + /*.switch input:focus + label {*/ + /*outline: 1px dotted #888;*/ + /*}*/ /* Bugfix for older Webkit, including mobile Webkit. Adapted from: * http://css-tricks.com/webkit-sibling-bug/ @@ -230,192 +226,4 @@ https://github.com/ghinda/css-toggle-switch } @-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } } - - - /* Standalone Themes */ - - - /* Candy Theme - * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck - * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/ - */ - - .candy { - background-color: #2d3035; - - color: #fff; - font-weight: bold; - text-align: center; - text-shadow: 1px 1px 1px #191b1e; - - border-radius: 3px; - - box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); - } - - .candy input:checked + label { - color: #333; - text-shadow: 0 1px 0 rgba(255,255,255,0.5); - } - - .candy .slide-button { - border: 1px solid #333; - - background-color: #70c66b; - - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); - background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); - background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); - - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45); - - border-radius: 3px; - } - - .candy p { - color: #333; - - text-shadow: none; - } - - .candy span { - color: #fff; - } - - .candy.blue .slide-button { - background-color: #38a3d4; - } - - .candy.yellow .slide-button { - background-color: #f5e560; - } - - /* Android Theme - * Based on Holo - */ - - .android { - background-color: #b6b6b6; - - color: #fff; - } - - .android.toggle { - border: 2px solid #b6b6b6; - } - - .android.switch { - overflow: hidden; - } - - .android.switch .slide-button { - background-color: #279fca; - - -webkit-transform: skew(20deg) translateX(10px); - -moz-transform: skew(20deg) translateX(10px); - -ms-transform: skew(20deg) translateX(10px); - -o-transform: skew(20deg) translateX(10px); - transform: skew(20deg); - } - - .android.toggle .slide-button { - border-radius: 2px; - - background-color: #848484; - } - - /* Selected ON toggle */ - .android.toggle input:first-of-type:checked ~ .slide-button { - background-color: #279fca; - } - - .android.switch input:first-of-type:checked ~ .slide-button { - -webkit-transform: skew(20deg) translateX(-10px); - -moz-transform: skew(20deg) translateX(-10px); - -ms-transform: skew(20deg) translateX(-10px); - -o-transform: skew(20deg) translateX(-10px); - transform: skew(20deg) translateX(-10px); - } - - .android p { - color: #333; - } - - .android span { - color: #fff; - } - - .android.switch, - .android span { - text-transform: uppercase; - } - - /* iOS Theme - * Similar to iOS but more accessible - */ - - .ios { - background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); - background: -moz-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); - background: -o-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); - background: -ms-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); - background: linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); - - -webkit-box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6; - box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6; - - border: 1px solid #efefef; - border-radius: 3px; - - color: #7f7f7f; - font: bold 14px sans-serif; - text-align: center; - text-shadow: none; - } - - .ios.toggle .slide-button { - border: 1px solid #919191; - background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb); - background: -moz-linear-gradient(top, #cdcdcd, #fbfbfb); - background: -o-linear-gradient(top, #cdcdcd, #fbfbfb); - background: -ms-linear-gradient(top, #cdcdcd, #fbfbfb); - background: linear-gradient(top, #cdcdcd, #fbfbfb); - - border-radius: 3px; - - -webkit-box-shadow: inset 0 1px 0 #f0f0f0; - box-shadow: inset 0 1px 0 #f0f0f0; - } - - /* Selected ON toggle */ - .ios.toggle input:first-of-type:checked ~ p span:first-child, - .ios.switch input:checked + label { - color: #fff; - text-shadow: 0 -1px 0 #1b3b6f; - } - - .ios.toggle input:first-of-type:checked ~ .slide-button, - .ios.switch .slide-button { - background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); - background: -moz-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); - background: -o-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); - background: -ms-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); - background: linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); - - border-radius: 3px; - border: 1px solid #1654b5; - - text-align: center; - color: #fff; - - font: bold 14px sans-serif; - text-shadow: 0 -1px 0 #1b3b6f; - } - - .ios.toggle p span { - color: #7f7f7f; - } - } diff --git a/UI/Index.html b/UI/Index.html index f9bd36199..803d046d6 100644 --- a/UI/Index.html +++ b/UI/Index.html @@ -11,7 +11,6 @@ - @@ -19,11 +18,13 @@ + + @@ -91,7 +92,6 @@ - diff --git a/UI/JsLibraries/bootstrap.switch.js b/UI/JsLibraries/bootstrap.switch.js deleted file mode 100644 index 46b9216cc..000000000 --- a/UI/JsLibraries/bootstrap.switch.js +++ /dev/null @@ -1,251 +0,0 @@ -/* ============================================================ - * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru - * http://www.larentis.eu/switch/ - * ============================================================ - * Licensed under the Apache License, Version 2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * ============================================================ */ - -!function ($) { - "use strict"; - - $.fn['bootstrapSwitch'] = function (method) { - var methods = { - init: function () { - return this.each(function () { - var $element = $(this) - , $div - , $switchLeft - , $switchRight - , $label - , myClasses = "" - , classes = $element.attr('class') - , color - , moving - , onLabel = "ON" - , offLabel = "OFF" - , icon = false; - - $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { - if (classes.indexOf(el) >= 0) - myClasses = el; - }); - - $element.addClass('has-switch'); - - if ($element.data('on') !== undefined) - color = "switch-" + $element.data('on'); - - if ($element.data('on-label') !== undefined) - onLabel = $element.data('on-label'); - - if ($element.data('off-label') !== undefined) - offLabel = $element.data('off-label'); - - if ($element.data('icon') !== undefined) - icon = $element.data('icon'); - - $switchLeft = $('') - .addClass("switch-left") - .addClass(myClasses) - .addClass(color) - .html(onLabel); - - color = ''; - if ($element.data('off') !== undefined) - color = "switch-" + $element.data('off'); - - $switchRight = $('') - .addClass("switch-right") - .addClass(myClasses) - .addClass(color) - .html(offLabel); - - $label = $('