feat: Add .card and format sections
This commit is contained in:
parent
bb5e4b56a3
commit
14bf05039d
|
@ -9,4 +9,5 @@
|
|||
@import "loading";
|
||||
@import "flatpickr";
|
||||
@import 'helpers';
|
||||
@import 'navigation';
|
||||
@import 'navigation';
|
||||
@import 'button';
|
|
@ -0,0 +1,3 @@
|
|||
.button.border {
|
||||
border: 1px solid;
|
||||
}
|
|
@ -8,28 +8,29 @@
|
|||
>
|
||||
<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
|
||||
<div class="task-view" v-if="visible">
|
||||
<Heading
|
||||
:task="task"
|
||||
@update:task="Object.assign(task, $event)"
|
||||
:can-write="canWrite"
|
||||
ref="heading"
|
||||
/>
|
||||
<h6 class="subtitle" v-if="project?.id">
|
||||
<template v-for="p in projectStore.getAncestors(project)" :key="p.id">
|
||||
<router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
|
||||
{{ getProjectTitle(p) }}
|
||||
</router-link>
|
||||
<span class="has-text-grey-light" v-if="p.id !== project?.id"> > </span>
|
||||
</template>
|
||||
</h6>
|
||||
|
||||
<div class="card">
|
||||
<Heading
|
||||
:task="task"
|
||||
@update:task="Object.assign(task, $event)"
|
||||
:can-write="canWrite"
|
||||
ref="heading"
|
||||
/>
|
||||
<h6 class="subtitle" v-if="project?.id">
|
||||
<template v-for="p in projectStore.getAncestors(project)" :key="p.id">
|
||||
<router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
|
||||
{{ getProjectTitle(p) }}
|
||||
</router-link>
|
||||
<span class="has-text-grey-light" v-if="p.id !== project?.id"> > </span>
|
||||
</template>
|
||||
</h6>
|
||||
</div>
|
||||
<checklist-summary :task="task"/>
|
||||
|
||||
<!-- Content and buttons -->
|
||||
<div class="columns mt-2">
|
||||
<!-- Content -->
|
||||
<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
|
||||
<div class="columns details">
|
||||
<div class="columns details card">
|
||||
<div class="column assignees" v-if="activeFields.assignees">
|
||||
<!-- Assignees -->
|
||||
<div class="detail-title">
|
||||
|
@ -209,7 +210,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<div class="labels-list details" v-if="activeFields.labels">
|
||||
<div class="labels-list details card" v-if="activeFields.labels">
|
||||
<div class="detail-title">
|
||||
<span class="icon is-grey">
|
||||
<icon icon="tags"/>
|
||||
|
@ -224,7 +225,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="details content description">
|
||||
<div class="details content description card">
|
||||
<description
|
||||
:model-value="task"
|
||||
@update:modelValue="Object.assign(task, $event)"
|
||||
|
@ -234,7 +235,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
|
||||
<div class="content attachments card" v-if="activeFields.attachments || hasAttachments">
|
||||
<attachments
|
||||
:edit-enabled="canWrite"
|
||||
:task="task"
|
||||
|
@ -244,7 +245,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Related Tasks -->
|
||||
<div class="content details mb-0" v-if="activeFields.relatedTasks">
|
||||
<div class="content details card" v-if="activeFields.relatedTasks">
|
||||
<h3>
|
||||
<span class="icon is-grey">
|
||||
<icon icon="sitemap"/>
|
||||
|
@ -262,7 +263,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Move Task -->
|
||||
<div class="content details" v-if="activeFields.moveProject">
|
||||
<div class="content details card" v-if="activeFields.moveProject">
|
||||
<h3>
|
||||
<span class="icon is-grey">
|
||||
<icon icon="list"/>
|
||||
|
@ -280,7 +281,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||
<div class="card">
|
||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Actions -->
|
||||
|
@ -290,7 +293,7 @@
|
|||
:class="{'is-success': !task.done}"
|
||||
:shadow="task.done"
|
||||
@click="toggleTaskDone()"
|
||||
class="is-outlined has-no-border"
|
||||
class="is-outlined border"
|
||||
icon="check-double"
|
||||
variant="secondary"
|
||||
v-shortcut="'t'"
|
||||
|
@ -428,7 +431,7 @@
|
|||
@click="showDeleteModal = true"
|
||||
icon="trash-alt"
|
||||
:shadow="false"
|
||||
class="is-danger is-outlined has-no-border"
|
||||
class="is-danger is-outlined border"
|
||||
v-shortcut="'Shift+Delete'"
|
||||
>
|
||||
{{ $t('task.detail.actions.delete') }}
|
||||
|
@ -858,6 +861,10 @@ function setRelatedTasksActive() {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 15px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--grey-500);
|
||||
|
@ -914,7 +921,6 @@ h3 .button {
|
|||
.details {
|
||||
padding-bottom: 0.75rem;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
|
@ -986,7 +992,6 @@ h3 .button {
|
|||
}
|
||||
|
||||
.attachments {
|
||||
margin-bottom: 0;
|
||||
|
||||
table tr:last-child td {
|
||||
border-bottom: none;
|
||||
|
|
Reference in New Issue