Polish sidebar (#215)

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>

css/style.css

@@ -73,7 +73,7 @@ button.button-inline:hover {
 .app-navigation-entry-utils-menu-share {
 	display: flex !important;
 	padding: 14px;
-	opacity: 0.4;
+	opacity: 0.3;
 }
 
 #app-navigation .app-navigation-entry-edit {
@@ -293,7 +293,7 @@ button.button-inline:hover {
 .stack h2 button {
 	margin-left: auto;
 	display: flex;
-	opacity: 0.25;
+	opacity: 0.3;
 	padding-right: 0;
 }
 
@@ -328,7 +328,7 @@ button.button-inline:hover {
 }
 
 .card .card-controls .card-options {
-	opacity: 0.25;
+	opacity: 0.3;
 	position: absolute;
 	right: 10px;
 	top: 8px;
@@ -484,7 +484,7 @@ button.button-inline:hover {
 	margin: -4px 4px -4px -4px;
 	padding: 0px 4px;
 	font-size: 90%;
-	opacity: .7;
+	opacity: 0.7;
 	display: flex;
 	align-items: center;
 }
@@ -526,18 +526,26 @@ button.button-inline:hover {
 #card-header {
 }
 
-#card-header h2 {
+#card-header h2, #sidebar-header h2 {
 	font-size: 14pt;
-	padding: 10px 10px 9px;
+	padding: 9px 10px;
 	overflow: hidden;
 	margin-bottom: 0;
 	background-color: #f0f0f0;
 }
 
+#card-header h2 input {
+	min-height: 0px;
+	margin: 0px;
+}
+
 #sidebar-header .icon-close, #card-header .icon-close {
 	position: absolute;
-	top: 5px;
+	top: 0px;
-	right: 5px;
+	right: 0px;
+	padding: 14px;
+	height: 44px;
+	width: 44px;
 }
 
 #card-meta {
@@ -549,27 +557,59 @@ button.button-inline:hover {
 #card-dates {
 	font-size: 80%;
 	color: #aaaaaa;
-	margin-bottom: 3px;
+	text-align: right;
 }
 
-#card-meta #labels {
+#card-tag-label {
-	margin-bottom: 10px;
+	padding-top: 0px !important;
+	margin-top: 0px;
 }
 
 #card-meta .duedate {
 	display: flex;
+	align-content: center;
+	min-height: 38px;
 }
+
+#card-meta .duedate .timepicker-input {
+	width: 50px;
+	border-radius: 0px 3px 3px 0px;
+}
+
+#card-meta .duedate .datepicker-input {
+	width: 85px;
+	margin: 3px 0px;
+	border-right: 0;
+	border-radius: 3px 0px 0px 3px;
+}
+
+#card-meta .duedate .icon {
+	opacity: 0.5;
+}
+
+#card-meta .duedate .icon:hover {
+	opacity: 0.7;
+}
+
+#card-meta .select2-container {
+	margin: 0px;
+}
+
 #card-description {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 }
 
-#card-description > h3 {
+#card-meta h3 {
-	border-bottom: 1px solid #333333;
+	border-bottom: 1px solid #dbdbdb;
-	font-weight: 600;
+	padding: 15px 0px 5px 0px;
-	font-size: 10pt;
+}
-	padding: 5px;
+
+#card-meta h3 > div {
+	display: flex;
+	align-content: center;
+	justify-content: space-between;
 }
 
 #card-description > div {
@@ -588,20 +628,20 @@ button.button-inline:hover {
 	background-color: white;
 }
 
-#card-description .save-indicator {
+#card-meta .save-indicator {
 	background-color: #009900;
 	color: #ffffff;
 	border-radius: 3px;
 	float: right;
-	padding: 1px 10px;
+	padding: 0px 10px;
 	font-size: 8pt !important;
 	display: none;
+	align-self: flex-end;
 }
-#card-description .icon-help {
+#card-meta .icon-help {
-	float: right;
+	opacity: 0.5;
 }
 
-#sidebar-header,
 .card-block {
 	padding: 15px;
 }
@@ -695,7 +735,7 @@ button.button-inline:hover {
 	background-image: url(../../../core/img/actions/checkmark.svg);
 	background-position: center center;
 	background-repeat: no-repeat;
-	opacity: 1.0;
+	opacity: 1;
 }
 
 .colorselect .dark.selected {
@@ -876,10 +916,6 @@ button.button-inline:hover {
 	margin-top: 4px;
 }
 
-#board-detail-labels {
-	padding: 10px;
-}
-
 #board-detail-labels ul li input {
 	margin: 0px;
 	padding: 5px;
@@ -890,7 +926,7 @@ button.button-inline:hover {
 	width: 100%;
 	padding: 4px;
 	border: none;
-	border-radius: 0px 0px 3px 3px;
+	border-radius: 0px 0px 5px 5px;
 }
 
 #board-detail-labels ul li a.icon {
