Skip to content

Commit 45eb4a7

Browse files
modularcodermodularcoder
committed
Dashboard items list
1 parent 678cf1a commit 45eb4a7

6 files changed

Lines changed: 124 additions & 154 deletions

File tree

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

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
$item-list-padding-x: 10px !default;
22
$item-list-padding-y: 10px !default;
3-
$item-list-line-height: 30px !default;
3+
$item-list-line-height: 1.4rem !default;
44
$item-list-col-grow: 3 !default;
55
$item-list-col-shrink: 3 !default;
66

@@ -13,29 +13,34 @@ $item-list-col-shrink: 3 !default;
1313
padding: 0;
1414
margin: 0;
1515
margin-bottom: 15px;
16-
// line-height: $item-list-line-height;
17-
18-
display: flex;
19-
flex-flow: column nowrap;
16+
line-height: $item-list-line-height;
17+
18+
@include media(lg) {
19+
font-size: 1rem;
20+
}
2021

21-
.item-list-header {
22+
@include media(md) {
23+
font-size: 0.95rem;
24+
}
2225

23-
.item-col.item-col-header {
24-
span {
25-
color: #999;
26-
font-size: 0.8rem;
27-
font-weight: 700 !important;
28-
}
29-
}
26+
@include media-down(sm) {
27+
font-size: 1.05rem;
3028
}
3129

30+
display: flex;
31+
flex-flow: column nowrap;
32+
3233
&.striped {
3334
& > li {
34-
border-bottom: 1px solid lighten($color-divider, 6%);
35+
border-bottom: 1px solid $item-list-color-border;
3536
}
3637

3738
& > li:nth-child(2n + 1) {
3839
background-color: lighten($color-divider, 12%);
40+
41+
@include media-down(sm) {
42+
background-color: lighten($color-divider, 11%);
43+
}
3944
}
4045

4146
.item-list-footer {
@@ -122,11 +127,26 @@ $item-list-col-shrink: 3 !default;
122127

123128
.item-list {
124129

130+
/********************************************
131+
* Header
132+
*********************************************/
133+
134+
.item-list-header {
135+
.item-col.item-col-header {
136+
span {
137+
color: #999;
138+
font-size: 0.8rem;
139+
font-weight: 700 !important;
140+
}
141+
}
142+
}
143+
125144
/********************************************
126145
* Heading
127146
*********************************************/
128147

129148
.item-heading {
149+
font-size: 0.9rem;
130150
display: none;
131151
color: #666;
132152
font-weight: 700;
@@ -228,22 +248,9 @@ $item-list-col-shrink: 3 !default;
228248

229249
.item-title {
230250
margin: 0;
231-
font-size: 1.1rem;
232-
line-height: 1.4rem;
251+
font-size: inherit;
252+
line-height: inherit;
233253
font-weight: 600;
234-
235-
@include media(lg) {
236-
font-size: 1rem;
237-
line-height: 1.4rem;
238-
}
239-
240-
@include media(md) {
241-
font-size: 0.95rem;
242-
}
243-
244-
@include media-down(sm) {
245-
font-size: 1.05rem;
246-
}
247254
}
248255

249256
/********************************************

‎src/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@ $card-padding-x: 15px !default;
8383
$card-padding-x-xl: 20px !default;
8484
$card-padding-x-sm: 10px !default;
8585

86+
// Item list
87+
$item-list-color-border: lighten($color-divider, 6%) !default;
88+
8689

8790

8891
/* ***************************************************

‎src/app/dashboard/items/items-list.scss‎

Lines changed: 53 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,91 @@
11
.dashboard-page .items {
22
.item-list {
33

4-
$mobile-img-col-size: 70px + $item-list-padding-x;
4+
// Common case styles
55

6-
.item-col-img-mobile {
7-
display: none;
8-
padding-top: 10px;
9-
padding-bottom: 10px;
10-
width: $mobile-img-col-size;
11-
12-
13-
@include media-down(sm) {
14-
display: flex;
15-
}
6+
.item-col-title {
7+
flex-grow: 3 * $item-list-col-grow;
168
}
179

10+
.item-col-date {
11+
text-align: right;
12+
}
1813

19-
.item-col-desktop-description {
20-
padding: 0;
21-
width: 100%;
22-
23-
@include media-down(sm) {
24-
width: calc(100% - #{$mobile-img-col-size});
14+
// Large mobile view
2515

26-
.item-col-img {
27-
display: none;
28-
}
16+
@include media-down(sm) {
17+
.item-row {
18+
padding: 0;
2919
}
3020

31-
& > div {
32-
overflow: hidden;
21+
.item-col {
22+
padding-left: $item-list-padding-x;
23+
padding-right: $item-list-padding-x;
3324
}
34-
}
35-
36-
37-
38-
.item-col-title {
3925

40-
width: calc(50% - 40px);
26+
.item-col-img {
27+
padding-left: $item-list-padding-x;
28+
flex-basis: 40 + 2 * $item-list-padding-x;
29+
padding-right: 0;
30+
}
4131

42-
@include media-down(sm) {
43-
width: 100%;
44-
// width: calc(100% - 40px);
32+
.item-col-stats {
33+
text-align: center;
4534
}
4635
}
4736

48-
.item-col-sales {
49-
width: 100px;
50-
text-align: right;
51-
52-
@include media(xs) {
53-
text-align: left;
54-
width: 50%;
37+
@include media(sm) {
38+
.item-col-title {
39+
flex-basis: 100%;
40+
border-bottom: 1px solid $item-list-color-border;
5541
}
5642

57-
@include media(sm) {
58-
text-align: left;
59-
width: percentage(1/3);
43+
.item-col:not(.item-col-title):not(.item-col-img) {
44+
position: relative;
45+
padding-top: 35px;
6046
}
6147

62-
@include media-down(sm) {
63-
padding-top: 0;
48+
.item-heading {
49+
position: absolute;
50+
height: 30px;
51+
width: 100%;
52+
left: 0;
53+
top: 5px;
54+
line-height: 30px;
55+
padding-left: $item-list-padding-x;
56+
padding-right: $item-list-padding-x;
6457
}
6558
}
6659

67-
.item-col-stats {
68-
text-align: center;
69-
width: calc(50% - 200px);
60+
@include media(xs) {
7061

71-
@include media-down(xs) {
72-
text-align: right;
73-
width: 50%;
62+
.item-col {
63+
border-bottom: $item-list-color-border;
7464
}
7565

76-
@include media(sm) {
77-
text-align: center;
78-
width: percentage(1/3);
66+
.item-col-img {
67+
flex-basis: 50px;
68+
order: -5;
7969
}
8070

81-
@include media-down(sm) {
82-
padding-top: 0;
71+
.item-col-title {
72+
border: none;
73+
flex-basis: calc(100% - 50px);
8374
}
84-
}
8575

86-
.item-col-date {
87-
text-align: right;
88-
white-space: nowrap;
89-
width: 100px;
76+
.item-col:not(.item-col-title):not(.item-col-img) {
77+
flex-basis: 100%;
78+
text-align: left;
9079

91-
@include media(xs) {
92-
display: none;
80+
.item-heading {
81+
text-align: left;
82+
}
9383
}
9484

95-
@include media(sm) {
96-
width: percentage(1/3);
97-
}
9885

99-
@include media-down(sm) {
100-
padding-top: 0;
86+
.item-col-date {
87+
border: none;
10188
}
10289
}
103-
104-
10590
}
106-
107-
10891
}

‎src/app/dashboard/items/items.hbs‎

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@
3232
<span>Name</span>
3333
</div>
3434
</div>
35-
<div class="item-col item-col-header fixed item-col-sales">
35+
<div class="item-col item-col-header item-col-sales">
3636
<div>
3737
<span>Sales</span>
3838
</div>
3939
</div>
40-
<div class="item-col item-col-header fixed item-col-stats">
40+
<div class="item-col item-col-header item-col-stats">
4141
<div class="no-overflow">
4242
<span>Stats</span>
4343
</div>
4444
</div>
45-
<div class="item-col item-col-header fixed item-col-date">
45+
<div class="item-col item-col-header item-col-date">
4646
<div>
4747
<span>Published</span>
4848
</div>
@@ -52,49 +52,38 @@
5252
{{#each items}}
5353
<li class="item">
5454
<div class="item-row">
55-
56-
{{!-- Mobile image column --}}
57-
<div class="item-col fixed item-col-img item-col-img-mobile hidden-md-up">
55+
<div class="item-col fixed item-col-img xs">
5856
<a href="">
59-
<div class="item-img rounded" style="background-image: url({{this.img}})"></div>
57+
<div class="item-img xs rounded" style="background-image: url({{this.img}})"></div>
6058
</a>
6159
</div>
62-
63-
{{!-- Desktop view row --}}
64-
<div class="item-col item-col-desktop-description">
65-
<div class="item-row">
66-
67-
<div class="item-col fixed item-col-img xs">
68-
<a href="">
69-
<div class="item-img xs rounded" style="background-image: url({{this.img}})"></div>
70-
</a>
71-
</div>
72-
<div class="item-col item-col-title no-overflow">
73-
<div>
74-
<a href="" class="">
75-
<h4 class="item-title no-wrap">
76-
{{this.title}}
77-
</h4>
78-
</a>
79-
</div>
80-
</div>
81-
<div class="item-col fixed item-col-sales">
82-
<div>
83-
{{this.sales}}
84-
</div>
85-
</div>
86-
<div class="item-col fixed item-col-stats">
87-
<div class="no-overflow">
88-
<div class="item-stats sparkline" data-type="bar"></div>
89-
</div>
90-
</div>
91-
<div class="item-col fixed item-col-date">
92-
<div>
93-
{{this.date}}
94-
<div>
95-
</div>
60+
<div class="item-col item-col-title no-overflow">
61+
<div>
62+
<a href="" class="">
63+
<h4 class="item-title no-wrap">
64+
{{this.title}}
65+
</h4>
66+
</a>
9667
</div>
9768
</div>
69+
<div class="item-col item-col-sales">
70+
<div class="item-heading">Sales</div>
71+
<div>
72+
{{this.sales}}
73+
</div>
74+
</div>
75+
<div class="item-col item-col-stats">
76+
<div class="item-heading">Stats</div>
77+
<div class="no-overflow">
78+
<div class="item-stats sparkline" data-type="bar"></div>
79+
</div>
80+
</div>
81+
<div class="item-col item-col-date">
82+
<div class="item-heading">Published</div>
83+
<div>
84+
{{this.date}}
85+
<div>
86+
</div>
9887
</div>
9988
</li>
10089
{{/each}}

‎src/app/items/list/items-list-page.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ items:
120120
<span>Author</span>
121121
</div>
122122
</div>
123-
<div class="item-col item-col-header fixed item-col-date">
123+
<div class="item-col item-col-header item-col-date">
124124
<div>
125125
<span>Published</span>
126126
</div>
@@ -182,7 +182,7 @@ items:
182182
<a href="">{{this.author}}</a>
183183
</div>
184184
</div>
185-
<div class="item-col fixed item-col-date">
185+
<div class="item-col item-col-date">
186186
<div class="item-heading">Published</div>
187187
<div>
188188
{{this.date}}

0 commit comments

Comments
 (0)