diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index ee662229d..26dfb5624 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/frontend/src/utils/async-table/async-table.js @@ -297,19 +297,17 @@ export class AsyncTable { } _changePagesizeHandler = (event) => { - const paginationParamKey = this._asyncTableId + '-pagination'; - const pagesizeParamKey = this._asyncTableId + '-pagesize'; - const pageParamKey = this._asyncTableId + '-page'; - - const paginationParamEl = this._pagesizeForm.querySelector('[name="' + paginationParamKey + '"]'); const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href); - url.searchParams.set(pagesizeParamKey, event.target.value); - url.searchParams.set(pageParamKey, 0); + const formData = new FormData(this._pagesizeForm); - if (paginationParamEl) { - const encodedValue = encodeURIComponent(paginationParamEl.value); - url.searchParams.set(paginationParamKey, encodedValue); + for (var k of url.searchParams.keys()) { + url.searchParams.delete(k); } + + for (var kv of formData.entries()) { + url.searchParams.append(kv[0], kv[1]); + } + this._updateTableFrom(url.href); } diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 8e9b86452..9db97efb6 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -565,6 +565,7 @@ section { color: var(--color-dark); box-shadow: 0 0 4px 2px inset currentColor; padding-left: 20%; + min-height: 100px; &::before { content: 'i'; @@ -579,6 +580,10 @@ section { justify-content: center; } } + +.form-group__input > .notification { + margin: 0; +} @media (max-width: 768px) { @@ -606,3 +611,29 @@ section { .notification__content { color: var(--color-font); } + + + + +/* + "Heated" element. + Set custom property "--hotness" to a value from 0 to 1 to turn + the element's background to a color on a gradient from green to red. + + TBD: + - move to a proper place + - think about font-weight... + + Example: +
Lorem ipsum +*/ + +.heated { + --hotness: 0; + --red: calc(var(--hotness) * 200); + --green: calc(255 - calc(var(--hotness) * 255)); + --opacity: calc(calc(var(--red) / 600) + 0.1); + + font-weight: var(--weight, 600); + background-color: rgba(var(--red), var(--green), 0, var(--opacity)); +}