Skip to content

Commit

Permalink
Add responsive scroll bar (#38)
Browse files Browse the repository at this point in the history 
* Add responsiveness via scroll bar to table

* Provide space for scrollbar

* Add built files for responsive

* Remove margin bottom

* add dist with removed margin

* Added dist containing updated upstream and PR branch
  • Loading branch information
@RIanDeLaCruz @xaksis
RIanDeLaCruz authored and xaksis committed Aug 3, 2017
1 parent bff31ed commit 8f593c0
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 84 deletions.
2 changes: 1 addition & 1 deletion dist/stats.json
View file

Large diffs are not rendered by default.

10 changes: 6 additions & 4 deletions dist/vue-good-table.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* vue-good-table v1.9.0
* vue-good-table v1.9.1
* https://github.com/xaksis/vue-good-table
* Released under the MIT License.
*/
Expand Down Expand Up @@ -927,7 +927,7 @@ var Component = __webpack_require__(82)(
/* moduleIdentifier (server only) */
null
)
Component.options.__file = "/Users/akshay/Projects/learn/vue/plugins/vue-good-table/src/components/Table.vue"
Component.options.__file = "/Volumes/Storage/OpenSource/vue-good-table/src/components/Table.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] Table.vue: functional components are not supported with templates, they should use render functions.")}

Expand Down Expand Up @@ -2014,7 +2014,7 @@ exports = module.exports = __webpack_require__(67)(false);


