Skip to content

Commit fc89f0e

Browse files
modularcodermodularcoder
committed
Items list improvement
Items list item actions
1 parent f7d15b8 commit fc89f0e

7 files changed

Lines changed: 295 additions & 170 deletions

File tree

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
$(function() {
2+
var $itemActions = $(".item-actions");
3+
4+
$(document).on('click',function(e) {
5+
if (!$(e.target).closest('.item-actions').length) {
6+
$itemActions.removeClass('active');
7+
}
8+
});
9+
10+
$('.item-actions-toggle-btn').on('click',function(e){
11+
e.preventDefault();
12+
13+
var $thisActionList = $(this).closest('.item-actions');
14+
15+
$itemActions.not($thisActionList).removeClass('active');
16+
17+
$thisActionList.toggleClass('active');
18+
});
19+
});

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

Lines changed: 175 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
$item-list-padding-x: 10px !default;
22
$item-list-padding-y: 10px !default;
33
$item-list-line-height: 30px !default;
4+
$item-list-col-grow: 3 !default;
5+
$item-list-col-shrink: 3 !default;
46

57
/* *******************************************
68
* Item List general styles
@@ -26,11 +28,11 @@ $item-list-line-height: 30px !default;
2628
}
2729

2830
&.striped {
29-
li {
31+
& > li {
3032
border-bottom: 1px solid lighten($color-divider, 6%);
3133
}
3234

33-
li:nth-child(2n + 1) {
35+
& > li:nth-child(2n + 1) {
3436
background-color: lighten($color-divider, 12%);
3537
}
3638

@@ -46,9 +48,11 @@ $item-list-line-height: 30px !default;
4648
********************************************** */
4749

4850

