Cleanup content css

css/src/04content.scss

@@ -8,74 +8,13 @@
 	text-decoration: none;
 }
 
+#content {
+	overflow: hidden;
+	color: $gray_dark;
+}
+
 #app-content {
-	div {
+	overflow-x: hidden;
-		&.content-wrapper {
-			padding: 6px 17px 75px;
-			box-sizing: border-box;
-			height: 100%;
-			overflow: hidden;
-
-			.task-list {
-				height: 100%;
-				width: 100%;
-				overflow-y: auto;
-			}
-
-			.task-body .title-wrapper span.title a {
-				cursor: pointer;
-				text-decoration: underline;
-			}
-		}
-
-		&.task-list {
-			.loadmore {
-				font-size: 11px;
-				margin-top: 10px;
-				text-align: center;
-
-				span {
-					color: $gray;
-					background-color: $gray_easy;
-					border-radius: 10px;
-					padding: 3px 6px;
-
-					&:hover {
-						cursor: pointer;
-						color: $gray_dark;
-					}
-				}
-			}
-
-			.grouped-tasks {
-				position: relative;
-			}
-
-			.completed-hidden ol.completed-tasks {
-				display: none;
-			}
-		}
-	}
-
-	h2 {
-		font-weight: bold;
-		font-size: 13px;
-		margin-bottom: 10px;
-		margin-top: 20px !important;
-		word-wrap: break-word;
-		opacity: .5;
-
-		&:hover {
-			opacity: .7;
-		}
-
-		&.heading-hiddentasks {
-			display: inline-block;
-			padding-right: 16px;
-			background-position: right center;
-			cursor: pointer;
-		}
-	}
 
 	#add-task {
 		margin: 12px 0;
@@ -110,19 +49,69 @@
 		}
 	}
 
-	.sortorder-dropdown-button {
+	.content-wrapper {
-		background-color: $gray_easy;
+		padding: 6px 17px 75px;
-		border: 1px solid $gray_light;
+		box-sizing: border-box;
-		width: 42px;
+		height: 100%;
-		height: 34px;
+		overflow: hidden;
-		margin: 12px 0 12px 12px;
-		padding: 0;
-		float: right;
-		cursor: pointer;
 
-		.sort-indicator {
+		.task-list {
-			margin-left: 0;
+			height: 100%;
-			visibility: visible;
+			width: 100%;
+			overflow-y: auto;
+		}
+
+		.task-body .title-wrapper span.title a {
+			cursor: pointer;
+			text-decoration: underline;
+		}
+	}
+
+	.task-list {
+		.loadmore {
+			font-size: 11px;
+			margin-top: 10px;
+			text-align: center;
+
+			span {
+				color: $gray;
+				background-color: $gray_easy;
+				border-radius: 10px;
+				padding: 3px 6px;
+
+				&:hover {
+					cursor: pointer;
+					color: $gray_dark;
+				}
+			}
+		}
+
+		.grouped-tasks {
+			position: relative;
+		}
+
+		.completed-hidden ol.completed-tasks {
+			display: none;
+		}
+	}
+
+	h2 {
+		font-weight: bold;
+		font-size: 13px;
+		margin-bottom: 10px;
+		margin-top: 20px !important;
+		word-wrap: break-word;
+		opacity: .5;
+
+		&:hover {
+			opacity: .7;
+		}
+
+		&.heading-hiddentasks {
+			display: inline-block;
+			padding-right: 16px;
+			background-position: right center;
+			cursor: pointer;
 		}
 	}
 }
@@ -146,12 +135,3 @@ ol[dnd-list] {
 .dropzone-visible > ol[dnd-list] {
 	min-height: 50px;
 }
-
-#content {
-	overflow: hidden;
-	color: $gray_dark;
-}
-
-.app-tasks #app-content {
-	overflow-x: hidden;
-}

css/src/06sidebar.scss

@@ -9,7 +9,7 @@
 		height: 100%;
 	}
 
