Use proper heading levels

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/style.scss

@@ -172,7 +172,7 @@ input.input-inline {
 		top: 12px;
 	}
 
-	> h1 {
+	> h2 {
 		white-space: nowrap;
 		padding: 7px;
 	}
@@ -273,11 +273,11 @@ input.input-inline {
 	width: 100%;
 	vertical-align: top;
 
-	h2 {
+	h3 {
 		padding: 10px 10px 8px;
 		margin: 0;
 		font-size: 12pt;
-		font-weight: 700;
+		font-weight: normal;
 		overflow: hidden;
 		display: flex;
 		min-height: 40px;
@@ -385,8 +385,8 @@ input.input-inline {
 		display: block;
 	}
 
-	h3 {
+	h4 {
-		font-weight: bold;
+		font-weight: normal;
 		font-size: 10pt;
 		padding: 0;
 		margin: 5px;
@@ -545,11 +545,11 @@ input.input-inline {
 }
 
 #sidebar-header {
-	h2 {
+	h3 {
 		font-size: 14pt;
 		padding: 9px 10px;
+		margin: 0;
 		overflow: hidden;
-		margin-bottom: 0;
 		background-color: $color-lightgrey;
 
 		input {
@@ -603,9 +603,11 @@ input.input-inline {
 		margin: 0px;
 	}
 
-	h3 {
+	h4 {
 		border-bottom: 1px solid $color-lightgrey;
 		padding: 15px 0px 5px 0px;
+		margin: 0 0 10px 0;
+		font-size: 15px;
 
 		> div {
 			display: flex;
@@ -1105,7 +1107,7 @@ input.input-inline {
 			border-right: 1px solid transparent;
 		}
 
-		h2 button {
+		h3 button {
 			display: none;
 		}
 		h2:hover button {

templates/part.board.mainView.php

@@ -10,9 +10,9 @@
 		<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>">
 		</a>
 	</div>
-	<h1 class="title" ng-style="{'border-bottom':'2px solid #{{boardservice.getCurrent().color }}'}">
+	<h2 class="title" ng-style="{'border-bottom':'2px solid #{{boardservice.getCurrent().color }}'}">
 		{{ boardservice.getCurrent().title }}
-	</h1>
+	</h2>
 	<div class="board-header-controls hidden">
 		<?php print_unescaped($this->inc('part.board.headerControls')); ?>
 	</div>
@@ -34,7 +34,7 @@
 		<div class="stack" ng-repeat="s in stacks" data-as-sortable-item
 			 data-columnindex="{{$index}}" id="column{{$index}}"
 			 style="">
-			<h2 data-as-sortable-item-handle>
+			<h3 data-as-sortable-item-handle>
 				<span class="editable-inline" ng-show="!s.status.editStack" ng-click="s.status.editStack=true">{{ s.title }}</span>
 				<form ng-if="s.status.editStack" ng-submit="stackservice.update(s); s.status.editStack=false">
 					<input type="text" placeholder="<?php p($l->t('Add a new stack')); ?>"
@@ -44,7 +44,7 @@
 				<button class="icon-delete button-inline stack-actions"
 						ng-if="!s.status.editStack"
                         ng-click="stackservice.delete(s.id)"></button>
-			</h2>
+			</h3>
 			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || filter==='archive'" data-ng-model="s.cards" class="card-list">
 				<li class="card as-sortable-item"
 					ng-repeat="c in s.cards"
@@ -54,7 +54,7 @@
 					ng-class="{'archived': c.archived, 'has-labels': c.labels.length>0 }">
 					<div data-as-sortable-item-handle>
 						<div class="card-upper">
-							<h3>{{ c.title }}</h3>
+							<h4>{{ c.title }}</h4>
 							<ul class="labels">
 								<li ng-repeat="label in c.labels"
 									ng-style="{'background-color':'#{{ label.color }}'}" title="{{ label.title }}">

templates/part.board.sidebarView.php

@@ -6,7 +6,7 @@
 </div>
 <div id="sidebar-header">
     <a class="icon-close" ui-sref="board" ng-click="sidebar.show=!sidebar.show"> &nbsp;</a>
-    <h2>{{ boardservice.getCurrent().title }}</h2>
+    <h3>{{ boardservice.getCurrent().title }}</h3>
 </div>
 
 {{board=boardservice.getCurrent();""}}

templates/part.card.php

@@ -7,7 +7,7 @@
 {{card=cardservice.getCurrent();""}}
 <div id="sidebar-header">
 	<a class="icon-close" ui-sref="board" ng-click="sidebar.show=!sidebar.show">&nbsp;</a>
-	<h2>
+	<h3>
 		<!-- TODO: change to textarea elastic //-->
 		<form ng-submit="cardRename(cardservice.getCurrent())">
 			<input class="input-inline" type="text" ng-if="status.cardRename"
@@ -18,7 +18,7 @@
 		<div ng-click="cardRenameShow()" ng-show="!status.cardRename">
 			{{ cardservice.getCurrent().title }}
 		</div>
-	</h2>
+	</h3>
 </div>
 
 <div id="card-meta" class="card-block">
@@ -28,9 +28,9 @@
 		<?php p($l->t('by')); ?>
 		<span>{{ cardservice.getCurrent().owner.displayname }}</span>
 	</div>
-	<h3 id="card-tag-label" ng-show="!(boardservice.isArchived() || card.archived) && card.labels">
+	<h4 id="card-tag-label" ng-show="!(boardservice.isArchived() || card.archived) && card.labels">
 		<?php p($l->t('Tags')); ?>
-	</h3>
+	</h4>
 	<div id="labels" ng-show="!(boardservice.isArchived() || card.archived) && card.labels">
 		<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
 				   ng-disabled="boardservice.isArchived() || card.archived"
@@ -47,9 +47,9 @@
 			</ui-select-choices>
 		</ui-select>
 	</div>
-	<h3>
+	<h4>
 		<?php p($l->t('Due date')); ?>
-	</h3>
+	</h4>
 	<div class="duedate">
 		<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
 		<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
@@ -58,7 +58,7 @@
 
 
 	<div id="card-description">
-		<h3>
+		<h4>
 			<div>
 				<div>
 					<?php p($l->t('Description')); ?>
@@ -67,7 +67,7 @@
 				<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
 			</div>
 
-		</h3>
+		</h4>
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="<?php p($l->t('Add a card description…')); ?>"
 				  ng-blur="cardUpdate(cardservice.getCurrent())"