Adjust sidebar

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

css/src/style.scss

@@ -1,4 +1,9 @@
 @include icon-black-white('circle', 'tasks', 1);
+@include icon-black-white('reminder', 'tasks', 1);
+@include icon-black-white('repeat', 'tasks', 1);
+@include icon-black-white('note', 'tasks', 1);
+@include icon-black-white('pinned', 'tasks', 1);
+@include icon-black-white('pinned-off', 'tasks', 1);
 
 @include icon-black-white('list', 'tasks', 1);
 @include icon-black-white('list__up', 'tasks', 1);
@@ -776,16 +781,46 @@ $blue_due: #4271a6;			// due dates and low importance
 }
 
 /**
-* rules for app-sidebar
-*/
+ * Rules for app-sidebar
+ */
+
 .app-sidebar {
-	.flex-container {
+	.app-sidebar-header__desc .detail-checkbox {
 		display: flex;
-		flex-direction: column;
-		height: 100%;
+		height: 44px;
+		width: 44px;
+		justify-content: center;
+
+		input[type='checkbox'].checkbox + label {
+			display: flex;
+			align-items: center;
+
+			&::before {
+				margin: 0;
+				border-width: 2px;
+				border-radius: var(--border-radius);
+				border-color: var(--color-border-dark);
+			}
+
+			&:hover {
+				border-color: var(--color-border-dark);
+			}
+
+			&.priority-high::before {
+				border-color: $red_overdue;
+			}
+
+			&.priority-medium::before {
+				border-color: $yellow;
+			}
+
+			&.priority-low::before {
+				border-color: $blue_due;
+			}
+		}
 	}
 
-	.content-wrapper {
+	section {
 		padding: 0;
 		box-sizing: border-box;
 		height: 100%;
@@ -820,146 +855,6 @@ $blue_due: #4271a6;			// due dates and low importance
 			}
 		}
 
-		.title {
-			flex: 0 0 auto;
-			display: flex;
-			align-items: center;
-			background-color: var(--color-background-hover);
-			border-bottom: 1px solid var(--color-border-dark);
-			font-size: 16px;
-			font-weight: bold;
-			min-height: 50px;
-			word-wrap: break-word;
-
-			&.editing {
-				.title-text {
-					display: none !important;
-				}
-
-				.expandable-container {
-					display: inline-block !important;
-				}
-			}
-
-			.detail-checkbox {
-				padding: 11px 10px;
-				padding-right: 7px;
-
-				input[type='checkbox'].checkbox + label {
-					&::before {
-						border-width: 2px;
-						border-radius: var(--border-radius);
-						border-color: var(--color-border-dark);
-					}
-
-					&:hover {
-						border-color: var(--color-border-dark);
-					}
-
-					&.priority-high::before {
-						border-color: $red_overdue;
-					}
-
-					&.priority-medium::before {
-						border-color: $yellow;
-					}
-
-					&.priority-low::before {
-						border-color: $blue_due;
-					}
-				}
-			}
-
-			.title-wrapper {
-				flex-grow: 1;
-
-				.title-text,
-				.expandable-container {
-					max-height: 110px;
-					overflow-y: hidden;
-					margin: 13px 0;
-					min-height: 24px;
-					width: 100%;
-					padding: 0 6px;
-				}
-
-				.title-text {
-					cursor: text;
-					display: inline-block;
-					line-height: 22px;
-					// this border is to adjust the size of the div to the size
-					// of the input field for editing the title
-					// (setting a padding always led to a small flickering)
-					border: 1px solid transparent;
-
-					&.strike-through {
-						text-decoration: line-through;
-					}
-				}
-
-				.expandable-container {
-					border: 1px solid #a0a0a0;
-					display: none;
-					line-height: 24px;
-
-					.expandingArea {
-						position: relative;
-					}
-				}
-
-				textarea,
-				pre {
-					box-shadow: none;
-					font-size: 16px;
-					font-weight: bold;
-					line-height: 22px;
-					min-height: 22px;
-					background: none repeat scroll 0 0 transparent;
-					border: medium none;
-					padding: 0;
-					white-space: pre-wrap;
-					word-wrap: break-word;
-				}
-
-				textarea {
-					margin: 0;
-					border-radius: 0;
-					height: 100%;
-					left: 0;
-					overflow: hidden;
-					position: absolute;
-					resize: none;
-					top: 0;
-					width: 100%;
-				}
-
-				pre {
-					border: 0 none !important;
-					display: block;
-					margin: 0;
-					outline: 0 none;
-					padding: 0 !important;
-					visibility: hidden;
-				}
-			}
-
-			.status-display {
-				margin: 17px 6px;
-				min-width: 16px;
-			}
-
-			button {
-				padding: 10px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				.icon {
-					transform: scale(1.5);
-				}
-			}
-		}
-
 		.body {
 			flex: 1 1 auto;
 			overflow-y: auto;

src/App.vue

@@ -27,7 +27,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			<RouterView />
 		</AppContent>
 
-		<RouterView name="details" :class="{disappear: $route.params.taskId === undefined}" />
+		<RouterView name="details" />
 	</Content>
 </template>