first pile of work on settings

This commit is contained in:
Mario Vavti 2015-03-01 15:22:23 +01:00
parent 7018aefd6f
commit 6e64f9af54
18 changed files with 80 additions and 161 deletions

View file

@ -68,6 +68,10 @@ code {
white-space: normal;
}
.form-control {
font-size: unset;
}
/* 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}

View file

@ -24,14 +24,6 @@ ul#settings-privacy-macros {
margin-top: 15px;
}
#settings-permissions-wrapper .field {
margin-bottom: 10px;
}
#settings-permissions-wrapper .field > label {
width: 40%;
}
.settings-submit-wrapper {
margin-bottom: 10px;
}
@ -41,9 +33,6 @@ ul#settings-privacy-macros {
margin-bottom: 45px;
}
#settings-notifications .field > label {
width: 40%;
}
#settings-notify-desc, #settings-activity-desc, #settings-vnotify-desc {
font-weight: bold;
margin-bottom: 15px;
@ -77,3 +66,7 @@ ul#settings-privacy-macros {
#settings-dspr-wrapper {
margin-top: 15px;
}
.group {
margin-left: 20px;
}

View file

@ -183,17 +183,6 @@ header {
padding: 10px;
}
.info-message {
font-size: 1.1em;
border: 1px solid #444;
background-color: $infomess_bgcolour;
padding: 10px;
-moz-border-radius: $radiuspx;
border-radius: $radiuspx;
}
nav #banner #logo-text a {
font-size: 40px;
font-weight: bold;
@ -371,18 +360,6 @@ footer {
font-weight: bold;
}
#profile-edit-wrapper .field {
margin-top: 20px;
}
#profile-edit-wrapper .field > label {
width: 175px;
}
#profile-edit-wrapper .field input[type="text"] {
width: 220px;
}
#profile-edit-links {
max-width: $converse_width;
padding-top: 15px;
@ -1258,71 +1235,6 @@ nav .acpopup {
}
/**
* Form fields
*/
.field {
margin-bottom: 10px;
/* padding-bottom: 10px; */
overflow: auto;
width: 100%
}
.field > label {
float: left;
width: 40%;
}
.field input,
.field textarea {
width: 400px;
}
.field textarea { height: 100px; }
.field_help {
display: block;
margin-left: 40%;
color: #666666;
}
.field input[type="checkbox"] {
width: 16px;
}
.field .onoff {
float: left;
width: 80px;
margin-right: 15px;
}
.field .onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 24px;
text-decoration: none;
}
.field .onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; }
.field.checkbox .field_help { display: block; margin-left: 40%; }
/**
@ -2402,9 +2314,8 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
/* Turn checkboxes into switches */
.field.checkbox .fieldhelp { vertical-align:top; }
.field.checkbox > div {
position: relative; width: 70px;
position: relative; width: 50px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display:inline-block;
}
@ -2415,8 +2326,8 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
.field.checkbox > div label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
border: 1px solid #ccc;
border-radius: 5px;
margin:0px;
}
@ -2433,31 +2344,32 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
.onoffswitch-inner:before {
content: attr(data-on);
padding-left: 10px;
padding-right: 21px;
background-color: #EEEEEE;
text-align: right;
}
.onoffswitch-inner:after {
content: attr(data-off);
padding-right: 10px;
padding-left: 21px;
background-color: #EEEEEE; color: #999999;
text-align: right;
text-align: left;
}
.onoffswitch-switch {
display: block; width: 25px; margin-left: 6px; margin-right: 6px; margin-top:5%; margin-bottom:5%;
display: block; width: 15px; margin:4px;
background: #A1A1A1;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 36px;
border-radius: 10px;
position: absolute; top: 0; bottom: 0; right: 26px;
-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;
margin-left: 0px;
}
.field.checkbox > div > input:checked + label .onoffswitch-switch {
right: -2px;
background-color: #27A1CA;
right: 0px;
background-color: $link_colour;
}

View file

@ -1,4 +1,6 @@
<div class='field checkbox'>
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
<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 class="form-group field checkbox">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<div class="pull-right"><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="help-block">{{$field.3}}</span>
</div>
<div class="clear"></div>

View file

@ -1,6 +1,6 @@
<div class='field input color'>
<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 class='form-group field input color'>
<label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label>
<input class='form-control 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='help-block'>{{$field.3}}</span>
<div id='end_{{$field.0}}' class='field_end'></div>
</div>

