aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorStefan Parviainen <saparvia@caterva.eu>2015-01-02 18:14:23 +0100
committerStefan Parviainen <saparvia@caterva.eu>2015-01-02 18:14:23 +0100
commit42773a11220a5bba7bdf3395e3f00913dce9f5a0 (patch)
treeb8ee07461ede28262724f79a1350c3fadbcd8a11
parent68c612c597471404201099ecbc8b4082d152e18a (diff)
downloadvolse-hubzilla-42773a11220a5bba7bdf3395e3f00913dce9f5a0.tar.gz
volse-hubzilla-42773a11220a5bba7bdf3395e3f00913dce9f5a0.tar.bz2
volse-hubzilla-42773a11220a5bba7bdf3395e3f00913dce9f5a0.zip
Reworked switch to also display text
-rw-r--r--view/css/mod_connect.css4
-rw-r--r--view/css/mod_group.css4
-rw-r--r--view/css/mod_settings.css8
-rw-r--r--view/css/mod_thing.css4
-rw-r--r--view/theme/redbasic/css/style.css122
-rwxr-xr-xview/tpl/field_checkbox.tpl2
-rwxr-xr-xview/tpl/field_intcheckbox.tpl2
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>