CSS reflow

This commit is contained in:
MeowcaTheoRange 2024-06-10 12:37:53 -05:00
parent 91235defd8
commit 62dbbe5900
10 changed files with 524 additions and 483 deletions

2
.gitignore vendored
View file

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

View file

@ -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));

View file

@ -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}`,

View file

@ -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");
});

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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="zoom">
<div id="controls" class="pos-topright pos-flush style-sidebar display-flex-column empty">
<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="floor-buttons">
</div>
<div id="floors" class="style-box display-flex-column">
</div>
</div>
<div id="menu-bar">
<div id="menu-bar" class="pos-topleft style-box display-flex-column">
<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">
<div id="events-header">
<div id="events-container" class="pos-botleft pos-flush style-container empty">
<div id="events" class="pos-botleft style-box display-flex-column">
<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-header">
<div id="events-inspector" class="pos-botleft style-box display-flex-column">
<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">
<div id="search-dialog-header">
<div>
<div id="search-dialog-scrim" class="pos-topleft pos-flush style-container style-scrim display-flex-center">
<div id="search-dialog" class="style-box flag-no-pointer display-flex-column">
<div id="search-dialog-header" class="display-flex-header">
<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">

View file

@ -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;
});