From b480e4eaa97f8708957dbe0eec771bda7a2a376d Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Wed, 1 Apr 2020 18:39:40 -0400
Subject: [PATCH] Refactor display page

- Fix header hierarchy
- Fix panel display
---
 view/templates/settings/display.tpl           | 49 +++++++------
 .../theme/frio/templates/settings/display.tpl | 71 ++++++++-----------
 2 files changed, 54 insertions(+), 66 deletions(-)

diff --git a/view/templates/settings/display.tpl b/view/templates/settings/display.tpl
index a9f82c16b1..15247d8749 100644
--- a/view/templates/settings/display.tpl
+++ b/view/templates/settings/display.tpl
@@ -1,35 +1,34 @@
-
 <h1>{{$ptitle}}</h1>
 
-<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}}'>
 
-{{include file="field_themeselect.tpl" field=$theme}}
-{{include file="field_input.tpl" field=$itemspage_network}}
+	{{include file="field_themeselect.tpl" field=$theme}}
+	{{include file="field_input.tpl" field=$itemspage_network}}
 
-{{* Show the mobile theme selection only if mobile themes are available *}}
-{{if count($mobile_theme.4) > 1}}
-{{include file="field_themeselect.tpl" field=$mobile_theme}}
-{{/if}}
+	{{* Show the mobile theme selection only if mobile themes are available *}}
+	{{if count($mobile_theme.4) > 1}}
+		{{include file="field_themeselect.tpl" field=$mobile_theme}}
+	{{/if}}
 
-{{include file="field_input.tpl" field=$itemspage_mobile_network}}
-{{include file="field_input.tpl" field=$ajaxint}}
-{{include file="field_checkbox.tpl" field=$no_auto_update}}
-{{include file="field_checkbox.tpl" field=$nosmile}}
-{{include file="field_checkbox.tpl" field=$infinite_scroll}}
-{{include file="field_checkbox.tpl" field=$no_smart_threading}}
-{{include file="field_checkbox.tpl" field=$hide_dislike}}
+	{{include file="field_input.tpl" field=$itemspage_mobile_network}}
+	{{include file="field_input.tpl" field=$ajaxint}}
+	{{include file="field_checkbox.tpl" field=$no_auto_update}}
+	{{include file="field_checkbox.tpl" field=$nosmile}}
+	{{include file="field_checkbox.tpl" field=$infinite_scroll}}
+	{{include file="field_checkbox.tpl" field=$no_smart_threading}}
+	{{include file="field_checkbox.tpl" field=$hide_dislike}}
 
-<h2>{{$calendar_title}}</h2>
-{{include file="field_select.tpl" field=$first_day_of_week}}
+	<h2>{{$calendar_title}}</h2>
+	{{include file="field_select.tpl" field=$first_day_of_week}}
 
-<div class="settings-submit-wrapper" >
-<input type="submit" name="submit" class="settings-submit" value="{{$submit}}" />
-</div>
+	<div class="settings-submit-wrapper">
+		<input type="submit" name="submit" class="settings-submit" value="{{$submit}}"/>
+	</div>
 
-{{if $theme_config}}
-<h2>{{$stitle}}</h2>
-{{$theme_config nofilter}}
-{{/if}}
+	{{if $theme_config}}
+		<h2>{{$stitle}}</h2>
+		{{$theme_config nofilter}}
+	{{/if}}
 
 </form>
diff --git a/view/theme/frio/templates/settings/display.tpl b/view/theme/frio/templates/settings/display.tpl
index f67bb3f407..95dde620e8 100644
--- a/view/theme/frio/templates/settings/display.tpl
+++ b/view/theme/frio/templates/settings/display.tpl
@@ -1,71 +1,65 @@
-
 <div class="generic-page-wrapper">
-	{{* include the title template for the settings title *}}
-	{{include file="section_title.tpl" title=$ptitle }}
-
-
+	<h1>{{$ptitle}}</h1>
 	<form action="settings/display" id="settings-form" method="post" autocomplete="off" >
-		<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+		<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
 		<div class="panel-group panel-group-settings" id="settings" role="tablist" aria-multiselectable="true">
 			<div class="panel">
