Updated dashboard

Disable all pagination buttons when any pagination button is still
loading (this includes jump to page input).

Rebuilt client assets and bumped v1 version string.
This commit is contained in:
Bobby Wibowo 2020-04-20 01:52:41 +07:00
parent 922269181c
commit 99cdcb9bdb
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
7 changed files with 22 additions and 10 deletions

View File

@ -1,2 +1,2 @@
body{-webkit-animation:none;animation:none}#dashboard{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.section{background:none}.menu-list a{color:#209cee;border:1px solid transparent;margin-top:-1px}.menu-list a.is-active{color:#fff;background:#209cee;border-color:#209cee}.menu-list a:not(.is-active):hover{color:#209cee;background:none;border-color:#209cee}.menu-list a[disabled]{color:#7a7a7a;pointer-events:none}.menu-list a.is-loading:after{-webkit-animation:spinAround .5s linear infinite;animation:spinAround .5s linear infinite;border-radius:290486px;border-color:transparent transparent #dbdbdb #dbdbdb;border-style:solid;border-width:2px;content:"";display:block;height:1em;width:1em;right:.5em;top:calc(50% - .5em);position:absolute!important}ul#albumsContainer{border-left:0;padding-left:0}ul#albumsContainer li{border-left:2px solid #585858;padding-left:.75em}#page.fade-in,ul#albumsContainer li{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.pagination{margin-bottom:1.25rem}.pagination a:not([disabled]){color:#eff0f1;border-color:#eff0f1;background:none}.pagination a.pagination-link:hover,.pagination a.pagination-next:not([disabled]):hover,.pagination a.pagination-previous:not([disabled]):hover{color:#000;background-color:#eff0f1;border-color:#eff0f1}.pagination a.pagination-link.is-current{color:#000;background-color:#eff0f1}.pagination a.is-loading:hover:after,.pagination a.pagination-link.is-current.is-loading:after{border-bottom-color:#000;border-left-color:#000}li[data-action=page-ellipsis]{cursor:pointer}.label{color:#bdc3c7}.menu-list li ul{border-left-color:#898b8d}.image-container .checkbox{position:absolute;top:11px;left:11px}.image-container .controls{display:flex;position:absolute;top:11px;right:11px}.image-container .controls .button{border-radius:0}.image-container .controls .button:not(:active):not(:hover){color:#fff;background-color:rgba(0,0,0,.56078)}.no-touch .image-container .checkbox{opacity:.5}.no-touch .image-container .controls,.no-touch .image-container .details{opacity:0}.no-touch .image-container:hover .checkbox,.no-touch .image-container:hover .controls,.no-touch .image-container:hover .details{opacity:1}#page{min-width:0}.table{color:#bdc3c7;background-color:#000;font-size:.75rem}.table.is-hoverable tbody tr:not(.is-selected):hover{background-color:#2f2f2f}.table td,.table th{white-space:nowrap;vertical-align:middle;border-bottom:1px solid #585858}.table th{color:#eff0f1;height:2.25em;font-weight:400}.table thead td,.table thead th{color:#eff0f1;background-color:#585858;border-bottom:0;height:31px}.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom-width:1px}.table .cell-indent{padding-left:2.25em}.is-linethrough{text-decoration:line-through}#menu.is-loading .menu-list a{cursor:progress}#statistics tr :first-child{width:50%}.expirydate{color:#bdc3c7}
body{-webkit-animation:none;animation:none}#dashboard{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.section{background:none}.menu-list a{color:#209cee;border:1px solid transparent;margin-top:-1px}.menu-list a.is-active{color:#fff;background:#209cee;border-color:#209cee}.menu-list a:not(.is-active):hover{color:#209cee;background:none;border-color:#209cee}.menu-list a[disabled]{color:#7a7a7a;pointer-events:none}.menu-list a.is-loading:after{-webkit-animation:spinAround .5s linear infinite;animation:spinAround .5s linear infinite;border-radius:290486px;border-color:transparent transparent #dbdbdb #dbdbdb;border-style:solid;border-width:2px;content:"";display:block;height:1em;width:1em;right:.5em;top:calc(50% - .5em);position:absolute!important}ul#albumsContainer{border-left:0;padding-left:0}ul#albumsContainer li{border-left:2px solid #585858;padding-left:.75em}#page.fade-in,ul#albumsContainer li{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.pagination{margin-bottom:1.25rem}.pagination a:not([disabled]){color:#eff0f1;border-color:#eff0f1;background:none}.pagination a.pagination-link:hover,.pagination a.pagination-next:not([disabled]):hover,.pagination a.pagination-previous:not([disabled]):hover{color:#000;background-color:#eff0f1;border-color:#eff0f1}.pagination a.pagination-link.is-current{color:#000;background-color:#eff0f1}.pagination a.is-loading:hover:after,.pagination a.pagination-link.is-current.is-loading:after{border-bottom-color:#000;border-left-color:#000}li[data-action=page-ellipsis]{cursor:pointer}.label{color:#bdc3c7}.menu-list li ul{border-left-color:#898b8d}.image-container .checkbox{position:absolute;top:11px;left:11px}.image-container .controls{display:flex;position:absolute;top:11px;right:11px}.image-container .controls .button{border-radius:0}.image-container .controls .button:not(:active):not(:hover){color:#fff;background-color:rgba(0,0,0,.56078)}.no-touch .image-container .checkbox{opacity:.5}.no-touch .image-container .controls,.no-touch .image-container .details{opacity:0}.no-touch .image-container:hover .checkbox,.no-touch .image-container:hover .controls,.no-touch .image-container:hover .details{opacity:1}#page{min-width:0}.table{color:#bdc3c7;background-color:#000;font-size:.75rem}.table.is-hoverable tbody tr:not(.is-selected):hover{background-color:#2f2f2f}.table td,.table th{white-space:nowrap;vertical-align:middle;border-bottom:1px solid #585858}.table th{color:#eff0f1;height:2.25em;font-weight:400}.table thead td,.table thead th{color:#eff0f1;background-color:#585858;border-bottom:0;height:31px}.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom-width:1px}.table .cell-indent{padding-left:2.25em}.is-linethrough{text-decoration:line-through}#menu.is-loading .menu-list a,.pagination.is-loading a:not([disabled]){cursor:progress}#statistics tr :first-child{width:50%}.expirydate{color:#bdc3c7}
/*# sourceMappingURL=dashboard.css.map */

