Compare commits
11 Commits
main
...
feat/impro
Author | SHA1 | Date | |
---|---|---|---|
|
079b1358a4 | ||
|
41665f5b8f | ||
|
faa2afd87c | ||
|
d32a8cb6ed | ||
|
a90c1eabeb | ||
|
495d8c85ae | ||
|
da78f032ca | ||
|
4765f1487b | ||
|
14bf05039d | ||
|
bb5e4b56a3 | ||
|
f8b0a3b587 |
|
@ -40,7 +40,7 @@ const filteredProjects = computed(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.project-grid {
|
||||
--project-grid-item-height: 150px;
|
||||
--project-grid-item-height: 100px;
|
||||
--project-grid-gap: 1rem;
|
||||
margin: 0; // reset li
|
||||
list-style-type: none;
|
||||
|
|
|
@ -386,7 +386,8 @@ function focusTaskLink() {
|
|||
}
|
||||
|
||||
.task-project {
|
||||
width: auto;
|
||||
min-width: 60px; //TODO: Quickfix, find a better way to make a nice vertical alignment
|
||||
display: inline-block;
|
||||
color: var(--grey-400);
|
||||
font-size: .9rem;
|
||||
white-space: nowrap;
|
||||
|
|
|
@ -10,3 +10,5 @@
|
|||
@import "flatpickr";
|
||||
@import 'helpers';
|
||||
@import 'navigation';
|
||||
@import 'button';
|
||||
@import 'cards';
|
3
src/styles/theme/button.scss
Normal file
3
src/styles/theme/button.scss
Normal file
|
@ -0,0 +1,3 @@
|
|||
.button.border {
|
||||
border: 1px solid;
|
||||
}
|
8
src/styles/theme/cards.scss
Normal file
8
src/styles/theme/cards.scss
Normal file
|
@ -0,0 +1,8 @@
|
|||
.section-card {
|
||||
background: var(--card-background-color);
|
||||
border-radius: var(--card-radius);
|
||||
box-shadow: var(--card-shadow);
|
||||
color: var(--card-color);
|
||||
padding: 20px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
|
@ -3,7 +3,8 @@
|
|||
<h3 class="mb-2 title">
|
||||
{{ pageTitle }}
|
||||
</h3>
|
||||
<p v-if="!showAll" class="show-tasks-options">
|
||||
<div v-if="!showAll" class="show-tasks-options section-card columns">
|
||||
<div class="column">
|
||||
<datepicker-with-range @update:model-value="setDate">
|
||||
<template #trigger="{toggle}">
|
||||
<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
|
||||
|
@ -11,13 +12,16 @@
|
|||
</x-button>
|
||||
</template>
|
||||
</datepicker-with-range>
|
||||
</div>
|
||||
<div class="column">
|
||||
<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
|
||||
{{ $t('task.show.noDates') }}
|
||||
</fancycheckbox>
|
||||
<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
|
||||
{{ $t('task.show.overdue') }}
|
||||
</fancycheckbox>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
|
||||
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
|
||||
<LlamaCool class="llama-cool"/>
|
||||
|
@ -213,6 +217,7 @@ watchEffect(() => setTitle(pageTitle.value))
|
|||
.show-tasks-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.llama-cool {
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
>
|
||||
<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
|
||||
<div class="task-view" v-if="visible">
|
||||
<div class="section-card">
|
||||
<Heading
|
||||
:task="task"
|
||||
@update:task="Object.assign(task, $event)"
|
||||
|
@ -22,14 +23,14 @@
|
|||
<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 section-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 section-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 section-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 section-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 section-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 section-card" v-if="activeFields.moveProject">
|
||||
<h3>
|
||||
<span class="icon is-grey">
|
||||
<icon icon="list"/>
|
||||
|
@ -280,8 +281,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<div class="section-card">
|
||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Actions -->
|
||||
<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
|
||||
|
@ -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,7 +861,6 @@ function setRelatedTasksActive() {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
color: var(--grey-500);
|
||||
margin-bottom: 1rem;
|
||||
|
@ -914,7 +916,6 @@ h3 .button {
|
|||
.details {
|
||||
padding-bottom: 0.75rem;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
|
@ -986,7 +987,6 @@ h3 .button {
|
|||
}
|
||||
|
||||
.attachments {
|
||||
margin-bottom: 0;
|
||||
|
||||
table tr:last-child td {
|
||||
border-bottom: none;
|
||||
|
|
Reference in New Issue
Block a user