diff --git a/webapp/src/css/style.scss b/webapp/src/css/style.scss index a7849c4..2876fbc 100644 --- a/webapp/src/css/style.scss +++ b/webapp/src/css/style.scss @@ -35,6 +35,9 @@ html { } #bottomLinks { + @media screen and (max-height: 500px) { + display: none; + } font-family: 'Pixelated MS Sans Serif', Arial, sans-serif; background-color: silver; box-shadow: @@ -77,6 +80,13 @@ html { } } +#logonWindow { + min-width: 250px; + @media screen and (min-width: 500px) { + min-width: 500px; + }; +} + #logonWindowLogo { background-color: #ffffff; margin: 0; @@ -105,16 +115,14 @@ html { #logonUsername, #logonRoom { align-self: flex-end; + width: 81%; margin-left: auto; - width: 300px; - margin-right: 90px; margin-bottom: 10px; } #logonButton { align-self: flex-end; margin-left: auto; - margin-right: 90px; } #roomSettingsBody { @@ -175,7 +183,8 @@ html { inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; - height: 3vh; + min-height: 20px; + max-height: 3vh; padding: 4px; padding-left: 0px; } @@ -184,7 +193,6 @@ html { flex-grow: 1; margin-right: 4px; margin-left: 4px; - height: 100%; } #chatSendBtn { diff --git a/webapp/src/ts/MSWindow.ts b/webapp/src/ts/MSWindow.ts index b545c6c..0310b7a 100644 --- a/webapp/src/ts/MSWindow.ts +++ b/webapp/src/ts/MSWindow.ts @@ -1,6 +1,6 @@ export interface MSWindowConfig { - minWidth: number; - minHeight: number; + minWidth?: number | undefined; + minHeight?: number | undefined; maxWidth?: number | undefined; maxHeight?: number | undefined; startPosition: MSWindowStartPosition; // TODO: Should be a union with the enum and a "Point" (containing X and Y) @@ -27,8 +27,10 @@ export class MSWindow { this.wnd = wnd; this.shown = false; this.config = config; - this.wnd.style.minWidth = config.minWidth + 'px'; - this.wnd.style.minHeight = config.minHeight + 'px'; + this.x = 0; + this.y = 0; + if (config.minWidth) this.wnd.style.minWidth = config.minWidth + 'px'; + if (config.minHeight) this.wnd.style.minHeight = config.minHeight + 'px'; if (config.maxWidth) this.wnd.style.maxWidth = config.maxWidth + 'px'; if (config.maxHeight) this.wnd.style.maxHeight = config.maxHeight + 'px'; @@ -52,21 +54,6 @@ export class MSWindow { // Register window move handlers this.dragging = false; - switch (this.config.startPosition) { - case MSWindowStartPosition.TopLeft: { - this.x = 0; - this.y = 0; - break; - } - case MSWindowStartPosition.Center: { - this.x = document.documentElement.clientWidth / 2 - this.config.minWidth / 2; - this.y = document.documentElement.clientHeight / 2 - this.config.minHeight / 2; - break; - } - default: { - throw new Error('Invalid start position'); - } - } this.setLoc(); this.lastTouchX = 0; @@ -137,6 +124,22 @@ export class MSWindow { show() { this.wnd.classList.remove('d-none'); this.shown = true; + switch (this.config.startPosition) { + case MSWindowStartPosition.TopLeft: { + this.x = 0; + this.y = 0; + break; + } + case MSWindowStartPosition.Center: { + this.x = document.documentElement.clientWidth / 2 - this.wnd.clientWidth / 2; + this.y = document.documentElement.clientHeight / 2 - this.wnd.clientHeight / 2; + break; + } + default: { + throw new Error('Invalid start position'); + } + } + this.setLoc(); } hide() { @@ -147,8 +150,8 @@ export class MSWindow { private setLoc() { if (this.x < 0) this.x = 0; if (this.y < 0) this.y = 0; - if (this.x > document.documentElement.clientWidth - this.config.minWidth) this.x = document.documentElement.clientWidth - this.config.minWidth; - if (this.y > document.documentElement.clientHeight - this.config.minHeight) this.y = document.documentElement.clientHeight - this.config.minHeight; + if (this.x > document.documentElement.clientWidth - this.wnd.clientWidth) this.x = document.documentElement.clientWidth - this.wnd.clientWidth; + if (this.y > document.documentElement.clientHeight - this.wnd.clientHeight) this.y = document.documentElement.clientHeight - this.wnd.clientHeight; this.wnd.style.top = this.y + 'px'; this.wnd.style.left = this.x + 'px'; } diff --git a/webapp/src/ts/main.ts b/webapp/src/ts/main.ts index 70a8cb4..b059d2e 100644 --- a/webapp/src/ts/main.ts +++ b/webapp/src/ts/main.ts @@ -41,14 +41,11 @@ function roomInit() { } let motdWindow = new MSWindow(elements.motdWindow, { - minWidth: 600, - minHeight: 300, maxWidth: 600, startPosition: MSWindowStartPosition.Center }); let logonWindow = new MSWindow(elements.logonWindow, { - minWidth: 500, minHeight: 275, startPosition: MSWindowStartPosition.Center });