Skip to content

Commit b8a5d75

Browse files
AramManukyanAramManukyan
committed
Merge branch 'develop' of github.com:modularcode/modular-admin-html into develop
2 parents 13f9030 + 3d44fc9 commit b8a5d75

11 files changed

Lines changed: 256 additions & 247 deletions

File tree

‎src/_common/_styles/layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@
4040
.section {
4141
display: block;
4242
margin-bottom: 30px;
43+
44+
&:last-of-type {
45+
margin-bottom: 0;
46+
}
4347
}
4448

4549
.box-placeholder {

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

Lines changed: 43 additions & 21 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

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

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

25-
.item-col {
26-
font-weight: 700 !important;
27-
}
26+
@include media-down(sm) {
27+
font-size: 1.05rem;
2828
}
2929

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

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

3946
.item-list-footer {
@@ -76,6 +83,7 @@ $item-list-col-shrink: 3 !default;
7683
flex-shrink: $item-list-col-shrink;
7784
margin-left: auto;
7885
margin-right: auto;
86+
min-width: 0;
7987

8088
&.fixed {
8189
flex-grow: 0;
@@ -119,16 +127,30 @@ $item-list-col-shrink: 3 !default;
119127

120128
.item-list {
121129

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+
122144
/********************************************
123145
* Heading
124146
*********************************************/
125147

126148
.item-heading {
149+
font-size: 0.9rem;
127150
display: none;
128151
color: #666;
129152
font-weight: 700;
130153
padding-right: $item-list-padding-x;
131-
padding-left: $item-list-padding-x;
132154

133155
@include media-down(sm) {
134156
display: block;
@@ -192,9 +214,8 @@ $item-list-col-shrink: 3 !default;
192214
}
193215

194216
a {
195-
flex-grow: 1;
196-
display: flex;
197-
align-self: stretch;
217+
width: 100%;
218+
// display: flex;
198219
}
199220
}
200221

@@ -226,7 +247,8 @@ $item-list-col-shrink: 3 !default;
226247

227248
.item-title {
228249
margin: 0;
229-
font-size: 1.1rem;
250+
font-size: inherit;
251+
line-height: inherit;
230252
font-weight: 600;
231253
}
232254

@@ -281,7 +303,7 @@ $item-list-col-shrink: 3 !default;
281303
color: lighten($color-text-light, 10);
282304
font-size: 1.2rem;
283305
cursor: pointer;
284-
width: 30px;
306+
width: 100%;
285307
line-height: 30px;
286308
text-align: center;
287309

@@ -300,7 +322,7 @@ $item-list-col-shrink: 3 !default;
300322
right: 100%;
301323
background-color: $color-divider;
302324
border-radius: 3px;
303-
transition: all 0.2s ease-in-out;
325+
transition: all 0.15s ease-in-out;
304326

305327
&.direction-right {
306328
right: auto;
@@ -352,7 +374,7 @@ $item-list-col-shrink: 3 !default;
352374
********************************************** */
353375

354376
// Item which is located inside card inside item-list
355-
.card .item-list .item > .item-row {
377+
.card > .item-list .item > .item-row {
356378
padding: 0 $card-padding-x;
357379

358380
@include media(xl) {

‎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/dashboard.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Dashboard page specific styles here
22

33
.dashboard-page {
4-
4+
// .section.map-tasks {
5+
// margin-bottom: 0;
6+
// }
57
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,14 @@ tasks:
9292
</div>
9393
</div>
9494
</section>
95-
<section class="section">
95+
<section class="section map-tasks">
9696
<div class="row sameheight-container">
9797
<div class="col-md-8">
9898
{{> app/dashboard/sales-by-countries/sales-by-countries}}
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/items/items-list.scss‎

Lines changed: 56 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,97 @@
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;
6+
.item-col-title {
7+
flex-grow: 3 * $item-list-col-grow;
8+
}
119

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

13-
@include media-down(sm) {
14-
display: flex;
14+
@include media(xl) {
15+
.item-col-date {
16+
flex-grow: $item-list-col-grow + 1;
1517
}
1618
}
1719

1820

19-
.item-col-desktop-description {
20-
padding: 0;
21-
width: 100%;
21+
// Large mobile view
2222

23-
@include media-down(sm) {
24-
width: calc(100% - #{$mobile-img-col-size});
25-
26-
.item-col-img {
27-
display: none;
28-
}
23+
@include media-down(sm) {
24+
.item-row {
25+
padding: 0;
2926
}
3027

31-
& > div {
32-
overflow: hidden;
28+
.item-col {
29+
padding-left: $item-list-padding-x;
30+
padding-right: $item-list-padding-x;
3331
}
34-
}
3532

36-
37-
38-
.item-col-title {
39-
40-
width: calc(50% - 40px);
33+
.item-col-img {
34+
padding-left: $item-list-padding-x;
35+
flex-basis: 40 + 2 * $item-list-padding-x;
36+
padding-right: 0;
37+
}
4138

42-
@include media-down(sm) {
43-
width: 100%;
44-
// width: calc(100% - 40px);
39+
.item-col-stats {
40+
text-align: center;
4541
}
4642
}
4743

48-
.item-col-sales {
49-
width: 100px;
50-
text-align: right;
51-
52-
@include media(xs) {
53-
text-align: left;
54-
width: 50%;
44+
@include media(sm) {
45+
.item-col-title {
46+
flex-basis: 100%;
47+
border-bottom: 1px solid $item-list-color-border;
5548
}
5649

57-
@include media(sm) {
58-
text-align: left;
59-
width: percentage(1/3);
50+
.item-col:not(.item-col-title):not(.item-col-img) {
51+
position: relative;
52+
padding-top: 35px;
6053
}
6154

62-
@include media-down(sm) {
63-
padding-top: 0;
55+
.item-heading {
56+
position: absolute;
57+
height: 30px;
58+
width: 100%;
59+
left: 0;
60+
top: 5px;
61+
line-height: 30px;
62+
padding-left: $item-list-padding-x;
63+
padding-right: $item-list-padding-x;
6464
}
6565
}
6666

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

71-
@include media-down(xs) {
72-
text-align: right;
73-
width: 50%;
69+
.item-col {
70+
border-bottom: 1px solid $item-list-color-border;
7471
}
7572

76-
@include media(sm) {
77-
text-align: center;
78-
width: percentage(1/3);
73+
.item-col-img {
74+
flex-basis: 50px;
75+
order: -5;
7976
}
8077

81-
@include media-down(sm) {
82-
padding-top: 0;
78+
.item-col-title {
79+
flex-basis: calc(100% - 50px);
8380
}
84-
}
8581

86-
.item-col-date {
87-
text-align: right;
88-
white-space: nowrap;
89-
width: 100px;
82+
.item-col:not(.item-col-title):not(.item-col-img) {
83+
flex-basis: 100%;
84+
text-align: left;
9085

91-
@include media(xs) {
92-
display: none;
86+
.item-heading {
87+
text-align: left;
88+
}
9389
}
9490

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

99-
@include media-down(sm) {
100-
padding-top: 0;
92+
.item-col-date {
93+
border: none;
10194
}
10295
}
103-
104-
10596
}
106-
107-
10897
}

0 commit comments

Comments
 (0)