first pile of work on settings

18 files changed, 80 insertions, 161 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index a645b13d2..cb26910b0 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -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}
diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css
index ee06e3dd7..58e13b54f 100644
--- a/view/css/mod_settings.css
+++ b/view/css/mod_settings.css
@@ -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;
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 45fcda2ca..95a5d6fc1 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -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;
 }
diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl
index 7a2781be0..b6edd8288 100755
--- a/view/tpl/field_checkbox.tpl
+++ b/view/tpl/field_checkbox.tpl
@@ -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>
diff --git a/view/tpl/field_colorinput.tpl b/view/tpl/field_colorinput.tpl
index a1e912186..9b6f33462 100644
--- a/view/tpl/field_colorinput.tpl
+++ b/view/tpl/field_colorinput.tpl
@@ -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>
diff --git a/view/tpl/field_custom.tpl b/view/tpl/field_custom.tpl
index 754f5b2f4..907b4c50e 100755
--- a/view/tpl/field_custom.tpl
+++ b/view/tpl/field_custom.tpl
@@ -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>
diff --git a/view/tpl/field_input.tpl b/view/tpl/field_input.tpl
index be6e3f047..e4756c218 100755
--- a/view/tpl/field_input.tpl
+++ b/view/tpl/field_input.tpl
@@ -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>
diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl
index 847783518..565f97760 100755
--- a/view/tpl/field_intcheckbox.tpl
+++ b/view/tpl/field_intcheckbox.tpl
@@ -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>
diff --git a/view/tpl/field_password.tpl b/view/tpl/field_password.tpl
index 38ecf3d07..c9f4c5f6d 100755
--- a/view/tpl/field_password.tpl
+++ b/view/tpl/field_password.tpl
@@ -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>
diff --git a/view/tpl/field_select.tpl b/view/tpl/field_select.tpl
index 95d1855d6..762447290 100755
--- a/view/tpl/field_select.tpl
+++ b/view/tpl/field_select.tpl
@@ -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>
diff --git a/view/tpl/field_select_disabled.tpl b/view/tpl/field_select_disabled.tpl
index e241be895..ee5e1508f 100644
--- a/view/tpl/field_select_disabled.tpl
+++ b/view/tpl/field_select_disabled.tpl
@@ -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>
diff --git a/view/tpl/field_select_grouped.tpl b/view/tpl/field_select_grouped.tpl
index c7fb4f322..e6d1479de 100644
--- a/view/tpl/field_select_grouped.tpl
+++ b/view/tpl/field_select_grouped.tpl
@@ -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>
diff --git a/view/tpl/field_select_raw.tpl b/view/tpl/field_select_raw.tpl
index 74d575bd0..2780df58c 100755
--- a/view/tpl/field_select_raw.tpl
+++ b/view/tpl/field_select_raw.tpl
@@ -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>
diff --git a/view/tpl/field_textarea.tpl b/view/tpl/field_textarea.tpl
index dad89a145..01fdc23f5 100755
--- a/view/tpl/field_textarea.tpl
+++ b/view/tpl/field_textarea.tpl
@@ -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>
diff --git a/view/tpl/field_themeselect.tpl b/view/tpl/field_themeselect.tpl
index 120727478..200cf726b 100755
--- a/view/tpl/field_themeselect.tpl
+++ b/view/tpl/field_themeselect.tpl
@@ -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>
diff --git a/view/tpl/group_selection.tpl b/view/tpl/group_selection.tpl
index 2223125ea..270d2aa79 100755
--- a/view/tpl/group_selection.tpl
+++ b/view/tpl/group_selection.tpl
@@ -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}}
diff --git a/view/tpl/settings.tpl b/view/tpl/settings.tpl
index 894f0fe83..b41bf87b9 100755
--- a/view/tpl/settings.tpl
+++ b/view/tpl/settings.tpl
@@ -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>
diff --git a/view/tpl/settings_nick_set.tpl b/view/tpl/settings_nick_set.tpl
index ae11c00c8..5d9f17e9e 100755
--- a/view/tpl/settings_nick_set.tpl
+++ b/view/tpl/settings_nick_set.tpl
@@ -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>