Add .section-card
element for cleaner css classes
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
a90c1eabeb
commit
d32a8cb6ed
|
@ -10,4 +10,5 @@
|
||||||
@import "flatpickr";
|
@import "flatpickr";
|
||||||
@import 'helpers';
|
@import 'helpers';
|
||||||
@import 'navigation';
|
@import 'navigation';
|
||||||
@import 'button';
|
@import 'button';
|
||||||
|
@import 'cards';
|
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,7 @@
|
||||||
<h3 class="mb-2 title">
|
<h3 class="mb-2 title">
|
||||||
{{ pageTitle }}
|
{{ pageTitle }}
|
||||||
</h3>
|
</h3>
|
||||||
<p v-if="!showAll" class="show-tasks-options">
|
<p v-if="!showAll" class="show-tasks-options section-card">
|
||||||
<datepicker-with-range @update:model-value="setDate">
|
<datepicker-with-range @update:model-value="setDate">
|
||||||
<template #trigger="{toggle}">
|
<template #trigger="{toggle}">
|
||||||
<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
|
<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
>
|
>
|
||||||
<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
|
<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
|
||||||
<div class="task-view" v-if="visible">
|
<div class="task-view" v-if="visible">
|
||||||
<div class="card">
|
<div class="section-card">
|
||||||
<Heading
|
<Heading
|
||||||
:task="task"
|
:task="task"
|
||||||
@update:task="Object.assign(task, $event)"
|
@update:task="Object.assign(task, $event)"
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
<div class="columns mt-2">
|
<div class="columns mt-2">
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
|
<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
|
||||||
<div class="columns details card">
|
<div class="columns details section-card">
|
||||||
<div class="column assignees" v-if="activeFields.assignees">
|
<div class="column assignees" v-if="activeFields.assignees">
|
||||||
<!-- Assignees -->
|
<!-- Assignees -->
|
||||||
<div class="detail-title">
|
<div class="detail-title">
|
||||||
|
@ -210,7 +210,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Labels -->
|
<!-- Labels -->
|
||||||
<div class="labels-list details card" v-if="activeFields.labels">
|
<div class="labels-list details section-card" v-if="activeFields.labels">
|
||||||
<div class="detail-title">
|
<div class="detail-title">
|
||||||
<span class="icon is-grey">
|
<span class="icon is-grey">
|
||||||
<icon icon="tags"/>
|
<icon icon="tags"/>
|
||||||
|
@ -225,7 +225,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<div class="details content description card">
|
<div class="details content description section-card">
|
||||||
<description
|
<description
|
||||||
:model-value="task"
|
:model-value="task"
|
||||||
@update:modelValue="Object.assign(task, $event)"
|
@update:modelValue="Object.assign(task, $event)"
|
||||||
|
@ -235,7 +235,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Attachments -->
|
<!-- Attachments -->
|
||||||
<div class="content attachments card" v-if="activeFields.attachments || hasAttachments">
|
<div class="content attachments section-card" v-if="activeFields.attachments || hasAttachments">
|
||||||
<attachments
|
<attachments
|
||||||
:edit-enabled="canWrite"
|
:edit-enabled="canWrite"
|
||||||
:task="task"
|
:task="task"
|
||||||
|
@ -245,7 +245,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Related Tasks -->
|
<!-- Related Tasks -->
|
||||||
<div class="content details card" v-if="activeFields.relatedTasks">
|
<div class="content details section-card" v-if="activeFields.relatedTasks">
|
||||||
<h3>
|
<h3>
|
||||||
<span class="icon is-grey">
|
<span class="icon is-grey">
|
||||||
<icon icon="sitemap"/>
|
<icon icon="sitemap"/>
|
||||||
|
@ -263,7 +263,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Move Task -->
|
<!-- Move Task -->
|
||||||
<div class="content details card" v-if="activeFields.moveProject">
|
<div class="content details section-card" v-if="activeFields.moveProject">
|
||||||
<h3>
|
<h3>
|
||||||
<span class="icon is-grey">
|
<span class="icon is-grey">
|
||||||
<icon icon="list"/>
|
<icon icon="list"/>
|
||||||
|
@ -281,7 +281,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Comments -->
|
<!-- Comments -->
|
||||||
<div class="card">
|
<div class="section-card">
|
||||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Reference in New Issue
Block a user