zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

height limit for My Queries table

Browse Source
This commit is contained in:
lana-k
2020-11-16 13:20:02 +01:00
parent e72510f236
commit 3d059ecf0c
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/MyQueries.vue
View File

@@ -6,7 +6,7 @@
the one from scratch or the one from scratch or
<label for="import-file" class="link">import</label> from a file. <label for="import-file" class="link">import</label> from a file.
</div> </div>
<div id="my-queries-content" v-show="showedQueries.length > 0"> <div id="my-queries-content" ref="my-queries-content" v-show="showedQueries.length > 0">
<div id="my-queries-toolbar"> <div id="my-queries-toolbar">
<div id="toolbar-buttons"> <div id="toolbar-buttons">
<input <input
@@ -53,8 +53,7 @@
</div> </div>
</div> </div>
<div <div
class="table-container" class="table-container" :style="{ 'max-height': `${maxTableHeight}px` }"
ref="table-container"
> >
<table ref="table"> <table ref="table">
<tbody> <tbody>
@@ -193,7 +192,8 @@ export default {
selectedNotPredefinedCount: 0, selectedNotPredefinedCount: 0,
selectAll: false, selectAll: false,
deleteGroup: false, deleteGroup: false,
resizeObserver: null resizeObserver: null,
maxTableHeight: 0
} }
}, },
computed: { computed: {
@@ -226,12 +226,16 @@ export default {
this.queries = JSON.parse(localStorage.getItem('myQueries')) || [] this.queries = JSON.parse(localStorage.getItem('myQueries')) || []
}, },
mounted () { mounted () {
this.resizeObserver = new ResizeObserver(this.calcNameWidth) this.resizeObserver = new ResizeObserver(() => {
this.resizeObserver.observe(this.$refs.table) this.calcNameWidth()
this.calcMaxTableHeight()
})
this.resizeObserver.observe(this.$refs['my-queries-content'])
this.calcNameWidth() this.calcNameWidth()
this.calcMaxTableHeight()
}, },
beforeDestroy () { beforeDestroy () {
this.resizeObserver.unobserve(this.$refs.table) this.resizeObserver.unobserve(this.$refs['my-queries-content'])
}, },
filters: { filters: {
date (value) { date (value) {
@@ -253,6 +257,10 @@ export default {
const nameWidth = this.$refs['name-td'] ? this.$refs['name-td'][0].offsetWidth : 0 const nameWidth = this.$refs['name-td'] ? this.$refs['name-td'][0].offsetWidth : 0
this.$refs['name-th'].style = `width: ${nameWidth}px` this.$refs['name-th'].style = `width: ${nameWidth}px`
}, },
calcMaxTableHeight () {
const freeSpace = this.$refs['my-queries-content'].offsetHeight - 200
this.maxTableHeight = freeSpace - (freeSpace % 40) + 1
},
create () { create () {
this.$root.$emit('createNewQuery') this.$root.$emit('createNewQuery')
this.$router.push('/editor') this.$router.push('/editor')
@@ -451,6 +459,8 @@ export default {
#my-queries-content { #my-queries-content {
padding: 52px; padding: 52px;
height: 100%;
box-sizing: border-box;
} }
#my-queries-toolbar { #my-queries-toolbar {
@@ -467,6 +477,9 @@ export default {
max-width: 1500px; max-width: 1500px;
width: 100%; width: 100%;
} }
.fixed-header {
padding: 11px 24px;
}
.fixed-header:first-child { .fixed-header:first-child {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -475,13 +488,14 @@ export default {
.fixed-header:first-child .name-th { .fixed-header:first-child .name-th {
margin-left: 24px; margin-left: 24px;
} }
table { table {
margin-top: 0; margin-top: 0;
} }
tbody tr td { tbody tr td {
min-width: 0; min-width: 0;
line-height: 40px; height: 40px;
} }
tbody tr td:first-child { tbody tr td:first-child {