fix(QTable): top & bottom responsiveness

Author: rstoenescu

dev/components/components/data-table2.vue

@@ -94,16 +94,17 @@
     <h4>Filter, Column selection</h4>
     <q-table
       :data="data"
+      title="Filter, Column selection"
       :columns="columns"
       :filter="filter"
       :visible-columns="visibleColumns"
       row-key="name"
       color="primary"
     >
       <template slot="top-right" slot-scope="props">
-        <q-search hide-underline color="primary" v-model="filter" />
-        <q-table-columns color="primary" class="on-right" v-model="visibleColumns" :columns="columns" />
-        <q-btn color="primary" flat round dense icon="more_vert" class="on-right">
+        <q-search hide-underline color="primary" class="q-mr-sm" v-model="filter" />
+        <q-table-columns color="primary" class="q-mr-sm" v-model="visibleColumns" :columns="columns" />
+        <q-btn color="primary" flat round dense icon="more_vert">
           <q-popover ref="popover">
             <q-list link>
               <q-item @click.native="$refs.popover.hide()">

src/components/table/table-bottom.js

@@ -22,9 +22,10 @@ export default {
 
       const bottom = this.$scopedSlots.bottom
 
-      return h('div', { staticClass: 'q-table-bottom row items-center gutter-x-sm justify-between' },
-        bottom ? [ bottom(this.marginalsProps) ] : this.getPaginationRow(h)
-      )
+      return h('div', {
+        staticClass: 'q-table-bottom row items-center',
+        'class': bottom ? null : 'justify-end'
+      }, bottom ? [ bottom(this.marginalsProps) ] : this.getPaginationRow(h))
     },
     getPaginationRow (h) {
       const
@@ -33,12 +34,15 @@ export default {
         paginationSlot = this.$scopedSlots.pagination
 
       return [
-        h('div', { staticClass: 'col-auto' }, [
-          this.hasSelectionMode && this.rowsSelectedNumber > 0
-            ? (this.selectedRowsLabel || this.$q.i18n.table.selectedRows)(this.rowsSelectedNumber)
-            : ''
+        h('div', { staticClass: 'q-table-control' }, [
+          h('div', [
+            this.hasSelectionMode && this.rowsSelectedNumber > 0
+              ? (this.selectedRowsLabel || this.$q.i18n.table.selectedRows)(this.rowsSelectedNumber)
+              : ''
+          ])
         ]),
-        h('div', { staticClass: 'col-auto flex items-center no-wrap' }, [
+        h('div', { staticClass: 'q-table-separator col' }),
+        h('div', { staticClass: 'q-table-control' }, [
           h('span', { staticClass: 'q-table-bottom-item' }, [
             this.rowsPerPageLabel || this.$q.i18n.table.rowsPerPage
           ]),
@@ -59,7 +63,9 @@ export default {
                 })
               }
             }
-          }),
+          })
+        ]),
+        h('div', { staticClass: 'q-table-control' }, [
           paginationSlot
             ? paginationSlot(this.marginalsProps)
             : [

src/components/table/table-top.js

@@ -22,7 +22,7 @@ export default {
         topRight = this.$scopedSlots['top-right'],
         topSelection = this.$scopedSlots['top-selection'],
         hasSelection = this.hasSelectionMode && topSelection && this.rowsSelectedNumber > 0,
-        staticClass = 'q-table-top relative-position row no-wrap items-center',
+        staticClass = 'q-table-top relative-position row items-center',
         child = []
 
       if (top) {
@@ -34,16 +34,28 @@ export default {
       }
       else {
         if (topLeft) {
-          child.push(topLeft(this.marginalsProps))
+          child.push(
+            h('div', { staticClass: 'q-table-control' }, [
+              topLeft(this.marginalsProps)
+            ])
+          )
         }
         else if (this.title) {
-          child.push(h('div', { staticClass: 'q-table-title' }, this.title))
+          child.push(
+            h('div', { staticClass: 'q-table-control' }, [
+              h('div', { staticClass: 'q-table-title' }, this.title)
+            ])
+          )
         }
       }
 
       if (topRight) {
         child.push(h('div', { staticClass: 'q-table-separator col' }))
-        child.push(topRight(this.marginalsProps))
+        child.push(
+          h('div', { staticClass: 'q-table-control' }, [
+            topRight(this.marginalsProps)
+          ])
+        )
       }
 
       if (child.length === 0) {

src/components/table/table.ios.styl

@@ -7,7 +7,7 @@
 
 .q-table-top
   min-height 64px
-  padding 4px 24px
+  padding 8px 24px
   &:before
     content ''
     position absolute
@@ -18,17 +18,20 @@
     left 0
     opacity .2
     transition $table-transition
+  .q-table-control
+    min-height 36px
+    padding 8px 0
+    flex-wrap wrap
+.q-table-title
+  font-size 20px
+  letter-spacing 0.005em
+  font-weight 400
 .q-table-separator
   min-width 8px !important
 .q-table-nodata .q-icon
   font-size 200%
   padding-right 15px
 
-.q-table-title
-  font-size 20px
-  letter-spacing .005em
-  font-weight 400
-
 .q-table-progress
   height 0 !important
   td
@@ -44,8 +47,14 @@
 
 .q-table-bottom
   min-height 48px
-  padding 0 14px 0 24px
+  padding 4px 14px 4px 24px
   font-size 12px
+  .q-table-control
+    min-height 24px
+
+.q-table-control
+  display flex
+  align-items center
 
 .q-table-sort-icon
   transition $table-transition
@@ -148,7 +157,9 @@ table-dense()
   .q-table
     th, td
       padding 4px 8px
-    thead tr, tbody td
+    thead tr
+      height 40px
+    tbody td
       height 28px
 
   .q-table-bottom-item

src/components/table/table.mat.styl

@@ -7,7 +7,7 @@
 
 .q-table-top
   min-height 64px
-  padding 4px 24px
+  padding 8px 24px
   &:before
     content ''
     position absolute
@@ -18,17 +18,20 @@
     left 0
     opacity .2
     transition $table-transition
+  .q-table-control
+    min-height 36px
+    padding 8px 0
+    flex-wrap wrap
+.q-table-title
+  font-size 20px
+  letter-spacing 0.005em
+  font-weight 400
 .q-table-separator
   min-width 8px !important
 .q-table-nodata .q-icon
   font-size 200%
   padding-right 15px
 
-.q-table-title
-  font-size 20px
-  letter-spacing .005em
-  font-weight 400
-
 .q-table-progress
   height 0 !important
   td
@@ -44,8 +47,14 @@
 
 .q-table-bottom
   min-height 48px
-  padding 0 14px 0 24px
+  padding 4px 14px 4px 24px
   font-size 12px
+  .q-table-control
+    min-height 24px
+
+.q-table-control
+  display flex
+  align-items center
 
 .q-table-sort-icon
   transition $table-transition
@@ -148,7 +157,9 @@ table-dense()
   .q-table
     th, td
       padding 4px 8px
-    thead tr, tbody td
+    thead tr
+      height 40px
+    tbody td
       height 28px
 
   .q-table-bottom-item