View File

@ -1 +1 @@
{"version":3,"sources":["css/dashboard.css"],"names":[],"mappings":"AAAA,KACE,sBAAc,CAAd,cACF,CAEA,WACE,mCAA4B,CAA5B,2BACF,CAEA,SACE,eACF,CAEA,aACE,aAAc,CACd,4BAA6B,CAC7B,eACF,CAEA,uBACE,UAAW,CACX,kBAAmB,CACnB,oBACF,CAEA,mCACE,aAAc,CACd,eAAgB,CAChB,oBACF,CAEA,uBACE,aAAc,CACd,mBACF,CAEA,8BACE,gDAA0C,CAA1C,wCAA0C,CAE1C,sBAAuB,CAEvB,oDAA6B,CAA7B,kBAA6B,CAA7B,gBAA6B,CAC7B,UAAW,CACX,aAAc,CACd,UAAW,CACX,SAAU,CACV,UAA2B,CAC3B,oBAA0B,CAC1B,2BACF,CAEA,mBACE,aAAc,CACd,cACF,CAEA,sBACE,6BAA8B,CAC9B,kBAEF,CAEA,oCAHE,mCAA4B,CAA5B,2BAKF,CAEA,YACE,qBACF,CAEA,8BACE,aAAc,CACd,oBAAqB,CACrB,eACF,CAEA,gJAGE,UAAW,CACX,wBAAyB,CACzB,oBACF,CAEA,yCACE,UAAW,CACX,wBACF,CAEA,+FAEE,wBAAyB,CACzB,sBACF,CAEA,8BACE,cACF,CAEA,OACE,aACF,CAEA,iBACE,yBACF,CAEA,2BACE,iBAAkB,CAClB,QAAS,CACT,SACF,CAEA,2BACE,YAAa,CACb,iBAAkB,CAClB,QAAS,CACT,UACF,CAEA,mCACE,eACF,CAEA,4DACE,UAAW,CACX,mCACF,CAEA,qCACE,UACF,CAEA,yEAEE,SACF,CAEA,gIAGE,SACF,CAEA,MAEE,WACF,CAEA,OACE,aAAc,CACd,qBAAsB,CACtB,gBACF,CAEA,qDACE,wBACF,CAEA,oBAEE,kBAAmB,CACnB,qBAAsB,CACtB,+BACF,CAEA,UACE,aAAc,CACd,aAAc,CACd,eACF,CAEA,gCAEE,aAAc,CACd,wBAAyB,CACzB,eAAgB,CAChB,WACF,CAEA,4DAEE,uBACF,CAEA,oBACE,mBACF,CAEA,gBACE,4BACF,CAEA,8BACE,eACF,CAEA,4BACE,SACF,CAEA,YACE,aACF","file":"dashboard.css","sourcesContent":["body {\n animation: none\n}\n\n#dashboard {\n animation: fadeInOpacity 0.5s\n}\n\n.section {\n background: none\n}\n\n.menu-list a {\n color: #209cee;\n border: 1px solid transparent;\n margin-top: -1px\n}\n\n.menu-list a.is-active {\n color: #fff;\n background: #209cee;\n border-color: #209cee\n}\n\n.menu-list a:not(.is-active):hover {\n color: #209cee;\n background: none;\n border-color: #209cee\n}\n\n.menu-list a[disabled] {\n color: #7a7a7a;\n pointer-events: none\n}\n\n.menu-list a.is-loading::after {\n animation: spinAround 0.5s infinite linear;\n border: 2px solid #dbdbdb;\n border-radius: 290486px;\n border-right-color: transparent;\n border-top-color: transparent;\n content: \"\";\n display: block;\n height: 1em;\n width: 1em;\n right: calc(0% + (1em / 2));\n top: calc(50% - (1em / 2));\n position: absolute !important\n}\n\nul#albumsContainer {\n border-left: 0;\n padding-left: 0\n}\n\nul#albumsContainer li {\n border-left: 2px solid #585858;\n padding-left: 0.75em;\n animation: fadeInOpacity 0.5s\n}\n\n#page.fade-in {\n animation: fadeInOpacity 0.5s\n}\n\n.pagination {\n margin-bottom: 1.25rem\n}\n\n.pagination a:not([disabled]) {\n color: #eff0f1;\n border-color: #eff0f1;\n background: none\n}\n\n.pagination a.pagination-link:hover,\n.pagination a.pagination-next:not([disabled]):hover,\n.pagination a.pagination-previous:not([disabled]):hover {\n color: #000;\n background-color: #eff0f1;\n border-color: #eff0f1\n}\n\n.pagination a.pagination-link.is-current {\n color: #000;\n background-color: #eff0f1\n}\n\n.pagination a.is-loading:hover::after,\n.pagination a.pagination-link.is-current.is-loading::after {\n border-bottom-color: #000;\n border-left-color: #000\n}\n\nli[data-action=\"page-ellipsis\"] {\n cursor: pointer\n}\n\n.label {\n color: #bdc3c7\n}\n\n.menu-list li ul {\n border-left-color: #898b8d\n}\n\n.image-container .checkbox {\n position: absolute;\n top: 11px;\n left: 11px\n}\n\n.image-container .controls {\n display: flex;\n position: absolute;\n top: 11px;\n right: 11px\n}\n\n.image-container .controls .button {\n border-radius: 0\n}\n\n.image-container .controls .button:not(:active):not(:hover) {\n color: #fff;\n background-color: #0000008f\n}\n\n.no-touch .image-container .checkbox {\n opacity: 0.5\n}\n\n.no-touch .image-container .controls,\n.no-touch .image-container .details {\n opacity: 0\n}\n\n.no-touch .image-container:hover .checkbox,\n.no-touch .image-container:hover .controls,\n.no-touch .image-container:hover .details {\n opacity: 1\n}\n\n#page {\n /* fix overflow issue with flex */\n min-width: 0\n}\n\n.table {\n color: #bdc3c7;\n background-color: #000;\n font-size: 0.75rem\n}\n\n.table.is-hoverable tbody tr:not(.is-selected):hover {\n background-color: #2f2f2f\n}\n\n.table td,\n.table th {\n white-space: nowrap;\n vertical-align: middle;\n border-bottom: 1px solid #585858\n}\n\n.table th {\n color: #eff0f1;\n height: 2.25em;\n font-weight: normal\n}\n\n.table thead td,\n.table thead th {\n color: #eff0f1;\n background-color: #585858;\n border-bottom: 0;\n height: 31px\n}\n\n.table tbody tr:last-child td,\n.table tbody tr:last-child th {\n border-bottom-width: 1px\n}\n\n.table .cell-indent {\n padding-left: 2.25em\n}\n\n.is-linethrough {\n text-decoration: line-through\n}\n\n#menu.is-loading .menu-list a {\n cursor: progress\n}\n\n#statistics tr *:nth-child(1) {\n width: 50%\n}\n\n.expirydate {\n color: #bdc3c7\n}\n"]}
{"version":3,"sources":["css/dashboard.css"],"names":[],"mappings":"AAAA,KACE,sBAAc,CAAd,cACF,CAEA,WACE,mCAA4B,CAA5B,2BACF,CAEA,SACE,eACF,CAEA,aACE,aAAc,CACd,4BAA6B,CAC7B,eACF,CAEA,uBACE,UAAW,CACX,kBAAmB,CACnB,oBACF,CAEA,mCACE,aAAc,CACd,eAAgB,CAChB,oBACF,CAEA,uBACE,aAAc,CACd,mBACF,CAEA,8BACE,gDAA0C,CAA1C,wCAA0C,CAE1C,sBAAuB,CAEvB,oDAA6B,CAA7B,kBAA6B,CAA7B,gBAA6B,CAC7B,UAAW,CACX,aAAc,CACd,UAAW,CACX,SAAU,CACV,UAA2B,CAC3B,oBAA0B,CAC1B,2BACF,CAEA,mBACE,aAAc,CACd,cACF,CAEA,sBACE,6BAA8B,CAC9B,kBAEF,CAEA,oCAHE,mCAA4B,CAA5B,2BAKF,CAEA,YACE,qBACF,CAEA,8BACE,aAAc,CACd,oBAAqB,CACrB,eACF,CAEA,gJAGE,UAAW,CACX,wBAAyB,CACzB,oBACF,CAEA,yCACE,UAAW,CACX,wBACF,CAEA,+FAEE,wBAAyB,CACzB,sBACF,CAEA,8BACE,cACF,CAEA,OACE,aACF,CAEA,iBACE,yBACF,CAEA,2BACE,iBAAkB,CAClB,QAAS,CACT,SACF,CAEA,2BACE,YAAa,CACb,iBAAkB,CAClB,QAAS,CACT,UACF,CAEA,mCACE,eACF,CAEA,4DACE,UAAW,CACX,mCACF,CAEA,qCACE,UACF,CAEA,yEAEE,SACF,CAEA,gIAGE,SACF,CAEA,MAEE,WACF,CAEA,OACE,aAAc,CACd,qBAAsB,CACtB,gBACF,CAEA,qDACE,wBACF,CAEA,oBAEE,kBAAmB,CACnB,qBAAsB,CACtB,+BACF,CAEA,UACE,aAAc,CACd,aAAc,CACd,eACF,CAEA,gCAEE,aAAc,CACd,wBAAyB,CACzB,eAAgB,CAChB,WACF,CAEA,4DAEE,uBACF,CAEA,oBACE,mBACF,CAEA,gBACE,4BACF,CAEA,uEAEE,eACF,CAEA,4BACE,SACF,CAEA,YACE,aACF","file":"dashboard.css","sourcesContent":["body {\n animation: none\n}\n\n#dashboard {\n animation: fadeInOpacity 0.5s\n}\n\n.section {\n background: none\n}\n\n.menu-list a {\n color: #209cee;\n border: 1px solid transparent;\n margin-top: -1px\n}\n\n.menu-list a.is-active {\n color: #fff;\n background: #209cee;\n border-color: #209cee\n}\n\n.menu-list a:not(.is-active):hover {\n color: #209cee;\n background: none;\n border-color: #209cee\n}\n\n.menu-list a[disabled] {\n color: #7a7a7a;\n pointer-events: none\n}\n\n.menu-list a.is-loading::after {\n animation: spinAround 0.5s infinite linear;\n border: 2px solid #dbdbdb;\n border-radius: 290486px;\n border-right-color: transparent;\n border-top-color: transparent;\n content: \"\";\n display: block;\n height: 1em;\n width: 1em;\n right: calc(0% + (1em / 2));\n top: calc(50% - (1em / 2));\n position: absolute !important\n}\n\nul#albumsContainer {\n border-left: 0;\n padding-left: 0\n}\n\nul#albumsContainer li {\n border-left: 2px solid #585858;\n padding-left: 0.75em;\n animation: fadeInOpacity 0.5s\n}\n\n#page.fade-in {\n animation: fadeInOpacity 0.5s\n}\n\n.pagination {\n margin-bottom: 1.25rem\n}\n\n.pagination a:not([disabled]) {\n color: #eff0f1;\n border-color: #eff0f1;\n background: none\n}\n\n.pagination a.pagination-link:hover,\n.pagination a.pagination-next:not([disabled]):hover,\n.pagination a.pagination-previous:not([disabled]):hover {\n color: #000;\n background-color: #eff0f1;\n border-color: #eff0f1\n}\n\n.pagination a.pagination-link.is-current {\n color: #000;\n background-color: #eff0f1\n}\n\n.pagination a.is-loading:hover::after,\n.pagination a.pagination-link.is-current.is-loading::after {\n border-bottom-color: #000;\n border-left-color: #000\n}\n\nli[data-action=\"page-ellipsis\"] {\n cursor: pointer\n}\n\n.label {\n color: #bdc3c7\n}\n\n.menu-list li ul {\n border-left-color: #898b8d\n}\n\n.image-container .checkbox {\n position: absolute;\n top: 11px;\n left: 11px\n}\n\n.image-container .controls {\n display: flex;\n position: absolute;\n top: 11px;\n right: 11px\n}\n\n.image-container .controls .button {\n border-radius: 0\n}\n\n.image-container .controls .button:not(:active):not(:hover) {\n color: #fff;\n background-color: #0000008f\n}\n\n.no-touch .image-container .checkbox {\n opacity: 0.5\n}\n\n.no-touch .image-container .controls,\n.no-touch .image-container .details {\n opacity: 0\n}\n\n.no-touch .image-container:hover .checkbox,\n.no-touch .image-container:hover .controls,\n.no-touch .image-container:hover .details {\n opacity: 1\n}\n\n#page {\n /* fix overflow issue with flex */\n min-width: 0\n}\n\n.table {\n color: #bdc3c7;\n background-color: #000;\n font-size: 0.75rem\n}\n\n.table.is-hoverable tbody tr:not(.is-selected):hover {\n background-color: #2f2f2f\n}\n\n.table td,\n.table th {\n white-space: nowrap;\n vertical-align: middle;\n border-bottom: 1px solid #585858\n}\n\n.table th {\n color: #eff0f1;\n height: 2.25em;\n font-weight: normal\n}\n\n.table thead td,\n.table thead th {\n color: #eff0f1;\n background-color: #585858;\n border-bottom: 0;\n height: 31px\n}\n\n.table tbody tr:last-child td,\n.table tbody tr:last-child th {\n border-bottom-width: 1px\n}\n\n.table .cell-indent {\n padding-left: 2.25em\n}\n\n.is-linethrough {\n text-decoration: line-through\n}\n\n#menu.is-loading .menu-list a,\n.pagination.is-loading a:not([disabled]) {\n cursor: progress\n}\n\n#statistics tr *:nth-child(1) {\n width: 50%\n}\n\n.expirydate {\n color: #bdc3c7\n}\n"]}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -190,7 +190,8 @@ li[data-action="page-ellipsis"] {
text-decoration: line-through
}
#menu.is-loading .menu-list a {
#menu.is-loading .menu-list a,
.pagination.is-loading a:not([disabled]) {
cursor: progress
}