View file

@ -1,5 +1,5 @@
<div class='field custom'>
<label class="mainlabel" for='{{$field.0}}'>{{$field.1}}</label>
<div class='form-group field custom'>
<label for='{{$field.0}}'>{{$field.1}}</label>
{{$field.2}}
<span class='field_help'>{{$field.3}}</span>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,6 +1,6 @@
<div class='field input'>
<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>
<div class='form-group field input'>
<label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}</label>
<input class="form-control" 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='help-block'>{{$field.3}}</span>
<div class="clear"></div>
</div>

View file

@ -1,4 +1,6 @@
<div class='field checkbox'>
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
<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 class="form-group field checkbox">
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<div class="pull-right"><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='help-block'>{{$field.4}}</span>
</div>
<div class="clear"></div>

View file

@ -1,5 +1,5 @@
<div class='field password'>
<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 class='form-group field password'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input class="form-control" type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}">
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,7 +1,7 @@
<div class='field select'>
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}'>
<div class='form-group field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select class="form-control" 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>
<span class='field_help'>{{$field.3}}</span>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,7 +1,7 @@
<div class='field select'>
<label class="mainlabel" style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label>
<select disabled="true" name='{{$field.0}}' id='id_{{$field.0}}'>
<div class='form-group field select'>
<label style="font-weight: normal;" for='id_{{$field.0}}'>{{$field.1}}</label>
<select class="form-control" 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>
<span class='field_help'>{{$field.3}}</span>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,6 +1,6 @@
<div class='field select'>
<div class='form-group field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}'>
<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}'>
{{foreach $field.4 as $group=>$opts}}
<optgroup label='{{$group}}'>
{{foreach $opts as $opt=>$val}}
@ -8,5 +8,5 @@
{{/foreach}}
</optgroup>
</select>
<span class='field_help'>{{$field.3}}</span>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,7 +1,7 @@
<div class='field select'>
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}'>
<div class='form-group field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}'>
{{$field.4}}
</select>
<span class='field_help'>{{$field.3}}</span>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,5 +1,5 @@
<div class='field textarea'>
<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 class='form-group field textarea'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea class="form-control" name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea>
<span class='help-block'>{{$field.3}}</span>
</div>

View file

@ -1,7 +1,7 @@
<script>$(document).ready(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script>
<div class='field select'>
<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}} >
<div class='form-group field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select class="form-control" 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>
<span class='field_help'>{{$field.3}}</span>

View file

@ -1,6 +1,6 @@
<div class="field custom">
<div class="form-group field custom">
<label for="group-selection" id="group-selection-lbl">{{$label}}</label>
<select name="group-selection" id="group-selection" >
<select class="form-control" name="group-selection" id="group-selection" >
{{foreach $groups as $group}}
<option value="{{$group.id}}" {{if $group.selected}}selected="selected"{{/if}} >{{$group.name}}</option>
{{/foreach}}

View file

@ -1,5 +1,8 @@
<div class="generic-content-wrapper-styled">
<h1>{{$ptitle}}</h1>
<div class="generic-content-wrapper">
<div class="section-title-wrapper">
<h2>{{$ptitle}}</h2>
</div>
<div class="section-content-wrapper">
{{$nickname_block}}
@ -78,10 +81,12 @@
<div id="settings-notifications">
<div id="settings-activity-desc">{{$activity_options}}</div>
<div class="group">
{{*not yet implemented *}}
{{*include file="field_checkbox.tpl" field=$post_joingroup*}}
{{include file="field_checkbox.tpl" field=$post_newfriend}}
{{include file="field_checkbox.tpl" field=$post_profilechange}}
</div>
<div id="settings-notify-desc">{{$lbl_not}}</div>
@ -150,3 +155,4 @@
</div>
</div>
</div>

View file

@ -1,4 +1,4 @@
<div id="settings-nick-wrapper" >
<div id="settings-nickname-desc" class="info-message">{{$desc}} <strong>'{{$nickname}}@{{$basepath}}'</strong>{{$subdir}}</div>
<div id="settings-nickname-desc" class="alert alert-info" role="alert">{{$desc}} <strong>'{{$nickname}}@{{$basepath}}'</strong>{{$subdir}}</div>
</div>
<div id="settings-nick-end" ></div>