-	div.content-wrapper {
+	.content-wrapper {
 		padding: 0;
 
 		.notice {

css/src/10sortorder.scss

@@ -2,6 +2,22 @@
 	* rules for sortorder-dropdown
 	*/
 
+.sortorder-dropdown-button {
+	background-color: $gray_easy;
+	border: 1px solid $gray_light;
+	width: 42px;
+	height: 34px;
+	margin: 12px 0 12px 12px;
+	padding: 0;
+	float: right;
+	cursor: pointer;
+
+	.sort-indicator {
+		margin-left: 0;
+		visibility: visible;
+	}
+}
+
 .sortorder-dropdown {
 	display: none;
 	top: 68px;

css/style.scss

@@ -376,74 +376,13 @@ $white: #fff;
 	text-decoration: none;
 }
 
+#content {
+	overflow: hidden;
+	color: $gray_dark;
+}
+
 #app-content {
-	div {
+	overflow-x: hidden;
-		&.content-wrapper {
-			padding: 6px 17px 75px;
-			box-sizing: border-box;
-			height: 100%;
-			overflow: hidden;
-
-			.task-list {
-				height: 100%;
-				width: 100%;
-				overflow-y: auto;
-			}
-
-			.task-body .title-wrapper span.title a {
-				cursor: pointer;
-				text-decoration: underline;
-			}
-		}
-
-		&.task-list {
-			.loadmore {
-				font-size: 11px;
-				margin-top: 10px;
-				text-align: center;
-
-				span {
-					color: $gray;
-					background-color: $gray_easy;
-					border-radius: 10px;
-					padding: 3px 6px;
-
-					&:hover {
-						cursor: pointer;
-						color: $gray_dark;
-					}
-				}
-			}
-
-			.grouped-tasks {
-				position: relative;
-			}
-
-			.completed-hidden ol.completed-tasks {
-				display: none;
-			}
-		}
-	}
-
-	h2 {
-		font-weight: bold;
-		font-size: 13px;
-		margin-bottom: 10px;
-		margin-top: 20px !important;
-		word-wrap: break-word;
-		opacity: .5;
-
-		&:hover {
-			opacity: .7;
-		}
-
-		&.heading-hiddentasks {
-			display: inline-block;
-			padding-right: 16px;
-			background-position: right center;
-			cursor: pointer;
-		}
-	}
 
 	#add-task {
 		margin: 12px 0;
@@ -478,19 +417,69 @@ $white: #fff;
 		}
 	}
 
-	.sortorder-dropdown-button {
+	.content-wrapper {
-		background-color: $gray_easy;
+		padding: 6px 17px 75px;
-		border: 1px solid $gray_light;
+		box-sizing: border-box;
-		width: 42px;
+		height: 100%;
-		height: 34px;
+		overflow: hidden;
-		margin: 12px 0 12px 12px;
-		padding: 0;
-		float: right;
-		cursor: pointer;
 
-		.sort-indicator {
+		.task-list {
-			margin-left: 0;
+			height: 100%;
-			visibility: visible;
+			width: 100%;
+			overflow-y: auto;
+		}
+
+		.task-body .title-wrapper span.title a {
+			cursor: pointer;
+			text-decoration: underline;
+		}
+	}
+
+	.task-list {
+		.loadmore {
+			font-size: 11px;
+			margin-top: 10px;
+			text-align: center;
+
+			span {
+				color: $gray;
+				background-color: $gray_easy;
+				border-radius: 10px;
+				padding: 3px 6px;
+
+				&:hover {
+					cursor: pointer;
+					color: $gray_dark;
+				}
+			}
+		}
+
+		.grouped-tasks {
+			position: relative;
+		}
+
+		.completed-hidden ol.completed-tasks {
+			display: none;
+		}
+	}
+
+	h2 {
+		font-weight: bold;
+		font-size: 13px;
+		margin-bottom: 10px;
+		margin-top: 20px !important;
+		word-wrap: break-word;
+		opacity: .5;
+
+		&:hover {
+			opacity: .7;
+		}
+
+		&.heading-hiddentasks {
+			display: inline-block;
+			padding-right: 16px;
+			background-position: right center;
+			cursor: pointer;
 		}
 	}
 }
@@ -515,15 +504,6 @@ ol[dnd-list] {
 	min-height: 50px;
 }
 
-#content {
-	overflow: hidden;
-	color: $gray_dark;
-}
-
-.app-tasks #app-content {
-	overflow-x: hidden;
-}
-
 /**
 	* rules for task-items
 	*/
