1
0
Fork 0

Compare commits

...

3 Commits

Author SHA1 Message Date
Jakob Reiter 14bf05039d feat: Add .card and format sections 2023-12-21 10:28:04 +01:00
Jakob Reiter bb5e4b56a3 feat: Reduce height of history for better viewing of tasks 2023-12-21 09:55:54 +01:00
Jakob Reiter f8b0a3b587 feat: alinment project in tasklist
Format the project label to have a somewhat nicer alignement
2023-12-21 09:55:25 +01:00
6 changed files with 69 additions and 55 deletions

View File

@ -1,39 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vikunja</title>
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
<meta name="theme-color" content="#1973ff"/>
<meta name="theme-color" content="#1973ff" />
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/>
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png" />
<!--__vite-plugin-inject-preload__-->
</head>
<body>
<noscript>
<strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
//
// This variable points the frontend to the api.
// It has to be the full url, including the last /api/v1 part and port.
// You can change this if your api is not reachable on the same port as the frontend.
window.API_URL = 'http://localhost:3456/api/v1'
// Enable error tracking with sentry. If this is set to true, will send anonymized data to
// our sentry instance to notify us of potential problems.
window.SENTRY_ENABLED = false
window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
// If enabled, allows the user to nest projects infinitely, instead of the default 2 levels.
// This setting might change in the future or be removed completely.
window.PROJECT_INFINITE_NESTING_ENABLED = false
// Allow changing the logo and other icons based on various occasions throughout the year.
window.ALLOW_ICON_CHANGES = true
// Allow using a custom logo via external URL.
window.CUSTOM_LOGO_URL = ''
</script>
<noscript>
<strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script>
//
// This variable points the frontend to the api.
// It has to be the full url, including the last /api/v1 part and port.
// You can change this if your api is not reachable on the same port as the frontend.
window.API_URL = 'https://todo.reiter.io/api/v1'
// Enable error tracking with sentry. If this is set to true, will send anonymized data to
// our sentry instance to notify us of potential problems.
window.SENTRY_ENABLED = false
window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
// If enabled, allows the user to nest projects infinitely, instead of the default 2 levels.
// This setting might change in the future or be removed completely.
window.PROJECT_INFINITE_NESTING_ENABLED = false
// Allow changing the logo and other icons based on various occasions throughout the year.
window.ALLOW_ICON_CHANGES = true
// Allow using a custom logo via external URL.
window.CUSTOM_LOGO_URL = ''
</script>
</body>
</html>
</html>

View File

@ -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;

View File

@ -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;

View File

@ -9,4 +9,5 @@
@import "loading";
@import "flatpickr";
@import 'helpers';
@import 'navigation';
@import 'navigation';
@import 'button';

View File

@ -0,0 +1,3 @@
.button.border {
border: 1px solid;
}

View File

@ -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"> &gt; </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"> &gt; </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;