// module
exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Utility styles\n************************************************/\n.right-align[data-v-d89f00e8]{\n text-align: right;\n}\n.left-align[data-v-d89f00e8]{\n text-align: left;\n}\n.pull-left[data-v-d89f00e8]{\n float: left !important;\n}\n.pull-right[data-v-d89f00e8]{\n float: right !important;\n}\n.clearfix[data-v-d89f00e8]::after {\n display: block;\n content: \"\";\n clear: both;\n}\n\n/* Table specific styles\n************************************************/\ntable[data-v-d89f00e8]{\n border-collapse: collapse;\n background-color: transparent;\n margin-bottom: 20px;\n}\n.table[data-v-d89f00e8]{\n width: 100%;\n max-width: 100%;\n}\n.table.table-striped tbody tr[data-v-d89f00e8]:nth-of-type(odd) {\n background-color: rgba(35,41,53,.05);\n}\n.table.table-bordered td[data-v-d89f00e8], .table-bordered th[data-v-d89f00e8] {\n border: 1px solid #DDD;\n}\n.table td[data-v-d89f00e8], .table th[data-v-d89f00e8]:not(.line-numbers) {\n padding: .75rem 1.5rem .75rem .75rem;\n vertical-align: top;\n border-top: 1px solid #ddd;\n}\n.table.condensed td[data-v-d89f00e8], .table.condensed th[data-v-d89f00e8] {\n padding: .4rem .4rem .4rem .4rem;\n}\n.table thead th[data-v-d89f00e8], .table.condensed thead th[data-v-d89f00e8] {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n padding-right: 1.5rem;\n background-color: rgba(35,41,53,0.03);\n}\ntr.clickable[data-v-d89f00e8] {\n cursor: pointer;\n}\n.table input[data-v-d89f00e8]{\n display: block;\n width: calc(100% - 24px);\n height: 34px;\n padding: 6px 12px;\n font-size: 14px;\n line-height: 1.42857143;\n color: #555;\n background-color: #fff;\n background-image: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: inset 0 1px 1px rgba(35,41,53,.075);\n transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\n}\ntable th.sorting-asc[data-v-d89f00e8],\n table th.sorting-desc[data-v-d89f00e8] {\n color: rgba(0, 0, 0, 0.66);\n position: relative;\n}\ntable th.sorting[data-v-d89f00e8]:after,\n table th.sorting-asc[data-v-d89f00e8]:after {\n font-family: 'Material Icons';\n position: absolute;\n height: 0px;\n width: 0px;\n content: '';\n display: none;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid rgba(0, 0, 0, 0.66);\n margin-top: 6px;\n margin-left: 5px;\n}\ntable th.sorting[data-v-d89f00e8]:hover:after{\n display: inline-block;\n border-bottom-color: rgba(35,41,53,0.25);\n}\ntable th.sorting-asc[data-v-d89f00e8]:after,\n table th.sorting-desc[data-v-d89f00e8]:after {\n display: inline-block;\n}\ntable th.sorting-desc[data-v-d89f00e8]:after {\n border-top: 6px solid rgba(0, 0, 0, 0.66);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: none;\n margin-top: 8px;\n}\n\n/* Table header specific styles\n************************************************/\n.table-header[data-v-d89f00e8]{\n padding: .75rem;\n}\n.table-header .table-title[data-v-d89f00e8]{\n margin: 0px;\n font-size: 18px;\n}\n\n\n/* Table footer specific styles\n************************************************/\n.table-footer[data-v-d89f00e8]{\n /* background-color: rgba(35,41,53, 0.03); */\n background-color: rgba(35,41,53,0.05);\n border: 1px solid #DDD;\n margin-bottom: 2rem;\n margin-top: -20px;\n padding: 1rem;\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.44);\n}\n.table-footer>div[data-v-d89f00e8]{\n display: inline-block;\n}\n.pagination-controls>*[data-v-d89f00e8]{\n display: inline-block;\n}\n.pagination-controls a[data-v-d89f00e8]{\n text-decoration: none;\n color: rgba(0, 0, 0, 0.66);\n font-size: 14px;\n font-weight: 600;\n opacity: 0.8;\n}\n.pagination-controls a[data-v-d89f00e8]:hover{\n opacity: 1;\n}\n.pagination-controls a span[data-v-d89f00e8]{\n display: inline-block;\n vertical-align: middle;\n}\n.pagination-controls .info[data-v-d89f00e8]{\n margin: 0px 15px;\n font-size: 13px;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.40);\n}\n.pagination-controls a .chevron[data-v-d89f00e8]{\n width: 24px;\n height: 24px;\n border-radius: 15%;\n /* border: 1px solid rgba(35,41,53,0.2);\n background-color: #fff; */\n position: relative;\n margin: 0px 8px;\n}\n.pagination-controls .chevron[data-v-d89f00e8]::after{\n content: '';\n position: absolute;\n display: block;\n left: 50%;\n top: 50%;\n margin-top: -6px;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n}\n.pagination-controls .chevron.left[data-v-d89f00e8]::after{\n border-right: 6px solid rgba(0, 0, 0, 0.66);\n margin-left: -3px;\n}\n.pagination-controls .chevron.right[data-v-d89f00e8]::after{\n border-left: 6px solid rgba(0, 0, 0, 0.66);\n margin-left: -3px;\n}\n.table-footer select[data-v-d89f00e8] {\n display: inline-block;\n background-color: transparent;\n width: auto;\n padding: 0;\n border: 0;\n border-radius: 0;\n height: auto;\n font-size: 14px;\n margin-left: 8px;\n color: rgba(0, 0, 0, 0.55);\n font-weight: bold;\n}\n.table-footer .perpage-count[data-v-d89f00e8]{\n color: rgba(0, 0, 0, 0.55);\n font-weight: bold;\n}\n@media only screen and (max-width: 750px) {\n /* on small screens hide the info */\n.pagination-controls .info[data-v-d89f00e8]{\n display: none;\n}\n}\n\n /* Global Search \n **********************************************/\n.global-search[data-v-d89f00e8]{\n position: relative;\n padding-left: 40px;\n}\n.global-search-icon[data-v-d89f00e8]{\n position: absolute;\n left: 0px;\n max-width: 32px;\n}\n.global-search-icon > img[data-v-d89f00e8]{\n max-width: 100%;\n margin-top: 8px;\n opacity: 0.5;\n}\ntable .global-search-input[data-v-d89f00e8]{\n width: calc(100% - 30px);\n}\n\n /* Line numbers \n **********************************************/\ntable th.line-numbers[data-v-d89f00e8], .table.condensed th.line-numbers[data-v-d89f00e8]{\n background-color: rgba(35,41,53,0.05);\n padding-left: 3px;\n padding-right: 3px;\n word-wrap: break-word;\n width: 45px;\n text-align: center;\n}\n\n", ""]);
exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Utility styles\n************************************************/\n.right-align[data-v-d89f00e8]{\n text-align: right;\n}\n.left-align[data-v-d89f00e8]{\n text-align: left;\n}\n.pull-left[data-v-d89f00e8]{\n float: left !important;\n}\n.pull-right[data-v-d89f00e8]{\n float: right !important;\n}\n.clearfix[data-v-d89f00e8]::after {\n display: block;\n content: \"\";\n clear: both;\n}\n\n/* Table specific styles\n************************************************/\ntable[data-v-d89f00e8]{\n border-collapse: collapse;\n background-color: transparent;\n margin-bottom: 0px;\n}\n.table[data-v-d89f00e8]{\n width: 100%;\n max-width: 100%;\n}\n.table.table-striped tbody tr[data-v-d89f00e8]:nth-of-type(odd) {\n background-color: rgba(35,41,53,.05);\n}\n.table.table-bordered td[data-v-d89f00e8], .table-bordered th[data-v-d89f00e8] {\n border: 1px solid #DDD;\n}\n.table td[data-v-d89f00e8], .table th[data-v-d89f00e8]:not(.line-numbers) {\n padding: .75rem 1.5rem .75rem .75rem;\n vertical-align: top;\n border-top: 1px solid #ddd;\n}\n.table.condensed td[data-v-d89f00e8], .table.condensed th[data-v-d89f00e8] {\n padding: .4rem .4rem .4rem .4rem;\n}\n.table thead th[data-v-d89f00e8], .table.condensed thead th[data-v-d89f00e8] {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n padding-right: 1.5rem;\n background-color: rgba(35,41,53,0.03);\n}\ntr.clickable[data-v-d89f00e8] {\n cursor: pointer;\n}\n.table input[data-v-d89f00e8]{\n display: block;\n width: calc(100% - 24px);\n height: 34px;\n padding: 6px 12px;\n font-size: 14px;\n line-height: 1.42857143;\n color: #555;\n background-color: #fff;\n background-image: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: inset 0 1px 1px rgba(35,41,53,.075);\n transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\n}\ntable th.sorting-asc[data-v-d89f00e8],\n table th.sorting-desc[data-v-d89f00e8] {\n color: rgba(0, 0, 0, 0.66);\n position: relative;\n}\ntable th.sorting[data-v-d89f00e8]:after,\n table th.sorting-asc[data-v-d89f00e8]:after {\n font-family: 'Material Icons';\n position: absolute;\n height: 0px;\n width: 0px;\n content: '';\n display: none;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid rgba(0, 0, 0, 0.66);\n margin-top: 6px;\n margin-left: 5px;\n}\ntable th.sorting[data-v-d89f00e8]:hover:after{\n display: inline-block;\n border-bottom-color: rgba(35,41,53,0.25);\n}\ntable th.sorting-asc[data-v-d89f00e8]:after,\n table th.sorting-desc[data-v-d89f00e8]:after {\n display: inline-block;\n}\ntable th.sorting-desc[data-v-d89f00e8]:after {\n border-top: 6px solid rgba(0, 0, 0, 0.66);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: none;\n margin-top: 8px;\n}\n.responsive[data-v-d89f00e8] {\n width: 100%;\n overflow-x: scroll;\n}\n\n/* Table header specific styles\n************************************************/\n.table-header[data-v-d89f00e8]{\n padding: .75rem;\n}\n.table-header .table-title[data-v-d89f00e8]{\n margin: 0px;\n font-size: 18px;\n}\n\n\n/* Table footer specific styles\n************************************************/\n.table-footer[data-v-d89f00e8]{\n /* background-color: rgba(35,41,53, 0.03); */\n background-color: rgba(35,41,53,0.05);\n border: 1px solid #DDD;\n margin-bottom: 2rem;\n margin-top: 0px;\n padding: 1rem;\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.44);\n}\n.table-footer>div[data-v-d89f00e8]{\n display: inline-block;\n}\n.pagination-controls>*[data-v-d89f00e8]{\n display: inline-block;\n}\n.pagination-controls a[data-v-d89f00e8]{\n text-decoration: none;\n color: rgba(0, 0, 0, 0.66);\n font-size: 14px;\n font-weight: 600;\n opacity: 0.8;\n}\n.pagination-controls a[data-v-d89f00e8]:hover{\n opacity: 1;\n}\n.pagination-controls a span[data-v-d89f00e8]{\n display: inline-block;\n vertical-align: middle;\n}\n.pagination-controls .info[data-v-d89f00e8]{\n margin: 0px 15px;\n font-size: 13px;\n font-weight: bold;\n color: rgba(0, 0, 0, 0.40);\n}\n.pagination-controls a .chevron[data-v-d89f00e8]{\n width: 24px;\n height: 24px;\n border-radius: 15%;\n /* border: 1px solid rgba(35,41,53,0.2);\n background-color: #fff; */\n position: relative;\n margin: 0px 8px;\n}\n.pagination-controls .chevron[data-v-d89f00e8]::after{\n content: '';\n position: absolute;\n display: block;\n left: 50%;\n top: 50%;\n margin-top: -6px;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n}\n.pagination-controls .chevron.left[data-v-d89f00e8]::after{\n border-right: 6px solid rgba(0, 0, 0, 0.66);\n margin-left: -3px;\n}\n.pagination-controls .chevron.right[data-v-d89f00e8]::after{\n border-left: 6px solid rgba(0, 0, 0, 0.66);\n margin-left: -3px;\n}\n.table-footer select[data-v-d89f00e8] {\n display: inline-block;\n background-color: transparent;\n width: auto;\n padding: 0;\n border: 0;\n border-radius: 0;\n height: auto;\n font-size: 14px;\n margin-left: 8px;\n color: rgba(0, 0, 0, 0.55);\n font-weight: bold;\n}\n.table-footer .perpage-count[data-v-d89f00e8]{\n color: rgba(0, 0, 0, 0.55);\n font-weight: bold;\n}\n@media only screen and (max-width: 750px) {\n /* on small screens hide the info */\n.pagination-controls .info[data-v-d89f00e8]{\n display: none;\n}\n}\n\n /* Global Search\n **********************************************/\n.global-search[data-v-d89f00e8]{\n position: relative;\n padding-left: 40px;\n}\n.global-search-icon[data-v-d89f00e8]{\n position: absolute;\n left: 0px;\n max-width: 32px;\n}\n.global-search-icon > img[data-v-d89f00e8]{\n max-width: 100%;\n margin-top: 8px;\n opacity: 0.5;\n}\ntable .global-search-input[data-v-d89f00e8]{\n width: calc(100% - 30px);\n}\n\n /* Line numbers\n **********************************************/\ntable th.line-numbers[data-v-d89f00e8], .table.condensed th.line-numbers[data-v-d89f00e8]{\n background-color: rgba(35,41,53,0.05);\n padding-left: 3px;\n padding-right: 3px;\n word-wrap: break-word;\n width: 45px;\n text-align: center;\n}\n\n", ""]);

// exports

Expand Down Expand Up @@ -3102,6 +3102,8 @@ module.exports = function normalizeComponent (
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "good-table"
}, [_c('div', {
staticClass: "responsive"
}, [(_vm.title) ? _c('div', {
staticClass: "table-header clearfix"
}, [_c('h2', {
Expand Down Expand Up @@ -3194,7 +3196,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
row: row,
index: index
})], 2)
}))]), _vm._v(" "), (_vm.paginate) ? _c('div', {
}))])]), _vm._v(" "), (_vm.paginate) ? _c('div', {
staticClass: "table-footer clearfix"
}, [_c('div', {
staticClass: "datatable-length pull-left"
Expand Down
2 changes: 1 addition & 1 deletion dist/vue-good-table.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 8f593c0

Please sign in to comment.