Skip to content

Commit 97a6f80

Browse files
mgesingmgesing
committed
Resolves smartstore#964 Import: make column mapping UI perfectly fit into 1024px screen width
1 parent 8186b1e commit 97a6f80

4 files changed

Lines changed: 61 additions & 21 deletions

File tree

‎src/Presentation/SmartStore.Web/Administration/Content/admin.less‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1584,15 +1584,41 @@ table.payment-method-features td {
15841584
-------------------------------------------------------------- */
15851585
.column-mapping {
15861586
.column-one, .column-two {
1587-
width: 38%;
1587+
width: 42%;
15881588
}
15891589

1590-
.select-property, .select-column, .input-default {
1590+
.select-column, .select-property, .input-default {
15911591
width: 98%;
15921592
}
15931593

1594+
th, td, .mapping-delete, .mapping-add, .mapping-apply, .mapping-cancel {
1595+
white-space: nowrap;
1596+
padding-left: 8px;
1597+
padding-right: 8px;
1598+
}
1599+
1600+
.select2-container .select2-choice span {
1601+
margin-right: 12px;
1602+
white-space: nowrap;
1603+
}
1604+
1605+
.mapping-edit {
1606+
white-space: nowrap;
1607+
1608+
.select-column, .select-property {
1609+
width: 84%;
1610+
}
1611+
.select2-container {
1612+
float: left;
1613+
display: inline-block;
1614+
min-width: 220px;
1615+
margin-right: 4px;
1616+
}
1617+
}
1618+
15941619
.mapping-item {
15951620
.item-inner {
1621+
white-space: nowrap;
15961622
cursor: pointer;
15971623
padding: 7px 0;
15981624

‎src/Presentation/SmartStore.Web/Administration/Models/DataExchange/ImportProfileModel.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ public ImportProfileModel()
6868
public List<ColumnMappingItemModel> AvailableSourceColumns { get; set; }
6969
public List<ColumnMappingItemModel> AvailableEntityProperties { get; set; }
7070

71+
public int MaxMappingLabelTextLength { get { return 42; } }
72+
7173
public class ExtraDataModel
7274
{
7375
[SmartResourceDisplayName("Admin.DataExchange.Import.NumberOfPictures")]

‎src/Presentation/SmartStore.Web/Administration/Views/Import/_ColumnMappings.cshtml‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
<div id="PropertyMappingTemplate" class="hide">
3636
<div class="mapping-edit">
37-
<select class="select-property noskin" style="width: 550px;">
37+
<select class="select-property noskin">
3838
@foreach (var property in Model.AvailableEntityProperties)
3939
{
4040
<option value="@property.Property" data-defaultdisabled="@(property.IsDefaultDisabled ? "1" : "0")">@property.PropertyDescription</option>
@@ -47,7 +47,7 @@
4747

4848
<div id="ColumnMappingTemplate" class="hide">
4949
<div class="mapping-edit">
50-
<select class="select-column noskin" data-placeholder="@ignore" style="width: 550px;">
50+
<select class="select-column noskin" data-placeholder="@ignore">
5151
<option></option>
5252
@foreach (var column in Model.AvailableSourceColumns)
5353
{
@@ -102,10 +102,10 @@
102102
</td>
103103
<td>
104104
<button type="button" class="btn btn-block btn-warning mapping-add" disabled="disabled">
105-
<i class="fa fa-plus"></i>&nbsp;@T("Common.AddNew")
105+
<i class="fa fa-plus"></i><span class="mapping-button-label">&nbsp;@T("Common.AddNew")</span>
106106
</button>
107107
<button type="button" class="btn btn-block btn-danger hide mapping-delete">
108-
<i class="fa fa-trash"></i>&nbsp;@delete
108+
<i class="fa fa-trash"></i><span class="mapping-button-label">&nbsp;@delete</span>
109109
</button>
110110
</td>
111111
</tr>
@@ -119,25 +119,25 @@
119119
<tr>
120120
<th class="column-one">@T("Admin.DataExchange.ColumnMapping.EntityProperty")</th>
121121
<th class="column-two">@T("Admin.DataExchange.ColumnMapping.ImportField")</th>
122-
<th>@T("Admin.DataExchange.ColumnMapping.DefaultValue")</th>
123-
<th>&nbsp;</th>
122+
<th class="column-three">@T("Admin.DataExchange.ColumnMapping.DefaultValue")</th>
123+
<th class="column-four">&nbsp;</th>
124124
</tr>
125125
</thead>
126126
<tbody>
127127
@foreach (var mapping in Model.ColumnMappings)
128128
{
129129
var index = Model.ColumnMappings.IndexOf(mapping) + 1;
130130
<tr>
131-
<td class="mapping-item-cell">
131+
<td>
132132
<div class="mapping-item mapping-property">
133133
<input type="hidden" name="ColumnMapping.Property.@(index)" value="@mapping.Property" />
134134
<div class="item-inner">
135135
<span class="property-icon">
136136
<i class="text-success fa fa-fw @(mapping.Property.EmptyNull().EndsWith("]") ? "fa-globe" : "fa-chain-broken")"></i>
137137
</span>
138-
@if (mapping.PropertyDescription.Length > 50)
138+
@if (mapping.PropertyDescription.Length > Model.MaxMappingLabelTextLength)
139139
{
140-
<span class="left-label" title="@mapping.PropertyDescription">@(mapping.PropertyDescription.Substring(0, 50))…</span>
140+
<span class="left-label" title="@mapping.PropertyDescription">@(mapping.PropertyDescription.Substring(0, Model.MaxMappingLabelTextLength))…</span>
141141
}
142142
else
143143
{
@@ -147,7 +147,7 @@
147147
</div>
148148
</div>
149149
</td>
150-
<td class="mapping-item-cell">
150+
<td>
151151
<div class="mapping-item mapping-column">
152152
<input type="hidden" name="ColumnMapping.Column.@(index)" value="@mapping.Column" />
153153
<div class="item-inner">
@@ -170,7 +170,7 @@
170170
</td>
171171
<td>
172172
<button type="button" class="btn btn-block btn-danger mapping-delete">
173-
<i class="fa fa-trash"></i>&nbsp;@delete
173+
<i class="fa fa-trash"></i><span class="mapping-button-label">&nbsp;@delete</span>
174174
</button>
175175
</td>
176176
</tr>

‎src/Presentation/SmartStore.Web/Administration/Views/Import/_Update.cshtml‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,16 @@
212212
var mappedProperties = [];
213213
214214
jQuery(document).ready(function () {
215+
var isNarrowScreen = ($(window).width() <= 1280),
216+
maxMappingLableLength = @(Model.MaxMappingLabelTextLength),
217+
maxEditTextLength = 40;
218+
219+
// hide some mapping elements for narrow screen resolution
220+
if (isNarrowScreen) {
221+
maxMappingLableLength -= 10;
222+
maxEditTextLength -= 10;
223+
$('#AddMappingTemplate, #ImportColumnMappings').find('.mapping-button-label, .right-label').hide();
224+
}
215225
216226
// upload import file
217227
$('#ImportFileUploader').fileupload({
@@ -382,8 +392,8 @@
382392
isLocalized = (val.indexOf(']', val.length - 1) !== -1),
383393
text = context.find('select').find('option:selected').text();
384394
385-
if (text.length > 50) {
386-
leftLabel.text(text.substring(0, 50) + '…');
395+
if (text.length > maxMappingLableLength) {
396+
leftLabel.text(text.substring(0, maxMappingLableLength) + '…');
387397
leftLabel.attr('title', $('<div/>').html(text).text());
388398
}
389399
else {
@@ -468,11 +478,13 @@
468478
html += '</span>';
469479
}
470480
471-
html += '<span class="muted pull-right" style="font-size: 0.9em;">' + item.id + '</span>';
481+
if (!isNarrowScreen) {
482+
html += '<span class="muted pull-right" style="font-size: 0.9em;">' + item.id + '</span>';
483+
}
472484
473485
html += '<span class="ml4" style="display: inline-block;"';
474-
if (item.text.length > 40) {
475-
html += ' title="' + $('<div/>').text(item.text).html() + '">' + item.text.substring(0, 40) + '…';
486+
if (item.text.length > maxEditTextLength) {
487+
html += ' title="' + $('<div/>').text(item.text).html() + '">' + item.text.substring(0, maxEditTextLength) + '…';
476488
}
477489
else {
478490
html += '>' + item.text;
@@ -498,10 +510,10 @@
498510
499511
html += '<div>';
500512
501-
if (query && item.text !== item.id) {
513+
if (query && item.text !== item.id && !isNarrowScreen) {
502514
html += '<span class="muted pull-right" style="font-size: 0.9em;"'
503-
if (item.text.length > 40) {
504-
html += ' title="' + $('<div/>').text(item.text).html() + '">' + item.text.substring(0, 40) + '…';
515+
if (item.text.length > maxEditTextLength) {
516+
html += ' title="' + $('<div/>').text(item.text).html() + '">' + item.text.substring(0, maxEditTextLength) + '…';
505517
}
506518
else {
507519
html += '>' + item.text;

0 commit comments

Comments
 (0)