feat: wrap edit-task with card (#948)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/948
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/components/misc/card.vue

@@ -4,7 +4,13 @@
 			<p class="card-header-title">
 				{{ title }}
 			</p>
-			<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
+			<a
+				v-if="hasClose"
+				class="card-header-icon"
+				:aria-label="$t('misc.close')"
+				@click="$emit('close')"
+				v-tooltip="$t('misc.close')"
+			>	
 				<span class="icon">
 					<icon :icon="closeIcon"/>
 				</span>
@@ -36,7 +42,7 @@ export default {
 		},
 		closeIcon: {
 			type: String,
-			default: 'angle-right',
+			default: 'times',
 		},
 		shadow: {
 			type: Boolean,

src/components/misc/create-edit.vue

@@ -6,7 +6,6 @@
 			:padding="false"
 			class="has-text-left has-overflow"
 			:has-close="true"
-			close-icon="times"
 			@close="$router.back()"
 			:loading="loading"
 		>

src/components/misc/keyboard-shortcuts.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal @close="close()">
-				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
+				<card class="has-no-shadow" :title="$t('keyboardShortcuts.title')">
 					<div class="message is-primary">
 						<div class="message-body">
 							{{ $t('keyboardShortcuts.allPages') }}

src/components/tasks/edit-task.vue

@@ -1,4 +1,10 @@
 <template>
+	<card
+		class="taskedit"
+		:title="$t('list.list.editTask')"
+		@close="$emit('close')"
+		:has-close="true"
+	>
 	<form @submit.prevent="editTaskSubmit()">
 		<div class="field">
 			<label class="label" for="tasktext">{{ $t('task.attributes.title') }}</label>
@@ -66,6 +72,7 @@
 			{{ $t('task.openDetail') }}
 		</router-link>
 	</form>
+	</card>
 </template>
 
 <script>

src/components/tasks/gantt-component.vue

@@ -167,15 +167,13 @@
 			</x-button>
 		</form>
 		<transition name="fade">
-			<card
+			<edit-task 
 				v-if="isTaskEdit"
 				class="taskedit"
 				:title="$t('list.list.editTask')"
 				@close="() => {isTaskEdit = false;taskToEdit = null}"
-				:has-close="true"
+				:task="taskToEdit"
-			>
+			/>
-				<edit-task :task="taskToEdit"/>
-			</card>
 		</transition>
 	</div>
 </template>
@@ -612,7 +610,6 @@ $gantt-vertical-border-color: $grey-100;
 
 	.taskedit {
 		position: fixed;
-		min-height: 0;
 		top: 10vh;
 		right: 10vw;
 		z-index: 5;

src/components/tasks/partials/quick-add-magic.vue

@@ -11,7 +11,7 @@
 			:overflow="true"
 			variant="hint-modal"
 		>
-			<card class="has-background-white has-no-shadow" :title="$t('task.quickAddMagic.title')">
+			<card class="has-no-shadow" :title="$t('task.quickAddMagic.title')">
 				<p>{{ $t('task.quickAddMagic.intro') }}</p>
 
 				<h3>{{ $t('task.attributes.labels') }}</h3>

src/views/About.vue

@@ -5,30 +5,29 @@
 		variant="hint-modal"
 	>
 		<card
-						class="has-background-white has-no-shadow"
+			class="has-no-shadow"
-						:title="$t('about.title')"
+			:title="$t('about.title')"
-						:has-close="true"
+			:has-close="true"
-						close-icon="times"
+			@close="$router.back()"
-						@close="$router.back()"
+			:padding="false"
-						:padding="false"
+		>
-					>
+			<div class="p-4">
-						<div class="p-4">
+				<p>
-							<p>
+					{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
-								{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
+				</p>
-							</p>
+				<p>
-							<p>
+					{{ $t('about.apiVersion', {version: this.apiVersion}) }}
-								{{ $t('about.apiVersion', {version: this.apiVersion}) }}
+				</p>
-							</p>
+			</div>
-						</div>
+			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
-						<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+				<x-button
-							<x-button
+					type="secondary"
-								type="secondary"
+					@click.prevent.stop="$router.back()"
-								@click.prevent.stop="$router.back()"
+				>
-							>
+					{{ $t('misc.close') }}
-								{{ $t('misc.close') }}
+				</x-button>
-							</x-button>
+			</footer>
-						</footer>
+		</card>
-					</card>
 	</modal>
 
 </template>

src/views/filters/CreateSavedFilter.vue

@@ -3,7 +3,7 @@
 		@close="$router.back()"
 		variant="hint-modal"
 	>
-				<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
+				<card class="has-no-shadow" :title="$t('filters.create.title')">
 					<p>
 						{{ $t('filters.create.description') }}
 					</p>

src/views/list/views/List.vue

@@ -116,13 +116,14 @@
 						</template>
 					</draggable>
 				</div>
-				<card
+				<edit-task 
 					v-if="isTaskEdit"
-					class="taskedit mt-0" :title="$t('list.list.editTask')" :has-close="true"
+					class="taskedit mt-0"
+					:title="$t('list.list.editTask')"
 					@close="() => isTaskEdit = false"
-					:shadow="false">
+					:shadow="false"
-					<edit-task :task="taskEditTask"/>
+					:task="taskEditTask"
-				</card>
+				/>
 			</div>
 
 			<Pagination 
@@ -344,6 +345,7 @@ export default {
 		width: 33%;
 		margin-right: 1rem;
 		margin-left: .5rem;
+		min-height: calc(100% - 1rem);
 
 		@media screen and (max-width: $tablet) {
 			width: 100%;