CSS reflow

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 eventmapper_config.json
 data
+files
+assets/styles/.old

assets/scripts/KaplayMap/events.js

@@ -15,6 +15,11 @@ export class EventManager {
     let allEvents;
     if (allEventsReq.ok) allEvents = await allEventsReq.json();
 
+    allEvents.sort(
+      (e1, e2) =>
+        new Date(e2.when.start).getTime() - new Date(e1.when.start).getTime()
+    );
+
     return allEvents;
   }
 
@@ -30,6 +35,13 @@ export class EventManager {
     let allEvents;
     if (allEventsReq.ok) allEvents = await allEventsReq.json();
 
+    // Sort by date
+
+    allEvents.sort(
+      (e1, e2) =>
+        new Date(e2.when.start).getTime() - new Date(e1.when.start).getTime()
+    );
+
     this.#events.clear();
 
     allEvents.forEach((event) => this.#events.set(event.id, event));

assets/scripts/KaplayMap/localization.js

@@ -20,6 +20,7 @@ export default new Map([
       view_events_in: (name) => `Return to events in ${name}`,
       minimize: "Toggle event panel docking",
       event_inspector_header: (name) => `Event ${name}`,
+      event_inspector_host: "Host: ",
       event_inspector_back: "Return to events panel",
       event_inspector_minimize: "Toggle event inspector docking",
       zoom_in_button: "Zoom in",
@@ -30,9 +31,38 @@ export default new Map([
       search_dialog_close_button: "Close search",
       search_dialog_search_button: "Run search",
       search_dialog_header_title: "Search Events",
+      search_dialog_search_tags: "Tags",
+      search_dialog_search_by: "Search By",
+      search_filter_buttons: {
+        name: {
+          label: "Title",
+          title: "Search by title.",
+        },
+        description: {
+          label: "Description",
+          title: "Search by text found in the description.",
+        },
+        host: {
+          label: "Host",
+          title: "Search by who is hosting the event.",
+        },
+        url: {
+          label: "URL",
+          title: "Search by where the event links.",
+        },
+        floor: {
+          label: "Floor",
+          title: "Search by what floor the event is on.",
+        },
+        room: {
+          label: "Room",
+          title: "Search by what room the event is in.",
+        },
+      },
       search_filters: {
-        name: ({ src }) => `Found by title`,
+        name: ({ src }) => `Found by title`, // Already present
-        description: ({ src }) => `Found by description`,
+        description: ({ src }) => `Found by description`, // Too long to be present
+        host: ({ src }) => `Found by host ${src}`,
         url: ({ src }) => `Found by URL ${src}`,
         floor: ({ src }) => `Found by floor ${src}`,
         room: ({ src }) => `Found by room ${src}`,

assets/scripts/KaplayMap/ui.js

@@ -103,13 +103,11 @@ export class UIManager {
 
     // Floors
     this.uiElements.floors = this.ui.querySelector("#floors");
-    this.uiElements.floorButtons =
-      this.uiElements.floors.querySelector("#floor-buttons");
 
     // Menu Bar
     this.uiElements.menuBar = this.ui.querySelector("#menu-bar");
     this.uiElements.menuBarSearch = this.ui.querySelector("#menu-search");
-    this.uiElements.menuBarLang = this.ui.querySelector("#menu-lang");
+    // this.uiElements.menuBarLang = this.ui.querySelector("#menu-lang");
     this.uiElements.menuBarAbout = this.ui.querySelector("#menu-about");
 
     // Events
@@ -165,10 +163,16 @@ export class UIManager {
       this.uiElements.searchDialog.querySelector("#search-dialog-bar");
     this.uiElements.searchDialogBarInput =
       this.uiElements.searchDialogBar.querySelector("#search-dialog-input");
+    this.uiElements.searchDialogSearchTags =
+      this.uiElements.searchDialog.querySelector("#search-dialog-search-tags");
     this.uiElements.searchDialogTags =
       this.uiElements.searchDialog.querySelector("#search-dialog-tags");
     this.uiElements.searchDialogList =
       this.uiElements.searchDialog.querySelector("#search-list");
+    this.uiElements.searchDialogSearchBy =
+      this.uiElements.searchDialog.querySelector("#search-dialog-search-by");
+    this.uiElements.searchDialogFilters =
+      this.uiElements.searchDialog.querySelector("#search-dialog-filters");
 
     // Loading
     this.uiElements.loading = this.ui.querySelector("#loading");
@@ -210,8 +214,8 @@ export class UIManager {
 
     this.uiElements.menuBarSearch.title =
       currentLocalization.menu_search_button;
-    this.uiElements.menuBarLang.title =
+    // this.uiElements.menuBarLang.title =
-      currentLocalization.menu_language_button;
+    //   currentLocalization.menu_language_button;
     this.uiElements.menuBarAbout.title = currentLocalization.menu_about_button;
   }
 
@@ -231,6 +235,8 @@ export class UIManager {
   }
 
   #Search__selectedTags = [];
+  #Search__filters = ["name", "description", "host", "floor", "room"];
+  #Search__selectedFilters = ["name", "description", "host", "floor", "room"];
   #Search__allEvents = null;
 
   __updateSearchUI() {
@@ -240,21 +246,44 @@ export class UIManager {
       currentLocalization.search_dialog_close_button;
     this.uiElements.searchDialogHeaderTitle.textContent =
       currentLocalization.search_dialog_header_title;
+    this.uiElements.searchDialogSearchBy.textContent =
+      currentLocalization.search_dialog_search_by;
+    this.uiElements.searchDialogSearchTags.textContent =
+      currentLocalization.search_dialog_search_tags;
 
     const tags = this.mainmanager.getManagerVariable("tag", "allTags");
 
     this.uiElements.searchDialogTags.replaceChildren();
 
-    tags.forEach((value, id) => {
+    tags.forEach((tag, id) => {
       const tagButton = document.createElement("button");
       tagButton.classList.add("search-tag");
-      tagButton.textContent = value.name;
+      tagButton.textContent = tag.name;
-      tagButton.title = value.description;
+      tagButton.title = tag.description;
       tagButton.id = "tag-" + id;
       tagButton.addEventListener("click", () => this.__updateTagState(id));
 
       this.uiElements.searchDialogTags.appendChild(tagButton);
     });
+
+    this.uiElements.searchDialogFilters.replaceChildren();
+
+    this.#Search__filters.forEach((filter) => {
+      const filterButton = document.createElement("button");
+      filterButton.classList.add("search-tag");
+      filterButton.textContent =
+        currentLocalization.search_filter_buttons[filter].label;
+      filterButton.title =
+        currentLocalization.search_filter_buttons[filter].title;
+      filterButton.id = "filter-" + filter;
+      filterButton.addEventListener("click", () =>
+        this.__updateFilterState(filter)
+      );
+
+      this.uiElements.searchDialogFilters.appendChild(filterButton);
+    });
+
+    this.__updateSearchUISoft();
   }
 
   __updateTagState(tag) {
@@ -273,6 +302,15 @@ export class UIManager {
     this.__updateSearch();
   }
 
+  __updateFilterState(filter) {
+    const filterPos = this.#Search__selectedFilters.indexOf(filter);
+    if (filterPos >= 0) this.#Search__selectedFilters.splice(filterPos, 1);
+    else this.#Search__selectedFilters.push(filter);
+
+    this.__updateSearchUISoft();
+    this.__updateSearch();
+  }
+
   __updateSearchUISoft() {
     const tags = this.mainmanager.getManagerVariable("tag", "allTags");
 
@@ -284,6 +322,15 @@ export class UIManager {
         child.classList.add("selected");
       else child.classList.remove("selected");
     });
+
+    this.#Search__filters.forEach((filter) => {
+      const child = this.uiElements.searchDialogFilters.querySelector(
+        "#filter-" + filter
+      );
+      if (this.#Search__selectedFilters.includes(filter))
+        child.classList.add("selected");
+      else child.classList.remove("selected");
+    });
   }
 
   async __initSearch() {
@@ -314,27 +361,43 @@ export class UIManager {
         return true;
       }
       // First, filter by text
-      if (searchTransform(event.name).includes(searchValue)) {
+      if (
+        this.#Search__selectedFilters.includes("name") &&
+        searchTransform(event.name).includes(searchValue)
+      ) {
         whatFilter.push({
           type: "name",
           src: event.name,
         });
         return true;
-      } else if (searchTransform(event.description).includes(searchValue)) {
+      } else if (
+        this.#Search__selectedFilters.includes("description") &&
+        event.description &&
+        searchTransform(event.description).includes(searchValue)
+      ) {
         whatFilter.push({
           type: "description",
           src: event.description,
         });
         return true;
-      } else if (searchTransform(event.url).includes(searchValue)) {
+      } else if (
+        this.#Search__selectedFilters.includes("host") &&
+        event.host &&
+        searchTransform(event.host).includes(searchValue)
+      ) {
         whatFilter.push({
-          type: "url",
+          type: "host",
-          src: event.url,
+          src: event.host,
         });
         return true;
       } else {
         // Filter by room/floor
-        const eventFloorId = this.mainmanager.convertIdFocus(event.id, "floor");
+
+        if (this.#Search__selectedFilters.includes("floor")) {
+          const eventFloorId = this.mainmanager.convertIdFocus(
+            event.id,
+            "floor"
+          );
           const eventFloor = this.mainmanager
             .getAllFocusObject("floor")
             .get(eventFloorId);
@@ -356,7 +419,9 @@ export class UIManager {
               return true;
             }
           }
+        }
 
+        if (this.#Search__selectedFilters.includes("room")) {
           const eventRoomId = this.mainmanager.convertIdFocus(event.id, "room");
           const eventRoom = this.mainmanager
             .getAllFocusObject("room")
@@ -380,6 +445,7 @@ export class UIManager {
             }
           }
         }
+      }
     });
 
     if (this.#Search__selectedTags.length > 0)
@@ -582,24 +648,23 @@ export class UIManager {
 
     this.uiElements.eventsInspectorBody.replaceChildren();
 
-    if (currentEvent.url) {
+    if (currentEvent.host != null) {
-      const eventLink = document.createElement("p");
+      const eventHost = document.createElement("p");
-      eventLink.classList.add("widget-description");
+      eventHost.classList.add("widget-description");
-      const eventAnchor = document.createElement("a");
-      const eventURL = new URL(currentEvent.url);
 
-      eventAnchor.href = eventURL;
+      eventHost.textContent = currentLocalization.event_inspector_host;
-      eventAnchor.target = "_blank";
-      eventAnchor.textContent = eventURL.toString();
 
-      eventLink.appendChild(eventAnchor);
+      const eventHostName = document.createElement("b");
+      eventHostName.textContent = currentEvent.host;
 
-      this.uiElements.eventsInspectorBody.appendChild(eventLink);
+      eventHost.appendChild(eventHostName);
-    }
+
+      this.uiElements.eventsInspectorBody.appendChild(eventHost);
 
       this.uiElements.eventsInspectorBody.appendChild(
         document.createElement("hr")
       );
+    }
 
     const eventDescription = document.createElement("p");
     eventDescription.classList.add("widget-description");
@@ -772,7 +837,7 @@ export class UIManager {
     const currentFloors = this.mainmanager.getAllFocusObject("floor");
     const mainFocus = this.mainmanager.getCurrentFocus("floor");
     // Remove all children
-    this.uiElements.floorButtons.replaceChildren();
+    this.uiElements.floors.replaceChildren();
 
     // Put them back
     currentFloors.forEach(({ name, shortName }, id) => {
@@ -786,7 +851,7 @@ export class UIManager {
         window.location.hash = id;
       });
 
-      this.uiElements.floorButtons.appendChild(floorButton);
+      this.uiElements.floors.appendChild(floorButton);
     });
 
     if (currentFloors.size < 1) {
@@ -803,7 +868,7 @@ export class UIManager {
     const mainFocus = this.mainmanager.getCurrentFocus("floor");
 
     currentFloors.forEach((_, id) => {
-      const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
+      const child = this.uiElements.floors.querySelector("#floor-" + id);
       if (id === mainFocus) child.classList.add("selected");
       else child.classList.remove("selected");
     });

assets/styles/components.css

@@ -0,0 +1,180 @@
+/* Position components */
+.pos-topleft {
+  position: absolute;
+  --distance: 8px;
+  --size: 8px;
+  --cornermap: 0 0 var(--size) 0;
+  top: var(--distance);
+  left: var(--distance);
+}
+
+.pos-topright {
+  position: absolute;
+  --distance: 8px;
+  --size: 8px;
+  --cornermap: 0 0 0 var(--size);
+  top: var(--distance);
+  right: var(--distance);
+}
+
+.pos-botleft {
+  position: absolute;
+  --distance: 8px;
+  --size: 8px;
+  --cornermap: 0 var(--size) 0 0;
+  bottom: var(--distance);
+  left: var(--distance);
+}
+
+.pos-botright {
+  position: absolute;
+  --distance: 8px;
+  --size: 8px;
+  --cornermap: var(--size) 0 0 0;
+  bottom: var(--distance);
+  right: var(--distance);
+}
+
+.pos-flush {
+  --distance: 0;
+}
+
+/* Size components */
+
+.size-fullwidth {
+  overflow: hidden;
+  width: 100%;
+}
+
+.size-halfgap {
+  --size: 4px;
+}
+
+/* Default components */
+
+.style-sidebar {
+  display: inline-block;
+  box-sizing: border-box;
+
+  padding: 8px;
+
+  background-color: #fff4;
+
+  border-radius: var(--cornermap);
+}
+
+.style-box {
+  display: inline-block;
+  box-sizing: border-box;
+  pointer-events: all;
+
+  padding: 8px;
+
+  background-color: #202020;
+  color: #fff;
+
+  box-shadow: 0 0 8px 0 #0008;
+  border-radius: 4px;
+}
+
+.style-element-header {
+  margin-top: 4px;
+  margin-bottom: -8px;
+}
+
+.style-inner {
+  display: inline-block;
+  box-sizing: border-box;
+
+  width: 100%;
+  max-height: 100%;
+
+  padding: 8px;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  background-color: #0004;
+  color: #fff;
+
+  border-radius: 4px;
+}
+
+.style-container {
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.style-scrim {
+  pointer-events: none;
+
+  z-index: 8;
+
+  background-color: #0008;
+  opacity: 0;
+
+  transition: opacity 0.125s;
+}
+
+.style-scrim.open {
+  pointer-events: all;
+
+  opacity: 1;
+}
+
+/* Legacy components */
+
+.search-tag {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+
+/* Flags */
+
+.flag-no-pointer {
+  pointer-events: inherit;
+}
+
+/* Display components */
+
+.display-flex-row {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.display-flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.display-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.display-flex-row-scroll {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  padding: 4px 0;
+}
+
+.display-flex-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+
+  overflow: clip;
+}

assets/styles/dialog.css

@@ -1,90 +0,0 @@
-/* I fell into a burning ring of fire / Went down down down / And the flames went higher */
-#search-dialog-scrim {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100%;
-  background-color: #0008;
-  opacity: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.125s;
-}
-
-#search-dialog-scrim.open {
-  opacity: 1;
-  pointer-events: all;
-  user-select: text;
-}
-
-#search-dialog {
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: #202020;
-  color: #fff;
-  box-shadow: 0 0 8px 0 #0008;
-  flex-direction: column;
-  width: calc(100% - 16px);
-  max-width: 624px;
-}
-
-#search-dialog #search-dialog-header {
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 36px;
-  gap: 8px;
-}
-
-#search-dialog #search-dialog-bar {
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto;
-  gap: 8px;
-}
-
-#search-dialog #search-dialog-tags {
-  display: flex;
-  align-items: center;
-  overflow-x: auto;
-  overflow-y: hidden;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 0;
-}
-
-#search-dialog #search-dialog-tags .search-tag {
-  white-space: nowrap;
-  height: 24px;
-  padding: 0 8px;
-}
-
-#search-dialog #search-dialog-tags .search-tag.selected {
-  border: 1px solid #fff;
-}
-
-#search-dialog #search-list {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  padding: 8px;
-  background-color: #0002;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  display: inline-block;
-}
-
-#search-dialog #search-list .event-list-container p {
-  margin: 0;
-}
-
-#search-dialog #search-list .event-list-container p .reason {
-  opacity: 0.5;
-}

assets/styles/elements.css

@@ -0,0 +1,64 @@
+h1 {
+  font-size: 14px;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: 14px;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+p {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+hr {
+  margin: 0;
+  width: 100%;
+  background-color: currentColor;
+  color: currentColor;
+  border: 1px solid currentColor;
+  box-sizing: border-box;
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  color: white;
+  font: inherit;
+  padding: 6px;
+  border-radius: 4px;
+  min-width: 36px;
+  height: 36px;
+  border: 1px solid #0008;
+  user-select: none;
+}
+
+button:active {
+  background-color: #0004;
+}
+
+button.selected {
+  border: 1px solid #fff;
+}
+
+input {
+  background-color: #0004;
+  border: none;
+  color: white;
+  font: inherit;
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 4px;
+  height: 36px;
+  width: 100%;
+  border: 1px solid #0008;
+}
+
+a {
+  color: currentColor;
+}

assets/styles/style.css

@@ -1,6 +1,5 @@
-@keyframes load {
+@import url("./components.css");
-  to { transform: rotate(1turn) }
+@import url("./elements.css");
-}
 
 body, html {
   margin: 0;
@@ -9,93 +8,7 @@ body, html {
   box-sizing: border-box;
   overflow: hidden;
   background-color: #404040;
-}
+  font-family: sans-serif;
-
-h1.widget-heading {
-  margin: 0;
-  margin-bottom: 4px;
-  font-size: 14px;
-  /* letter-spacing: 0.25em; */
-  text-transform: uppercase;
-  /* border-bottom: 1px solid currentColor;
-  padding-bottom: 2px; */
-}
-
-p.widget-description {
-  margin: 0;
-  margin-bottom: 8px;
-  white-space: pre-line;
-  /* border-bottom: 1px solid currentColor;
-  padding-bottom: 2px; */
-}
-
-p.subtitle {
-  opacity: 0.75;
-}
-
-button:not(.link) {
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  padding: 6px;
-  border-radius: 4px;
-  height: 36px;
-  border: 1px solid #0008;
-  user-select: none;
-}
-
-button:not(.link):hover {
-  background-color: #0004;
-}
-
-button:not(.link):active {
-  background-color: #0008;
-}
-
-button:not(.link):disabled {
-  background-color: #8884;
-  color: #808080;
-}
-
-button.link {
-  display: inline;
-  background: none !important;
-  border: none;
-  padding: 0;
-  font: inherit;
-  color: currentColor;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-button:not(.link):focus,
-input:focus {
-  outline: 1px solid #808080;
-}
-
-input {
-  background-color: #0004;
-  border: none;
-  color: inherit;
-  font: inherit;
-  box-sizing: border-box;
-  padding: 6px;
-  border-radius: 4px;
-  height: 36px;
-  border: 1px solid #0008;
-}
-
-a {
-  color: currentColor;
-}
-
-.clarification {
-  text-decoration: dotted underline;
-}
-
-#map {
-  cursor: grab;
 }
 
 #map-ui {
@@ -108,204 +21,6 @@ a {
   user-select: none;
 }
 
-#map-ui #controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 8px;
-  background-color: #fff4;
-  border-radius: 0 0 0 4px;
-}
-
-#map-ui #controls.empty {
-  right: -100%;
-}
-
-#map-ui #zoom {
-  pointer-events: all;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: #202020;
-  color: #fff;
-  box-shadow: 0 0 8px 0 #0008;
-  transition: left 0.5s;
-}
-
-#map-ui #zoom .zoom-button {
-  width: 36px;
-}
-
-#map-ui #floors {
-  pointer-events: all;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: #202020;
-  color: #fff;
-  box-shadow: 0 0 8px 0 #0008;
-  transition: left 0.5s;
-}
-
-#map-ui #floors #floor-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-#map-ui #floors #floor-buttons .floor-button {
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  padding: 4px;
-}
-#map-ui #floors #floor-buttons .floor-button.selected {
-  border: 1px solid #fff;
-}
-
-#map-ui #menu-bar {
-  position: absolute;
-  left: 8px;
-  top: 8px;
-  pointer-events: all;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: #202020;
-  color: #fff;
-  box-shadow: 0 0 8px 0 #0008;
-  transition: left 0.5s;
-}
-
-#map-ui #menu-bar .menu-button {
-  width: 36px;
-}
-
-#map-ui #events-container {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  overflow: visible;
-  width: 100%;
-}
-
-#map-ui #events-container #events,
-#map-ui #events-container #events-inspector {
-  pointer-events: all;
-  /* user-select: text; */
-  box-sizing: border-box;
-  display: inline-flex;
-  position: absolute;
-  gap: 8px;
-  padding: 8px;
-  left: 8px;
-  bottom: 8px;
-  border-radius: 4px;
-  translate: 0 calc(100% + 32px);
-  background-color: #202020;
-  color: #fff;
-  box-shadow: 0 0 8px 0 #0008;
-  transition: translate 0.25s, bottom 0.25s, width 0.25s, border-radius 0.25s;
-  max-height: calc(50vh - 16px);
-  flex-direction: column;
-  width: 400px;
-  max-width: calc(100% - 16px);
-  z-index: 9;
-}
-
-#map-ui #events-container:not(.inspector) #events,
-#map-ui #events-container.inspector #events-inspector {
-  translate: 0;
-}
-
-#map-ui #events-container:not(.inspector) #events,
-#map-ui #events-container.inspector #events-inspector {
-  translate: 0;
-}
-
-#map-ui #events-container:not(.inspector).minimized #events,
-#map-ui #events-container.inspector.minimized #events-inspector {
-  bottom: 0;
-  translate: 0 calc(100% - 52px);
-}
-
-#map-ui #events-container.empty #events,
-#map-ui #events-container.empty #events-inspector {
-  translate: 0 calc(100% + 32px);
-}
-
-#map-ui #events-container.minimized #events #room-description,
-#map-ui #events-container.minimized #events-inspector #event-length {
-  display: none;
-}
-
-#map-ui #events-container.minimized #room-name {
-  margin: 0;
-}
-
-#map-ui #events-container #events #footer #footer-buttons,
-#map-ui #events-container #events-inspector #footer #footer-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-#map-ui #events-container #events-inspector p,
-#map-ui #events-container #events p {
-  margin-bottom: 0;
-}
-
-#map-ui #events-container #events-header {
-  display: grid;
-  align-items: start;
-  grid-template-columns: 36px auto 36px;
-  gap: 8px;
-}
-
-#map-ui #events-container.minimized #events-header {
-  align-items: center;
-}
-
-#map-ui #events-container #events.empty #event-list {
-  min-height: 0;
-  padding: 0 8px;
-  margin: 0;
-}
-
-#map-ui #events-container #events #event-list .event-list-container p {
-  margin: 0;
-}
-
-#map-ui #events-container #events #event-list,
-#map-ui #events-container #events-inspector #event-body {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  padding: 8px;
-  background-color: #0002;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  display: inline-block;
-}
-
-#map-ui #events-container #events #events-header button,
-#map-ui #events-container #footer #footer-buttons button,
-#map-ui #events-container #events-inspector #events-header button:not(.link) {
-  width: 36px;
-}
-
 #map-ui #loading {
   display: inline-block;
   position: absolute;