-				<div class="section-subtitle-wrapper" role="tab" id="theme-settings-title">
-					<h4>
+				<div class="section-subtitle-wrapper panel-heading" role="tab" id="theme-settings-title">
+					<h2>
 						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#theme-settings-content" aria-expanded="true" aria-controls="theme-settings-content">
 							{{$d_tset}}
 						</a>
-					</h4>
+					</h2>
 				</div>
 
 				<div id="theme-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="theme-settings">
-					<div class="section-content-tools-wrapper">
-
+					<div class="panel-body">
 						{{include file="field_themeselect.tpl" field=$theme}}
 
 						{{* Show the mobile theme selection only if mobile themes are available *}}
 						{{if count($mobile_theme.4) > 1}}
 						{{include file="field_themeselect.tpl" field=$mobile_theme}}
 						{{/if}}
-
-						<div class="form-group pull-right settings-submit-wrapper" >
-							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
-						</div>
-						<div class="clear"></div>
-
+					</div>
+					<div class="panel-footer">
+						<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 					</div>
 				</div>
 			</div>
 
 			<div class="panel">
-				<div class="section-subtitle-wrapper" role="tab" id="custom-settings-title">
-					<h4>
+				<div class="section-subtitle-wrapper panel-heading" role="tab" id="custom-settings-title">
+					<h2>
 						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#custom-settings-content" aria-expanded="false" aria-controls="custom-settings-content">
 							{{$d_ctset}}
 						</a>
-					</h4>
+					</h2>
 				</div>
 				<div id="custom-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme}} in{{/if}}" role="tabpanel" aria-labelledby="custom-settings">
-					<div class="section-content-tools-wrapper">
+					<div class="panel-body">
 
 					{{if $theme_config}}
 						{{$theme_config nofilter}}
 					{{/if}}
 
 					</div>
+					<div class="panel-footer">
+						<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
+					</div>
 				</div>
 			</div>
 
 			<div class="panel">
-				<div class="section-subtitle-wrapper" role="tab" id="content-settings-title">
-					<h4>
+				<div class="section-subtitle-wrapper panel-heading" role="tab" id="content-settings-title">
+					<h2>
 						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#content-settings-content" aria-expanded="false" aria-controls="content-settings-content">
 							{{$d_cset}}
 						</a>
-					</h4>
+					</h2>
 				</div>
 				<div id="content-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme && !$theme_config}} in{{/if}}" role="tabpanel" aria-labelledby="content-settings">
-					<div class="section-content-wrapper">
-
+					<div class="panel-body">
 						{{include file="field_input.tpl" field=$itemspage_network}}
 						{{include file="field_input.tpl" field=$itemspage_mobile_network}}
 						{{include file="field_input.tpl" field=$ajaxint}}
@@ -74,32 +68,27 @@
 						{{include file="field_checkbox.tpl" field=$infinite_scroll}}
 						{{include file="field_checkbox.tpl" field=$no_smart_threading}}
 						{{include file="field_checkbox.tpl" field=$hide_dislike}}
-
-						<div class="form-group pull-right settings-submit-wrapper" >
-							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
-						</div>
-						<div class="clear"></div>
+					</div>
+					<div class="panel-footer">
+						<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 					</div>
 				</div>
 			</div>
 
 			<div class="panel">
-				<div class="section-subtitle-wrapper" role="tab" id="calendar-settings-title">
-					<h4>
+				<div class="section-subtitle-wrapper panel-heading" role="tab" id="calendar-settings-title">
+					<h2>
 						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#settings" href="#calendar-settings-content" aria-expanded="false" aria-controls="calendar-settings-content">
 							{{$calendar_title}}
 						</a>
-					</h4>
+					</h2>
 				</div>
 				<div id="calendar-settings-content" class="panel-collapse collapse{{if !$theme && !$mobile_theme && !$theme_config}} in{{/if}}" role="tabpanel" aria-labelledby="calendar-settings">
-					<div class="section-content-wrapper">
-
+					<div class="panel-body">
 						{{include file="field_select.tpl" field=$first_day_of_week}}
-
-						<div class="form-group pull-right settings-submit-wrapper" >
-							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
-						</div>
-						<div class="clear"></div>
+					</div>
+					<div class="panel-footer">
+						<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 					</div>
 				</div>
 			</div>