Skip to content

Commit e25a4de

Browse files
daftspunkdaftspunk
committed
Clean up css a bit, add scratch for upload process
1 parent 3d91b78 commit e25a4de

File tree

4 files changed

+128
-63
lines changed

4 files changed

+128
-63
lines changed

‎modules/backend/behaviors/importexportcontroller/assets/css/importexport.css

Lines changed: 47 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,69 +13,89 @@
1313
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
1414
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
1515
}
16+
.import-behavior .import-file-columns,
17+
.import-behavior .import-record-columns {
18+
height: 400px;
19+
background: #f0f0f0;
20+
padding: 5px;
21+
}
22+
.import-behavior .import-file-columns .upload-prompt {
23+
display: block;
24+
text-align: center;
25+
position: absolute;
26+
top: 50%;
27+
left: 0;
28+
right: 0;
29+
margin-top: -10px;
30+
}
31+
.import-behavior .import-column-bindings > ul > li,
32+
.import-behavior .import-record-columns > ul > li {
33+
cursor: pointer;
34+
}
1635
.import-behavior ul li.dragged,
17-
.import-behavior ul.import-file-columns > li,
18-
.import-behavior ul.import-record-columns > li {
19-
background: #e8eaeb;
36+
.import-behavior .import-file-columns > ul > li,
37+
.import-behavior .import-record-columns > ul > li {
38+
background: #ffffff;
2039
border: 1px solid #cccccc;
2140
border-radius: 3px;
2241
margin-bottom: 5px;
2342
}
2443
.import-behavior ul li.dragged div.import-column-name > span,
25-
.import-behavior ul.import-file-columns > li div.import-column-name > span,
26-
.import-behavior ul.import-record-columns > li div.import-column-name > span,
44+
.import-behavior .import-file-columns > ul > li div.import-column-name > span,
45+
.import-behavior .import-record-columns > ul > li div.import-column-name > span,
2746
.import-behavior ul li.dragged > span,
28-
.import-behavior ul.import-file-columns > li > span,
29-
.import-behavior ul.import-record-columns > li > span {
47+
.import-behavior .import-file-columns > ul > li > span,
48+
.import-behavior .import-record-columns > ul > li > span {
3049
display: block;
31-
padding: 5px;
50+
padding: 10px;
3251
}
33-
.import-behavior ul.import-file-columns > li:before,
34-
.import-behavior ul.import-file-columns > li:after {
52+
.import-behavior .import-file-columns > ul > li:before,
53+
.import-behavior .import-file-columns > ul > li:after {
3554
content: " ";
3655
display: table;
3756
}
38-
.import-behavior ul.import-file-columns > li:after {
57+
.import-behavior .import-file-columns > ul > li:after {
3958
clear: both;
4059
}
41-
.import-behavior ul.import-file-columns div.import-column-name {
60+
.import-behavior .import-file-columns > ul div.import-column-name {
4261
float: left;
4362
width: 45%;
4463
}
45-
.import-behavior ul.import-file-columns ul.import-column-bindings {
64+
.import-behavior .import-file-columns > ul .import-column-bindings > ul {
4665
float: right;
4766
width: 55%;
4867
}
49-
.import-behavior ul.import-column-bindings {
50-
background: #dddddd;
51-
padding: 0 5px 0 21px;
68+
.import-behavior .import-column-bindings > ul {
69+
background: #dadedf;
5270
position: relative;
53-
min-height: 30px;
71+
min-height: 40px;
5472
}
55-
.import-behavior ul.import-column-bindings:after {
73+
.import-behavior .import-column-bindings > ul:after {
5674
content: '';
5775
display: block;
5876
width: 0;
5977
height: 0;
60-
border-top: 15px solid transparent;
61-
border-bottom: 15px solid transparent;
62-
border-left: 16px solid #e8eaeb;
78+
border-top: 20px solid transparent;
79+
border-bottom: 20px solid transparent;
80+
border-left: 18px solid #ffffff;
6381
position: absolute;
6482
top: 0;
6583
left: 0;
6684
}
67-
.import-behavior ul.import-column-bindings:before {
85+
.import-behavior .import-column-bindings > ul:before {
6886
position: absolute;
69-
padding: 5px;
87+
padding: 10px;
88+
padding-left: 26px;
7089
content: attr(data-empty-text);
7190
font-style: italic;
7291
color: rgba(0, 0, 0, 0.5);
7392
}
74-
.import-behavior ul.import-column-bindings > li:not(.dragged) {
75-
background: #dddddd;
93+
.import-behavior .import-column-bindings > ul > li:not(.dragged) {
94+
background: #e8eaeb;
7695
position: relative;
7796
}
78-
.import-behavior ul.import-column-bindings > li:not(.dragged) > span {
97+
.import-behavior .import-column-bindings > ul > li:not(.dragged) > span {
7998
display: block;
80-
padding: 5px;
99+
padding: 10px;
100+
padding-left: 26px;
81101
}

‎modules/backend/behaviors/importexportcontroller/assets/less/importexport.less

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@import "../../../../assets/less/core/boot.less";
22

3-
@color-import-column-bg: #e8eaeb;
3+
@color-import-column-bg: #fff;
44
@color-import-column-border: #ccc;
5-
@color-import-bound-bg: #ddd;
5+
@color-import-bound-bg: #e8eaeb;
6+
@import-column-padding: 10px;
67

78
.import-behavior {
89

@@ -24,9 +25,32 @@
2425
}
2526
}
2627

28+
.import-file-columns,
29+
.import-record-columns {
30+
height: 400px;
31+
background: #f0f0f0;
32+
padding: 5px;
33+
}
34+
.import-file-columns {
35+
.upload-prompt {
36+
display: block;
37+
text-align: center;
38+
position: absolute;
39+
top: 50%;
40+
left: 0;
41+
right: 0;
42+
margin-top: -10px;
43+
}
44+
}
45+
46+
.import-column-bindings > ul > li,
47+
.import-record-columns > ul > li {
48+
cursor: pointer;
49+
}
50+
2751
ul li.dragged,
28-
ul.import-file-columns > li,
29-
ul.import-record-columns > li {
52+
.import-file-columns > ul > li,
53+
.import-record-columns > ul > li {
3054
background: @color-import-column-bg;
3155
border: 1px solid @color-import-column-border;
3256
border-radius: 3px;
@@ -35,11 +59,11 @@
3559
div.import-column-name > span,
3660
> span {
3761
display: block;
38-
padding: 5px;
62+
padding: @import-column-padding;
3963
}
4064
}
4165

42-
ul.import-file-columns {
66+
.import-file-columns > ul {
4367
> li {
4468
.clearfix;
4569
}
@@ -49,28 +73,28 @@
4973
width: 45%;
5074
}
5175

52-
ul.import-column-bindings {
76+
.import-column-bindings > ul {
5377
float: right;
5478
width: 55%;
5579
}
5680
}
5781

58-
ul.import-column-bindings {
59-
background: @color-import-bound-bg;
60-
padding: 0 5px 0 21px;
82+
.import-column-bindings > ul {
83+
background: darken(@color-import-bound-bg, 5%);
6184
position: relative;
62-
min-height: 30px;
85+
min-height: (@import-column-padding * 2) + 20px;
6386

6487
&:after {
65-
.triangle(right, 16px, 30px, @color-import-column-bg);
88+
.triangle(right, 18px, (@import-column-padding * 2) + 20px, @color-import-column-bg);
6689
position: absolute;
6790
top: 0;
6891
left: 0;
6992
}
7093

7194
&:before {
7295
position: absolute;
73-
padding: 5px;
96+
padding: @import-column-padding;
97+
padding-left: 26px;
7498
content: attr(data-empty-text);
7599
font-style: italic;
76100
color: rgba(0,0,0,.5);
@@ -82,7 +106,8 @@
82106

83107
> span {
84108
display: block;
85-
padding: 5px;
109+
padding: @import-column-padding;
110+
padding-left: 26px;
86111
}
87112
}
88113
}

‎modules/backend/behaviors/importexportcontroller/partials/_import_fields.htm

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,46 @@
44
<div class="col-md-6">
55
File Columns
66

7-
<ul class="import-file-columns">
8-
<li>
9-
<div class="import-column-name">
10-
<span>Name</span>
11-
</div>
12-
<ul class="import-column-bindings" data-empty-text="Drag here">
13-
</ul>
14-
</li>
15-
<li>
16-
<div class="import-column-name">
17-
<span>URL Name</span>
18-
</div>
19-
<ul class="import-column-bindings" data-empty-text="Drag here">
20-
</ul>
21-
</li>
22-
</ul>
7+
<div class="import-file-columns">
8+
<p class="upload-prompt">
9+
Please upload a valid CSV file.
10+
</p>
11+
12+
<ul style="display: none">
13+
<li>
14+
<div class="import-column-name">
15+
<span>Name</span>
16+
</div>
17+
<div class="import-column-bindings">
18+
<ul data-empty-text="Drop column here..."></ul>
19+
</div>
20+
</li>
21+
<li>
22+
<div class="import-column-name">
23+
<span>URL Name</span>
24+
</div>
25+
<div class="import-column-bindings">
26+
<ul data-empty-text="Drop column here..."></ul>
27+
</div>
28+
</li>
29+
</ul>
30+
</div>
2331
</div>
2432
<div class="col-md-6">
2533
Record Columns
2634

27-
<ul class="import-record-columns">
28-
<li><span>SKU</span></li>
29-
<li><span>Title</span></li>
30-
<li><span>Description</span></li>
31-
</ul>
35+
<div class="import-record-columns">
36+
<ul>
37+
<li><span>SKU</span></li>
38+
<li><span>Title</span></li>
39+
<li><span>Description</span></li>
40+
</ul>
41+
</div>
3242
</div>
3343
</div>
3444

3545
<script>
36-
$('ul.import-record-columns, ul.import-column-bindings').sortable({
46+
$('.import-record-columns > ul, .import-column-bindings > ul').sortable({
3747
group: 'import-fields',
3848
usePlaceholderClone: true
3949
})

‎modules/backend/behaviors/importexportcontroller/partials/_import_upload.htm

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
[ Uploader ]
3+
4+
[ Chk default-checked ]
5+
6+
First row contains column titles.
7+
Leave this checked if the first row in the CSV is used as the column titles.
8+
9+
(Otherwise Column 1,2,3,4,5,6,7,etc is used)
10+

0 commit comments

Comments
 (0)