@@ -316,7 +31,7 @@ a {
   background-color: #2228;
   border-radius: 8px;
   opacity: 0;
-  z-index: 1000;
+  z-index: 9;
   transition: opacity 0.25s;
 }
 
@@ -337,12 +52,73 @@ a {
   animation: load 0.5s linear infinite;
 }
 
+#search-dialog {
+  width: calc(100% - 16px);
+  max-width: 624px;
+}
+
+#events-container #events,
+#events-container #events-inspector {
+  transition: translate 0.25s, bottom 0.25s, border-radius 0.25s;
+  width: calc(100% - 16px);
+  max-width: 400px;
+  max-height: calc(50vh - 16px);
+}
+
+#events-container.inspector #events,
+#events-container:not(.inspector) #events-inspector,
+#events-container.empty #events,
+#events-container.empty #events-inspector {
+  translate: 0 calc(100% + 32px);
+}
+
+#events-container.minimized #events,
+#events-container.inspector.minimized #events-inspector {
+  bottom: 0;
+  translate: 0 calc(100% - 52px);
+}
+
+#events-container div.size-fullwidth h1 {
+  white-space: nowrap;
+  overflow: clip;
+  text-overflow: ellipsis;
+
+  line-height: 18px;
+  transition: line-height 0.25s;
+}
+
+#events-container div.size-fullwidth p {
+  white-space: nowrap;
+  overflow: clip;
+  text-overflow: ellipsis;
+
+  height: 20px;
+  transition: height 0.25s, opacity 0.25s;
+}
+
+#events-container #events-inspector div.size-fullwidth p {
+  opacity: 0.5;
+}
+
+#events-container.minimized div.size-fullwidth h1 {
+  line-height: 36px;
+}
+
+#events-container.minimized div.size-fullwidth p {
+  height: 0;
+  opacity: 0;
+}
+
+#search-dialog div.size-fullwidth h1 {
+  line-height: 36px;
+}
+
 @media (max-width: 640px) {
-  #map-ui #events-container #events,
+  #events-container #events,
-  #map-ui #events-container #events-inspector {
+  #events-container #events-inspector {
     bottom: 0;
     border-radius: 4px 4px 0 0;
-    width: 100%;
+    max-width: none;
     max-height: 33vh;
   }
 }

