mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2025-01-19 01:31:34 +00:00
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:
parent
922269181c
commit
99cdcb9bdb
2
dist/css/dashboard.css
vendored
2
dist/css/dashboard.css
vendored
@ -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 */
|
||||
|
2
dist/css/dashboard.css.map
vendored
2
dist/css/dashboard.css.map
vendored
@ -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"]}
|
2
dist/js/dashboard.js
vendored
2
dist/js/dashboard.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/dashboard.js.map
vendored
2
dist/js/dashboard.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
|
@ -1,5 +1,5 @@
|
||||
{
|
||||
"1": "1587320065",
|
||||
"1": "1587322292",
|
||||
"2": "1581416390",
|
||||
"3": "1581416390",
|
||||
"4": "1581416390",
|
||||
|
Loading…
Reference in New Issue
Block a user