diff --git a/public/css/app.css b/public/css/app.css index 849a583..67c6b80 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1750,10 +1750,9 @@ table.vgt-table { width: 100%; max-width: 100%; table-layout: auto; - margin-top: 1.25rem; - margin-bottom: 1.25rem; background-color: #f1f5f8; border-radius: .25em; + margin-bottom: .45rem; } table.vgt-table.vgt-fixed-header { @@ -1761,14 +1760,20 @@ table.vgt-table.vgt-fixed-header { z-index: 10; } -table.vgt-table td { - padding-top: .5rem; - padding-bottom: .5rem; - padding-left: 1rem; - padding-right: 1rem; - vertical-align: top; - border-bottom: 1px solid #b8c2cc; - color: #606f7b; +table.vgt-table .button { + padding-left: .75rem; + padding-right: .75rem; + padding-top: .25rem; + padding-bottom: .25rem; + font-size: .8rem; +} + +table.vgt-table .button + .button { + margin-left: .25rem; +} + +table.vgt-table .action { + text-align: center; } table.vgt-table tr:last-child td { @@ -1791,6 +1796,16 @@ table.vgt-table tr:first-child th:last-child { border-top-right-radius: .25em; } +table.vgt-table td { + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 1rem; + padding-right: 1rem; + vertical-align: top; + border-bottom: 1px solid #b8c2cc; + color: #606f7b; +} + table.vgt-table tr:last-child td:last-child { border-bottom-right-radius: .25em; } @@ -1799,6 +1814,33 @@ table.vgt-table tr:last-child td { border-bottom: none; } +.vgt-table thead { + border-bottom: 2px solid #b8c2cc; +} + +.vgt-table thead th { + vertical-align: bottom; + padding-right: 1rem; + background: #e9eef2; +} + +.vgt-table thead th.vgt-checkbox-col { + vertical-align: middle; +} + +.vgt-table thead th.sorting-asc [data-fa-pseudo-element=":before"] { + opacity: 1; +} + +.vgt-table thead th.sorting-desc [data-fa-pseudo-element=":after"] { + opacity: 1; +} + +.vgt-table thead th.line-numbers, +.vgt-table thead th.vgt-checkbox-col { + border-bottom: 2px solid #b8c2cc; +} + .vgt-table th { position: relative; padding-top: .5rem; @@ -1815,9 +1857,9 @@ table.vgt-table tr:last-child td { .vgt-table th.sorting .svg-inline--fa { position: absolute; + opacity: .5; font-size: .6rem; bottom: 1.2em; - opacity: .5; } .vgt-table th.sorting [data-fa-pseudo-element=":before"] { @@ -1866,29 +1908,293 @@ table.vgt-table tr:last-child td { } .vgt-table th.filter-th { - padding: .75em .75em .75em .75em; + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 1rem; + padding-right: 1rem; + border-top: 2px solid #b8c2cc; } -.vgt-table thead { +.vgt-table th.vgt-row-header { border-bottom: 2px solid #b8c2cc; + border-top: 2px solid #b8c2cc; + background-color: #e9eef2; } -.vgt-table thead th { - vertical-align: bottom; +.vgt-input { + display: block; + width: 100%; + padding-left: .5rem; + padding-right: .5rem; + line-height: 1.25; + border-width: 1px; + border-style: solid; + border-radius: .125rem; + font-size: .8rem; + padding-top: .4rem; + padding-bottom: .4rem; + border-color: #b6bec6; + -webkit-appearance: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all ease 200ms; + transition: all ease 200ms; +} + +.vgt-input::-webkit-input-placeholder { + opacity: .3; +} + +.vgt-input:-ms-input-placeholder { + opacity: .3; +} + +.vgt-input::-ms-input-placeholder { + opacity: .3; +} + +.vgt-input::placeholder { + opacity: .3; +} + +.vgt-input:focus { + outline: 0; + -webkit-box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); + box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); +} + +.vgt-select { + position: relative; + display: block; + width: 100%; + padding-left: .5rem; + padding-right: .5rem; + padding-right: 1.25rem; + line-height: 1.25; + border-width: 1px; + border-style: solid; + border-radius: .125rem; + font-size: .8rem; + padding-top: .4rem; + padding-bottom: .4rem; + border-color: #b6bec6; + background-color: #fff; + color: #606060; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E"); + background-position: right .4rem center; + background-repeat: no-repeat; + background-size: .75rem; + -webkit-appearance: none; + -webkit-transition: all 200ms ease; + transition: all 200ms ease; +} + +.vgt-select:focus { + outline: 0; + -webkit-box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); + box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); +} + +.vgt-loading { + position: absolute; + z-index: 10; + width: 100%; + margin-top: 117px; +} + +.vgt-loading__content { + padding: 30px; + width: 0; + height: 0; + font-size: 0; + background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSI2MHB4IiAgaGVpZ2h0PSI2MHB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSIyMi41IiByeD0iOS41IiByeT0iNC41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxNSIgZmlsbD0iIzYwNjA2MCI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjEuNHMiIGJlZ2luPSItMS4yODMzMzMzMzMzMzMzMzMycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9IjIyLjUiIHJ4PSI5LjUiIHJ5PSI0LjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjE1IiBmaWxsPSIjNjA2MDYwIj4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMS40cyIgYmVnaW49Ii0xLjE2NjY2NjY2NjY2NjY2NjdzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTEuMDVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuOTMzMzMzMzMzMzMzMzMzMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEyMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuODE2NjY2NjY2NjY2NjY2NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNjk5OTk5OTk5OTk5OTk5OHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIxMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNDY2NjY2NjY2NjY2NjY2NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMzQ5OTk5OTk5OTk5OTk5OXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMjMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMTE2NjY2NjY2NjY2NjY2NjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMzAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9IjIyLjUiIHJ4PSI5LjUiIHJ5PSI0LjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjE1IiBmaWxsPSIjNjA2MDYwIj4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMS40cyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48L3N2Zz4=); + background-repeat: no-repeat; +} + +.vgt-inner-wrap.is-loading { + opacity: .5; + pointer-events: none; +} + +.vgt-wrap.rtl { + direction: rtl; +} + +.vgt-wrap.rtl .vgt-global-search__actions { + margin-left: 0; + margin-left: .45rem; +} + +.vgt-wrap.rtl .vgt-table td, +.vgt-wrap.rtl .vgt-table th:not(.line-numbers) { + padding: .75em .75em .75em 1.5em; +} + +.vgt-wrap.rtl .vgt-table thead th, +.vgt-wrap.rtl .vgt-table.condensed thead th { + padding-left: 1.5em; + padding-right: .75em; +} + +.vgt-wrap.rtl .vgt-table th.sorting:after, +.vgt-wrap.rtl .vgt-table th.sorting-asc:after { + margin-right: 5px; + margin-left: 0px; +} + +.vgt-global-search { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: .45rem; + -ms-flex-wrap: no-wrap; + flex-wrap: no-wrap; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.vgt-global-search .button { + font-size: .8rem; + padding-top: .4rem; + padding-bottom: .4rem; + border: 1px solid transparent; +} + +.vgt-global-search .button + .button { + margin-left: .25rem; +} + +.vgt-global-search__input { + position: relative; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.vgt-global-search__actions { + margin-left: .45rem; +} + +.vgt-selection-info-row { + border-radius: .25rem; + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 1rem; padding-right: 1rem; + font-size: .8rem; + font-weight: 600; + background: #faf0c1; + margin-bottom: .45rem; + color: #d3aa3b; +} + +.vgt-selection-info-row a { + display: inline-block; + text-decoration: none; + margin-left: .75rem; + font-weight: 600; +} + +.vgt-wrap__footer { + font-size: .8rem; +} + +.vgt-wrap__footer .footer__row-count { + padding-top: .15rem; +} + +.vgt-wrap__footer .footer__row-count__label, +.vgt-wrap__footer .footer__row-count__select { + display: inline-block; + vertical-align: middle; +} + +.vgt-wrap__footer .footer__row-count__label { + font-weight: 600; +} + +.vgt-wrap__footer .footer__row-count__select { + width: auto; + height: auto; background: #e9eef2; + color: inherit; } -.vgt-table thead th.vgt-checkbox-col { +.vgt-wrap__footer .footer__row-count__select:focus { + outline: 0; + -webkit-box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); + box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); +} + +.vgt-wrap__footer .footer__navigation { + padding: .16rem 0; +} + +.vgt-wrap__footer .footer__navigation__page-btn, +.vgt-wrap__footer .footer__navigation__info, +.vgt-wrap__footer .footer__navigation__page-info { + display: inline-block; vertical-align: middle; } -.vgt-table thead th.sorting-asc [data-fa-pseudo-element=":before"] { - opacity: 1; +.vgt-wrap__footer .footer__navigation__page-btn { + border-radius: .25rem; + text-decoration: none; + font-weight: 600; + white-space: nowrap; } -.vgt-table thead th.sorting-desc [data-fa-pseudo-element=":after"] { - opacity: 1; +.vgt-wrap__footer .footer__navigation__page-btn:focus { + outline: 0; + -webkit-box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); + box-shadow: 0 0 0 3px rgba(201, 210, 218, .5); +} + +.vgt-wrap__footer .footer__navigation__page-btn.disabled { + opacity: .5; + cursor: not-allowed; +} + +.vgt-wrap__footer .footer__navigation__page-btn .chevron.left::after { + display: none; + position: absolute; + font-family: 'Font Awesome 5 Regular'; + content: "\F359"; +} + +.vgt-wrap__footer .footer__navigation__page-btn .chevron.right::after { + display: none; + position: absolute; + font-family: 'Font Awesome 5 Regular'; + content: "\F35A"; +} + +.vgt-wrap__footer .footer__navigation__info, +.vgt-wrap__footer .footer__navigation__page-info { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + margin-left: 1.25rem; + margin-right: 1.25rem; +} + +.vgt-wrap__footer .footer__navigation__page-info__current-entry { + width: 30px; + text-align: center; + display: inline-block; + margin: 0px 10px; + font-weight: bold; +} + +@media only screen and (max-width: 750px) { + .vgt-wrap__footer .footer__navigation__info { + display: none; + } + + .vgt-wrap__footer .footer__navigation__page-btn { + margin-left: 16px; + } } .list-reset { diff --git a/public/index.html b/public/index.html index 9b2486b..d66e9c0 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - +
diff --git a/public/javascript/app.js b/public/javascript/app.js index 9fd1929..d0f59d2 100644 --- a/public/javascript/app.js +++ b/public/javascript/app.js @@ -15982,7 +15982,7 @@ __WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["config"].search __WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["dom"].watch(); -__WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["library"].add(__WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["a" /* faBell */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["j" /* faHome */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["m" /* faUser */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["n" /* faUsers */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["g" /* faCubes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["a" /* faAngleRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["d" /* faArrowRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["c" /* faArrowLeft */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["l" /* faTimes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["f" /* faCheckCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["i" /* faExclamationTriangle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["k" /* faInfoCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["h" /* faExclamationCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["b" /* faArrowDown */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["e" /* faArrowUp */]); +__WEBPACK_IMPORTED_MODULE_2__fortawesome_fontawesome_svg_core__["library"].add(__WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["c" /* faBell */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["j" /* faHome */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["m" /* faUser */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["n" /* faUsers */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["g" /* faCubes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["a" /* faAngleRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["d" /* faArrowRight */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["c" /* faArrowLeft */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["l" /* faTimes */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["f" /* faCheckCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["i" /* faExclamationTriangle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["k" /* faInfoCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["h" /* faExclamationCircle */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["b" /* faArrowDown */], __WEBPACK_IMPORTED_MODULE_4__fortawesome_free_solid_svg_icons__["e" /* faArrowUp */], __WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["b" /* faArrowAltCircleRight */], __WEBPACK_IMPORTED_MODULE_3__fortawesome_free_regular_svg_icons__["a" /* faArrowAltCircleLeft */]); __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('Fa', __WEBPACK_IMPORTED_MODULE_5__fortawesome_vue_fontawesome__["FontAwesomeIcon"]); @@ -17583,10 +17583,10 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_20__; /* unused harmony export faAddressCard */ /* unused harmony export faAngry */ /* unused harmony export faArrowAltCircleDown */ -/* unused harmony export faArrowAltCircleLeft */ -/* unused harmony export faArrowAltCircleRight */ +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return faArrowAltCircleLeft; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return faArrowAltCircleRight; }); /* unused harmony export faArrowAltCircleUp */ -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return faBell; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return faBell; }); /* unused harmony export faBellSlash */ /* unused harmony export faBookmark */ /* unused harmony export faBuilding */ @@ -23546,14 +23546,43 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// +// + +var btn = '\n
\n \n \n \n
\n '; /* harmony default export */ __webpack_exports__["default"] = ({ data: function data() { return { - columns: [{ label: 'Name', field: 'name' }, { label: 'Age', field: 'age' }, { label: 'Created On', field: 'createdAt', dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'MMM Do YY' }, { label: 'Percent', field: 'score' }], - rows: [{ id: 1, name: "John", age: 20, createdAt: '201-10-31:9: 35 am', score: 0.03343 }, { id: 2, name: "Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 }, { id: 3, name: "Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 }, { id: 4, name: "Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 }, { id: 5, name: "Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 }, { id: 6, name: "John", age: 20, createdAt: '2011-10-31', score: 0.03343 }] + columns: [{ label: 'Name', field: 'name', filterOptions: { + enabled: false, // enable filter for this column + placeholder: 'Filter This Thing', // placeholder for filter input + filterDropdownItems: [] // dropdown (with selected values) instead of text input + } }, { label: 'Age', field: 'age' }, { label: 'Created On', field: 'createdAt', dateInputFormat: 'YYYY-MM-DD', dateOutputFormat: 'MMM Do YY' }, { label: 'Percent', field: 'score' }, { label: 'Action', field: 'btn', html: true }], + rows: [{ id: 1, name: "John", age: 20, createdAt: '201-10-31:9: 35 am', score: 0.03343, btn: btn }, { id: 2, name: "Jane", age: 24, createdAt: '2011-10-31', score: 0.03343, btn: btn }, { id: 3, name: "Susan", age: 16, createdAt: '2011-10-30', score: 0.03343, btn: btn }, { id: 4, name: "Chris", age: 55, createdAt: '2011-10-11', score: 0.03343, btn: btn }, { id: 5, name: "Dan", age: 40, createdAt: '2011-10-21', score: 0.03343, btn: btn }, { id: 6, name: "John", age: 20, createdAt: '2011-10-31', score: 0.03343, btn: btn }] + // rows: [ + // { + // mode: 'span', // span means this header will span all columns + // label: 'Header One', // this is the label that'll be used for the header + // html: false, // if this is true, label will be rendered as html + // children: [ + // { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 }, + // { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 }, + // ] + // }, + // { + // mode: 'span', // span means this header will span all columns + // label: 'Header Two', // this is the label that'll be used for the header + // html: false, // if this is true, label will be rendered as html + // children: [ + // { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 }, + // { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 }, + // ] + // } + // ] }; }, @@ -40214,7 +40243,7 @@ var render = function() { "pagination-options": { enabled: true, mode: "records", - perPage: 100, + perPage: 3, position: "bottom", perPageDropdown: [3, 7, 9], dropdownAllowAll: false, @@ -40232,6 +40261,9 @@ var render = function() { selectionInfoClass: "custom-class", selectionText: "rows selected", clearSelectionText: "clear" + }, + groupOptions: { + enabled: false } }, on: { "on-row-click": _vm.onRowClick } @@ -40255,9 +40287,15 @@ var render = function() { ] ), _vm._v(" "), - _c("div", { attrs: { slot: "emptystate" }, slot: "emptystate" }, [ - _vm._v("\n No data for table!\n ") - ]) + _c( + "div", + { + staticClass: "text-center", + attrs: { slot: "emptystate" }, + slot: "emptystate" + }, + [_c("em", [_vm._v("No data for table!")])] + ) ] ) ], diff --git a/src/javascript/app.js b/src/javascript/app.js index a1e19e7..77f085a 100644 --- a/src/javascript/app.js +++ b/src/javascript/app.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import Notifications from 'vue-notification'; import { dom, config, library } from '@fortawesome/fontawesome-svg-core'; -import { faBell } from '@fortawesome/free-regular-svg-icons'; +import { faBell, faArrowAltCircleRight, faArrowAltCircleLeft } from '@fortawesome/free-regular-svg-icons'; import { faHome, faUser, faUsers, faCubes, faAngleRight, faArrowRight, faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle, faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'; @@ -16,7 +16,7 @@ dom.watch(); library.add(faBell, faHome, faUser, faUsers, faCubes, faAngleRight, faArrowRight, faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle, - faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp); + faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp, faArrowAltCircleRight, faArrowAltCircleLeft); Vue.component('Fa', FontAwesomeIcon); diff --git a/src/javascript/components/DataTable.vue b/src/javascript/components/DataTable.vue index e17829b..f4c4d3f 100644 --- a/src/javascript/components/DataTable.vue +++ b/src/javascript/components/DataTable.vue @@ -12,7 +12,7 @@ :pagination-options="{ enabled: true, mode: 'records', - perPage: 100, + perPage: 3, position: 'bottom', perPageDropdown: [3, 7, 9], dropdownAllowAll: false, @@ -32,14 +32,17 @@ clearSelectionText: 'clear', }" @on-row-click="onRowClick" + :groupOptions="{ + enabled: false + }" >
-
- No data for table! +
+ No data for table!
@@ -48,23 +51,56 @@