Commit e204c196 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '620-table-responsiveness' into 'master'

responsive table cards

See merge request !164
parents 3f052cc6 b95c7a4e
<template lang="pug">
div
q-resize-observer(@resize="handleResize")
// search bar, table settings ----------------------------------------------------------------------------------------
table-below-top-module(
......@@ -68,6 +69,7 @@ div
:force-grid-mode="forceGridMode"
:card-style="cardStyle"
:visible-columns="columns"
:resize-observer="resizeObserver"
)
// dialog overlay ----------------------------------------------------------------------------------------------------
......@@ -128,6 +130,7 @@ div
},
data () {
return {
resizeObserver: {},
tablePagination: undefined,
// deleteItem: null,
filter: '',
......@@ -204,6 +207,9 @@ div
}
},
methods: {
handleResize (obj) {
this.resizeObserver = obj
},
onFilter (val) {
// set filter
this.filter = val
......
<template lang="pug">
.table-card-module.q-pa-sm.col-xs-12.col-sm-6.col-md-4.col-lg-3(
.table-card-module.q-pa-sm(
:style="{width: forceGridMode ? '100%!important' : ''}"
:class="colObj"
)
mb-card.q-mb-md(
......@@ -15,10 +16,19 @@
<script>
export default {
name: 'TableCardModule',
props: ['props', 'forceGridMode', 'cardStyle', 'visibleColumns']
props: ['props', 'forceGridMode', 'cardStyle', 'visibleColumns', 'resizeObserver'],
computed: {
colObj () {
const width = this.resizeObserver.width
return {
'col-3': width > 1000,
'col-4': width > 600 && width < 999,
'col-6': width < 599
}
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment