Merge branch 'master' of gitlab.cip.ifi.lmu.de:jost/UniWorX

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);
+    const formData = new FormData(this._pagesizeForm);
-    url.searchParams.set(pageParamKey, 0);
 
-    if (paginationParamEl) {
+    for (var k of url.searchParams.keys()) {
-      const encodedValue = encodeURIComponent(paginationParamEl.value);
+      url.searchParams.delete(k);
-      url.searchParams.set(paginationParamKey, encodedValue);
     }
+
+    for (var kv of formData.entries()) {
+      url.searchParams.append(kv[0], kv[1]);
+    }
+
     this._updateTableFrom(url.href);
   }
 

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:
+  <div .heated style="--hotness: 0.2">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));
+}