Adapt new breadcrumb layout

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

css/style.scss

@@ -151,20 +151,24 @@ input.input-inline {
 	z-index: 120;
 	display: flex;
 	align-items: center;
-	font-size: 14pt;
 	position: inherit;
-	width: 100% !important;
     padding-left: 44px;
 
-	.crumb,
-	#controls a {
-		top: 12px;
+	.crumb {
+		order: 0;
+
+		a:nth-child(2) {
+			padding-left: 0;
+			margin-left: -5px;
 		}
 
-	> h2 {
-		white-space: nowrap;
-		padding: 8px 7px 5px;
-		margin: 0;
+		.board-bullet {
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			border: none;
+			border-radius: 50%;
+		}
 	}
 
 	button {
@@ -173,7 +177,7 @@ input.input-inline {
 
 	input[type='text'] {
 		padding: 6px;
-		border: 0px none transparent;
+		border: 0 none transparent;
 		min-height: initial;
 		background-color: transparent;
 		height: inherit;

templates/part.board.mainView.php

@@ -6,13 +6,17 @@
 </div>
 
 <div id="controls">
-	<div class="crumb svg last">
-		<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>">
-		</a>
+	<div class="crumb">
+		<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>"></a>
+	</div>
+	<div class="crumb" ng-if="boardservice.getCurrent().archived">
+		<a class="icon-archive"></a>
+		<a ui-sref="list({ filter: 'archived' })"><?php p($l->t('Archived boards')); ?></a>
+	</div>
+	<div class="crumb last title">
+		<a><span class="board-bullet" ng-style="{'background-color':'#{{boardservice.getCurrent().color }}'}"></span></a>
+		<a>{{ boardservice.getCurrent().title }}</a>
 	</div>
-	<h2 class="title" ng-style="{'border-bottom':'2px solid #{{boardservice.getCurrent().color }}'}">
-		{{ boardservice.getCurrent().title }}
-	</h2>
 	<div class="board-header-controls hidden">
 		<?php print_unescaped($this->inc('part.board.headerControls')); ?>
 	</div>