Update CSS to look good on mobile
This commit is contained in:
parent
a075010a96
commit
19fa3e44b0
3 changed files with 37 additions and 29 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue