restructure display settings

6 files changed, 131 insertions, 88 deletions

diff --git a/view/js/main.js b/view/js/main.js
index 3a98972f9..eb8c78ef4 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1141,7 +1141,7 @@ Array.prototype.remove = function(item) {
 function previewTheme(elm) {
 	theme = $(elm).val();
 	$.getJSON('pretheme?f=&theme=' + theme,function(data) {
-			$('#theme-preview').html('<div id="theme-desc">' + data.desc + '</div><div id="theme-version">' + data.version + '</div><div id="theme-credits">' + data.credits + '</div><a href="' + data.img + '"><img src="' + data.img + '" style="max-width:100%;" alt="' + theme + '" /></a>');
+			$('#theme-preview').html('<div id="theme-desc">' + data.desc + '</div><div id="theme-version">' + data.version + '</div><div id="theme-credits">' + data.credits + '</div><a href="' + data.img + '"><img src="' + data.img + '" style="max-width:100%; max-height:300px" alt="' + theme + '" /></a>');
 	});
 
 }
diff --git a/view/theme/redbasic/css/narrow_navbar.css b/view/theme/redbasic/css/narrow_navbar.css
index cfda9760e..8254825a5 100644
--- a/view/theme/redbasic/css/narrow_navbar.css
+++ b/view/theme/redbasic/css/narrow_navbar.css
@@ -26,4 +26,4 @@ nav .badge {
 	top: 30px;
 	right: 15px;
 }
-}
\ No newline at end of file
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 4a8155d4a..2f96c6e0d 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -255,7 +255,7 @@ footer {
 }
 
 #theme-preview {
-	margin: 15px 0 15px 0px;
+	margin: 15px 0px;
 }
 
 .fakebutton {
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index b27415557..ba49859c5 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -100,7 +100,7 @@ if(feature_enabled(local_channel(),'expert'))
 		'$baseurl' => $a->get_baseurl(),
 		'$expert' => $expert,
 		'$title' => t("Theme settings"),
-		'$schema' => array('redbasic_schema', t('Set scheme'), $arr['schema'], '', $scheme_choices),
+		'$schema' => array('redbasic_schema', t('Select scheme'), $arr['schema'], '', $scheme_choices),
 		'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
 		'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
 		'$nav_gradient_top' => array('redbasic_nav_gradient_top', t('Navigation bar gradient top color'), $arr['nav_gradient_top']),
@@ -120,12 +120,12 @@ if(feature_enabled(local_channel(),'expert'))
 		'$comment_indent' => array('redbasic_comment_indent', t('Set the indent for comments'), $arr['comment_indent']),
 		'$toolicon_colour' => array('redbasic_toolicon_colour',t('Set the basic color for item icons'),$arr['toolicon_colour']),
 		'$toolicon_activecolour' => array('redbasic_toolicon_activecolour',t('Set the hover color for item icons'),$arr['toolicon_activecolour']),
-		'$body_font_size' => array('redbasic_body_font_size', t('Set font-size for the entire application'), $arr['body_font_size']),
+		'$body_font_size' => array('redbasic_body_font_size', t('Set font-size for the entire application'), $arr['body_font_size'], 'Example: 14px '),
 		'$font_size' => array('redbasic_font_size', t('Set font-size for posts and comments'), $arr['font_size']),
 		'$font_colour' => array('redbasic_font_colour', t('Set font-color for posts and comments'), $arr['font_colour']),
 		'$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius']),
 		'$shadow' => array('redbasic_shadow', t('Set shadow depth of photos'), $arr['shadow']),
-		'$converse_width' => array('redbasic_converse_width',t('Set maximum width of conversation regions'),$arr['converse_width']),
+		'$converse_width' => array('redbasic_converse_width',t('Set maximum width of conversation regions'),$arr['converse_width'], 'Example: 700px ("center conversation regions" must be set to Yes for this to have an effect)'),
 		'$converse_center' => array('redbasic_converse_center',t('Center conversation regions'),$arr['converse_center'], '', array(t('No'),t('Yes'))),
 		'$nav_min_opacity' => array('redbasic_nav_min_opacity',t('Set minimum opacity of nav bar - to hide it'),$arr['nav_min_opacity']),
 		'$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']),
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index adf2e632d..972620a43 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -1,50 +1,65 @@
-{{include file="field_select.tpl" field=$schema}}
-<div class="settings-submit-wrapper">
-	<input type="submit" value="{{$submit}}" class="settings-submit" name="redbasic-settings-submit" />
-</div>
+<div class="panel">
+	<div class="section-subtitle-wrapper" role="tab" id="custom-settings-title">
+		<h3>
+			<a data-toggle="collapse" data-parent="#settings" href="#custom-settings-content" aria-expanded="true" aria-controls="custom-settings-content">
+				Custom Theme Settings
+			</a>
+		</h3>
+	</div>
+	<div id="custom-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="custom-settings">
+		<div class="section-content-tools-wrapper">
+			{{include file="field_select.tpl" field=$schema}}
+
+			{{if $expert}}
+				{{include file="field_colorinput.tpl" field=$nav_bg}}
+				{{include file="field_colorinput.tpl" field=$nav_gradient_top}}
+				{{include file="field_colorinput.tpl" field=$nav_gradient_bottom}}
+				{{include file="field_colorinput.tpl" field=$nav_active_gradient_top}}
+				{{include file="field_colorinput.tpl" field=$nav_active_gradient_bottom}}
+				{{include file="field_colorinput.tpl" field=$nav_bd}}
+				{{include file="field_colorinput.tpl" field=$nav_icon_colour}}
+				{{include file="field_colorinput.tpl" field=$nav_active_icon_colour}}
+				{{include file="field_input.tpl" field=$nav_min_opacity}}
+				{{include file="field_colorinput.tpl" field=$bgcolour}}
+				{{include file="field_colorinput.tpl" field=$background_image}}
+				{{include file="field_colorinput.tpl" field=$item_colour}}
+				{{include file="field_colorinput.tpl" field=$comment_item_colour}}
+				{{include file="field_colorinput.tpl" field=$comment_border_colour}}
+				{{include file="field_input.tpl" field=$comment_indent}}
+			{{/if}}
+
+			{{include file="field_input.tpl" field=$body_font_size}}
 