49-
.item-list .item {
50-
display: flex;
51-
flex-direction: column;
51+
.item-list {
52+
.item {
53+
display: flex;
54+
flex-direction: column;
55+
}
5256

5357
.item-row {
5458
display: flex;
@@ -67,6 +71,11 @@ $item-list-line-height: 30px !default;
6771
align-items: center;
6872
display: flex;
6973
padding: $item-list-padding-y $item-list-padding-x $item-list-padding-y 0;
74+
flex-basis: 0;
75+
flex-grow: $item-list-col-grow;
76+
flex-shrink: $item-list-col-shrink;
77+
margin-left: auto;
78+
margin-right: auto;
7079

7180
&.fixed {
7281
flex-grow: 0;
@@ -108,15 +117,42 @@ $item-list-line-height: 30px !default;
108117
********************************************** */
109118

110119

111-
.item-list .item {
120+
.item-list {
121+
122+
/********************************************
123+
* Heading
124+
*********************************************/
125+
126+
.item-heading {
127+
display: none;
128+
color: #666;
129+
font-weight: 700;
130+
padding-right: $item-list-padding-x;
131+
padding-left: $item-list-padding-x;
112132

113-
.item-col-desktop-description {
114-
padding: 0;
133+
@include media-down(sm) {
134+
display: block;
135+
}
136+
137+
@include media(sm) {
138+
width: 100%;
139+
}
140+
141+
@include media(xs) {
142+
width: 40%;
143+
}
115144
}
116145

117-
// Check
118-
.item-col-check {
119-
width: 20px + $item-list-padding-x;
146+
/********************************************
147+
* Checkbox
148+
*********************************************/
149+
150+
.item-col.item-col-check {
151+
flex-basis: 20px + $item-list-padding-x;
152+
153+
@include media-down(sm) {
154+
order: -8;
155+
}
120156
}
121157

122158
.item-check {
@@ -131,26 +167,28 @@ $item-list-line-height: 30px !default;
131167
}
132168
}
133169

134-
// Image
170+
/********************************************
171+
* Image
172+
*********************************************/
135173

136-
.item-col-img {
174+
.item-col.item-col-img {
137175
display: flex;
138-
width: 60px + $item-list-padding-x;
176+
flex-basis: 60px + $item-list-padding-x;
139177

140178
&.xs{
141-
width: 30px + $item-list-padding-x;
179+
flex-basis: 30px + $item-list-padding-x;
142180
}
143181

144182
&.sm {
145-
width: 40px + $item-list-padding-x;
183+
flex-basis: 40px + $item-list-padding-x;
146184
}
147185

148186
&.lg {
149-
width: 90px + $item-list-padding-x;
187+
flex-basis: 90px + $item-list-padding-x;
150188
}
151189

152190
&.xl {
153-
width: 110px + $item-list-padding-x;
191+
flex-basis: 110px + $item-list-padding-x;
154192
}
155193

156194
a {
@@ -171,9 +209,16 @@ $item-list-line-height: 30px !default;
171209
@include bg-cover();
172210
}
173211

174-
// 1le
212+
/********************************************
213+
* Title
214+
*********************************************/
215+
216+
.item-col.item-col-title {
217+
218+
@include media-down(sm) {
219+
order: -4;
220+
}
175221

176-
.item-col-title {
177222
a {
178223
display: block;
179224
}
@@ -183,14 +228,122 @@ $item-list-line-height: 30px !default;
183228
margin: 0;
184229
font-size: 1.1rem;
185230
font-weight: 600;
186-
// line-height: $item-list-line-height;
187231
}
188232

189-
// Stats
233+
/********************************************
234+
* Stats
235+
*********************************************/
190236

191237
.item-stats {
192238
height: $item-list-line-height;
193239
}
240+
241+
/********************************************
242+
* Actions
243+
*********************************************/
244+
245+
.item-col.item-col-actions {
246+
flex-basis: 30px + $item-list-padding-x;
247+
text-align: center;
248+
padding-left: 0 !important;
249+
250+
@include media-down(sm) {
251+
order: -3;
252+
253+
flex-basis: 30px + $item-list-padding-x !important;
254+
padding-right: $item-list-padding-x;
255+
}
256+
}
257+
258+
.item-actions {
259+
position: relative;
260+
font-size: 1.1rem;
261+
262+
&.active {
263+
.item-actions-block {
264+
max-width: 120px;
265+
}
266+
267+
.item-actions-toggle-btn {
268+
color: $color-primary;
269+
270+
.active {
271+
display: block;
272+
}
273+
274+
.inactive {
275+
display: none;
276+
}
277+
}
278+
}
279+
280+
.item-actions-toggle-btn {
281+
color: lighten($color-text-light, 10);
282+
font-size: 1.2rem;
283+
cursor: pointer;
284+
width: 30px;
285+
line-height: 30px;
286+
text-align: center;
287+
288+
.active {
289+
display: none;
290+
}
291+
}
292+
293+
.item-actions-block {
294+
height: 30px;
295+
max-width: 0px;
296+
line-height: 30px;
297+
overflow: hidden;
298+
position: absolute;
299+
top: 0;
300+
right: 100%;
301+
background-color: $color-divider;
302+
border-radius: 3px;
303+
transition: all 0.2s ease-in-out;
304+
305+
&.direction-right {
306+
right: auto;
307+
left: 100%;
308+
}
309+
310+
311+
.item-actions-list {
312+
padding: 0;
313+
list-style: none;
314+
white-space: nowrap;
315+
padding: 0 5px;
316+
317+
li{
318+
display: inline-block;
319+
padding: 0;
320+
}
321+
322+
a {
323+
display: block;
324+
padding: 0 5px;
325+
326+
&.edit {
327+
color: #38424C;
328+
}
329+
330+
&.check {
331+
color: #40B726;
332+
}
333+
334+
&.remove {
335+
color: #DB0E1E;
336+
}
337+
}
338+
}
339+
}
340+
341+
}
342+
343+
/********************************************
344+
* Something else?
345+
*********************************************/
346+
194347
}
195348

196349

‎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.js‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,4 @@
1-
$(function(){
2-
3-
$(document).on('click',function(e) {
4-
5-
if (
6-
!$(e.target).closest('.item-actions').length
7-
) {
8-
removeActionList();
9-
}
10-
});
11-
12-
$('.item-actions-toggle-btn').on('click',function(e){
13-
e.preventDefault();
14-
removeActionList();
15-
16-
$(this).parent().toggleClass('active');
17-
});
18-
1+
$(function() {
192

203
$('.actions-list > li').on('click', '.check', function(e){
214
e.preventDefault();
@@ -27,8 +10,4 @@ $(function(){
2710
removeActionList();
2811
});
2912

30-
});
31-
32-
function removeActionList(){
33-
$('.item-actions').removeClass('active');
34-
}
13+
});

0 commit comments

Comments
 (0)