Skip to content

Commit 78d2e5a

Browse files
modularcodermodularcoder
committed
Dashboard tasks built with item list
1 parent 45eb4a7 commit 78d2e5a

4 files changed

Lines changed: 66 additions & 75 deletions

File tree

‎src/_common/items-list/items-list.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $item-list-col-shrink: 3 !default;
1212
list-style: none;
1313
padding: 0;
1414
margin: 0;
15-
margin-bottom: 15px;
15+
margin-bottom: 0;
1616
line-height: $item-list-line-height;
1717

1818
@include media(lg) {
@@ -323,7 +323,7 @@ $item-list-col-shrink: 3 !default;
323323
right: 100%;
324324
background-color: $color-divider;
325325
border-radius: 3px;
326-
transition: all 0.2s ease-in-out;
326+
transition: all 0.15s ease-in-out;
327327

328328
&.direction-right {
329329
right: auto;
@@ -375,7 +375,7 @@ $item-list-col-shrink: 3 !default;
375375
********************************************** */
376376

377377
// Item which is located inside card inside item-list
378-
.card .item-list .item > .item-row {
378+
.card > .item-list .item > .item-row {
379379
padding: 0 $card-padding-x;
380380

381381
@include media(xl) {

‎src/app/dashboard/index-page.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ tasks:
9999
</div>
100100

101101
<div class="col-md-4">
102-
{{!-- {{> app/dashboard/tasks/tasks}} --}}
102+
{{> app/dashboard/tasks/tasks}}
103103
</div>
104104
</div>
105105
</section>

‎src/app/dashboard/tasks/tasks.hbs‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,47 @@
1313
</div>
1414
<div class="card-block">
1515
<div class="tasks-block">
16-
<ul class="tasks-list">
16+
<ul class="item-list">
1717
{{#each tasks}}
18-
<li class="tasks-item">
19-
<label>
20-
<input class="checkbox" type="checkbox"
21-
{{#if done}}checked="checked"{{/if}}>
22-
<span>{{title}}</span>
23-
</label>
24-
<div class="item-actions">
25-
<a href="#" class="item-actions-toggle-btn setting"><I class="fa fa-cog"></I></a>
26-
<div class="actions-block">
27-
<ul class="actions-list">
28-
<li>
29-
<a class="remove" href="#">
30-
<i class="fa fa-trash-o "></i>
31-
</a>
32-
</li>
33-
<li>
34-
<a class="check" href="#">
35-
<i class="fa fa-check"></i>
36-
</a>
37-
</li>
38-
<li>
39-
<a class="edit" href="#">
40-
<i class="fa fa-pencil"></i>
41-
</a>
42-
</li>
43-
</ul>
18+
<li class="item">
19+
<div class="item-row">
20+
<div class="item-col">
21+
<label>
22+
<input class="checkbox" type="checkbox"
23+
{{#if done}}checked="checked"{{/if}}>
24+
<span>{{title}}</span>
25+
</label>
26+
</div>
27+
<div class="item-col fixed item-col-actions-dropdown">
28+
<div class="item-actions-dropdown">
29+
<a class="item-actions-toggle-btn">
30+
<span class="inactive">
31+
<i class="fa fa-cog"></i>
32+
</span>
33+
<span class="active">
34+
<i class="fa fa-chevron-circle-right"></i>
35+
</span>
36+
</a>
37+
<div class="item-actions-block">
38+
<ul class="item-actions-list">
39+
<li>
40+
<a class="remove" href="#">
41+
<i class="fa fa-trash-o "></i>
42+
</a>
43+
</li>
44+
<li>
45+
<a class="check" href="#">
46+
<i class="fa fa-check"></i>
47+
</a>
48+
</li>
49+
<li>
50+
<a class="edit" href="/item-editor.html">
51+
<i class="fa fa-pencil"></i>
52+
</a>
53+
</li>
54+
</ul>
55+
</div>
56+
</div>
4457
</div>
4558
</div>
4659
</li>

‎src/app/dashboard/tasks/tasks.scss‎

Lines changed: 22 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,31 @@
33
flex-direction: column;
44
align-content: stretch;
55

6-
.tasks-list {
7-
// align-self: stretch;
8-
}
9-
10-
11-
126
.title-block {
13-
147
.title {
158
align-items: center;
169
display: flex;
1710
justify-content: space-between;
1811
}
12+
}
13+
14+
15+
16+
label {
17+
width: 100%;
18+
margin-bottom: 0;
19+
20+
.checkbox:checked+span {
21+
text-decoration: line-through;
22+
}
1923

24+
span {
25+
display: inline-block;
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
white-space: nowrap;
29+
width: 100%;
30+
}
2031
}
2132

2233
.tasks-block {
@@ -27,43 +38,10 @@
2738
margin-right: -5px;
2839
}
2940

30-
.tasks-list {
31-
list-style-type: none;
32-
padding: 0;
33-
padding-right: 5px;
34-
35-
.tasks-item {
36-
37-
padding-right: 20px;
38-
position: relative;
39-
40-
label {
41-
42-
width: 100%;
43-
44-
.checkbox:checked+span {
45-
text-decoration: line-through;
46-
}
47-
48-
span {
49-
display: inline-block;
50-
overflow: hidden;
51-
text-overflow: ellipsis;
52-
white-space: nowrap;
53-
width: 100%;
54-
}
55-
56-
}
57-
58-
.setting {
59-
color: $color-text-passive;
60-
61-
font-size: 1.25rem;
62-
63-
}
41+
.item-list {
42+
.item-col {
43+
padding-top: 5px;
44+
padding-bottom: 5px;
6445
}
65-
6646
}
67-
68-
6947
}

0 commit comments

Comments
 (0)