From 29cd46f2936e1cfb727c00ad7b697f3577d0968e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sun, 1 Oct 2017 16:48:30 +0200
Subject: [PATCH] Finish cleaning up sidebar

---
 css/src/06sidebar.scss     | 411 ++++++++++++++++++-------------------
 css/style.scss             | 411 ++++++++++++++++++-------------------
 templates/part.details.php | 138 ++++++++++---
 3 files changed, 503 insertions(+), 457 deletions(-)

diff --git a/css/src/06sidebar.scss b/css/src/06sidebar.scss
index 27e1820e..b4f1ee32 100644
--- a/css/src/06sidebar.scss
+++ b/css/src/06sidebar.scss
@@ -52,28 +52,13 @@
 			min-height: 50px;
 			word-wrap: break-word;
 
-			.checkbox {
-				float: left;
-				padding: 16px 17px 18px;
-
-				.icon {
-					cursor: pointer;
-					margin: 0;
+			&.editing {
+				.title-text {
+					display: none !important;
 				}
-			}
 
-			.star {
-				padding: 13px;
-				float: right;
-
-				.icon {
-					height: 24px;
-					width: 24px;
-					background-size: 144px 144px;
-
-					&:hover {
-						opacity: 1;
-					}
+				.expandable-container {
+					display: inline-block !important;
 				}
 			}
 
@@ -100,6 +85,47 @@
 				}
 			}
 
+			.expandable-container {
+				background: none repeat scroll 0 0 $white;
+				box-sizing: border-box;
+				border: 1px solid $gray;
+				padding: 0 6px;
+				display: none !important;
+				margin: 13px 0;
+				width: calc(100% - 100px);
+				line-height: 24px;
+				min-height: 24px;
+
+				.expandingArea {
+					position: relative;
+				}
+			}
+
+			.checkbox {
+				float: left;
+				padding: 16px 17px 18px;
+
+				.icon {
+					cursor: pointer;
+					margin: 0;
+				}
+			}
+
+			.star {
+				padding: 13px;
+				float: right;
+
+				.icon {
+					height: 24px;
+					width: 24px;
+					background-size: 144px 144px;
+
+					&:hover {
+						opacity: 1;
+					}
+				}
+			}
+
 			textarea,
 			pre {
 				box-shadow: none;
@@ -134,32 +160,6 @@
 				padding: 0 !important;
 				visibility: hidden;
 			}
-
-			.expandable-container {
-				background: none repeat scroll 0 0 $white;
-				box-sizing: border-box;
-				border: 1px solid $gray;
-				padding: 0 6px;
-				display: none !important;
-				margin: 13px 0;
-				width: calc(100% - 100px);
-				line-height: 24px;
-				min-height: 24px;
-
-				.expandingArea {
-					position: relative;
-				}
-			}
-
-			&.editing {
-				.title-text {
-					display: none !important;
-				}
-
-				.expandable-container {
-					display: inline-block !important;
-				}
-			}
 		}
 
 		.body {
@@ -173,6 +173,72 @@
 				position: relative;
 				margin-bottom: 0;
 				width: 100%;
+				color: $gray;
+
+				&:last-of-type {
+					border-bottom: unset;
+				}
+
+				&.low,
+				&.date {
+					color: $blue_due;
+				}
+
+				&.high {
+					color: $red_overdue;
+				}
+
+				&.medium {
+					color: $yellow;
+				}
+
+				&.date:hover .icon.icon-trash {
+					display: block;
+				}
+
+				&.date .icon {
+					&.icon-calendar-due,
+					&.icon-calendar-overdue,
+					&.icon-percent {
+						opacity: 1;
+					}
+				}
+
+				&.detail-note {
+					padding: 20px 0;
+					height: auto;
+				}
+
+				&.editing {
+					.icon {
+						&.detail-save,
+						&.icon-trash {
+							display: block;
+						}
+					}
+
+					.section-title {
+						display: none;
+					}
+
+					.section-edit {
+						display: inline-block;
+					}
+				}
+
+				.icon {
+					&.icon-trash {
+						display: none;
+						margin-left: auto;
+						right: 22px;
+					}
+
+					&.detail-save {
+						display: none;
+						margin-left: auto;
+						right: 44px;
+					}
+				}
 
 				> div {
 					padding-left: 12px;
@@ -191,7 +257,6 @@
 					}
 
 					.section-title {
-						color: $gray;
 						font-weight: bold;
 						margin-left: 12px;
 						line-height: 22px;
@@ -206,21 +271,6 @@
 					}
 				}
 
