mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[timeline] refactor
This commit is contained in:
Filip Kaluža committed
1 parent
79e9f423be
commit
2c51813db4
3 files changed
+142
-112
No files matched your search
@@ -51,7 +51,7 @@
|
|||||||
"task_id": 2,
|
"task_id": 2,
|
||||||
"starts_at": "2022-12-12T08:30:00+00:00",
|
"starts_at": "2022-12-12T08:30:00+00:00",
|
||||||
"ends_at": "2022-12-12T09:00:00+00:00",
|
"ends_at": "2022-12-12T09:00:00+00:00",
|
||||||
"title": "Kratky 30min asdk jasdbhj akhsdh askbsd abjksdk bjas",
|
"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
|
||||||
"project_code": "CO-2201",
|
"project_code": "CO-2201",
|
||||||
"master_task_color": "#f27e57"
|
"master_task_color": "#f27e57"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
.vuecal__event(
|
.vuecal__event(
|
||||||
:class="eventClasses"
|
:class="eventClasses"
|
||||||
:style="eventStyles"
|
:style="eventStyles"
|
||||||
|
:eventId="`event-id-${event.id}`"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@focus="focusEvent"
|
@focus="focusEvent"
|
||||||
@keypress.enter.stop="onEnterKeypress"
|
@keypress.enter.stop="onEnterKeypress"
|
||||||
|
|||||||
@@ -13,8 +13,8 @@
|
|||||||
:unscheduledTime="calData.unscheduled_times"
|
:unscheduledTime="calData.unscheduled_times"
|
||||||
:overlaps-per-time-step="false"
|
:overlaps-per-time-step="false"
|
||||||
:showTimeInCells="false"
|
:showTimeInCells="false"
|
||||||
:time-cell-height="70"
|
:time-cell-height="100"
|
||||||
:snap-to-time="5"
|
:snap-to-time="15"
|
||||||
:min-cell-width="300"
|
:min-cell-width="300"
|
||||||
@ready="onReady()"
|
@ready="onReady()"
|
||||||
@view-change="weekChanged"
|
@view-change="weekChanged"
|
||||||
@@ -48,15 +48,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:event="{ event }">
|
<template v-slot:event="{ event }">
|
||||||
<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 12600000, 'mini-event' : getEventLenght(event) <= 7200000, 'micro-event' : getEventLenght(event) <= 3600000}">
|
<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
|
||||||
<div>
|
<div class="event-content">
|
||||||
<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
|
<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
|
||||||
<h3>{{ event.title }}</h3>
|
<h3>{{ event.title }}</h3>
|
||||||
<div class="d-flex align-center event-details event-initials-wrapper">
|
<div class="d-flex align-center event-details event-initials-wrapper">
|
||||||
<div class="event-initials d-flex justify-center align-center">
|
<div class="event-initials d-flex justify-center align-center">
|
||||||
<small>{{ getUserInitials(event) }}</small>
|
<small>{{ getUserInitials(event) }}</small>
|
||||||
</div>
|
</div>
|
||||||
<small>{{ event.start.toLocaleDateString('sk-SK') }}</small>
|
<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -206,20 +206,34 @@ export default {
|
|||||||
&::-webkit-scrollbar
|
&::-webkit-scrollbar
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
.vuecal__body
|
&.week-view
|
||||||
-ms-overflow-style: none
|
border-left: 1px solid rgba(0, 0, 0, .1)
|
||||||
scrollbar-width: none
|
padding-left: 20px
|
||||||
&::-webkit-scrollbar
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.vuecal__now-line
|
.vuecal__flex
|
||||||
display: none !important
|
flex-wrap: nowrap !important
|
||||||
|
|
||||||
.weekday-label
|
|
||||||
justify-content: start !important
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 700
|
|
||||||
|
|
||||||
|
// TIME COLUMN
|
||||||
|
.vuecal__time-column
|
||||||
|
width: 150px
|
||||||
|
box-shadow: none !important
|
||||||
|
|
||||||
|
.time-column-line
|
||||||
|
width: 40px
|
||||||
|
height: 0
|
||||||
|
border: 1px solid rgba(33, 33, 33, 0.08)
|
||||||
|
margin-left: 10px
|
||||||
|
|
||||||
|
@media (max-width: 450px)
|
||||||
|
.vuecal__time-column
|
||||||
|
width: 70px
|
||||||
|
|
||||||
|
.time-column-line
|
||||||
|
width: 10px
|
||||||
|
|
||||||
|
|
||||||
|
// HEADING
|
||||||
.vuecal__weekdays-headings,
|
.vuecal__weekdays-headings,
|
||||||
.vuecal__cell:before
|
.vuecal__cell:before
|
||||||
border: none
|
border: none
|
||||||
@@ -229,6 +243,11 @@ export default {
|
|||||||
min-height: 100%
|
min-height: 100%
|
||||||
padding-right: 20px
|
padding-right: 20px
|
||||||
|
|
||||||
|
.weekday-label
|
||||||
|
justify-content: start !important
|
||||||
|
font-size: 24px
|
||||||
|
font-weight: 700
|
||||||
|
|
||||||
.unscheduled-time
|
.unscheduled-time
|
||||||
background: rgba(0, 0, 0, 0.04)
|
background: rgba(0, 0, 0, 0.04)
|
||||||
border-radius: 24px
|
border-radius: 24px
|
||||||
@@ -251,125 +270,135 @@ export default {
|
|||||||
color: white
|
color: white
|
||||||
|
|
||||||
|
|
||||||
.vuecal__cells.week-view
|
// BODY
|
||||||
border-left: 1px solid rgba(0, 0, 0, .1)
|
.vuecal__body
|
||||||
padding-left: 20px
|
-ms-overflow-style: none
|
||||||
|
scrollbar-width: none
|
||||||
|
&::-webkit-scrollbar
|
||||||
|
display: none
|
||||||
|
|
||||||
.vuecal__time-column
|
.vuecal__now-line
|
||||||
width: 150px
|
display: none !important
|
||||||
box-shadow: none !important
|
|
||||||
|
|
||||||
.time-column-line
|
.vuecal__cell
|
||||||
width: 40px
|
padding: 10px 20px 10px 0px
|
||||||
height: 0
|
|
||||||
border: 1px solid rgba(33, 33, 33, 0.08)
|
|
||||||
margin-left: 10px
|
|
||||||
|
|
||||||
@media (max-width: 450px)
|
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
|
||||||
.vuecal__time-column
|
.vuecal__cell--current:not(.vuecal__cell--today),
|
||||||
width: 70px
|
.vuecal__cell--today,
|
||||||
|
.vuecal__cell--highlighted,
|
||||||
|
.vuecal__cell--selected
|
||||||
|
background-color: white
|
||||||
|
|
||||||
.time-column-line
|
// EVENT
|
||||||
width: 10px
|
.vuecal__event
|
||||||
|
border-radius: 16px
|
||||||
|
padding: 20px 10px
|
||||||
|
text-align: left
|
||||||
|
background: rgba(248, 248, 248, 1)
|
||||||
|
min-height: 40px
|
||||||
|
transition: min-height .4s, height .4s, box-shadow .4s
|
||||||
|
|
||||||
.vuecal__flex
|
&.vuecal__event--focus
|
||||||
flex-wrap: nowrap !important
|
z-index: 100 !important
|
||||||
|
min-height: 250px !important
|
||||||
|
|
||||||
.vuecal__cell
|
&:not(.vuecal__event--focus)
|
||||||
padding: 10px 20px 10px 0px
|
&:has(.short-event)
|
||||||
|
padding: 10px !important
|
||||||
|
|
||||||
.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
|
&:has(.micro-event)
|
||||||
.vuecal__cell--current:not(.vuecal__cell--today),
|
padding: 5px 10px !important
|
||||||
.vuecal__cell--today
|
|
||||||
background-color: white
|
|
||||||
|
|
||||||
.vuecal__event
|
.short-event
|
||||||
border-radius: 16px
|
.project-code
|
||||||
padding: 20px 10px
|
display: none !important
|
||||||
text-align: left
|
|
||||||
background: rgba(248, 248, 248, 1)
|
|
||||||
min-height: 35px
|
|
||||||
|
|
||||||
&:has(.mini-event)
|
h3
|
||||||
padding: 10px !important
|
font-size: 16px !important
|
||||||
|
|
||||||
&.vuecal__event--focus
|
.mini-event
|
||||||
z-index: 100 !important
|
.event-content
|
||||||
min-height: 300px !important
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
flex-wrap: nowrap
|
||||||
|
justify-content: space-between
|
||||||
|
width: 100%
|
||||||
|
|
||||||
&:not(.vuecal__event--focus)
|
.event-initials-wrapper
|
||||||
.short-event
|
margin-bottom: 0
|
||||||
.project-code
|
.event-initials
|
||||||
display: none !important
|
margin-right: 0
|
||||||
|
|
||||||
h3
|
h3
|
||||||
font-size: 16px !important
|
font-size: 14px !important
|
||||||
|
text-overflow: ellipsis
|
||||||
|
width: calc( 100% - 35px )
|
||||||
|
white-space: nowrap
|
||||||
|
overflow: hidden
|
||||||
|
margin: 0
|
||||||
|
|
||||||
.mini-event
|
.event-initials-date
|
||||||
|
display: none !important
|
||||||
|
|
||||||
h3
|
.micro-event
|
||||||
font-size: 14px !important
|
|
||||||
|
|
||||||
.event-initials-wrapper
|
.event-footer
|
||||||
display: none !important
|
display: none !important
|
||||||
|
|
||||||
|
&.event-blocker
|
||||||
|
background: #B00020 !important
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.event-details *
|
||||||
|
color: white !important
|
||||||
|
|
||||||
|
.event-details .event-initials
|
||||||
|
border: 1px solid white
|
||||||
|
|
||||||
.micro-event
|
|
||||||
.event-footer
|
.event-footer
|
||||||
display: none !important
|
border-top: 1px solid rgba(255, 255, 255, 0.19)
|
||||||
|
|
||||||
.project-code
|
.project-code
|
||||||
margin: 0 0 20px
|
margin: 0 0 20px
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
h3
|
h3
|
||||||
font-size: 18px
|
font-size: 18px
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
color: Black
|
color: Black
|
||||||
margin: 0 0 10px
|
margin: 0 0 10px
|
||||||
|
max-height: 100%
|
||||||
small
|
|
||||||
color: black
|
|
||||||
|
|
||||||
.event-initials-wrapper
|
|
||||||
margin-bottom: 20px
|
|
||||||
|
|
||||||
.event-initials
|
|
||||||
height: 30px
|
|
||||||
width: 30px
|
|
||||||
border: 1px solid black
|
|
||||||
border-radius: 50%
|
|
||||||
padding: 5px
|
|
||||||
margin-right: 7px
|
|
||||||
|
|
||||||
small
|
small
|
||||||
font-size: 11px
|
color: black
|
||||||
|
|
||||||
.event-footer
|
.event-initials-wrapper
|
||||||
padding-top: 15px
|
margin-bottom: 20px
|
||||||
border-top: 1px solid rgba(33, 33, 33, 0.08)
|
|
||||||
|
|
||||||
.event-footer-button
|
.event-initials
|
||||||
box-shadow: none !important
|
height: 30px
|
||||||
padding: 9px !important
|
width: 30px
|
||||||
min-height: fit-content
|
border: 1px solid black
|
||||||
height: fit-content
|
border-radius: 50%
|
||||||
min-width: fit-content
|
padding: 5px
|
||||||
width: fit-content
|
margin-right: 7px
|
||||||
|
|
||||||
img
|
small
|
||||||
width: 18px
|
font-size: 11px
|
||||||
|
|
||||||
// &:hover,
|
|
||||||
&.event-blocker
|
|
||||||
background: #B00020 !important
|
|
||||||
|
|
||||||
h3,
|
|
||||||
.event-details *
|
|
||||||
color: white !important
|
|
||||||
|
|
||||||
.event-details .event-initials
|
|
||||||
border: 1px solid white
|
|
||||||
|
|
||||||
.event-footer
|
.event-footer
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.19)
|
padding-top: 15px
|
||||||
|
border-top: 1px solid rgba(33, 33, 33, 0.08)
|
||||||
|
|
||||||
|
.event-footer-button
|
||||||
|
box-shadow: none !important
|
||||||
|
padding: 9px !important
|
||||||
|
min-height: fit-content
|
||||||
|
height: fit-content
|
||||||
|
min-width: fit-content
|
||||||
|
width: fit-content
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 18px
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user