@@ -926,6 +962,10 @@ button.button-inline:hover {
 	margin-bottom: 0;
 }
 
+.tabsContainer {
+	margin-top: 15px;
+}
+
 #shareWithList .avatar {
 	float: left;
 	margin-top: -5px;
@@ -948,6 +988,7 @@ button.button-inline:hover {
 	padding: 0;
 	float: left !important;
 	display: block;
+	border-radius: 0px 0px 5px 5px !important;
 }
 
 .ui-select-match-item .select-label {
@@ -956,6 +997,10 @@ button.button-inline:hover {
 	margin-right: -23px !important;
 }
 
+.ui-select-choices-group .choose-label {
+	padding: 6px;
+}
+
 .select2-container-multi .select2-choices .select2-search-choice {
 	padding: 3px 0 !important;
 	border: 0 !important;
@@ -977,6 +1022,10 @@ button.button-inline:hover {
 	width:100% !important;
 }
 
+.select2-result-label {
+	padding: 0px !important;
+}
+
 .select2-result-label span {
 	display: flex;
 }

templates/part.card.php

@@ -28,54 +28,45 @@
 		<?php p($l->t('by')); ?>
 		<span>{{ cardservice.getCurrent().owner.displayname }}</span>
 	</div>
-
+	<h3 id='card-tag-label'>
+		<?php p($l->t('Tags')); ?>
+	</h3>
 	<div id="labels">
 		<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
 				   ng-disabled="boardservice.isArchived() || card.archived"
-				   style="width:100%;" title="Choose a label"
+				   style="width:100%;" title="<?php p($l->t('Choose a label')); ?>"
-				   placeholder="Add a label"
+				   placeholder="<?php p($l->t('Add a label')); ?>"
 				   on-select="labelAssign($item, $model)"
 				   on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
-			<ui-select-match placeholder="Select labels…">
+			<ui-select-match placeholder="<?php p($l->t('Select labels…')); ?>">
 				<span class="select-label" style="background-color:#{{$item.color}}; color:{{ $item.color|textColorFilter }};">{{$item.title}}&nbsp;</span>
 			</ui-select-match>
 			<ui-select-choices
 				repeat="label in boardservice.getCurrent().labels | filter:$select.search">
-				<span
+				<span class="choose-label" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
-					style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
 			</ui-select-choices>
 		</ui-select>
-
+	</div>
-		<div class="duedate">
+	<h3>
-			<input class="datepicker-input medium focus" type="text" placeholder="Set a due date" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
+		<?php p($l->t('Due date')); ?>
-			<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
+	</h3>
-			<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
+	<div class="duedate">
-		</div>
+		<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
-
+		<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
+		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
 	</div>
 
-	<!--<div id="assigned-users">
+	
-		<ui-select multiple tagging="" ng-model="card.assignees"
-				   theme="bootstrap" style="width:100%;"
-				   title="Choose a user to assign"
-				   placeholder="Assign users…"
-				   on-select="userAssign($item, $model)"
-				   on-remove="userRemove($item, $model)" ng-disabled="archived">
-			<ui-select-match placeholder="Select users…">{{$item.title}}
-			</ui-select-match>
-			<ui-select-choices
-				repeat="label in boardservice.getCurrent().labels | filter:$select.search">
-				<span
-					style="background-color:#{{label.color}}">{{label.title}}</span>
-			</ui-select-choices>
-		</ui-select>
-	</div>//-->
-
 	<div id="card-description">
 		<h3>
-			<?php p($l->t('Description')); ?>
+			<div>
-			<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
+				<div>
-			<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
+					<?php p($l->t('Description')); ?>
+					<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
+				</div>
+				<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
+			</div>
+			
 		</h3>
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="Enter your description here…"
@@ -89,43 +80,5 @@
 			<div class="placeholder"
 				 ng-if="!cardservice.getCurrent().description"><?php p($l->t('Add a card description…')); ?></div>
 		</div>
-
 	</div>
-
+</div>
-
-</div>
-
-<!--
-<ul class="tabHeaders">
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a><?php p($l->t('Attachments')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Comments')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a><?php p($l->t('History')); ?></a></li>
-</ul>
-<div class="tabsContainer">
-    <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
-        <div id="card-attachments">
-            <button ng-click="status.addAttachment=true"><i class="fa fa-plus"></i> Add an attachment</button>
-            <div ng-if="status.addAttachment" id="attachment-add">
-            <button><i class="fa fa-file"></i> Attach a File</button>
-            <button><i class="fa fa-link"></i> Attach a URL</button>
-            </div>
-            <ul>
-                <li>
-                    <a href="#">
-                        <span class="fa fa-file"></span> myfilename.pdf
-                        <div class="details">
-                            <span class="user">Added by John Doe at</span>
-                            <span class="added">1.3.2014 14:13</span>
-                        </div>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div id="board-detail-labels" class="tab commentsTabView" ng-if="status.boardtab==1">
-    </div>
-    <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==2">
-    </div>
-</div>
-
-//-->