-				&.low,
-				&.date {
-					.section-title {
-						color: $blue_due;
-					}
-				}
-
-				&.high .section-title {
-					color: $red_overdue;
-				}
-
-				&.medium .section-title {
-					color: $yellow;
-				}
-
 				input {
 					background-color: $white;
 					border: 1px solid $blue_background;
@@ -246,6 +296,27 @@
 					min-height: 0;
 				}
 
+				input {
+					&.datepicker-input {
+						width: 60%;
+					}
+
+					&.timepicker-input {
+						width: calc(40% - 10px);
+					}
+
+					&.duration-input {
+						margin: 2px 0 0 .3em;
+						width: 35px;
+					}
+
+					&.percent-input,
+					&.priority-input {
+						width: 35px;
+						margin-top: 0;
+					}
+				}
+
 				select {
 					background-color: rgba(0, 0, 0, 0);
 					border-radius: 0;
@@ -265,38 +336,6 @@
 					line-height: 0;
 				}
 
-				&.editing {
-					.icon {
-						&.detail-save,
-						&.icon-trash {
-							display: block;
-						}
-					}
-
-					.section-title {
-						display: none;
-					}
-
-					.section-edit {
-						display: inline-block;
-					}
-				}
-
-				&.date {
-					.icon.icon-percent {
-						opacity: 1;
-					}
-
-					&:hover .icon.icon-trash {
-						display: block;
-					}
-				}
-
-				&.detail-note {
-					padding: 20px 0;
-					height: auto;
-				}
-
 				.detail-categories-container {
 					width: calc(100% - 40px);
 					display: inline-block;
@@ -351,117 +390,89 @@
 				&.active .select2-search-field input {
 					color: $blue_due;
 				}
-			}
 
