keeweb/keeweb
1
0
Fork 0
mirror of https://github.com/keeweb/keeweb.git synced 2024-06-26 07:39:04 +02:00
Code Issues Releases Wiki Activity

fixed layout issues on the import screen

Browse Source
This commit is contained in:
antelle 2019-09-28 10:18:00 +02:00
parent 17dedb6b8e
commit 85b89a2d80
4 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/scripts/framework/views/scrollable.js
View File

@ -43,8 +43,8 @@ const Scrollable = {
requestAnimationFrame(() => {
if (this.scroll) {
this.scroll.update();
const barHeight = this.scrollerBar.height();
const wrapperHeight = this.scrollerBarWrapper.height();
const barHeight = Math.round(this.scrollerBar.height());
const wrapperHeight = Math.round(this.scrollerBarWrapper.height());
this.scrollerBarWrapper.toggleClass('invisible', barHeight >= wrapperHeight);
}
});

15
app/scripts/views/import-csv-view.js
View File

@ -33,9 +33,9 @@ class ImportCsvView extends View {
super(model, options);
this.appModel = options.appModel;
this.fileName = options.fileName;
this.initScroll();
this.guessFieldMapping();
this.fillGroups();
this.initScroll();
}
render() {
@ -47,10 +47,19 @@ class ImportCsvView extends View {
});
this.createScroll({
root: this.$el.find('.import-csv__body')[0],
scroller: this.$el.find('.scroller')[0],
bar: this.$el.find('.scroller__bar')[0]
scroller: this.$el.find('.import-csv__body > .scroller')[0],
bar: this.$el.find('.import-csv__body > .scroller__bar-wrapper > .scroller__bar')[0]
});
this.pageResized();
if (!this.scroll._update) {
this.scroll._update = this.scroll.update;
this.scroll.update = this.scrollUpdate.bind(this);
}
}
scrollUpdate() {
this.scroller.css({ width: 'auto', minWidth: 'auto', maxWidth: 'auto' });
this.scroll._update();
}
returnToApp() {

10
app/styles/areas/_import-csv.scss
View File

@ -20,11 +20,15 @@
}
}
&__table-wrap {
overflow-x: auto;
width: calc(100vw - #{$base-padding-h * 3});
max-width: calc(100vw - #{$base-padding-h * 3});
@include scrollbar-on-hover;
}
&__table {
border-collapse: collapse;
width: calc(100vw - #{$base-padding-h * 2});
max-width: calc(100vw - #{$base-padding-h * 2});
overflow: hidden;
td, th {
text-align: left;
padding: $base-padding;

4
app/templates/import-csv.hbs
View File

@ -6,6 +6,8 @@
<h1>{{res 'importCsvTitle'}}</h1>
</div>
<div class="import-csv__body">
<div class="scroller">
<div class="import-csv__table-wrap">
<div class="scroller">
<table class="import-csv__table">
<thead>
@ -43,6 +45,8 @@
</tbody>
</table>
</div>
</div>
</div>
<div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
</div>
<div class="import-csv__bottom">