Skip to content

Commit 7b193ae

Browse files
committed
View Export: Responsive layout + optimizations.
1 parent 2c97f85 commit 7b193ae

2 files changed

Lines changed: 30 additions & 29 deletions

File tree

js/view-action/action-export.js

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -84,33 +84,33 @@ return Backbone.View.extend({
8484
},
8585

8686
_renderHTML: function () {
87-
var h = [],
87+
var h = '',
8888
formats = this.formats,
8989
fields = this.getFields(),
9090
iMax = fields.length,
9191
useMore = iMax > 14;
9292

93-
h.push('<div class="evol-xpt panel '+this.style+'"><div class="evol-xpt-form clearfix"><div class="evol-xpt-flds">'+
93+
h+='<div class="evol-xpt panel '+this.style+'"><div class="evol-xpt-form clearfix"><div class="evol-xpt-flds">'+
9494
'<div><label>'+i18nXpt.xpFields+'</label></div>'+
95-
'<fieldset class="checkbox">');
95+
'<fieldset class="checkbox">';
9696

9797
//### list of columns to export #########################################
98-
h.push('<div><label><input type="checkbox" value="1" id="showID">'+i18nXpt.IDkey+'</label></div>');
98+
h+='<div><label><input type="checkbox" value="1" id="showID">'+i18nXpt.IDkey+'</label></div>';
9999
_.each(fields, function(f, idx){
100100
var fLabel = f.labelexport || f.label || f.labellist,
101101
fID = 'fx-' + f.id;
102102
if (fLabel === null || fLabel === '') {
103103
fLabel = '(' + fID + ')';
104104
}
105-
h.push('<div><label><input type="checkbox" value="1" id="'+fID+'" checked="checked">'+fLabel+'</label></div>');
105+
h+='<div><label><input type="checkbox" value="1" id="'+fID+'" checked="checked">'+fLabel+'</label></div>';
106106
if (idx === 10 && useMore){
107-
h.push(EvoExport.html_more2(i18nXpt.allFields));
107+
h+=EvoExport.html_more2(i18nXpt.allFields);
108108
}
109109
});
110110
if (useMore){
111-
h.push('</div>');
111+
h+='</div>';
112112
}
113-
h.push('</fieldset></div><div class="evol-xpt-para">');
113+
h+='</fieldset></div><div class="evol-xpt-para">';
114114
//##### export formats ########################################
115115
var fId = 'evol-xpt-format',
116116
formatsList = _.map(formats, function(format){
@@ -119,10 +119,10 @@ return Backbone.View.extend({
119119
text: i18nXpt['format'+format]
120120
};
121121
});
122-
h.push('<label for="'+fId+'">'+i18nXpt.format+'</label>'+
123-
uiInput.select(fId, '', 'evol-xpt-format', false, formatsList));
122+
h+='<label for="'+fId+'">'+i18nXpt.format+'</label>'+
123+
uiInput.select(fId, '', 'evol-xpt-format', false, formatsList);
124124
fId = 'xptFLH';
125-
h.push('<div class="evol-xpt-opts">'+
125+
h+='<div class="evol-xpt-opts">'+
126126
//# field (shared b/w formats - header #######
127127
'<div class="evol-FLH clearfix">'+
128128
'<label>'+uiInput.checkbox(fId, true)+i18nXpt.firstLine+'</label>'+
@@ -134,11 +134,11 @@ return Backbone.View.extend({
134134
eUI.fieldLabel('separator', i18nXpt.separator)+
135135
uiInput.text('separator', ',', '0')+
136136
'</div>'+ // </div>
137-
'</div>');
137+
'</div>';
138138
_.each(formats, function(f){
139-
h.push('<div id="xpt'+f+'" style="display:none;"></div>');
139+
h+='<div id="xpt'+f+'" style="display:none;"></div>';
140140
});
141-
h.push('</div>'+
141+
h+='</div>'+
142142
//# Preview #######
143143
'<label>'+i18nXpt.preview+'</label><div class="evol-xpt-preview">'+
144144
// ## Samples
@@ -149,9 +149,8 @@ return Backbone.View.extend({
149149
eUI.button('cancel', i18n.tools.bCancel, 'btn-default')+
150150
eUI.button('export', i18nXpt.DownloadEntity.replace('{0}', this.uiModel.namePlural), 'btn btn-primary')+
151151
'</div>'+
152-
'</div>'
153-
);
154-
return h.join('');
152+
'</div>';
153+
return h;
155154
},
156155

157156
setModel: function(model){
@@ -330,22 +329,21 @@ return Backbone.View.extend({
330329
var optTransaction = this.$('#transaction').prop('checked'),
331330
optIdInsert = this.$('#insertId').prop('checked'),
332331
sqlTable = this.$('#table').val().replace(/ /g,'_'),
333-
sql = ['INSERT INTO '+sqlTable+' ('];
332+
sql = 'INSERT INTO '+sqlTable+' (';
334333

335334
if(sqlTable===''){
336335
sqlTable = this.uiModel.name.replace(/ /g,'_');
337336
}
338337
if(showID){
339-
sql.push('ID, ');
338+
sql+='ID, ';
340339
}
341340
_.each(flds, function(f,idx){
342-
sql.push(f.id);
341+
sql+=f.id;
343342
if(idx<fMax){
344-
sql.push(', ');
343+
sql+=', ';
345344
}
346345
});
347-
sql.push(')\n VALUES (');
348-
sql = sql.join('');
346+
sql+=')\n VALUES (';
349347
// -- options
350348
if(optTransaction){
351349
h+='BEGIN TRANSACTION\n';

less/action-export.less

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@
88
}
99

1010
.evol-xpt-form {
11+
.flex-holder();
1112
border-collapse:collapse;
1213
border:0;
1314
width:100%;
1415

1516
> div {
17+
.flex-item();
1618
padding:15px;
1719
vertical-align:top;
1820
}
1921

20-
.evol-buttons{
21-
clear:left;
22-
}
23-
2422
}
2523
.evol-xpt-flds {
26-
float:left;
2724
border-right: 0 !important;
2825
width:@widthR1;
26+
min-width: 200px;
27+
max-width:245px;
28+
29+
@media only screen and (max-width: @screen1) {
30+
max-width: none;
31+
}
2932

3033
>fieldset{
3134
margin-left: 20px;
@@ -40,8 +43,8 @@
4043
}
4144

4245
.evol-xpt-para{
43-
float:left;
4446
width:@widthR2;
47+
min-width: 300px;
4548
border-left: 0 !important;
4649
}
4750

0 commit comments

Comments
 (0)