Reworked switch to also display text

7 files changed, 63 insertions, 83 deletions

diff --git a/view/css/mod_connect.css b/view/css/mod_connect.css
index 218b1d2cb..e1f28484a 100644
--- a/view/css/mod_connect.css
+++ b/view/css/mod_connect.css
@@ -6,8 +6,6 @@
 	margin-top: 25px;
 }
 
-/* first-of-type needed to style switches */
-#sellpage-edit label.mainlabel,
-#sellpage-edit label:first-of-type {
+#sellpage-edit > label {
 	width: 300px;
 }
diff --git a/view/css/mod_group.css b/view/css/mod_group.css
index 30a954d2a..91d5b2136 100644
--- a/view/css/mod_group.css
+++ b/view/css/mod_group.css
@@ -3,9 +3,7 @@
 	margin-top: 30px;
 }
 
-/* first-of-type needed to style switches */
-#group-edit-form label.mainlabel,
-#group-edit-form label:first-of-type {
+#group-edit-form > label {
 	float: left;
 	width: 300px;
 }
diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css
index b066e6059..cd66684f8 100644
--- a/view/css/mod_settings.css
+++ b/view/css/mod_settings.css
@@ -28,9 +28,7 @@ ul#settings-privacy-macros {
 	margin-bottom: 10px;
 }
 
-/* first-of-type needed to be able to style switches */
-#settings-permissions-wrapper .field label.mainlabel,
-#settings-permissions-wrapper .field label:first-of-type {
+#settings-permissions-wrapper .field > label {
 	width: 350px;
 }
 
@@ -43,9 +41,7 @@ ul#settings-privacy-macros {
 	margin-bottom: 45px;
 }
 
-/* first-of-type needed to be able to style switches */
-#settings-notifications .field label.mainlabel,
-#settings-notifications .field label:first-of-type {
+#settings-notifications .field > label {
 	margin-left: 20px;
 	width: 330px;
 }
diff --git a/view/css/mod_thing.css b/view/css/mod_thing.css
index ddb2faa87..1b091860b 100644
--- a/view/css/mod_thing.css
+++ b/view/css/mod_thing.css
@@ -4,9 +4,7 @@
 	margin-left: 0;
 }
 
-/* first-of-type needed to style switches */
-.field label.mainlabel,
-.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{
+.thing-label, .field > label, .thing-verb-label, .thing-profile-label{
 	float: left;
 	width: 350px;
 }
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 61acc8ec7..63cf27d58 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -306,9 +306,7 @@ footer {
 	width: 20px;
 }
 
-/* first-of-type needed to style switches */
-#main-login .field.checkbox label.mainlabel,
-#main-login .field.checkbox label:first-of-type {
+#main-login .field.checkbox > label {
 	margin-bottom: 0;
 	float: left;
 	width: 100px;
@@ -376,9 +374,7 @@ footer {
 #profile-edit-wrapper .field {
 	margin-top: 20px;
 }
-/* first-of-type needed to style switches */
-#profile-edit-wrapper .field label.mainlabel,
-#profile-edit-wrapper .field label:first-of-type {
+#profile-edit-wrapper .field > label {
 	width: 175px;
 }
 
@@ -1245,9 +1241,7 @@ footer {
 	width: 100%
 }
 
-/* first-of-type needed to style switches */
-.field label.mainlabel,
-.field label:first-of-type {
+.field > label {
 	float: left;
 	width: 350px;
 }
@@ -2358,69 +2352,65 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
 	border: 1px solid #cccccc;
 }
 
-/* Hide the placeholder label which is used for styling switches */
-/* Many places give a width to all labels, so need to specifically set these to 0 width */
-/* This should probably be moved to core */
-.field.checkbox label.switchlabel,
-.field.checkbox label:nth-of-type(2) {
-	width: 0px; 
-	margin: 0px;
-	float: none;
-}
+
 
 /* Turn checkboxes into switches */
-/* Doesn't work with IE<9. */
+.field.checkbox .fieldhelp { vertical-align:top; }
+.field.checkbox > div {
+    position: relative; width: 70px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+    display:inline-block;
+}
+
 .field.checkbox input {
-  position: absolute;
-  margin-left: -9999px;
-  visibility: hidden;
+    display: none;
 }
-.field.checkbox input + label.switchlabel,
-.field.checkbox input + label:nth-of-type(2) {
-  display: block;
-  position: relative;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
 
-  padding: 2px;
-  width: 60px;
-  height: 24px;
-  background-color: #dddddd;
-  border-radius: 60px;
-  transition: background 0.4s;
+.field.checkbox > div label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 2px solid #999999;
+    border-radius: 20px;
+    margin:0px;
+}
 
-  float:left;
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
+    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
 }
 
-.field.checkbox input + label:before,
-.field.checkbox input + label:after {
-  display: block;
-  position: absolute;
-  content: "";
-}
-.field.checkbox input + label:before {
-  top: 2px;
-  left: 2px;
-  bottom: 2px;
-  right: 2px;
-  background-color: #fff;
-  border-radius: 30px;
-  transition: background 0.4s;
-}
-.field.checkbox input + label:after {
-  top: 4px;
-  left: 4px;
-  bottom: 4px;
-  width: 30px;
-  background-color: #dddddd;
-  border-radius: 30px;
-  transition: margin 0.4s, background 0.4s;
-}
-.field.checkbox input:checked + label {
-  background-color: #8ce196;
-}
-.field.checkbox input:checked + label:after {
-  margin-left: 22px;
-  background-color: #8ce196;
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
+    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+
+.onoffswitch-inner:before {
+    content: attr(data-on);
+    padding-left: 10px;
+    background-color: #EEEEEE;
+}
+
+.onoffswitch-inner:after {
+    content: attr(data-off);
+    padding-right: 10px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
+}
+
+.onoffswitch-switch {
+    display: block; width: 25px; margin-left: 6px; margin-right: 6px; margin-top:5%; margin-bottom:5%;
+    background: #A1A1A1;
+    border: 2px solid #999999; border-radius: 20px;
+    position: absolute; top: 0; bottom: 0; right: 36px;
+    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
+    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
+}
+
+.field.checkbox > div > input:checked + label .onoffswitch-inner {
+    margin-left: 0;
+}
+
+.field.checkbox > div > input:checked + label .onoffswitch-switch {
+    right: -2px;
+    background-color: #27A1CA;
 }
diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl
index 5c7f58ad1..7a2781be0 100755
--- a/view/tpl/field_checkbox.tpl
+++ b/view/tpl/field_checkbox.tpl
@@ -1,4 +1,4 @@
 	<div class='field checkbox'>
 		<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
-		<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.3}}</span>
+		<div><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.4}}{{$field.4.1}}{{/if}}' data-off='{{if $field.4}}{{$field.4.0}}{{/if}}'></span><span class="onoffswitch-switch"></span> </label></div><span class='field_help'>{{$field.3}}</span>
 	</div>
diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl
index 1d0bd9175..847783518 100755
--- a/view/tpl/field_intcheckbox.tpl
+++ b/view/tpl/field_intcheckbox.tpl
@@ -1,4 +1,4 @@
 	<div class='field checkbox'>
 		<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
-		<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.4}}</span>
+		<div><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.5}}{{$field.5.1}}{{/if}}' data-off='{{if $field.5}}{{$field.5.0}}{{/if}}'></span><span class="onoffswitch-switch"></span> </label></div><span class='field_help'>{{$field.4}}</span>
 	</div>