From 2b1378af0b99d70cc4166e31263641911dfb6e20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Thu, 31 Oct 2019 13:23:46 +0100
Subject: [PATCH] =?UTF-8?q?Move=20details=20title=20to=20flex-box=20Signed?=
 =?UTF-8?q?-off-by:=20Raimund=20Schl=C3=BC=C3=9Fler=20<raimund.schluessler?=
 =?UTF-8?q?@mailbox.org>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/src/style.scss            | 160 ++++++++++++++++------------------
 src/components/TheDetails.vue |  20 ++---
 2 files changed, 84 insertions(+), 96 deletions(-)

diff --git a/css/src/style.scss b/css/src/style.scss
index b7b8c248..3f17af9e 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -671,6 +671,8 @@
 
 		.title {
 			flex: 0 0 auto;
+			display: flex;
+			align-items: center;
 			background-color: $gray_easy;
 			border-bottom: 1px solid $gray_light;
 			font-size: 16px;
@@ -688,61 +690,90 @@
 				}
 			}
 
-			.status-display {
-				float: right;
-				margin: 17px 0;
+			.detail-checkbox {
+				padding: 11px 10px;
+				opacity: 0.5;
 			}
 
-			.title-text {
-				cursor: text;
-				display: inline-block;
-				min-height: 24px;
-				margin: 13px 0;
-				width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px),  star (45px), pin (45px), safety distance (14px) */
-				padding: 0 6px;
-				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;
+			.title-wrapper {
+				flex-grow: 1;
 
-				&.strike-through {
-					text-decoration: line-through;
+				.title-text {
+					cursor: text;
+					display: inline-block;
+					width: 100%;
+					min-height: 24px;
+					margin: 13px 0;
+					padding: 0 6px;
+					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;
+					}
 				}
 
-				a {
-					cursor: pointer;
-					text-decoration: underline;
+				.expandable-container {
+					width: 100%;
+					border: 1px solid $gray;
+					padding: 0 6px;
+					display: none;
+					margin: 13px 0;
+					line-height: 24px;
+					min-height: 24px;
+
+					.expandingArea {
+						position: relative;
+					}
 				}
-			}
 
-			.expandable-container {
-				border: 1px solid $gray;
-				padding: 0 6px;
-				display: none !important;
-				margin: 13px 0;
-				width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px),  star (45px), pin (45px), safety distance (14px) */
-				line-height: 24px;
-				min-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;
 				}
-			}
-
-			.checkbox {
-				float: left;
-				padding: 16px 17px 18px;
-
-				.icon {
-					cursor: pointer;
+	
+				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;
 				}
 			}
 
-			.star {
-				padding: 13px 13px 13px 8px;
-				float: right;
+			.status-display {
+				margin: 17px 6px;
+			}
+
+			.action {
+				padding: 10px;
+				height: 44px;
+				width: 44px;
 
 				.icon {
 					height: 24px;
@@ -758,41 +789,6 @@
 					}
 				}
 			}
-
-			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;
-			}
 		}
 
 		.body {
@@ -1186,14 +1182,6 @@
 	}
 }
 
-.detail-checkbox {
-	float: left;
-	padding: 8px;
-	margin: 7px;
-	margin-right: 3px;
-	opacity: 0.5;
-}
-
 input[type='checkbox'].checkbox {
 	&:checked + label::before {
 		background-image: var(--icon-checkmark-000) !important;
diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index d962c17d..b950db14 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -40,16 +40,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					>
 					<label :for="'detailsToggleCompleted_' + task.uid" />
 				</span>
-				<a class="star reactive" @click="toggleStarred(task)">
-					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
-						class="icon"
-					/>
-				</a>
-				<a class="star reactive" @click="togglePinned(task)">
-					<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
-				</a>
-				<TaskStatusDisplay :task="task" />
-				<div v-click-outside="() => finishEditing('summary')">
+				<div v-click-outside="() => finishEditing('summary')" class="title-wrapper">
 					<div v-linkify="task.summary"
 						:class="{'strike-through': task.completed}"
 						class="title-text"
@@ -67,6 +58,15 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 					</div>
 				</div>
+				<TaskStatusDisplay :task="task" />
+				<span class="action reactive" @click="togglePinned(task)">
+					<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
+				</span>
+				<span class="action reactive" @click="toggleStarred(task)">
+					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
+						class="icon"
+					/>
+				</span>
 			</div>
 			<div class="body">
 				<ul class="sections">