pages/index.html

@@ -10,74 +10,71 @@
       rel="stylesheet"
       href="/assets/styles/style.css"
     />
-    <link
-      rel="stylesheet"
-      href="/assets/styles/dialog.css"
-    />
   </head>
   <body>
     <canvas id="map"></canvas>
     <div id="map-ui" class="loading">
-      <div id="controls" class="empty">
+      <div id="controls" class="pos-topright pos-flush style-sidebar display-flex-column empty">
-        <div id="zoom">
+        <div id="zoom" class="style-box display-flex-column">
           <button class="zoom-button" id="zoom-in">+</button>
           <button class="zoom-button" id="zoom-out" disabled>-</button>
         </div>
-        <div id="floors">
+        <div id="floors" class="style-box display-flex-column">
-          <div id="floor-buttons">
-
         </div>
       </div>
-      </div>
+      <div id="menu-bar" class="pos-topleft style-box display-flex-column">
-      <div id="menu-bar">
         <button class="menu-button" id="menu-search">Sc</button>
-        <button class="menu-button" id="menu-lang">Ln</button>
+        <!-- <button class="menu-button" id="menu-lang">Ln</button> -->
         <button class="menu-button" id="menu-about">(i)</button>
       </div>
-      <div id="events-container" class="empty">
+      <div id="events-container" class="pos-botleft pos-flush style-container empty">
-        <div id="events">
+        <div id="events" class="pos-botleft style-box display-flex-column">
-          <div id="events-header">
+          <div id="events-header" class="display-flex-header">
             <button id="back" disabled>↑</button>
-            <div>
+            <div class="size-fullwidth">
               <h1 class="widget-heading" id="room-name"></h1>
               <p class="widget-description" id="room-description"></p>
             </div>
             <button id="minimize">_</button>
           </div>
-          <div id="event-list">
+          <div id="event-list" class="style-inner display-flex-column">
 
           </div>
         </div>
-        <div id="events-inspector">
+        <div id="events-inspector" class="pos-botleft style-box display-flex-column">
-          <div id="events-header">
+          <div id="events-header" class="display-flex-header">
             <button id="back">←</button>
-            <div>
+            <div class="size-fullwidth">
               <h1 class="widget-heading" id="room-name"></h1>
               <p class="widget-description subtitle" id="event-length"></p>
             </div>
             <button id="minimize">_</button>
           </div>
           <p class="widget-description" id="room-time"></p>
-          <div id="event-body">
+          <div id="event-body" class="style-inner display-flex-column">
           </div>
         </div>
       </div>
-      <div id="search-dialog-scrim">
+      <div id="search-dialog-scrim" class="pos-topleft pos-flush style-container style-scrim display-flex-center">
-        <div id="search-dialog">
+        <div id="search-dialog" class="style-box flag-no-pointer display-flex-column">
-          <div id="search-dialog-header">
+          <div id="search-dialog-header" class="display-flex-header">
-            <div>
+            <div class="size-fullwidth">
               <h1 class="widget-heading" id="search-dialog-title"></h1>
             </div>
             <button id="close">X</button>
           </div>