View File

@ -200,7 +200,7 @@ page.prepareDashboard = () => {
// Add onclick event listener
const item = document.querySelector(itemMenus[i].selector)
item.addEventListener('click', event => {
// This class name isn't actually being applied fast enough
// TODO: This class name isn't actually being applied fast enough
if (page.menusContainer.classList.contains('is-loading'))
return
@ -242,11 +242,18 @@ page.logout = params => {
page.updateTrigger = (trigger, newState) => {
if (!trigger) return
// Disable menus container when loading
if (newState === 'loading')
// Disable menus container and pagination when loading
if (newState === 'loading') {
page.menusContainer.classList.add('is-loading')
else
const paginations = page.dom.querySelectorAll('.pagination')
for (let i = 0; i < paginations.length; i++)
paginations[i].classList.add('is-loading')
} else {
page.menusContainer.classList.remove('is-loading')
const paginations = page.dom.querySelectorAll('.pagination.is-loading')
for (let i = 0; i < paginations.length; i++)
paginations[i].classList.remove('is-loading')
}
if (newState === 'loading') {
trigger.classList.add('is-loading')
@ -383,6 +390,10 @@ page.fadeAndScroll = disableFading => {
}
page.switchPage = (action, element) => {
// Skip if other pagination buttons are still loading
const isLoading = page.dom.querySelectorAll('.pagination.is-loading')
if (isLoading.length) return
// eslint-disable-next-line compat/compat
const params = Object.assign({
trigger: element

View File

@ -1,5 +1,5 @@
{
"1": "1587320065",
"1": "1587322292",
"2": "1581416390",
"3": "1581416390",
"4": "1581416390",