Skip to content

Commit 540c81a

Browse files
author
idanstr
committedJun 3, 2022
Fixed touch devices dragging and scrolling bug and started responsive design for task details
1 parent b74baaa commit 540c81a

19 files changed

+349
-380
lines changed
 

‎package-lock.json

+5-302
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"date-fns": "^2.28.0",
1818
"element-plus": "^2.1.5",
1919
"socket.io-client": "^4.4.1",
20-
"v-click-outside": "^3.1.2",
2120
"vue": "^3.2.31",
2221
"vue-router": "^4.0.12",
2322
"vue3-smooth-dnd": "^0.0.2",

‎src/components/board-group.vue

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ import taskAdd from "./task-add.vue"
4646
import { utilService } from "../services/util.service"
4747
import { boardService } from '../services/board.service'
4848
import { Container, Draggable } from "vue3-smooth-dnd";
49+
// import Container from 'C:/dev/vue3-smooth-dnd/packages/lib/src/components/Container.js'
50+
// import Draggable from 'C:/dev/vue3-smooth-dnd/packages/lib/src/components/Draggable.js'
4951
import TaskAdd from "./task-add.vue"
5052
5153

‎src/components/main-edit-modal.cmps/date-edit.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<section class="date-edit">
33
<Datepicker
44
AutoApply
5-
v-model="taskDate"
5+
v-model="dueDate"
66
@update:modelValue="test"
77
utc inline
88
:startTime="{}"
@@ -14,7 +14,7 @@
1414
</template>
1515
</Datepicker>
1616
<!-- <p class="secondary-section-title">Start date</p> -->
17-
<p class="date-title">Due date</p>
17+
<p v-if="currTask.dueDate" class="date-title">Due date</p>
1818