-          <div id="search-dialog-bar">
+          <div id="search-dialog-bar" class="size-fullwidth display-flex-header">
             <input type="text" id="search-dialog-input" />
           </div>
-          <div id="search-dialog-tags">
+          <h2 class="style-element-header" id="search-dialog-search-tags"></h2>
+          <div id="search-dialog-tags" class="display-flex-row-scroll">
           </div>
-          <div id="search-list">
+          <div id="search-list" class="style-inner display-flex-column">
 
           </div>
+          <h2 class="style-element-header" id="search-dialog-search-by"></h2>
+          <div id="search-dialog-filters" class="display-flex-row-scroll">
+          </div>
         </div>
       </div>
       <div id="loading">

scripts/server.js

@@ -9,6 +9,7 @@ app.use("/assets", express.static('assets'));
 app.use("/", express.static('pages'));
 
 app.use("/dataServer", express.static('data')); // Example data file-server
+app.use("/files", express.static('files')); // Example file file-server
 
 app.get('/data/:lang/events/:floor', async (req, res) => {
   // Get events
@@ -26,7 +27,9 @@ app.get('/data/:lang/events/:floor', async (req, res) => {
 
     event.name = curLang.name ?? "";
     event.description = curLang.description ?? "";
-    event.url = curLang.url ?? "";
+    if (curLang.host != null)
+      event.host = curLang.host;
+    
     delete event.lang;
     return event;
   });
@@ -63,7 +66,9 @@ app.get('/data/:lang/events/', async (req, res) => {
 
     event.name = curLang.name ?? "";
     event.description = curLang.description ?? "";
-    event.url = curLang.url ?? "";
+    if (curLang.host != null)
+      event.host = curLang.host;
+
     delete event.lang;
     return event;
   });