-{{if $expert}}
+			{{if $expert}}
+				{{include file="field_input.tpl" field=$font_size}}
+				{{include file="field_colorinput.tpl" field=$font_colour}}
+				{{include file="field_colorinput.tpl" field=$link_colour}}
+				{{include file="field_colorinput.tpl" field=$banner_colour}}
+				{{include file="field_colorinput.tpl" field=$toolicon_colour}}
+				{{include file="field_colorinput.tpl" field=$toolicon_activecolour}}
+				{{include file="field_input.tpl" field=$radius}}
+				{{include file="field_input.tpl" field=$shadow}}
+				{{include file="field_input.tpl" field=$top_photo}}
+				{{include file="field_input.tpl" field=$reply_photo}}
+				{{include file="field_input.tpl" field=$converse_width}}
+				{{include file="field_checkbox.tpl" field=$converse_center}}
+			{{/if}}
 
-{{include file="field_checkbox.tpl" field=$narrow_navbar}}
-{{include file="field_colorinput.tpl" field=$nav_bg}}
-{{include file="field_colorinput.tpl" field=$nav_gradient_top}}
-{{include file="field_colorinput.tpl" field=$nav_gradient_bottom}}
-{{include file="field_colorinput.tpl" field=$nav_active_gradient_top}}
-{{include file="field_colorinput.tpl" field=$nav_active_gradient_bottom}}
-{{include file="field_colorinput.tpl" field=$nav_bd}}
-{{include file="field_colorinput.tpl" field=$nav_icon_colour}}
-{{include file="field_colorinput.tpl" field=$nav_active_icon_colour}}
-{{include file="field_colorinput.tpl" field=$banner_colour}}
-{{include file="field_colorinput.tpl" field=$link_colour}}
-{{include file="field_colorinput.tpl" field=$bgcolour}}
-{{include file="field_colorinput.tpl" field=$background_image}}
-{{include file="field_colorinput.tpl" field=$item_colour}}
-{{include file="field_colorinput.tpl" field=$comment_item_colour}}
-{{include file="field_colorinput.tpl" field=$comment_border_colour}}
-{{include file="field_input.tpl" field=$comment_indent}}
-{{include file="field_colorinput.tpl" field=$toolicon_colour}}
-{{include file="field_colorinput.tpl" field=$toolicon_activecolour}}
-{{include file="field_input.tpl" field=$body_font_size}}
-{{include file="field_input.tpl" field=$font_size}}
-{{include file="field_colorinput.tpl" field=$font_colour}}
-{{include file="field_input.tpl" field=$radius}}
-{{include file="field_input.tpl" field=$shadow}}
-{{include file="field_input.tpl" field=$converse_width}}
-{{include file="field_checkbox.tpl" field=$converse_center}}
-{{include file="field_input.tpl" field=$nav_min_opacity}}
-{{include file="field_input.tpl" field=$top_photo}}
-{{include file="field_input.tpl" field=$reply_photo}}
-{{*include file="field_checkbox.tpl" field=$sloppy_photos*}}
-<script>
-	$(function(){
-		$('#id_redbasic_nav_bg,#id_redbasic_nav_gradient_top,#id_redbasic_nav_gradient_bottom,#id_redbasic_nav_active_gradient_top,#id_redbasic_nav_active_gradient_bottom').colorpicker();
-		$('#id_redbasic_nav_bd,#id_redbasic_nav_icon_colour ,#id_redbasic_nav_active_icon_colour,#id_redbasic_banner_colour,#id_redbasic_link_colour,#id_redbasic_background_colour').colorpicker();
-		$('#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
-		$('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_comment_border_colour').colorpicker({format: 'rgba'});
-	});
-</script>
+			{{include file="field_checkbox.tpl" field=$narrow_navbar}}
 
-<div class="settings-submit-wrapper">
-	<input type="submit" value="{{$submit}}" class="settings-submit" name="redbasic-settings-submit" />
+			{{if $expert}}
+			<script>
+				$(function(){
+					$('#id_redbasic_nav_bg,#id_redbasic_nav_gradient_top,#id_redbasic_nav_gradient_bottom,#id_redbasic_nav_active_gradient_top,#id_redbasic_nav_active_gradient_bottom').colorpicker({format: 'rgba'});
+					$('#id_redbasic_nav_bd,#id_redbasic_nav_icon_colour ,#id_redbasic_nav_active_icon_colour,#id_redbasic_banner_colour,#id_redbasic_link_colour,#id_redbasic_background_colour').colorpicker();
+					$('#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
+					$('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_comment_border_colour').colorpicker({format: 'rgba'});
+				});
+			</script>
+			{{/if}}
+			<div class="settings-submit-wrapper" >
+				<button type="submit" name="redbasic-settings-submit" class="btn btn-primary">{{$submit}}</button>
+			</div>
+		</div>
+	</div>
 </div>
-{{/if}}
diff --git a/view/tpl/settings_display.tpl b/view/tpl/settings_display.tpl
index 93cee94d6..1dbf4381a 100755
--- a/view/tpl/settings_display.tpl
+++ b/view/tpl/settings_display.tpl
@@ -1,38 +1,66 @@
-<div class="generic-content-wrapper-styled">
-<h1>{{$ptitle}}</h1>
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		<h2>{{$ptitle}}</h2>
+	</div>
+	<form action="settings/display" id="settings-form" method="post" autocomplete="off" >
+		<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
 
-<form action="settings/display" id="settings-form" method="post" autocomplete="off" >
-<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-{{if $theme}}
-{{include file="field_themeselect.tpl" field=$theme}}
-{{/if}}
-{{if $mobile_theme}}
-{{include file="field_themeselect.tpl" field=$mobile_theme}}
-{{/if}}
-{{if $expert}}
-{{include file="field_checkbox.tpl" field=$user_scalable}}
-{{/if}}
-{{include file="field_input.tpl" field=$ajaxint}}
-{{include file="field_input.tpl" field=$itemspage}}
-{{include file="field_input.tpl" field=$channel_divmore_height}}
-{{include file="field_input.tpl" field=$network_divmore_height}}
-{{include file="field_checkbox.tpl" field=$nosmile}}
-{{include file="field_checkbox.tpl" field=$title_tosource}}
-{{include file="field_checkbox.tpl" field=$channel_list_mode}}
-{{include file="field_checkbox.tpl" field=$network_list_mode}}
-
-<div class="settings-submit-wrapper" >
-<input type="submit" name="submit" class="settings-submit" value="{{$submit}}" />
-</div>
-{{if $expert}}
-<br />
-<a href="pdledit">{{$layout_editor}}</a>
-<br />
-{{/if}}
-{{if $theme_config}}
-<h2>Theme settings</h2>
-{{$theme_config}}
-{{/if}}
-
-</form>
+		<div class="panel-group" id="settings" role="tablist" aria-multiselectable="true">
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="theme-settings-title">
+					<h3>
+						<a data-toggle="collapse" data-parent="#settings" href="#theme-settings-content" aria-expanded="true" aria-controls="theme-settings-content">
+							Theme Settings
+						</a>
+					</h3>
+				</div>
+				<div id="theme-settings-content" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="theme-settings">
+					<div class="section-content-tools-wrapper">
+							{{if $theme}}
+								{{include file="field_themeselect.tpl" field=$theme}}
+							{{/if}}
+							{{if $mobile_theme}}
+								{{include file="field_themeselect.tpl" field=$mobile_theme}}
+							{{/if}}
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			{{if $theme_config}}
+				{{$theme_config}}
+			{{/if}}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="content-settings-title">
+					<h3>
+						<a data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="true" aria-controls="content-settings-content">
+							Content Settings
+						</a>
+					</h3>
+				</div>
+				<div id="content-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="content-settings">
+					<div class="section-content-wrapper">
+							{{include file="field_input.tpl" field=$ajaxint}}
+							{{include file="field_input.tpl" field=$itemspage}}
+							{{include file="field_input.tpl" field=$channel_divmore_height}}
+							{{include file="field_input.tpl" field=$network_divmore_height}}
+							{{include file="field_checkbox.tpl" field=$nosmile}}
+							{{include file="field_checkbox.tpl" field=$title_tosource}}
+							{{include file="field_checkbox.tpl" field=$channel_list_mode}}
+							{{include file="field_checkbox.tpl" field=$network_list_mode}}
+							{{include file="field_checkbox.tpl" field=$user_scalable}}
+							{{if $expert}}
+							<div class="form-group">
+							<a class="btn btn-default "href="pdledit">{{$layout_editor}}</a>
+							</div>
+							{{/if}}
+						<div class="settings-submit-wrapper" >
+							<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</form>
 </div>