1919
<!-- <el-calendar v-model="currTaskDates.startDate" /> -->
2020
<!-- <el-date-picker
@@ -72,6 +72,11 @@ export default {
7272
}
7373
7474
},
75+
mounted(){
76+
if(this.currTask.dueDate)
77+
this.dueDate = new Date(this.currTask.dueDate)
78+
else this.dueDate = null
79+
},
7580
methods:{
7681
selectDate(){
7782
var elDate = document.querySelector('.dp__selection_preview')

‎src/components/main-edit-modal.cmps/search-photo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<section v-if="res">
1919
<h4>Results</h4>
2020
<section class="search-results flex wrap">
21-
<div @click="setImg(img)" class="res-container" v-for="img in res" :key="img"><img :src="img.small" alt=""></div>
21+
<div @click.stop="setImg(img)" class="res-container" v-for="img in res" :key="img"><img :src="img.small" alt=""></div>
2222
</section>
2323
</section>
2424
</section>

‎src/components/task-edit.cmps/trello-dates.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<section class="trello-dates">
33
<span class="secondary-section-title">Due date</span>
4-
<div class="flex-container flex align-center">
4+
<div class="flex align-center">
55
<input type="checkbox" />
66
<button class="btn-default flex align-center" @click="openEditModal">
77
{{ formatDueDate }}

‎src/components/task-preview.vue

+78-4
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
<span @click.stop="toggleLabels" @mouseover="hover=true" @mouseleave="hover=false" v-for="l in task.labelIds" :key="l" class="task-preview-label" :class="getClass" :style="getStyle(l)"><span>{{ getLabelText(l) }}</span></span>
3232
</section>
3333
<p>{{ task.title }}</p>
34-
<section v-if="checkBadges" class="task-preview-badges flex wrap">
34+
<section v-if="checkBadges" class="task-preview-badges flex sapce-between">
35+
<section :style="getHeight" class="flex">
36+
3537
<section v-if="task.startDate || task.dueDate" class="task-preview-date">
3638
<div class="start-only" v-if="task.startDate && !task.dueDate">
3739
<span></span>
@@ -48,10 +50,32 @@
4850
<span>{{ dueDate }}</span>
4951
</div>
5052
</section>
53+
<section v-if="task.comments" class="task-preview-comments">
54+
<span></span>
55+
<span>{{ task.comments.length }}</span>
56+
</section>
57+
<section v-if="task.attachments" class="task-preview-attachments">
58+
<span></span>
59+
<span>{{ task.attachments.length }}</span>
60+
</section>
61+
<section v-if="task.checklists" :class="checkComplete" class="task-preview-checklists">
62+
<section class="" v-if="task.checklists.length">
63+
64+
<span></span>
65+
<span>{{ checklistComplete }}</span>
66+
<span>/</span>
67+
<span>{{ checklistTotal }}</span>
68+
</section>
69+
</section>
70+
</section>
71+
5172
<!-- <div class=""> -->
52-
<section :style="getWidth" v-if="task.members" class="task-members flex">
73+
<section>
74+
75+
<section :style="getWidth" v-if="task.members" class="task-members ">
5376
<user-avatar v-for="m in task.members" :key="m._id" :user="m"></user-avatar>
5477
</section>
78+
</section>
5579
<!-- </div> -->
5680
</section>
5781
</section>
@@ -65,6 +89,8 @@
6589
6690
import userAvatar from "./user-avatar.vue"
6791
import { Container, Draggable } from "vue3-smooth-dnd";
92+
// import Container from 'C:/dev/vue3-smooth-dnd/packages/lib/src/components/Container.js'
93+
// import Draggable from 'C:/dev/vue3-smooth-dnd/packages/lib/src/components/Draggable.js'
6894
import { utilService } from "../services/util.service";
6995
import format from 'date-fns/format'
7096
import { tr } from 'date-fns/locale';
@@ -176,6 +202,31 @@ export default {
176202
},
177203
},
178204
computed: {
205+
checkComplete(){
206+
var complete = true
207+
this.task.checklists.forEach(c => {
208+
c.todos.forEach(t => {
209+
if(!t.isDone) complete = false
210+
});
211+
});
212+
if(complete) return 'complete'
213+
},
214+
checklistComplete(){
215+
var count = 0
216+
this.task.checklists.forEach(c => {
217+
c.todos.forEach(cc => {
218+
if(cc.isDone) count++
219+
})
220+
})
221+
return count
222+
},
223+
checklistTotal(){
224+
var count = 0
225+
this.task.checklists.forEach(c => {
226+
count += c.todos.length
227+
})
228+
return count
229+
},
179230
checkStyle(){
180231
if(this.task.style){
181232
if(this.task.style.size === 'big')
@@ -205,9 +256,32 @@ export default {
205256
var badgeCount = 0
206257
if(this.task.startDate || this.task.dueDate) badgeCount++
207258
if(this.task.comments) badgeCount++
208-
if (badgeCount > 2 || badgeCount === 0){
209-
return 'width: 100%'
259+
if(this.task.checklists) badgeCount++
260+
if(this.task.attachments) badgeCount++
261+
if (badgeCount > 2){
262+
// return 'width: 100%'
263+
return 'margin-block-start: 30px; position: absolute; right: 0;'
264+
// return
265+
}
266+
},
267+
getHeight(){
268+
var badgeCount = 0
269+
if(this.task.startDate || this.task.dueDate) badgeCount++
270+
if(this.task.comments) badgeCount++
271+
if(this.task.checklists) badgeCount++
272+
if(this.task.attachments) badgeCount++
273+
if (badgeCount > 2 && this.task.members){
274+
if(this.task.members.length)
275+
return 'margin-block-end: 37px'
210276
}
277+
// if (badgeCount && !this.task.members){
278+
// // if(this.task.members.length)
279+
// return 'margin-block-end: 37px'
280+
// }
281+
// if (badgeCount && this.task.members){
282+
// if(!this.task.members.length)
283+
// return 'margin-block-end: 37px'
284+
// }
211285
},
212286
getDateBg(){
213287
if (this.task.startDate && !this.task.dueDate)

‎src/components/user-avatar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
},
2121
methods: {
2222
getNameAbbreviation(fullName) {
23-
console.error('fullName' , fullName)
23+
// console.error('fullName' , fullName)
2424
if (!fullName) return '❓'
2525
const names = fullName.split(' ')
2626
// console.log('names', names);

‎src/styles/basic/_base.scss

+34
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,40 @@ body {
1010
background-position: center;
1111
}
1212

13+
.item-drop {
14+
background-color: rgba(0, 0, 0, 0.1);
15+
border-radius: 3px;
16+
margin-inline-start: 10px;
17+
margin-inline-end: 5px;
18+
margin-block-end: 10px;
19+
}
20+
21+
.col-drop {
22+
// background-color: rgba(0, 0, 0, 0.3);
23+
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 21%, rgba(0, 0, 0, 0.4) 57%);
24+
// background-size: contain;
25+
border-radius: 3px;
26+
// margin-inline-start: 10px;
27+
margin-inline-end: 5px;
28+
cursor: pointer;
29+
// min-height: fit-content;
30+
// margin-block-end: 50px;
31+
// margin-bottom: 100px;
32+
// transition: .3s;
33+
// transition: transform .2s;
34+
}
35+
36+
.item-drag {
37+
38+
// transition: transform .2s;
39+
cursor: grabbing;
40+
transform: rotate(4deg);
41+
}
42+
43+
.col-drag {
44+
transform: rotate(4deg);
45+
}
46+
1347
html {
1448
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2);
1549
font-family: seg;

‎src/styles/basic/_mq.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
@media (max-width: 1000px) {
2-
1+
@media (max-width: 750px) {
2+
3+
.modal-container.flex.column.center {
4+
/* padding: 8px; */
5+
}
36
}
7+

‎src/styles/components/_board-header.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@media (max-width: 780px) {
99
position: absolute;
1010
top: 90px;
11+
// left: 180px;
1112
right: 135px;
1213
}
1314

@@ -63,6 +64,7 @@
6364
}
6465

6566
@media (max-width: 780px) {
67+
// right: 10px;
6668
top: 90px;
6769
}
6870
}
@@ -145,7 +147,7 @@
145147
@media (max-width: 780px) {
146148
position: absolute;
147149
top: 90px;
148-
right: 130px;
150+
left: 10px;
149151
display: none;
150152
}
151153
}
@@ -155,7 +157,10 @@
155157
color: hsla(0, 0%, 100%, 0.3);
156158

157159
@media (max-width: 780px) {
160+
display: none;
161+
158162
&.sub {
163+
display: block;
159164
position: absolute;
160165
top: 90px;
161166
right: 120px;

‎src/styles/components/_task-preview.scss

+64-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,64 @@
11
.task-preview {
2+
3+
.task-preview-comments,
4+
.task-preview-attachments,
5+
.task-preview-checklists {
6+
color: #6b778c;
7+
font-size: 12px;
8+
// vertical-align: botto;
9+
margin-block-start: 5px;
10+
margin-inline-start: 10px;
11+
12+
span:first-child {
13+
font-size: 16px;
14+
font-family: trellicons;
15+
vertical-align: bottom;
16+
margin-inline-end: 3px;
17+
18+
&::before {
19+
content: "\e91e";
20+
}
21+
}
22+
}
23+
24+
.task-preview-attachments {
25+
span:first-child {
26+
&::before {
27+
content: "\e908";
28+
}
29+
}
30+
31+
}
32+
33+
.task-preview-checklists {
34+
35+
&.complete {
36+
position: relative;
37+
bottom: 3px;
38+
// margin-block-end: 20px;
39+
40+
section {
41+
42+
background-color: #61bd4f;
43+
color: $clr-base;
44+
border-radius: 3px;
45+
height: 24px;
46+
width: 47px;
47+
padding-inline-start: 3.5px;
48+
padding-block-start: 3px;
49+
}
50+
51+
// line-height: 24px;
52+
}
53+
54+
span:first-child {
55+
&::before {
56+
content: "\e91a";
57+
}
58+
}
59+
60+
}
61+
262
.big-cover {
363
min-height: fit-content;
464
}
@@ -142,6 +202,7 @@
142202
justify-content: space-between;
143203
max-width: 255px;
144204
min-height: 32px;
205+
position: relative;
145206
// line-height: 0.1;
146207
}
147208

@@ -344,7 +405,9 @@
344405
// float: right;
345406
position: relative;
346407
// left: 100px;
347-
margin-block-end: 5px;
408+
// position: absolute;
409+
// right: 0;
410+
// margin-block-end: 5px;
348411
margin-inline-end: 5px;
349412

350413
// bottom: 0px;

0 commit comments

Comments
 (0)