Refactor profile edit page

- Fix header hierarchy
- [frio] Fix panel display

diff --git a/view/templates/settings/profile/index.tpl b/view/templates/settings/profile/index.tpl
index 8c89dc1ba226b428ca045fea026ae75302d43e37..7188212c0d82381ad18d0a56e9d1c8d91e199525 100644 (file)
--- a/view/templates/settings/profile/index.tpl
+++ b/view/templates/settings/profile/index.tpl
@@ -97,7 +97,7 @@
                </div>
                <div class="profile-edit-submit-end"></div>
 
-               <h3>{{$lbl_custom_fields_section}}</h3>
+               <h2>{{$lbl_custom_fields_section}}</h2>
                {{$custom_fields_description nofilter}}
                <div id="profile-custom-fields">
                {{foreach $custom_fields as $custom_field}}

diff --git a/view/theme/frio/templates/settings/profile/index.tpl b/view/theme/frio/templates/settings/profile/index.tpl
index 05a4bb215d143a669e71ec2b1279f96f738215a3..21387437ec32ac5af9175243f51b7bc065b5edf5 100644 (file)
--- a/view/theme/frio/templates/settings/profile/index.tpl
+++ b/view/theme/frio/templates/settings/profile/index.tpl
@@ -1,5 +1,5 @@
 <div class="generic-page-wrapper">
-       {{include file="section_title.tpl" title=$banner}}
+       <h1>{{$banner}}</h1>
 
        {{* The actions dropdown which can performed to the current profile *}}
        <div id="profile-edit-links">
@@ -50,16 +50,16 @@
                <div class="panel-group panel-group-settings" id="profile-edit-wrapper" role="tablist" aria-multiselectable="true">
                        {{* The personal settings *}}
                        <div class="panel">
-                               <div class="section-subtitle-wrapper" role="tab" id="personal">
-                                       <h4>
+                               <div class="section-subtitle-wrapper panel-heading" role="tab" id="personal">
+                                       <h2>
                                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#personal-collapse" aria-expanded="true" aria-controls="personal-collapse">
                                                        {{$lbl_personal_section}}
                                                </a>
-                                       </h4>
+                                       </h2>
                                </div>
                                {{* for the $detailed_profile we use bootstraps collapsable panel-groups to have expandable groups *}}
                                <div id="personal-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="personal">
-                                       <div class="section-content-tools-wrapper">
+                                       <div class="panel-body">
                                                {{include file="field_input.tpl" field=$name}}
 
                                                {{include file="field_textarea.tpl" field=$about}}
@@ -67,26 +67,24 @@
                                                {{$dob nofilter}}
 
                                                {{$hide_friends nofilter}}
-
-                                               <div class="form-group pull-right">
-                                                       <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>
 
                        {{* The location settings *}}
                        <div class="panel">
-                               <div class="section-subtitle-wrapper" role="tab" id="location">
-                                       <h4>
+                               <div class="section-subtitle-wrapper panel-heading" role="tab" id="location">
+                                       <h2>
                                                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#location-collapse" aria-expanded="false" aria-controls="location-collapse">
                                                        {{$lbl_location_section}}
                                                </a>
-                                       </h4>
+                                       </h2>
                                </div>
                                <div id="location-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="location">
-                                       <div class="section-content-tools-wrapper">
+                                       <div class="panel-body">
                                                {{include file="field_input.tpl" field=$address}}
 
                                                {{include file="field_input.tpl" field=$locality}}
@@ -109,27 +107,24 @@
                                                                <option>temp</option>
                                                        </select>
                                                </div>
-                                               <div class="clear"></div>
-
-                                               <div class="form-group pull-right">
-                                                       <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>
 
                        {{* The miscellanous other settings *}}
                        <div class="panel">
-                               <div class="section-subtitle-wrapper" role="tab" id="miscellaneous">
-                                       <h4>
+                               <div class="section-subtitle-wrapper panel-heading" role="tab" id="miscellaneous">
+                                       <h2>
                                                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#miscellaneous-collapse" aria-expanded="false" aria-controls="miscellaneous-collapse">
                                                        {{$lbl_miscellaneous_section}}
                                                </a>
-                                       </h4>
+                                       </h2>
                                </div>
                                <div id="miscellaneous-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="miscellaneous">
-                                       <div class="section-content-tools-wrapper">
+                                       <div class="panel-body">
                                                {{include file="field_input.tpl" field=$homepage}}
 
                                                {{include file="field_input.tpl" field=$xmpp}}
@@ -137,37 +132,33 @@
                                                {{include file="field_input.tpl" field=$pub_keywords}}
 
                                                {{include file="field_input.tpl" field=$prv_keywords}}
-
-                                               <div class="form-group pull-right">
-                                                       <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>
 
                        {{* The miscellanous other settings *}}
                        <div class="panel">
-                               <div class="section-subtitle-wrapper" role="tab" id="custom-fields">
-                                       <h4>
+                               <div class="section-subtitle-wrapper panel-heading" role="tab" id="custom-fields">
+                                       <h2>
                                                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#profile-edit-wrapper" href="#custom-fields-collapse" aria-expanded="false" aria-controls="custom-fields-collapse">
                                                        {{$lbl_custom_fields_section}}
                                                </a>
-                                       </h4>
+                                       </h2>
                                </div>
                                <div id="custom-fields-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="custom-fields">
-                                       <div class="section-content-tools-wrapper">
+                                       <div class="panel-body">
                                                {{$custom_fields_description nofilter}}
                                                <div id="profile-custom-fields">
                                                {{foreach $custom_fields as $custom_field}}
                                                        {{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
                                                {{/foreach}}
                                                </div>
-
-                                               <div class="form-group pull-right">
-                                                       <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>

diff --git a/view/theme/vier/templates/settings/profile/index.tpl b/view/theme/vier/templates/settings/profile/index.tpl
index 3722d83e25efd6027de9acd90fe7b957363acfad..03f48b44979c31a33e17bc8279c578804a8acc05 100644 (file)
--- a/view/theme/vier/templates/settings/profile/index.tpl
+++ b/view/theme/vier/templates/settings/profile/index.tpl
@@ -23,7 +23,7 @@
 
                <!-- Profile picture -->
                <div class="toggle-section js-toggle-section">
-                       <a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_picture_section}} &raquo;</a>
+                       <h2><a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_picture_section}} &raquo;</a></h2>
                        <div class="js-section toggle-section-content hidden">
 
                                <div id="profile-photo-upload-wrapper">
@@ -45,7 +45,7 @@
 
                <!-- Basic information -->
                <div class="toggle-section js-toggle-section">
-                       <a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_personal_section}} &raquo;</a>
+                       <h2><a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_personal_section}} &raquo;</a></h2>
                        <div class="js-section toggle-section-content hidden">
 
                                <div id="profile-edit-name-wrapper">
@@ -103,7 +103,7 @@
                </div>
                <!-- About you -->
                <div class="toggle-section js-toggle-section">
-                       <a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_location_section}} &raquo;</a>
+                       <h2><a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_location_section}} &raquo;</a></h2>
                        <div class="js-section toggle-section-content hidden">
 
                                <div id="profile-edit-address-wrapper">
@@ -148,7 +148,7 @@
                </div>
                <!-- Interests -->
                <div class="toggle-section js-toggle-section">
-                       <a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_custom_fields_section}} &raquo;</a>
+                       <h2><a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_custom_fields_section}} &raquo;</a></h2>
                        <div class="js-section toggle-section-content hidden">
                                {{$custom_fields_description nofilter}}
                                <div id="profile-custom-fields">