Disable jump to page input when there is only 1 page.

Disable prev/next pagination buttons if applicable.

Updated styling of disabled inputs.

Bumped v1 version string.
This commit is contained in:
Bobby Wibowo 2019-10-07 10:34:10 +07:00
parent e581edd5d7
commit 0d51833bbc
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
7 changed files with 31 additions and 14 deletions

2
dist/css/style.css vendored
View File

@ -1,2 +1,2 @@
html{background-color:#000;overflow-y:auto}body{color:#eff0f1;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}@-webkit-keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}@keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}a{color:#209cee}a:hover{color:#67c3ff}hr{background-color:#585858}.message-body code,code{background-color:#222528;border-radius:5px}.title{color:#eff0f1}.subtitle,.subtitle strong{color:#bdc3c7}.input,.select select,.textarea{color:#eff0f1;border-color:#585858;background-color:#000}.input::-moz-placeholder,.textarea::-moz-placeholder{color:#bdc3c7}.input::-webkit-input-placeholder,.textarea::-webkit-input-placeholder{color:#bdc3c7}.input:-moz-placeholder,.textarea:-moz-placeholder{color:#bdc3c7}.input:-ms-input-placeholder,.textarea:-ms-input-placeholder{color:#bdc3c7}.input.is-active,.input.is-focused,.input:active,.input:focus,.input:hover,.select select:hover,.textarea.is-active,.textarea.is-focused,.textarea:active,.textarea:focus,.textarea:hover{border-color:#209cee}.label{color:#eff0f1;font-weight:400}.help{color:#bdc3c7}.progress{background-color:#585858}.button.is-info.is-hovered [class*=" icon-"]:before,.button.is-info.is-hovered [class^=icon-]:before,.button.is-info:hover [class*=" icon-"]:before,.button.is-info:hover [class^=icon-]:before{fill:#fff}.checkbox:hover,.radio:hover{color:#7f8c8d}.select:not(.is-multiple):not(.is-loading):after,.select:not(.is-multiple):not(.is-loading):hover:after{border-color:#eff0f1}.message{background-color:#2f2f2f}.message-body{color:#eff0f1;border:0}.hero.is-fullheight>.hero-body{min-height:100vh;height:100%}.hero.is-fullheight>.hero-body>.container{width:100%} html{background-color:#000;overflow-y:auto}body{color:#eff0f1;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}@-webkit-keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}@keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}a{color:#209cee}a:hover{color:#67c3ff}hr{background-color:#585858}.message-body code,code{background-color:#222528;border-radius:5px}.title{color:#eff0f1}.subtitle,.subtitle strong{color:#bdc3c7}.input,.select select,.textarea{color:#eff0f1;border-color:#585858;background-color:#000}.input::-moz-placeholder,.textarea::-moz-placeholder{color:#bdc3c7}.input::-webkit-input-placeholder,.textarea::-webkit-input-placeholder{color:#bdc3c7}.input:-moz-placeholder,.textarea:-moz-placeholder{color:#bdc3c7}.input:-ms-input-placeholder,.textarea:-ms-input-placeholder{color:#bdc3c7}.input.is-active,.input.is-focused,.input:active,.input:focus,.input:not([disabled]):hover,.select fieldset:not([disabled]) select:hover,.select select:not([disabled]):hover,.textarea.is-active,.textarea.is-focused,.textarea:active,.textarea:focus,.textarea:not([disabled]):hover,fieldset:not([disabled]) .input:hover,fieldset:not([disabled]) .select select:hover,fieldset:not([disabled]) .textarea:hover{border-color:#209cee}.input[disabled],.select fieldset[disabled] select,.select select[disabled],.textarea[disabled],fieldset[disabled] .input,fieldset[disabled] .select select,fieldset[disabled] .textarea{border-color:#585858;background-color:#2f2f2f}.label{color:#eff0f1;font-weight:400}.help{color:#bdc3c7}.progress{background-color:#585858}.button.is-info.is-hovered [class*=" icon-"]:before,.button.is-info.is-hovered [class^=icon-]:before,.button.is-info:hover [class*=" icon-"]:before,.button.is-info:hover [class^=icon-]:before{fill:#fff}.checkbox:hover,.radio:hover{color:#7f8c8d}.select:not(.is-multiple):not(.is-loading):after,.select:not(.is-multiple):not(.is-loading):hover:after{border-color:#eff0f1}.message{background-color:#2f2f2f}.message-body{color:#eff0f1;border:0}.hero.is-fullheight>.hero-body{min-height:100vh;height:100%}.hero.is-fullheight>.hero-body>.container{width:100%}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

View File

@ -1 +1 @@
{"version":3,"sources":["css/style.css"],"names":[],"mappings":"AAAA,KACE,qBAAsB,CACtB,eACF,CAEA,KACE,aAAc,CACd,mCAA4B,CAA5B,2BACF,CAEA,iCACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,yBACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,EACE,aACF,CAEA,QACE,aACF,CAEA,GACE,wBACF,CAEA,wBAEE,wBAAyB,CACzB,iBACF,CAEA,OACE,aACF,CAMA,2BACE,aACF,CAEA,gCAGE,aAAc,CACd,oBAAqB,CACrB,qBACF,CAEA,qDAEE,aACF,CAEA,uEAEE,aACF,CAEA,mDAEE,aACF,CAEA,6DAEE,aACF,CAQA,0LAQE,oBACF,CAEA,OACE,aAAc,CACd,eACF,CAEA,MACE,aACF,CAEA,UACE,wBACF,CAEA,gMAIE,SACF,CAEA,6BAEE,aACF,CAMA,wGACE,oBACF,CAEA,SACE,wBACF,CAEA,cACE,aAAc,CACd,QACF,CAGA,+BACE,gBAAiB,CACjB,WACF,CAGA,0CACE,UACF","file":"style.css","sourcesContent":["html {\n background-color: #000;\n overflow-y: auto\n}\n\nbody {\n color: #eff0f1;\n animation: fadeInOpacity 0.5s\n}\n\n@-webkit-keyframes fadeInOpacity {\n 0% {\n opacity: 0\n }\n\n 100% {\n opacity: 1\n }\n}\n\n@keyframes fadeInOpacity {\n 0% {\n opacity: 0\n }\n\n 100% {\n opacity: 1\n }\n}\n\na {\n color: #209cee\n}\n\na:hover {\n color: #67c3ff\n}\n\nhr {\n background-color: #585858\n}\n\ncode,\n.message-body code {\n background-color: #222528;\n border-radius: 5px\n}\n\n.title {\n color: #eff0f1\n}\n\n.subtitle {\n color: #bdc3c7\n}\n\n.subtitle strong {\n color: #bdc3c7\n}\n\n.input,\n.select select,\n.textarea {\n color: #eff0f1;\n border-color: #585858;\n background-color: #000\n}\n\n.input::-moz-placeholder,\n.textarea::-moz-placeholder {\n color: #bdc3c7\n}\n\n.input::-webkit-input-placeholder,\n.textarea::-webkit-input-placeholder {\n color: #bdc3c7\n}\n\n.input:-moz-placeholder,\n.textarea:-moz-placeholder {\n color: #bdc3c7\n}\n\n.input:-ms-input-placeholder,\n.textarea:-ms-input-placeholder {\n color: #bdc3c7\n}\n\n.input:hover,\n.select select:hover,\n.textarea:hover {\n border-color: #209cee\n}\n\n.input.is-active,\n.input.is-focused,\n.input:active,\n.input:focus,\n.textarea.is-active,\n.textarea.is-focused,\n.textarea:active,\n.textarea:focus {\n border-color: #209cee\n}\n\n.label {\n color: #eff0f1;\n font-weight: normal\n}\n\n.help {\n color: #bdc3c7\n}\n\n.progress {\n background-color: #585858\n}\n\n.button.is-info.is-hovered [class^=\"icon-\"]::before,\n.button.is-info.is-hovered [class*=\" icon-\"]::before,\n.button.is-info:hover [class^=\"icon-\"]::before,\n.button.is-info:hover [class*=\" icon-\"]::before {\n fill: #fff\n}\n\n.checkbox:hover,\n.radio:hover {\n color: #7f8c8d\n}\n\n.select:not(.is-multiple):not(.is-loading)::after {\n border-color: #eff0f1\n}\n\n.select:not(.is-multiple):not(.is-loading):hover::after {\n border-color: #eff0f1\n}\n\n.message {\n background-color: #2f2f2f\n}\n\n.message-body {\n color: #eff0f1;\n border: 0\n}\n\n/* https://github.com/philipwalton/flexbugs#flexbug-3 */\n.hero.is-fullheight > .hero-body {\n min-height: 100vh;\n height: 100%\n}\n\n/* https://github.com/philipwalton/flexbugs#flexbug-2 */\n.hero.is-fullheight > .hero-body > .container {\n width: 100%\n}\n"]} {"version":3,"sources":["css/style.css"],"names":[],"mappings":"AAAA,KACE,qBAAsB,CACtB,eACF,CAEA,KACE,aAAc,CACd,mCAA4B,CAA5B,2BACF,CAEA,iCACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,yBACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,EACE,aACF,CAEA,QACE,aACF,CAEA,GACE,wBACF,CAEA,wBAEE,wBAAyB,CACzB,iBACF,CAEA,OACE,aACF,CAMA,2BACE,aACF,CAEA,gCAGE,aAAc,CACd,oBAAqB,CACrB,qBACF,CAEA,qDAEE,aACF,CAEA,uEAEE,aACF,CAEA,mDAEE,aACF,CAEA,6DAEE,aACF,CAYA,qZAQE,oBACF,CAEA,yLAOE,oBAAqB,CACrB,wBACF,CAEA,OACE,aAAc,CACd,eACF,CAEA,MACE,aACF,CAEA,UACE,wBACF,CAEA,gMAIE,SACF,CAEA,6BAEE,aACF,CAMA,wGACE,oBACF,CAEA,SACE,wBACF,CAEA,cACE,aAAc,CACd,QACF,CAGA,+BACE,gBAAiB,CACjB,WACF,CAGA,0CACE,UACF","file":"style.css","sourcesContent":["html {\n background-color: #000;\n overflow-y: auto\n}\n\nbody {\n color: #eff0f1;\n animation: fadeInOpacity 0.5s\n}\n\n@-webkit-keyframes fadeInOpacity {\n 0% {\n opacity: 0\n }\n\n 100% {\n opacity: 1\n }\n}\n\n@keyframes fadeInOpacity {\n 0% {\n opacity: 0\n }\n\n 100% {\n opacity: 1\n }\n}\n\na {\n color: #209cee\n}\n\na:hover {\n color: #67c3ff\n}\n\nhr {\n background-color: #585858\n}\n\ncode,\n.message-body code {\n background-color: #222528;\n border-radius: 5px\n}\n\n.title {\n color: #eff0f1\n}\n\n.subtitle {\n color: #bdc3c7\n}\n\n.subtitle strong {\n color: #bdc3c7\n}\n\n.input,\n.select select,\n.textarea {\n color: #eff0f1;\n border-color: #585858;\n background-color: #000\n}\n\n.input::-moz-placeholder,\n.textarea::-moz-placeholder {\n color: #bdc3c7\n}\n\n.input::-webkit-input-placeholder,\n.textarea::-webkit-input-placeholder {\n color: #bdc3c7\n}\n\n.input:-moz-placeholder,\n.textarea:-moz-placeholder {\n color: #bdc3c7\n}\n\n.input:-ms-input-placeholder,\n.textarea:-ms-input-placeholder {\n color: #bdc3c7\n}\n\n.input:not([disabled]):hover,\n.select fieldset:not([disabled]) select:hover,\n.select select:not([disabled]):hover,\n.textarea:not([disabled]):hover,\nfieldset:not([disabled]) .input:hover,\nfieldset:not([disabled]) .select select:hover,\nfieldset:not([disabled]) .textarea:hover {\n border-color: #209cee\n}\n\n.input.is-active,\n.input.is-focused,\n.input:active,\n.input:focus,\n.textarea.is-active,\n.textarea.is-focused,\n.textarea:active,\n.textarea:focus {\n border-color: #209cee\n}\n\n.input[disabled],\n.select fieldset[disabled] select,\n.select select[disabled],\n.textarea[disabled],\nfieldset[disabled] .input,\nfieldset[disabled] .select select,\nfieldset[disabled] .textarea {\n border-color: #585858;\n background-color: #2f2f2f\n}\n\n.label {\n color: #eff0f1;\n font-weight: normal\n}\n\n.help {\n color: #bdc3c7\n}\n\n.progress {\n background-color: #585858\n}\n\n.button.is-info.is-hovered [class^=\"icon-\"]::before,\n.button.is-info.is-hovered [class*=\" icon-\"]::before,\n.button.is-info:hover [class^=\"icon-\"]::before,\n.button.is-info:hover [class*=\" icon-\"]::before {\n fill: #fff\n}\n\n.checkbox:hover,\n.radio:hover {\n color: #7f8c8d\n}\n\n.select:not(.is-multiple):not(.is-loading)::after {\n border-color: #eff0f1\n}\n\n.select:not(.is-multiple):not(.is-loading):hover::after {\n border-color: #eff0f1\n}\n\n.message {\n background-color: #2f2f2f\n}\n\n.message-body {\n color: #eff0f1;\n border: 0\n}\n\n/* https://github.com/philipwalton/flexbugs#flexbug-3 */\n.hero.is-fullheight > .hero-body {\n min-height: 100vh;\n height: 100%\n}\n\n/* https://github.com/philipwalton/flexbugs#flexbug-2 */\n.hero.is-fullheight > .hero-body > .container {\n width: 100%\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

@ -86,9 +86,13 @@ code,
color: #bdc3c7 color: #bdc3c7
} }
.input:hover, .input:not([disabled]):hover,
.select select:hover, .select fieldset:not([disabled]) select:hover,
.textarea:hover { .select select:not([disabled]):hover,
.textarea:not([disabled]):hover,
fieldset:not([disabled]) .input:hover,
fieldset:not([disabled]) .select select:hover,
fieldset:not([disabled]) .textarea:hover {
border-color: #209cee border-color: #209cee
} }
@ -103,6 +107,17 @@ code,
border-color: #209cee border-color: #209cee
} }
.input[disabled],
.select fieldset[disabled] select,
.select select[disabled],
.textarea[disabled],
fieldset[disabled] .input,
fieldset[disabled] .select select,
fieldset[disabled] .textarea {
border-color: #585858;
background-color: #2f2f2f
}
.label { .label {
color: #eff0f1; color: #eff0f1;
font-weight: normal font-weight: normal

View File

@ -431,10 +431,11 @@ page.getUploads = (params = {}) => {
return swal('An error occurred!', response.data.description, 'error') return swal('An error occurred!', response.data.description, 'error')
} }
const pages = Math.ceil(response.data.count / 25)
const files = response.data.files const files = response.data.files
if (params.pageNum && (files.length === 0)) if (params.pageNum && (files.length === 0))
if (params.autoPage) { if (params.autoPage) {
params.pageNum = Math.ceil(response.data.count / 25) - 1 params.pageNum = pages - 1
return page.getUploads(params) return page.getUploads(params)
} else { } else {
page.updateTrigger(params.trigger) page.updateTrigger(params.trigger)
@ -483,7 +484,7 @@ page.getUploads = (params = {}) => {
<form class="prevent-default"> <form class="prevent-default">
<div class="field has-addons"> <div class="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
<input id="jumpToPage" class="input is-small" type="number" value="${params.pageNum + 1}"> <input id="jumpToPage" class="input is-small" type="number" min="1" max="${pages}" value="${params.pageNum + 1}"${pages === 1 ? ' disabled' : ''}>
</div> </div>
<div class="control"> <div class="control">
<button type="submit" class="button is-small is-info is-outlined" title="Jump to page" data-action="jump-to-page"> <button type="submit" class="button is-small is-info is-outlined" title="Jump to page" data-action="jump-to-page">
@ -1753,9 +1754,10 @@ page.getUsers = (params = {}) => {
return swal('An error occurred!', response.data.description, 'error') return swal('An error occurred!', response.data.description, 'error')
} }
const pages = Math.ceil(response.data.count / 25)
if (params.pageNum && (response.data.users.length === 0)) if (params.pageNum && (response.data.users.length === 0))
if (params.autoPage) { if (params.autoPage) {
params.pageNum = Math.ceil(response.data.count / 25) - 1 params.pageNum = pages - 1
return page.getUsers(params) return page.getUsers(params)
} else { } else {
page.updateTrigger(params.trigger) page.updateTrigger(params.trigger)
@ -1774,7 +1776,7 @@ page.getUsers = (params = {}) => {
<form class="prevent-default"> <form class="prevent-default">
<div class="field has-addons"> <div class="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
<input id="jumpToPage" class="input is-small" type="number" value="${params.pageNum + 1}"> <input id="jumpToPage" class="input is-small" type="number" min="1" max="${pages}" value="${params.pageNum + 1}"${pages === 1 ? ' disabled' : ''}>
</div> </div>
<div class="control"> <div class="control">
<button type="submit" class="button is-small is-info is-outlined" title="Jump to page" data-action="jump-to-page"> <button type="submit" class="button is-small is-info is-outlined" title="Jump to page" data-action="jump-to-page">
@ -2158,8 +2160,8 @@ page.paginate = (totalItems, itemsPerPage, currentPage) => {
return ` return `
<nav class="pagination is-centered is-small"> <nav class="pagination is-centered is-small">
<a class="button pagination-previous" data-action="page-prev">Previous</a> <a class="button pagination-previous" data-action="page-prev"${currentPage === 1 ? ' disabled' : ''}>Previous</a>
<a class="button pagination-next" data-action="page-next">Next page</a> <a class="button pagination-next" data-action="page-next"${currentPage === numPages ? ' disabled' : ''}>Next page</a>
<ul class="pagination-list">${template}</ul> <ul class="pagination-list">${template}</ul>
</nav> </nav>
` `

View File

@ -1,5 +1,5 @@
{ {
"1": "1570418053", "1": "1570419183",
"2": "1568894058", "2": "1568894058",
"3": "1568894058", "3": "1568894058",
"4": "1568894058", "4": "1568894058",