-			.note {
-				border-width: 1px;
-				border-style: solid;
-				border-color: $gray_light;
-				font-size: 13px;
-				line-height: 26px;
-				margin: 0 20px;
-				padding: 5px 15px;
-				cursor: text;
-
-				.expandingArea {
-					position: relative;
-					margin-left: -1px;
-
-					textarea,
-					pre {
-						box-shadow: none;
-						background: none repeat scroll 0 0 transparent;
-						border: medium none;
-						font-size: 13px;
-						line-height: 26px;
-						padding: 0;
-						white-space: pre-wrap;
-						word-wrap: break-word;
-					}
-
-					textarea {
-						margin: 0 0 0 1px;
-						border-radius: 0;
-						height: 100%;
-						left: 0;
-						overflow: hidden;
-						position: absolute;
-						resize: none;
-						top: 0;
-						width: 100%;
-						color: $gray_dark;
-						font-weight: 500;
-						outline: medium none;
-					}
-
-					pre {
-						border: 0 none !important;
-						display: block;
-						margin: 0;
-						outline: 0 none;
-						padding: 0 !important;
-						visibility: hidden;
-					}
-				}
-
-				.note-body,
-				.note-edit {
+				.note {
+					border-width: 1px;
+					border-style: solid;
+					border-color: $gray_light;
+					font-size: 13px;
+					line-height: 26px;
+					margin: 0 20px;
+					padding: 5px 15px;
 					cursor: text;
-					min-height: 140px;
-					word-wrap: break-word;
 
-					a {
-						cursor: text;
+					.expandingArea {
+						position: relative;
+						margin-left: -1px;
+
+						textarea,
+						pre {
+							box-shadow: none;
+							background: none repeat scroll 0 0 transparent;
+							border: medium none;
+							line-height: 26px;
+							padding: 0;
+							white-space: pre-wrap;
+							word-wrap: break-word;
+						}
+
+						textarea {
+							margin: 0 0 0 1px;
+							border-radius: 0;
+							height: 100%;
+							left: 0;
+							overflow: hidden;
+							position: absolute;
+							resize: none;
+							top: 0;
+							width: 100%;
+							color: $gray_dark;
+							font-weight: 500;
+							outline: medium none;
+						}
+
+						pre {
+							border: 0 none !important;
+							display: block;
+							margin: 0;
+							outline: 0 none;
+							padding: 0 !important;
+							visibility: hidden;
+						}
 					}
 
-					.content-fakeable {
-						cursor: text !important;
+					.note-body,
+					.note-edit {
+						min-height: 140px;
+						word-wrap: break-word;
+						cursor: text;
 
-						.display-view {
-							display: block;
-						}
+						.content-fakeable {
+							&.editing {
+								.display-view {
+									display: none !important;
+								}
 
-						.edit-view {
-							display: none !important;
-						}
+								.edit-view {
+									display: block !important;
+								}
+							}
 
-						&.editing {
 							.display-view {
-								display: none !important;
+								cursor: text;
+								display: block;
+								white-space: pre-wrap;
 							}
 
 							.edit-view {
-								display: block !important;
+								display: none !important;
 							}
 						}
 					}
-
-					.edit-view {
-						cursor: text !important;
-					}
-
-					.display-view {
-						cursor: text !important;
-						white-space: pre-wrap;
-
-						a {
-							cursor: pointer;
-							text-decoration: underline;
-						}
-					}
 				}
 			}
 		}
 
-		&.completed .body .section .section-title {
-			color: $gray !important;
-		}
-
-		.task-list .task-body .title-wrapper .title a {
-			cursor: pointer;
-			text-decoration: underline;
-		}
-
 		.disabled .body .section {
 			.select2-search-field input {
 				width: auto;
@@ -474,31 +485,3 @@
 		}
 	}
 }
-
-input {
-	&.datepicker-input {
-		width: 60%;
-	}
-
-	&.timepicker-input {
-		width: calc(40% - 10px);
-	}
-
-	&.duration-input {
-		margin: 2px 0 0 .3em;
-		width: 35px;
-	}
-
-	&.percent-input,
-	&.priority-input {
-		width: 35px;
-		margin-top: 0;
-	}
-}
-
-.date .icon {
-	&.icon-calendar-due,
-	&.icon-calendar-overdue {
-		opacity: 1;
-	}
-}
diff --git a/css/style.scss b/css/style.scss
index e0596713..331ac736 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -798,28 +798,13 @@ tr:last-child .task-item {
 			min-height: 50px;
 			word-wrap: break-word;
 
-			.checkbox {
-				float: left;
-				padding: 16px 17px 18px;
-
-				.icon {
-					cursor: pointer;
-					margin: 0;
+			&.editing {
+				.title-text {
+					display: none !important;
 				}
-			}
 
-			.star {
-				padding: 13px;
-				float: right;
-
-				.icon {
-					height: 24px;
-					width: 24px;
-					background-size: 144px 144px;
-
-					&:hover {
-						opacity: 1;
-					}
+				.expandable-container {
+					display: inline-block !important;
 				}
 			}
 
@@ -846,6 +831,47 @@ tr:last-child .task-item {
 				}
 			}
 
+			.expandable-container {
+				background: none repeat scroll 0 0 $white;
+				box-sizing: border-box;
+				border: 1px solid $gray;
+				padding: 0 6px;
+				display: none !important;
+				margin: 13px 0;
+				width: calc(100% - 100px);
+				line-height: 24px;
+				min-height: 24px;
+
+				.expandingArea {
+					position: relative;
+				}
+			}
+
+			.checkbox {
+				float: left;
+				padding: 16px 17px 18px;
+
+				.icon {
+					cursor: pointer;
+					margin: 0;
+				}
+			}
+
+			.star {
+				padding: 13px;
+				float: right;
+
+				.icon {
+					height: 24px;
+					width: 24px;
+					background-size: 144px 144px;
+
+					&:hover {
+						opacity: 1;
+					}
+				}
+			}
+
 			textarea,
 			pre {
 				box-shadow: none;
@@ -880,32 +906,6 @@ tr:last-child .task-item {
 				padding: 0 !important;
 				visibility: hidden;
 			}
-
-			.expandable-container {
-				background: none repeat scroll 0 0 $white;
-				box-sizing: border-box;
-				border: 1px solid $gray;
-				padding: 0 6px;
-				display: none !important;
-				margin: 13px 0;
-				width: calc(100% - 100px);
-				line-height: 24px;
-				min-height: 24px;
-
-				.expandingArea {
-					position: relative;
-				}
-			}
-
-			&.editing {
-				.title-text {
-					display: none !important;
-				}
-
-				.expandable-container {
-					display: inline-block !important;
-				}
-			}
 		}
 
 		.body {
@@ -919,6 +919,72 @@ tr:last-child .task-item {
 				position: relative;
 				margin-bottom: 0;
 				width: 100%;
+				color: $gray;
+
+				&:last-of-type {
+					border-bottom: unset;
+				}
+
+				&.low,
+				&.date {
+					color: $blue_due;
+				}
+
+				&.high {
+					color: $red_overdue;
+				}
+
+				&.medium {
+					color: $yellow;
+				}
+
+				&.date:hover .icon.icon-trash {
+					display: block;
+				}
+
+				&.date .icon {
+					&.icon-calendar-due,
+					&.icon-calendar-overdue,
+					&.icon-percent {
+						opacity: 1;
+					}
+				}
+
+				&.detail-note {
+					padding: 20px 0;
+					height: auto;
+				}
+
+				&.editing {
+					.icon {
+						&.detail-save,
+						&.icon-trash {
+							display: block;
+						}
+					}
+
+					.section-title {
+						display: none;
+					}
+
+					.section-edit {
+						display: inline-block;
+					}
+				}
+
+				.icon {
+					&.icon-trash {
+						display: none;
+						margin-left: auto;
+						right: 22px;
+					}
+
+					&.detail-save {
+						display: none;
+						margin-left: auto;
+						right: 44px;
+					}
+				}
 
 				> div {
 					padding-left: 12px;
@@ -937,7 +1003,6 @@ tr:last-child .task-item {
 					}
 
 					.section-title {
-						color: $gray;
 						font-weight: bold;
 						margin-left: 12px;
 						line-height: 22px;
@@ -952,21 +1017,6 @@ tr:last-child .task-item {
 					}
 				}
 
-				&.low,
-				&.date {
-					.section-title {
-						color: $blue_due;
-					}
-				}
-
-				&.high .section-title {
-					color: $red_overdue;
-				}
-
-				&.medium .section-title {
-					color: $yellow;
-				}
-
 				input {
 					background-color: $white;
 					border: 1px solid $blue_background;
@@ -992,6 +1042,27 @@ tr:last-child .task-item {
 					min-height: 0;
 				}
 
+				input {
+					&.datepicker-input {
+						width: 60%;
+					}
+
+					&.timepicker-input {
+						width: calc(40% - 10px);
+					}
+
+					&.duration-input {
+						margin: 2px 0 0 .3em;
+						width: 35px;
+					}
+
+					&.percent-input,
+					&.priority-input {
+						width: 35px;
+						margin-top: 0;
+					}
+				}
+
 				select {
 					background-color: rgba(0, 0, 0, 0);
 					border-radius: 0;
@@ -1011,38 +1082,6 @@ tr:last-child .task-item {
 					line-height: 0;
 				}
 
-				&.editing {
-					.icon {
-						&.detail-save,
-						&.icon-trash {
-							display: block;
-						}
-					}
-
-					.section-title {
-						display: none;
-					}
-
-					.section-edit {
-						display: inline-block;
-					}
-				}
-
-				&.date {
-					.icon.icon-percent {
-						opacity: 1;
-					}
-
-					&:hover .icon.icon-trash {
-						display: block;
-					}
-				}
-
-				&.detail-note {
-					padding: 20px 0;
-					height: auto;
-				}
-
 				.detail-categories-container {
 					width: calc(100% - 40px);
 					display: inline-block;
@@ -1097,117 +1136,89 @@ tr:last-child .task-item {
 				&.active .select2-search-field input {
 					color: $blue_due;
 				}
-			}
 
-			.note {
-				border-width: 1px;
-				border-style: solid;
-				border-color: $gray_light;
-				font-size: 13px;
-				line-height: 26px;
-				margin: 0 20px;
-				padding: 5px 15px;
-				cursor: text;
-
-				.expandingArea {
-					position: relative;
-					margin-left: -1px;
-
-					textarea,
-					pre {
-						box-shadow: none;
-						background: none repeat scroll 0 0 transparent;
-						border: medium none;
-						font-size: 13px;
-						line-height: 26px;
-						padding: 0;
-						white-space: pre-wrap;
-						word-wrap: break-word;
-					}
-
-					textarea {
-						margin: 0 0 0 1px;
-						border-radius: 0;
-						height: 100%;
-						left: 0;
-						overflow: hidden;
-						position: absolute;
-						resize: none;
-						top: 0;
-						width: 100%;
-						color: $gray_dark;
-						font-weight: 500;
-						outline: medium none;
-					}
-
-					pre {
-						border: 0 none !important;
-						display: block;
-						margin: 0;
-						outline: 0 none;
-						padding: 0 !important;
-						visibility: hidden;
-					}
-				}
-
-				.note-body,
-				.note-edit {
+				.note {
+					border-width: 1px;
+					border-style: solid;
+					border-color: $gray_light;
+					font-size: 13px;
+					line-height: 26px;
+					margin: 0 20px;
+					padding: 5px 15px;
 					cursor: text;
-					min-height: 140px;
-					word-wrap: break-word;
 
-					a {
-						cursor: text;
+					.expandingArea {
+						position: relative;
+						margin-left: -1px;
+
+						textarea,
+						pre {
+							box-shadow: none;
+							background: none repeat scroll 0 0 transparent;
+							border: medium none;
+							line-height: 26px;
+							padding: 0;
+							white-space: pre-wrap;
+							word-wrap: break-word;
+						}
+
+						textarea {
+							margin: 0 0 0 1px;
+							border-radius: 0;
+							height: 100%;
+							left: 0;
+							overflow: hidden;
+							position: absolute;
+							resize: none;
+							top: 0;
+							width: 100%;
+							color: $gray_dark;
+							font-weight: 500;
+							outline: medium none;
+						}
+
+						pre {
+							border: 0 none !important;
+							display: block;
+							margin: 0;
+							outline: 0 none;
+							padding: 0 !important;
+							visibility: hidden;
+						}
 					}
 
-					.content-fakeable {
-						cursor: text !important;
+					.note-body,
+					.note-edit {
+						min-height: 140px;
+						word-wrap: break-word;
+						cursor: text;
 
-						.display-view {
-							display: block;
-						}
+						.content-fakeable {
+							&.editing {
+								.display-view {
+									display: none !important;
+								}
 
-						.edit-view {
-							display: none !important;
-						}
+								.edit-view {
+									display: block !important;
+								}
+							}
 
-						&.editing {
 							.display-view {
-								display: none !important;
+								cursor: text;
+								display: block;
+								white-space: pre-wrap;
 							}
 
 							.edit-view {
-								display: block !important;
+								display: none !important;
 							}
 						}
 					}
-
-					.edit-view {
-						cursor: text !important;
-					}
-
-					.display-view {
-						cursor: text !important;
-						white-space: pre-wrap;
-
-						a {
-							cursor: pointer;
-							text-decoration: underline;
-						}
-					}
 				}
 			}
 		}
 
-		&.completed .body .section .section-title {
-			color: $gray !important;
-		}
-
-		.task-list .task-body .title-wrapper .title a {
-			cursor: pointer;
-			text-decoration: underline;
-		}
-
 		.disabled .body .section {
 			.select2-search-field input {
 				width: auto;
@@ -1221,34 +1232,6 @@ tr:last-child .task-item {
 	}
 }
 
-input {
-	&.datepicker-input {
-		width: 60%;
-	}
-
-	&.timepicker-input {
-		width: calc(40% - 10px);
-	}
-
-	&.duration-input {
-		margin: 2px 0 0 .3em;
-		width: 35px;
-	}
-
-	&.percent-input,
-	&.priority-input {
-		width: 35px;
-		margin-top: 0;
-	}
-}
-
-.date .icon {
-	&.icon-calendar-due,
-	&.icon-calendar-overdue {
-		opacity: 1;
-	}
-}
-
 /**
 	* rules for icons
 	*/
diff --git a/templates/part.details.php b/templates/part.details.php
index 00c6b743..3756d2bc 100644
--- a/templates/part.details.php
+++ b/templates/part.details.php
@@ -1,34 +1,64 @@
-<div ng-controller="DetailsController" ng-click="endEdit($event)" class="content-wrapper handler">
-    <div class="flex-container" ng-show="TaskState()=='found'" ng-class="{'disabled': !task.calendar.writable}">
+<div ng-controller="DetailsController"
+    ng-click="endEdit($event)"
+    class="content-wrapper handler">
+    <div class="flex-container"
+        ng-show="TaskState()=='found'"
+        ng-class="{'disabled': !task.calendar.writable}">
     	<div class="title" ng-class="{'editing':route.parameter=='name'}">
-            <a class="checkbox" ng-click="toggleCompleted(task)" role="checkbox" aria-checked="{{task.completed}}" aria-label="<?php p($l->t('Task is completed')); ?>">
+            <a class="checkbox"
+                ng-click="toggleCompleted(task)"
+                role="checkbox"
+                aria-checked="{{task.completed}}"
+                aria-label="<?php p($l->t('Task is completed')); ?>">
             	<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
             </a>
             <a class="star" ng-click="toggleStarred(task)">
-            	<span class="icon icon-task-star" ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"></span>
+            	<span class="icon icon-task-star"
+                    ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"></span>
             </a>
-        	<div class="title-text handler" ng-class="{'strike-through':task.completed}" ng-click="editName($event, task)"
-            oc-click-focus="{selector: '#editName', timeout: 0}" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
+        	<div class="title-text handler"
+                ng-class="{'strike-through':task.completed}"
+                ng-click="editName($event, task)"
+                oc-click-focus="{selector: '#editName', timeout: 0}"
+                ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
             </div>
             <div class="expandable-container handler">
             	<div class="expandingArea active">
                     <pre><span>{{ task.summary }}</span><br /></pre>
-                    <textarea id="editName" maxlength="200" ng-model="task.summary" ng-keydown="endName($event)" ng-change="triggerUpdate(task)"></textarea>
+                    <textarea id="editName"
+                        maxlength="200"
+                        ng-model="task.summary"
+                        ng-keydown="endName($event)"
+                        ng-change="triggerUpdate(task)">
+                    </textarea>
             	</div>
             </div>
         </div>
         <div class="body">
             <ul class="sections">
-                <li class="section detail-start handler" ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate'}" ng-click="editStart($event, task)">
+                <li class="section detail-start handler"
+                    ng-class="{'date':isDue(task.start), 'editing':route.parameter=='startdate', 'high':isOverDue(task.start)}"
+                    ng-click="editStart($event, task)">
                     <div>
                         <span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
                          'icon-calendar-overdue':isOverDue(task.start)}"></span>
-                        <span class="section-title" ng-class="{'overdue':isOverDue(task.start)}">
+                        <span class="section-title">
                             <text>{{ task.start | startDetails }}</text>
                         </span>
                         <div class="section-edit">
-                           <input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.start | dateTaskList }}" datepicker="start">
-                           <input class="timepicker-input medium handler" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.start | timeTaskList }}" timepicker="start">
+                            <input class="datepicker-input medium"
+                                type="text"
+                                key-value=""
+                                placeholder="dd.mm.yyyy"
+                                value="{{ task.start | dateTaskList }}"
+                                datepicker="start">
+                            <input class="timepicker-input medium handler"
+                                ng-hide="task.allDay"
+                                type="text"
+                                key-value=""
+                                placeholder="hh:mm"
+                                value="{{ task.start | timeTaskList }}"
+                                timepicker="start">
                         </div>
                    </div>
                    <div class="utils">
@@ -40,15 +70,28 @@
                         </a>
                     </div>
                 </li>
-                <li class="section detail-date handler" ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate'}" ng-click="editDueDate($event, task)">
+                <li class="section detail-date handler"
+                    ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
+                    ng-click="editDueDate($event, task)">
                     <div>
                     	<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
-                        <span class="section-title" ng-class="{'overdue':isOverDue(task.due)}">
+                        <span class="section-title">
                             <text>{{ task.due | dateDetails }}</text>
                         </span>
                         <div class="section-edit">
-            				<input class="datepicker-input medium" type="text" key-value="" placeholder="dd.mm.yyyy" value="{{ task.due | dateTaskList }}" datepicker="due">
-                            <input class="timepicker-input medium" ng-hide="task.allDay" type="text" key-value="" placeholder="hh:mm" value="{{ task.due | timeTaskList }}" timepicker="due">
+                            <input class="datepicker-input medium"
+                                type="text"
+                                key-value=""
+                                placeholder="dd.mm.yyyy"
+                                value="{{ task.due | dateTaskList }}"
+                                datepicker="due">
+                            <input class="timepicker-input medium"
+                                ng-hide="task.allDay"
+                                type="text"
+                                key-value=""
+                                placeholder="hh:mm"
+                                value="{{ task.due | timeTaskList }}"
+                                timepicker="due">
                         </div>
                     </div>
                     <div class="utils">
@@ -60,7 +103,11 @@
                         </a>
                     </div>
                 </li>
-                <li class="section detail-all-day handler" ng-click="toggleAllDay(task)" ng-if="isAllDayPossible(task)" role="checkbox" aria-checked="{{task.allDay}}">
+                <li class="section detail-all-day handler"
+                    ng-click="toggleAllDay(task)"
+                    ng-if="isAllDayPossible(task)"
+                    role="checkbox"
+                    aria-checked="{{task.allDay}}">
                     <div>
                         <span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
                         <span class="section-title">
@@ -68,15 +115,26 @@
                         </span>
                     </div>
                 </li>
-                <li class="section detail-priority handler" ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}"  ng-click="editPriority($event, task)">
+                <li class="section detail-priority handler"
+                    ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}"
+                    ng-click="editPriority($event, task)">
                     <div>
-                        <span class="icon icon-task-star" ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
+                        <span class="icon icon-task-star"
+                            ng-class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
                         <span class="section-title">
                             <text>{{ task.priority | priorityDetails}}</text>
                         </span>
                         <div class="section-edit">
-                            <input class="priority-input" type="text" ng-model="task.priority" ng-change="triggerUpdate(task)">
-                            <input type="range" ng-model="task.priority" min="0" max="9" step ="1" ng-change="triggerUpdate(task)">
+                            <input class="priority-input"
+                                type="text"
+                                ng-model="task.priority"
+                                ng-change="triggerUpdate(task)">
+                            <input type="range"
+                                ng-model="task.priority"
+                                min="0"
+                                max="9"
+                                step="1"
+                                ng-change="triggerUpdate(task)">
                         </div>
                     </div>
                     <div class="utils">
@@ -87,15 +145,25 @@
                             <span class="icon icon-trash"></span>
                         </a>
                 </li>
-                <li class="section detail-complete handler" ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"  ng-click="editPercent($event, task)">
+                <li class="section detail-complete handler"
+                    ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"
+                    ng-click="editPercent($event, task)">
                     <div>
                         <span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
                         <span class="section-title">
                             <text>{{ task.complete | percentDetails}}</text>
                         </span>
                         <div class="section-edit">
-                            <input class="percent-input" type="text" ng-model="task.complete" ng-change="setPercentComplete(task, task.complete)">
-                            <input type="range" ng-model="task.complete" min="0" max="100" step ="1" ng-change="setPercentComplete(task, task.complete)">
+                            <input class="percent-input"
+                                type="text"
+                                ng-model="task.complete"
+                                ng-change="setPercentComplete(task, task.complete)">
+                            <input type="range"
+                                ng-model="task.complete"
+                                min="0"
+                                max="100"
+                                step="1"
+                                ng-change="setPercentComplete(task, task.complete)">
                         </div>
                     </div>
                     <div class="utils">
@@ -112,8 +180,16 @@
                         <span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
                     <!-- Edit line 1080 to show placeholder -->
                         <div class="detail-categories-container">
-                            <ui-select multiple tagging tagging-label="<?php p($l->t('(New category)')); ?> " ng-model="task.cats" theme="select2" ng-disabled="!task.calendar.writable" style="width: 100%;"
-                             on-remove="removeCategory($item, $model)" on-select="addCategory($item, $model)">
+                            <ui-select
+                                multiple
+                                tagging
+                                tagging-label="<?php p($l->t('(New category)')); ?>"
+                                ng-model="task.cats"
+                                theme="select2"
+                                ng-disabled="!task.calendar.writable"
+                                style="width: 100%;"
+                                on-remove="removeCategory($item, $model)"
+                                on-select="addCategory($item, $model)">
                                 <ui-select-match placeholder="<?php p($l->t('Select categories...')); ?>">{{$item}}</ui-select-match>
                                 <ui-select-choices repeat="category in settingsmodel.getById('various').categories | filter:$select.search">
                                   {{category}}
@@ -124,7 +200,9 @@
                 </li>
                 <li class="section detail-note">
                     <div class="note">
-                    	<div class="note-body selectable handler" ng-click="editNote($event, task)" oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
+                    	<div class="note-body selectable handler"
+                            ng-click="editNote($event, task)"
+                            oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
                             <div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
                             	<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
                                 <div class="edit-view">
@@ -140,7 +218,9 @@
             </ul>
         </div>
         <div class="footer">
-        	<a class="handler left close-all" ng-click="deleteTask(task)" ng-show="task.calendar.writable">
+        	<a class="handler left close-all"
+                ng-click="deleteTask(task)"
+                ng-show="task.calendar.writable">
             	<span class="icon icon-trash"></span>
             </a>
             <a class="handler right close-all">
@@ -148,11 +228,11 @@
             </a>
         </div>
     </div>
-    <div  ng-show="TaskState()=='loading'" class="notice">
+    <div ng-show="TaskState()=='loading'" class="notice">
         <?php p($l->t('Loading the task...')); ?>
         <div class="loading" style="height: 50px;"></div>
     </div>
-    <div  ng-show="TaskState()==null" class="notice">
+    <div ng-show="TaskState()==null" class="notice">
         <?php p($l->t('Task not found!')); ?>
     </div>
 </div>