From 62dbbe590087b1a0b1c3675866217a038373f498 Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Mon, 10 Jun 2024 12:37:53 -0500 Subject: [PATCH] CSS reflow --- .gitignore | 4 +- assets/scripts/KaplayMap/events.js | 12 + assets/scripts/KaplayMap/localization.js | 34 ++- assets/scripts/KaplayMap/ui.js | 201 ++++++++----- assets/styles/components.css | 180 ++++++++++++ assets/styles/dialog.css | 90 ------ assets/styles/elements.css | 64 ++++ assets/styles/style.css | 360 +++++------------------ pages/index.html | 53 ++-- scripts/server.js | 9 +- 10 files changed, 524 insertions(+), 483 deletions(-) create mode 100644 assets/styles/components.css delete mode 100644 assets/styles/dialog.css create mode 100644 assets/styles/elements.css diff --git a/.gitignore b/.gitignore index a7c122d..ce5026d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules eventmapper_config.json -data \ No newline at end of file +data +files +assets/styles/.old \ No newline at end of file diff --git a/assets/scripts/KaplayMap/events.js b/assets/scripts/KaplayMap/events.js index 4736330..da73eb7 100644 --- a/assets/scripts/KaplayMap/events.js +++ b/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)); diff --git a/assets/scripts/KaplayMap/localization.js b/assets/scripts/KaplayMap/localization.js index dc079e9..7119a5b 100644 --- a/assets/scripts/KaplayMap/localization.js +++ b/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`, - description: ({ src }) => `Found by description`, + name: ({ src }) => `Found by title`, // Already present + 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}`, diff --git a/assets/scripts/KaplayMap/ui.js b/assets/scripts/KaplayMap/ui.js index b0b3c2c..fe7d19c 100644 --- a/assets/scripts/KaplayMap/ui.js +++ b/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 = - currentLocalization.menu_language_button; + // this.uiElements.menuBarLang.title = + // 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.title = value.description; + tagButton.textContent = tag.name; + 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,69 +361,88 @@ 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", - src: event.url, + type: "host", + src: event.host, }); return true; } else { // Filter by room/floor - const eventFloorId = this.mainmanager.convertIdFocus(event.id, "floor"); - const eventFloor = this.mainmanager - .getAllFocusObject("floor") - .get(eventFloorId); - if (eventFloor != null) { - if (searchTransform(eventFloor.name).includes(searchValue)) { - whatFilter.push({ - type: "floor", - src: eventFloor.name, - }); - return true; - } - } else { - if (searchTransform(eventFloorId).includes(searchValue)) { - whatFilter.push({ - type: "floor", - src: eventFloorId, - }); - return true; + if (this.#Search__selectedFilters.includes("floor")) { + const eventFloorId = this.mainmanager.convertIdFocus( + event.id, + "floor" + ); + const eventFloor = this.mainmanager + .getAllFocusObject("floor") + .get(eventFloorId); + + if (eventFloor != null) { + if (searchTransform(eventFloor.name).includes(searchValue)) { + whatFilter.push({ + type: "floor", + src: eventFloor.name, + }); + return true; + } + } else { + if (searchTransform(eventFloorId).includes(searchValue)) { + whatFilter.push({ + type: "floor", + src: eventFloorId, + }); + return true; + } } } - const eventRoomId = this.mainmanager.convertIdFocus(event.id, "room"); - const eventRoom = this.mainmanager - .getAllFocusObject("room") - .get(eventRoomId); + if (this.#Search__selectedFilters.includes("room")) { + const eventRoomId = this.mainmanager.convertIdFocus(event.id, "room"); + const eventRoom = this.mainmanager + .getAllFocusObject("room") + .get(eventRoomId); - if (eventRoom != null) { - if (searchTransform(eventRoom.name).includes(searchValue)) { - whatFilter.push({ - type: "room", - src: eventRoom.name, - }); - return true; - } - } else { - if (searchTransform(eventRoomId).includes(searchValue)) { - whatFilter.push({ - type: "room", - src: eventRoomId, - }); - return true; + if (eventRoom != null) { + if (searchTransform(eventRoom.name).includes(searchValue)) { + whatFilter.push({ + type: "room", + src: eventRoom.name, + }); + return true; + } + } else { + if (searchTransform(eventRoomId).includes(searchValue)) { + whatFilter.push({ + type: "room", + src: eventRoomId, + }); + return true; + } } } } @@ -582,25 +648,24 @@ export class UIManager { this.uiElements.eventsInspectorBody.replaceChildren(); - if (currentEvent.url) { - const eventLink = document.createElement("p"); - eventLink.classList.add("widget-description"); - const eventAnchor = document.createElement("a"); - const eventURL = new URL(currentEvent.url); + if (currentEvent.host != null) { + const eventHost = document.createElement("p"); + eventHost.classList.add("widget-description"); - eventAnchor.href = eventURL; - eventAnchor.target = "_blank"; - eventAnchor.textContent = eventURL.toString(); + eventHost.textContent = currentLocalization.event_inspector_host; - 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") + ); } - 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"); }); diff --git a/assets/styles/components.css b/assets/styles/components.css new file mode 100644 index 0000000..e8754d0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/styles/dialog.css b/assets/styles/dialog.css deleted file mode 100644 index 9030de0..0000000 --- a/assets/styles/dialog.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/assets/styles/elements.css b/assets/styles/elements.css new file mode 100644 index 0000000..61024f7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/styles/style.css b/assets/styles/style.css index 55447cd..e1a7635 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -1,6 +1,5 @@ -@keyframes load { - to { transform: rotate(1turn) } -} +@import url("./components.css"); +@import url("./elements.css"); body, html { margin: 0; @@ -9,93 +8,7 @@ body, html { box-sizing: border-box; overflow: hidden; background-color: #404040; -} - -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; + font-family: sans-serif; } #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, - #map-ui #events-container #events-inspector { + #events-container #events, + #events-container #events-inspector { bottom: 0; border-radius: 4px 4px 0 0; - width: 100%; + max-width: none; max-height: 33vh; } } \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index c9da32e..cb7099d 100644 --- a/pages/index.html +++ b/pages/index.html @@ -10,74 +10,71 @@ rel="stylesheet" href="/assets/styles/style.css" /> -
-
-
+
+
-
-
- -
+
-