diff options
Diffstat (limited to 'view')
29 files changed, 134 insertions, 38 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..218b1d2cb 100644 --- a/view/css/mod_connect.css +++ b/view/css/mod_connect.css @@ -6,6 +6,8 @@ margin-top: 25px; } -#sellpage-edit label{ +/* first-of-type needed to style switches */ +#sellpage-edit label.mainlabel, +#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..30a954d2a 100644 --- a/view/css/mod_group.css +++ b/view/css/mod_group.css @@ -3,7 +3,9 @@ margin-top: 30px; } -#group-edit-form label { +/* first-of-type needed to style switches */ +#group-edit-form label.mainlabel, +#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..b066e6059 100644 --- a/view/css/mod_settings.css +++ b/view/css/mod_settings.css @@ -28,7 +28,9 @@ 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.mainlabel, +#settings-permissions-wrapper .field label:first-of-type { width: 350px; } @@ -41,7 +43,9 @@ ul#settings-privacy-macros { margin-bottom: 45px; } -#settings-notifications label { +/* first-of-type needed to be able to style switches */ +#settings-notifications .field label.mainlabel, +#settings-notifications .field label:first-of-type { margin-left: 20px; width: 330px; } @@ -63,4 +67,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..ddb2faa87 100644 --- a/view/css/mod_thing.css +++ b/view/css/mod_thing.css @@ -4,8 +4,9 @@ margin-left: 0; } - -.thing-label, .field label, .thing-verb-label, .thing-profile-label{ +/* first-of-type needed to style switches */ +.field label.mainlabel, +.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{ float: left; width: 350px; } @@ -18,4 +19,4 @@ .thing-field-end { clear: both; -}
\ No newline at end of file +} diff --git a/view/js/mod_admin.js b/view/js/mod_admin.js new file mode 100644 index 000000000..aad2ca902 --- /dev/null +++ b/view/js/mod_admin.js @@ -0,0 +1,3 @@ +$(document).ready(function() { + $('form').areYouSure(); // Warn user about unsaved settings +}); diff --git a/view/js/mod_profiles.js b/view/js/mod_profiles.js new file mode 100644 index 000000000..aad2ca902 --- /dev/null +++ b/view/js/mod_profiles.js @@ -0,0 +1,3 @@ +$(document).ready(function() { + $('form').areYouSure(); // Warn user about unsaved settings +}); diff --git a/view/js/mod_settings.js b/view/js/mod_settings.js index 90e17afc4..0db0dd165 100644 --- a/view/js/mod_settings.js +++ b/view/js/mod_settings.js @@ -2,6 +2,7 @@ var ispublic = aStr['everybody'] ; $(document).ready(function() { + $('form').areYouSure(); // Warn user about unsaved settings $("a#settings-default-perms-menu").colorbox({ 'inline' : true, diff --git a/view/php/theme_init.php b/view/php/theme_init.php index f28f9aa8d..33b7e87dc 100644 --- a/view/php/theme_init.php +++ b/view/php/theme_init.php @@ -44,6 +44,7 @@ head_add_js('docready.js'); head_add_js('library/colorbox/jquery.colorbox-min.js'); head_add_js('library/bootstrap-tagsinput/bootstrap-tagsinput.js'); +head_add_js('library/jquery.AreYouSure/jquery.are-you-sure.js'); /** * Those who require this feature will know what to do with it. * Those who don't, won't. diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 60760509d..61acc8ec7 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -301,14 +301,14 @@ 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.mainlabel, +#main-login .field.checkbox label:first-of-type { margin-bottom: 0; float: left; width: 100px; @@ -373,13 +373,16 @@ 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.mainlabel, +#profile-edit-wrapper .field label:first-of-type { width: 175px; } #profile-edit-wrapper .field input[type="text"] { - margin-top: 20px; width: 220px; } @@ -1242,7 +1245,9 @@ footer { width: 100% } -.field label { +/* first-of-type needed to style switches */ +.field label.mainlabel, +.field label:first-of-type { float: left; width: 350px; } @@ -1296,6 +1301,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 +2357,70 @@ 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.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 input { + position: absolute; + margin-left: -9999px; + visibility: hidden; +} +.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; + + 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_acheckbox.tpl b/view/tpl/field_acheckbox.tpl index 89de170b7..816af2a65 100755 --- a/view/tpl/field_acheckbox.tpl +++ b/view/tpl/field_acheckbox.tpl @@ -1,6 +1,6 @@ <tr> <td> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> </td> <td class="abook-them"> <input type="checkbox" name='them_{{$field.0}}' id='them_id_{{$field.0}}' value="1" disabled="disabled" {{if $field.2}}checked="checked"{{/if}} /> diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl index 51d56f69c..5c7f58ad1 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> + <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> diff --git a/view/tpl/field_colorinput.tpl b/view/tpl/field_colorinput.tpl index a68781698..a1e912186 100644 --- a/view/tpl/field_colorinput.tpl +++ b/view/tpl/field_colorinput.tpl @@ -1,5 +1,5 @@ <div class='field input color'> - <label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> <input class='color' name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}} <span id='help_{{$field.0}}' class='field_help'>{{$field.3}}</span> <div id='end_{{$field.0}}' class='field_end'></div> diff --git a/view/tpl/field_combobox.tpl b/view/tpl/field_combobox.tpl index 1f9218954..337c60673 100755 --- a/view/tpl/field_combobox.tpl +++ b/view/tpl/field_combobox.tpl @@ -1,5 +1,5 @@ <div class='field combobox'> - <label for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label> {{* html5 don't work on Chrome, Safari and IE9 see https://github.com/thgreasi/datalist-polyfill <input id="id_{{$field.0}}" type="text" list="data_{{$field.0}}" > <datalist id="data_{{$field.0}}" > diff --git a/view/tpl/field_custom.tpl b/view/tpl/field_custom.tpl index a6b49f6da..754f5b2f4 100755 --- a/view/tpl/field_custom.tpl +++ b/view/tpl/field_custom.tpl @@ -1,5 +1,5 @@ <div class='field custom'> - <label for='{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='{{$field.0}}'>{{$field.1}}</label> {{$field.2}} <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_input.tpl b/view/tpl/field_input.tpl index a584f95e7..be6e3f047 100755 --- a/view/tpl/field_input.tpl +++ b/view/tpl/field_input.tpl @@ -1,5 +1,5 @@ <div class='field input'> - <label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label> <input name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}">{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}} <span id='help_{{$field.0}}' class='field_help'>{{$field.3}}</span> <div id='end_{{$field.0}}' class='field_end'></div> diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl index d9a8d7289..1d0bd9175 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> + <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> diff --git a/view/tpl/field_password.tpl b/view/tpl/field_password.tpl index 23058f8a6..38ecf3d07 100755 --- a/view/tpl/field_password.tpl +++ b/view/tpl/field_password.tpl @@ -1,5 +1,5 @@ <div class='field password'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <input type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}"> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_radio.tpl b/view/tpl/field_radio.tpl index 147b6b834..a92324cad 100755 --- a/view/tpl/field_radio.tpl +++ b/view/tpl/field_radio.tpl @@ -1,5 +1,5 @@ <div class='field radio'> - <label for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label> <input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2}}" {{if $field.4}}checked="true"{{/if}}> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_richtext.tpl b/view/tpl/field_richtext.tpl index c8639cf10..378e02a62 100755 --- a/view/tpl/field_richtext.tpl +++ b/view/tpl/field_richtext.tpl @@ -1,5 +1,5 @@ <div class='field richtext'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <textarea name='{{$field.0}}' id='id_{{$field.0}}' class="fieldRichtext">{{$field.2}}</textarea> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_select.tpl b/view/tpl/field_select.tpl index 9aca26e7b..95d1855d6 100755 --- a/view/tpl/field_select.tpl +++ b/view/tpl/field_select.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}'> {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_select_disabled.tpl b/view/tpl/field_select_disabled.tpl index f0090cf98..e241be895 100644 --- a/view/tpl/field_select_disabled.tpl +++ b/view/tpl/field_select_disabled.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label> <select disabled="true" name='{{$field.0}}' id='id_{{$field.0}}'> {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_select_raw.tpl b/view/tpl/field_select_raw.tpl index 861be3201..74d575bd0 100755 --- a/view/tpl/field_select_raw.tpl +++ b/view/tpl/field_select_raw.tpl @@ -1,5 +1,5 @@ <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}'> {{$field.4}} </select> diff --git a/view/tpl/field_textarea.tpl b/view/tpl/field_textarea.tpl index b454045c0..dad89a145 100755 --- a/view/tpl/field_textarea.tpl +++ b/view/tpl/field_textarea.tpl @@ -1,5 +1,5 @@ <div class='field textarea'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <textarea name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea> <span class='field_help'>{{$field.3}}</span> </div> diff --git a/view/tpl/field_themeselect.tpl b/view/tpl/field_themeselect.tpl index a0e454bf5..120727478 100755 --- a/view/tpl/field_themeselect.tpl +++ b/view/tpl/field_themeselect.tpl @@ -1,6 +1,6 @@ <script>$(document).ready(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script> <div class='field select'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <select name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5=='preview'}}onchange="previewTheme(this);"{{/if}} > {{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} </select> diff --git a/view/tpl/field_yesno.tpl b/view/tpl/field_yesno.tpl index e36e775c7..f5a909833 100755 --- a/view/tpl/field_yesno.tpl +++ b/view/tpl/field_yesno.tpl @@ -1,5 +1,5 @@ <div class='field yesno'> - <label for='id_{{$field.0}}'>{{$field.1}}</label> + <label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label> <div class='onoff' id="id_{{$field.0}}_onoff"> <input type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}"> <a href="#" class='off'> 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 53f08e24f..894f0fe83 100755 --- a/view/tpl/settings.tpl +++ b/view/tpl/settings.tpl @@ -59,7 +59,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}} |