From 73a79ff8f6952611b18e250fef61392d25659f1b Mon Sep 17 00:00:00 2001 From: LawnCable Date: Mon, 25 Jun 2018 00:34:59 +0200 Subject: Some ui work on Server->Preference screen to make it a little bit prettier --- assets/index.css | 38 +++++++++++++++++++++++++++++++++++--- src/renderer/gameserver/server.ts | 14 ++++++++++---- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/assets/index.css b/assets/index.css index 5dfd86e..07ef7e5 100644 --- a/assets/index.css +++ b/assets/index.css @@ -98,6 +98,9 @@ html, body { width: 190pt; font-size: x-large; font-family: SourceSansPro; + font-weight: bolder; + border-radius: 5pt; + background-color: #dd7800; } #play:focus { @@ -243,7 +246,7 @@ z-index: 2; } -.infoServerPage > .title { +.infoServerPage > .title, .preferencesServerPage > h2 { /*outline: 1pt red dotted; */ background: rgba(0, 0, 0, 0.6); margin-bottom: 5pt; @@ -287,6 +290,31 @@ z-index: 2; text-decoration: underline; } +.preferencesServerPage { + padding: 0 12pt; +} + +.preferencesServerPage > .loginSection { + padding: 3pt 12pt; + background: rgba(0, 0, 0, 0.6); + width: fit-content; +} +.preferencesServerPage > .loginSection > button { + border-radius: 4pt; + margin: 6pt 0 6pt 0; + width: 100%; +} + +.preferencesServerPage > .loginSection > label { + display: block; + margin-top: 3pt; +} +.preferencesServerPage > .loginSection > label > input { + display: block; + border-radius: 2pt; +} + + .unknownServerPage { background: rgba(0, 0, 0, 0.6); color:white; @@ -313,15 +341,19 @@ z-index: 2; } .socialContainer { - height:20pt; + height:26pt; margin-bottom: 4pt; } .socialContainer > button { - height:16pt; + height: 24pt; + width: 24pt; margin-left: 3pt; cursor: pointer; border-radius: 4pt; + padding: unset; + font-size: large; + color:rgb(42, 42, 42); } #activity { diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts index 30b40e1..19450b7 100644 --- a/src/renderer/gameserver/server.ts +++ b/src/renderer/gameserver/server.ts @@ -169,22 +169,28 @@ export default class GameServer { private getPreferencesPage():HTMLElement{ const content = document.createElement('div'); - content.classList.add("PreferencesPage"); + content.classList.add("preferencesServerPage"); const title = document.createElement('h2'); title.innerText = `Preferences for ${this.name}`; content.appendChild(title); const loginSection = document.createElement('div'); - loginSection.classList.add("LoginSection"); + loginSection.classList.add("loginSection"); content.appendChild(loginSection); + const loginUsernameLabel = document.createElement('label'); + loginUsernameLabel.innerText = "Username"; const loginUsername = document.createElement('input') as HTMLInputElement; loginUsername.value = localStorage.getItem("2_username_"+this.profile.address); + loginUsernameLabel.appendChild(loginUsername); + const loginPinLabel = document.createElement('label'); + loginPinLabel.innerText = "Password"; const loginPin = document.createElement('input') as HTMLInputElement; loginPin.type = "password"; loginPin.value = localStorage.getItem("2_pin_"+this.profile.address); + loginPinLabel.appendChild(loginPin); const saveBtn = document.createElement('button') as HTMLButtonElement; saveBtn.innerText = "save"; @@ -196,8 +202,8 @@ export default class GameServer { }); - loginSection.appendChild(loginUsername); - loginSection.appendChild(loginPin); + loginSection.appendChild(loginUsernameLabel); + loginSection.appendChild(loginPinLabel); loginSection.appendChild(saveBtn); return content; -- cgit v1.2.3-60-g2f50