mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
Clean up css a bit, add scratch for upload process
This commit is contained in:
Samuel Georges
parent
3d91b7874c
commit
e25a4de8fa
@ -13,69 +13,89 @@
|
||||
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.import-behavior .import-file-columns,
|
||||
.import-behavior .import-record-columns {
|
||||
height: 400px;
|
||||
background: #f0f0f0;
|
||||
padding: 5px;
|
||||
}
|
||||
.import-behavior .import-file-columns .upload-prompt {
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.import-behavior .import-column-bindings > ul > li,
|
||||
.import-behavior .import-record-columns > ul > li {
|
||||
cursor: pointer;
|
||||
}
|
||||
.import-behavior ul li.dragged,
|
||||
.import-behavior ul.import-file-columns > li,
|
||||
.import-behavior ul.import-record-columns > li {
|
||||
background: #e8eaeb;
|
||||
.import-behavior .import-file-columns > ul > li,
|
||||
.import-behavior .import-record-columns > ul > li {
|
||||
background: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.import-behavior ul li.dragged div.import-column-name > span,
|
||||
.import-behavior ul.import-file-columns > li div.import-column-name > span,
|
||||
.import-behavior ul.import-record-columns > li div.import-column-name > span,
|
||||
.import-behavior .import-file-columns > ul > li div.import-column-name > span,
|
||||
.import-behavior .import-record-columns > ul > li div.import-column-name > span,
|
||||
.import-behavior ul li.dragged > span,
|
||||
.import-behavior ul.import-file-columns > li > span,
|
||||
.import-behavior ul.import-record-columns > li > span {
|
||||
.import-behavior .import-file-columns > ul > li > span,
|
||||
.import-behavior .import-record-columns > ul > li > span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
.import-behavior ul.import-file-columns > li:before,
|
||||
.import-behavior ul.import-file-columns > li:after {
|
||||
.import-behavior .import-file-columns > ul > li:before,
|
||||
.import-behavior .import-file-columns > ul > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.import-behavior ul.import-file-columns > li:after {
|
||||
.import-behavior .import-file-columns > ul > li:after {
|
||||
clear: both;
|
||||
}
|
||||
.import-behavior ul.import-file-columns div.import-column-name {
|
||||
.import-behavior .import-file-columns > ul div.import-column-name {
|
||||
float: left;
|
||||
width: 45%;
|
||||
}
|
||||
.import-behavior ul.import-file-columns ul.import-column-bindings {
|
||||
.import-behavior .import-file-columns > ul .import-column-bindings > ul {
|
||||
float: right;
|
||||
width: 55%;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings {
|
||||
background: #dddddd;
|
||||
padding: 0 5px 0 21px;
|
||||
.import-behavior .import-column-bindings > ul {
|
||||
background: #dadedf;
|
||||
position: relative;
|
||||
min-height: 30px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings:after {
|
||||
.import-behavior .import-column-bindings > ul:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
border-left: 16px solid #e8eaeb;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 18px solid #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings:before {
|
||||
.import-behavior .import-column-bindings > ul:before {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
padding-left: 26px;
|
||||
content: attr(data-empty-text);
|
||||
font-style: italic;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.import-behavior ul.import-column-bindings > li:not(.dragged) {
|
||||
background: #dddddd;
|
||||
.import-behavior .import-column-bindings > ul > li:not(.dragged) {
|
||||
background: #e8eaeb;
|
||||
position: relative;
|
||||
}
|
||||
.import-behavior ul.import-column-bindings > li:not(.dragged) > span {
|
||||
.import-behavior .import-column-bindings > ul > li:not(.dragged) > span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
padding-left: 26px;
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
@import "../../../../assets/less/core/boot.less";
|
||||
|
||||
@color-import-column-bg: #e8eaeb;
|
||||
@color-import-column-bg: #fff;
|
||||
@color-import-column-border: #ccc;
|
||||
@color-import-bound-bg: #ddd;
|
||||
@color-import-bound-bg: #e8eaeb;
|
||||
@import-column-padding: 10px;
|
||||
|
||||
.import-behavior {
|
||||
|
||||
@ -24,9 +25,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.import-file-columns,
|
||||
.import-record-columns {
|
||||
height: 400px;
|
||||
background: #f0f0f0;
|
||||
padding: 5px;
|
||||
}
|
||||
.import-file-columns {
|
||||
.upload-prompt {
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.import-column-bindings > ul > li,
|
||||
.import-record-columns > ul > li {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li.dragged,
|
||||
ul.import-file-columns > li,
|
||||
ul.import-record-columns > li {
|
||||
.import-file-columns > ul > li,
|
||||
.import-record-columns > ul > li {
|
||||
background: @color-import-column-bg;
|
||||
border: 1px solid @color-import-column-border;
|
||||
border-radius: 3px;
|
||||
@ -35,11 +59,11 @@
|
||||
div.import-column-name > span,
|
||||
> span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
padding: @import-column-padding;
|
||||
}
|
||||
}
|
||||
|
||||
ul.import-file-columns {
|
||||
.import-file-columns > ul {
|
||||
> li {
|
||||
.clearfix;
|
||||
}
|
||||
@ -49,20 +73,19 @@
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
ul.import-column-bindings {
|
||||
.import-column-bindings > ul {
|
||||
float: right;
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.import-column-bindings {
|
||||
background: @color-import-bound-bg;
|
||||
padding: 0 5px 0 21px;
|
||||
.import-column-bindings > ul {
|
||||
background: darken(@color-import-bound-bg, 5%);
|
||||
position: relative;
|
||||
min-height: 30px;
|
||||
min-height: (@import-column-padding * 2) + 20px;
|
||||
|
||||
&:after {
|
||||
.triangle(right, 16px, 30px, @color-import-column-bg);
|
||||
.triangle(right, 18px, (@import-column-padding * 2) + 20px, @color-import-column-bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -70,7 +93,8 @@
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
padding: @import-column-padding;
|
||||
padding-left: 26px;
|
||||
content: attr(data-empty-text);
|
||||
font-style: italic;
|
||||
color: rgba(0,0,0,.5);
|
||||
@ -82,7 +106,8 @@
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
padding: @import-column-padding;
|
||||
padding-left: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,36 +4,46 @@
|
||||
<div class="col-md-6">
|
||||
File Columns
|
||||
|
||||
<ul class="import-file-columns">
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>Name</span>
|
||||
</div>
|
||||
<ul class="import-column-bindings" data-empty-text="Drag here">
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>URL Name</span>
|
||||
</div>
|
||||
<ul class="import-column-bindings" data-empty-text="Drag here">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="import-file-columns">
|
||||
<p class="upload-prompt">
|
||||
Please upload a valid CSV file.
|
||||
</p>
|
||||
|
||||
<ul style="display: none">
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>Name</span>
|
||||
</div>
|
||||
<div class="import-column-bindings">
|
||||
<ul data-empty-text="Drop column here..."></ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="import-column-name">
|
||||
<span>URL Name</span>
|
||||
</div>
|
||||
<div class="import-column-bindings">
|
||||
<ul data-empty-text="Drop column here..."></ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
Record Columns
|
||||
|
||||
<ul class="import-record-columns">
|
||||
<li><span>SKU</span></li>
|
||||
<li><span>Title</span></li>
|
||||
<li><span>Description</span></li>
|
||||
</ul>
|
||||
<div class="import-record-columns">
|
||||
<ul>
|
||||
<li><span>SKU</span></li>
|
||||
<li><span>Title</span></li>
|
||||
<li><span>Description</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('ul.import-record-columns, ul.import-column-bindings').sortable({
|
||||
$('.import-record-columns > ul, .import-column-bindings > ul').sortable({
|
||||
group: 'import-fields',
|
||||
usePlaceholderClone: true
|
||||
})
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
|
||||
[ Uploader ]
|
||||
|
||||
[ Chk default-checked ]
|
||||
|
||||
First row contains column titles.
|
||||
Leave this checked if the first row in the CSV is used as the column titles.
|
||||
|
||||
(Otherwise Column 1,2,3,4,5,6,7,etc is used)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user