@@ -735,7 +715,7 @@ ol[dnd-list] {
 		height: 100%;
 	}
 
-	div.content-wrapper {
+	.content-wrapper {
 		padding: 0;
 
 		.notice {
@@ -1508,6 +1488,22 @@ td.ui-timepicker-hours table {
 	* rules for sortorder-dropdown
 	*/
 
+.sortorder-dropdown-button {
+	background-color: $gray_easy;
+	border: 1px solid $gray_light;
+	width: 42px;
+	height: 34px;
+	margin: 12px 0 12px 12px;
+	padding: 0;
+	float: right;
+	cursor: pointer;
+
+	.sort-indicator {
+		margin-left: 0;
+		visibility: visible;
+	}
+}
+
 .sortorder-dropdown {
 	display: none;
 	top: 68px;

templates/main.php

@@ -13,7 +13,13 @@
     style('tasks', 'vendor/angularui/ui-select/select2');
 ?>
 
-<div ng-app="Tasks" ng-cloak ng-controller="AppController" ng-click="closeAll($event)" id="app" class="handler" data-appVersion="<?php p($_['appVersion']); ?>">
+<div id="app"
+    ng-app="Tasks"
+    ng-cloak
+    ng-controller="AppController"
+    ng-click="closeAll($event)"
+    class="handler"
+    data-appVersion="<?php p($_['appVersion']); ?>">
     <div id="app-navigation" ng-controller="ListController">
         <ul id="collections">
             <li id="collection_{{ collection.id }}"
@@ -36,8 +42,8 @@
                     </ul>
                 </div>
             </li>
-            <li class="list with-menu handler"
+            <li id="list_{{ calendar.uri }}"
-                id="list_{{ calendar.uri }}"
+                class="list with-menu handler"
                 calendarID="{{calendar.uri}}"
                 ng-repeat="calendar in calendars"
                 ng-class="{ active: calendar.uri==route.calendarID, edit:route.listparameter == 'name' && route.calendarID == calendar.uri,
@@ -81,9 +87,21 @@
                 </div>
                 <div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
                     <form>
-                        <input ng-model="calendar.displayname" class="edit hasTooltip" type="text" ng-keyup="checkEdit($event,calendar)" autofocus-on-insert>
+                        <input ng-model="calendar.displayname"
-                        <input type="cancel" value="" class="action icon-close" ng-click="cancelEdit(calendar)" title="<?php p($l->t('Cancel')); ?>">
+                            class="edit hasTooltip"
-                        <input type="submit" value="" class="action icon-checkmark" ng-click="saveEdit(calendar)" title="<?php p($l->t('Save')); ?>">
+                            type="text"
+                            ng-keyup="checkEdit($event,calendar)"
+                            autofocus-on-insert>
+                        <input type="cancel"
+                            value=""
+                            class="action icon-close"
+                            ng-click="cancelEdit(calendar)"
+                            title="<?php p($l->t('Cancel')); ?>">
+                        <input type="submit"
+                            value=""
+                            class="action icon-checkmark"
+                            ng-click="saveEdit(calendar)"
+                            title="<?php p($l->t('Save')); ?>">
                     </form>
                     <colorpicker class="colorpicker"
                                  selected="calendar.color">
@@ -91,26 +109,46 @@
                 </div>
                 <div class="app-navigation-entry-edit caldav">
                     <form>
-                        <input class="caldav" ng-value="calendar.caldav" readonly type="text"/>
+                        <input class="caldav"
-                        <input type="cancel" value="" class="action icon-close" ng-click="hideCalDAVUrl()" title="<?php p($l->t('Cancel')); ?>">
+                            ng-value="calendar.caldav"
+                            readonly
+                            type="text"/>
+                        <input type="cancel"
+                            value=""
+                            class="action icon-close"
+                            ng-click="hideCalDAVUrl()"
+                            title="<?php p($l->t('Cancel')); ?>">
                     </form>
                 </div>
             </li>
             <li class="newList handler" ng-class="{edit: status.addingList}">
-                <a class="addlist" ng-click="startCreate()" oc-click-focus="{selector: '#newList', timeout: 0}">
+                <a class="addlist"
+                    ng-click="startCreate()"
+                    oc-click-focus="{selector: '#newList', timeout: 0}">
                     <span class="icon icon-add"></span>
                     <span class="title"><?php p($l->t('Add List...')); ?></span>
                 </a>
                 <div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
                     <form ng-disabled="isAddingList">
-                        <input id="newList" ng-model="status.newListName" class="edit hasTooltip" type="text" autofocus-on-insert
+                        <input id="newList"
-                        placeholder="<?php p($l->t('New List')); ?>" ng-keyup="checkNew($event,status.newListName)">
+                            ng-model="status.newListName"
-                        <input type="cancel" value="" class="action icon-close" ng-click="cancelCreate()" title="<?php p($l->t('Cancel')); ?>">
+                            class="edit hasTooltip"
-                        <input type="submit" value="" class="action icon-checkmark" ng-click="create($event)" title="<?php p($l->t('Save')); ?>">
+                            type="text"
+                            autofocus-on-insert
+                            placeholder="<?php p($l->t('New List')); ?>"
+                            ng-keyup="checkNew($event,status.newListName)">
+                        <input type="cancel"
+                            value=""
+                            class="action icon-close"
+                            ng-click="cancelCreate()"
+                            title="<?php p($l->t('Cancel')); ?>">
+                        <input type="submit"
+                            value=""
+                            class="action icon-checkmark"
+                            ng-click="create($event)"
+                            title="<?php p($l->t('Save')); ?>">
                     </form>
-                    <colorpicker class="colorpicker"
+                    <colorpicker class="colorpicker" selected="color"></colorpicker>
-                                 selected="color">
-                    </colorpicker>
                 </div>
             </li>
         </ul>
@@ -124,28 +162,48 @@
                 <ul>
                     <li>
                         <label for="startOfWeek"><?php p($l->t('Start of week')); ?></label>
-                        <select id="startOfWeek" ng-change="setStartOfWeek()" ng-model="settingsmodel.getById('various').startOfWeek" ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions"></select>
+                        <select id="startOfWeek"
+                            ng-change="setStartOfWeek()"
+                            ng-model="settingsmodel.getById('various').startOfWeek"
+                            ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions">
+                        </select>
                     </li>
                     <li class="headline">
                         <?php p($l->t('Visibility of Smart Collections')); ?>
                     </li>
                     <li ng-repeat="collection in collections">
                         <div class="label-container">
-                            <span class="icon {{ collection.icon }}"><text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text></span>
+                            <span class="icon {{ collection.icon }}">
+                                <text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text>
+                            </span>
                             <label for="visibilityCollection-{{collection.id}}" class="title">{{ collection.displayname }}</label>
                         </div>
-                        <select id="visibilityCollection-{{collection.id}}" ng-change="setVisibility(collection.id)" ng-model="collection.show" ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions"></select>
+                        <select id="visibilityCollection-{{collection.id}}"
+                            ng-change="setVisibility(collection.id)"
+                            ng-model="collection.show"
+                            ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions">
+                        </select>
                     </li>
                 </ul>
             </div>
         </div>
     </div>
 
-    <div id="app-content" ng-controller="TasksController" ng-class="{'with-app-sidebar':route.taskID}">
+    <div id="app-content"
+        ng-controller="TasksController"
+        ng-class="{'with-app-sidebar':route.taskID}">
         <div class="content-wrapper">
-            <div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
+            <div id="add-task"
+                class="add-task handler"
+                ng-show="showInput()"
+                ng-class="{'focus':status.focusTaskInput}">
                 <form ng-submit="addTask(status.taskName)" name="addTaskForm">
-                    <input id="target" ng-disabled="isAddingTask" ng-click="focusTaskInput()" class="transparent" placeholder="{{ getAddString() }}" ng-model="status.taskName"
+                    <input id="target"
+                        ng-disabled="isAddingTask"
+                        ng-click="focusTaskInput()"
+                        class="transparent"
+                        placeholder="{{ getAddString() }}"
+                        ng-model="status.taskName"
                         ng-keydown="checkTaskInput($event)"/>
                 </form>
             </div>