diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/css/bootstrap-red.css | 4 | ||||
| -rw-r--r-- | view/css/mod_connect.css | 5 | ||||
| -rw-r--r-- | view/css/mod_group.css | 3 | ||||
| -rw-r--r-- | view/css/mod_settings.css | 8 | ||||
| -rw-r--r-- | view/css/mod_thing.css | 6 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 81 | ||||
| -rwxr-xr-x | view/tpl/field_checkbox.tpl | 3 | ||||
| -rwxr-xr-x | view/tpl/field_intcheckbox.tpl | 3 | ||||
| -rw-r--r-- | view/tpl/profile_hide_friends.tpl | 5 | ||||
| -rwxr-xr-x | view/tpl/settings.tpl | 2 | ||||
| -rwxr-xr-x | view/tpl/settings_features.tpl | 2 |
11 files changed, 100 insertions, 22 deletions
diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css index 12287ba4f..5d9bb6e90 100644 --- a/view/css/bootstrap-red.css +++ b/view/css/bootstrap-red.css @@ -79,3 +79,7 @@ nav .navbar-toggle { code { white-space: normal; } + +/* Bootstrap assumes that checkboxes are on the left of labels, while it's usually the opposite in Red */ +.field.checkbox input[type="checkbox"] { margin-left: 0px; } +.field.checkbox label { padding-left: 0px; font-weight: 700} diff --git a/view/css/mod_connect.css b/view/css/mod_connect.css index d1a46ec48..da1265c52 100644 --- a/view/css/mod_connect.css +++ b/view/css/mod_connect.css @@ -6,6 +6,7 @@ margin-top: 25px; } -#sellpage-edit label{ +/* first-of-type needed to style switches */ +#sellpage-edit label:first-of-type { width: 300px; -}
\ No newline at end of file +} diff --git a/view/css/mod_group.css b/view/css/mod_group.css index cc5f15843..cd6b7acc7 100644 --- a/view/css/mod_group.css +++ b/view/css/mod_group.css @@ -3,7 +3,8 @@ margin-top: 30px; } -#group-edit-form label { +/* first-of-type needed to style switches */ +#group-edit-form label:first-of-type { float: left; width: 300px; } diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css index b03023e21..7b0c8e7ed 100644 --- a/view/css/mod_settings.css +++ b/view/css/mod_settings.css @@ -28,7 +28,8 @@ ul#settings-privacy-macros { margin-bottom: 10px; } -#settings-permissions-wrapper .field label{ +/* first-of-type needed to be able to style switches */ +#settings-permissions-wrapper .field label:first-of-type { width: 350px; } @@ -41,7 +42,8 @@ ul#settings-privacy-macros { margin-bottom: 45px; } -#settings-notifications label { +/* first-of-type needed to be able to style switches */ +#settings-notifications .field label:first-of-type { margin-left: 20px; width: 330px; } @@ -63,4 +65,4 @@ ul#settings-privacy-macros { #settings-channel-menu-end { clear: both; margin-bottom: 15px; -}
\ No newline at end of file +} diff --git a/view/css/mod_thing.css b/view/css/mod_thing.css index 125230b38..9c1eb2b21 100644 --- a/view/css/mod_thing.css +++ b/view/css/mod_thing.css @@ -4,8 +4,8 @@ margin-left: 0; } - -.thing-label, .field label, .thing-verb-label, .thing-profile-label{ +/* first-of-type needed to style switches */ +.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{ float: left; width: 350px; } @@ -18,4 +18,4 @@ .thing-field-end { clear: both; -}
\ No newline at end of file +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 60760509d..f88febf4d 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -301,14 +301,13 @@ footer { #main-login #id_remember { float: left; padding: 0; - margin-top: 15px; margin-bottom: 0; margin-left: 0; width: 20px; } -#main-login .field.checkbox label { - margin-top: 15px; +/* first-of-type needed to style switches */ +#main-login .field.checkbox label:first-of-type { margin-bottom: 0; float: left; width: 100px; @@ -373,13 +372,15 @@ footer { font-weight: bold; } -#profile-edit-wrapper .field label { +#profile-edit-wrapper .field { margin-top: 20px; +} +/* first-of-type needed to style switches */ +#profile-edit-wrapper .field label:first-of-type { width: 175px; } #profile-edit-wrapper .field input[type="text"] { - margin-top: 20px; width: 220px; } @@ -1242,7 +1243,8 @@ footer { width: 100% } -.field label { +/* first-of-type needed to style switches */ +.field label:first-of-type { float: left; width: 350px; } @@ -1296,6 +1298,8 @@ footer { .hidden { display: none!important; } .field.radio .field_help { margin-left: 0px; } +.field.checkbox .field_help { display: inline; margin-left: 10px; } + /** * OAuth @@ -2350,3 +2354,68 @@ aside .nav > li > a:hover, aside .nav > li > a:focus { .jothidden .bootstrap-tagsinput:hover, .jothidden .bootstrap-tagsinput: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:nth-of-type(2) { + width: 0px; + margin: 0px; + float: none; +} + +/* Turn checkboxes into switches */ +/* Doesn't work with IE<9. */ +.field.checkbox input { + position: absolute; + margin-left: -9999px; + visibility: hidden; +} +.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; + + float:left; +} + +.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; +} diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl index 51d56f69c..7e4f00a2d 100755 --- a/view/tpl/field_checkbox.tpl +++ b/view/tpl/field_checkbox.tpl @@ -1,5 +1,4 @@ <div class='field checkbox'> <label 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}}> - <span class='field_help'>{{$field.3}}</span> + <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label for='id_{{$field.0}}'></label><span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl index d9a8d7289..41ee46822 100755 --- a/view/tpl/field_intcheckbox.tpl +++ b/view/tpl/field_intcheckbox.tpl @@ -1,5 +1,4 @@ <div class='field checkbox'> <label 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}}> - <span class='field_help'>{{$field.4}}</span> + <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}><label for='id_{{$field.0}}'></label><span class='field_help'>{{$field.4}}</span> </div> diff --git a/view/tpl/profile_hide_friends.tpl b/view/tpl/profile_hide_friends.tpl index 1d748cd4e..4ed6782bb 100644 --- a/view/tpl/profile_hide_friends.tpl +++ b/view/tpl/profile_hide_friends.tpl @@ -1,3 +1,6 @@ +{{include file="field_checkbox.tpl"}} + +{{* <p id="hide-friends-text"> {{$desc}} </p> @@ -14,4 +17,4 @@ <div id="hide-friends-end"></div> </div> - +*}} diff --git a/view/tpl/settings.tpl b/view/tpl/settings.tpl index 47d85d8e4..9e53d4f98 100755 --- a/view/tpl/settings.tpl +++ b/view/tpl/settings.tpl @@ -62,7 +62,7 @@ {{$suggestme}} -{{include file="field_yesno.tpl" field=$blocktags}} +{{include file="field_checkbox.tpl" field=$blocktags}} {{include file="field_input.tpl" field=$expire}} diff --git a/view/tpl/settings_features.tpl b/view/tpl/settings_features.tpl index 3291162fa..3ede4c76d 100755 --- a/view/tpl/settings_features.tpl +++ b/view/tpl/settings_features.tpl @@ -9,7 +9,7 @@ <h3 class="settings-heading">{{$f.0}}</h3> {{foreach $f.1 as $fcat}} - {{include file="{{$field_yesno}}" field=$fcat}} + {{include file="field_checkbox.tpl" field=$fcat}} {{/foreach}} {{/foreach}} |