Make sidebar a bit cleaner

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

css/style.scss

@@ -655,12 +655,17 @@ input.input-inline {
  */
 
 #sidebar-header {
+
+	position: sticky;
+	top: 0;
+	background-color: $color-main-background;
+	z-index: 200;
+
 	h3 {
 		font-size: 14pt;
-		padding: 9px 10px;
+		padding: 15px 15px 3px;
 		margin: 0;
 		overflow: hidden;
-		background-color: $color-lightgrey;
 
 		input {
 			min-height: 0px;
@@ -668,6 +673,12 @@ input.input-inline {
 		}
 	}
 
+	#card-dates {
+		font-size: 80%;
+		opacity: 0.5;
+		padding-left: 15px;
+	}
+
 	.icon-close {
 		position: absolute;
 		top: 0px;
@@ -708,7 +719,7 @@ input.input-inline {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	padding: 15px;
+	padding: 0 15px;
 
 	.duedate {
 		display: flex;
@@ -785,12 +796,6 @@ input.input-inline {
 		display: inline;
 	}
 
-	#card-dates {
-		font-size: 80%;
-		opacity: 0.5;
-		text-align: right;
-	}
-
 	.card-details-assign-users {
 
 		.select2 .ui-select-choices-row-inner {
@@ -1336,7 +1341,7 @@ input.input-inline {
 	padding: 0;
 	float: left !important;
 	display: block;
-	border-radius: 0px 0px 5px 5px !important;
+	border-radius: 3px !important;
 
 	.select-label {
 		color: $color-primary-text;

templates/part.board.headerControls.php

@@ -13,8 +13,8 @@
     </form>
 </div>
 
-<button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
-    <i class="icon icon-archive"></i>
+<button ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" title="<?php p($l->t('Show archived cards')); ?>">
+    <i class="icon icon-archive" style="opacity:0.5;"></i>
     <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
 </button>
 <button ng-if="params.filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">

templates/part.card.php

@@ -23,15 +23,16 @@
 			{{ cardservice.getCurrent().title }}
 		</div>
 	</h3>
-</div>
-
-<div id="card-meta" class="card-block">
 	<div id="card-dates">
 		<?php p($l->t('Modified:')); ?> <span class="live-relative-timestamp" data-timestamp="{{cardservice.getCurrent().lastModified*1000}}">{{ cardservice.getCurrent().lastModified|relativeDateFilter }}</span>
 		<?php p($l->t('Created:')); ?> <span class="live-relative-timestamp" data-timestamp="{{cardservice.getCurrent().createdAt*1000}}">{{ cardservice.getCurrent().createdAt|relativeDateFilter }}</span>
 		<?php p($l->t('by')); ?>
 		<span>{{ cardservice.getCurrent().owner.displayname }}</span>
 	</div>
+</div>
+
+<div id="card-meta" class="card-block">
+
 	<div class="section-header">
 		<h4 id="card-tag-label" ng-if="!(boardservice.isArchived() || card.archived) && card.labels">
 			<?php p($l->t('Tags')); ?>