Skip to content

Commit

Permalink
Layout improvements
Browse files Browse the repository at this point in the history 
* Percent slider labels left and right are now vertically centered
* Lobby settings
  * Now has two columns in order to use space more efficiently
  * Inside lobby
    * Save button is now part of button bar
    * Dialog title contains less text
* Dialog code has been streamlined
  • Loading branch information
@Bios-Marcel
Bios-Marcel committed Feb 26, 2022
1 parent 4322ec7 commit 796196c
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 132 deletions.
45 changes: 41 additions & 4 deletions frontend/resources/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,34 @@ ul {
justify-content: center;
align-items: center;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-columns: auto auto auto auto;
column-gap: 20px;
row-gap: 10px;
}

.advanced-section {
grid-column-start: 1;
grid-column-end: 3;
.input-container > b {
align-self: baseline;
}

.input-container > input[type="checkbox"] {
/* By default checkboxes seem to have a bigger margin on the left. */
margin-left: 0;
margin-right: 0;
}

.percent-slider {
display: flex !important /* important required due to media query override */;
}

.percent-slider > input {
justify-self: center;
width: 100%;
margin-left: 0.5em;
margin-right: 0.5em;
}

.percent-slider > span {
align-self: center;
}

kbd {
Expand All @@ -112,4 +132,21 @@ kbd {
h2 {
font-size: 2rem;
}

.input-container {
align-items: start;
display: flex;
flex-direction: column;
width: 100%;
row-gap: 5px;
}
.input-container > input[type="checkbox"] {
width: initial;
}
.input-container > * {
width: 100%;
/* These two prevent blow-out of the input elements */
display: block;
box-sizing: border-box;
}
}
29 changes: 16 additions & 13 deletions frontend/resources/lobby.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,15 @@
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}

.center-dialog-content {
overflow: auto;
flex: 1;
width: 100%;
justify-content: center;
display: flex;
}

#chat {
Expand Down Expand Up @@ -222,10 +231,6 @@
margin-left: 0.25rem;
}

.dialog-close-button {
margin-top: 1rem;
}

button:hover,
input[type="button"]:hover,
.line-width-button-content:hover,
Expand Down Expand Up @@ -432,11 +437,8 @@ input[type="button"]:active,
}

#kick-dialog-players {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
flex: 1;
}

.kick-player-button {
width: 100%;
border: none;
Expand All @@ -448,10 +450,6 @@ input[type="button"]:active,
margin-top: 0.5rem;
}

.game-over-scoreboard {
overflow-y: auto;
}

.gameover-scoreboard-entry {
font-size: 1.3rem;
padding: 0.3rem 1rem 0.3rem 1rem;
Expand Down Expand Up @@ -495,7 +493,12 @@ input[type="button"]:active,
}

.namechange-field {
margin-right: 0.25rem;
width: 100%;
box-sizing: border-box;
}

.namechange-apply-button {
margin-left: 0.5rem;
}

#waitchoose-drawer {
Expand Down
28 changes: 3 additions & 25 deletions frontend/resources/lobby_create.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,10 @@
color: white;
font-weight: bold;
margin-bottom: 20px;
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / -1;
}
.create-button {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / -1;
}

.tab-header {
Expand Down Expand Up @@ -148,8 +146,7 @@ tr:hover {
}

#join-button {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / -1;
}

tr[selected="true"] {
Expand Down Expand Up @@ -177,25 +174,6 @@ tr[selected="true"] {
width: 96%;
padding: 2%;
}
.input-container {
align-items: start;
display: flex;
flex-direction: column;
width: 100%;
row-gap: 5px;
}
.advanced-section {
width: 100%;
}
.input-container > input[type="checkbox"] {
width: initial;
}
.input-container > * {
width: 100%;
/* These two prevent blow-out of the input elements */
display: block;
box-sizing: border-box;
}
.create-button {
width: 100%;
}
Expand Down
138 changes: 69 additions & 69 deletions frontend/templates/lobby.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,9 @@
<img src="{{.RootPath}}/resources/kick.png" class="header-button-image" />
</button>
<button id="lobby-settings-button" style="display: none;" onclick="showLobbySettingsDialog()"
class="dialog-button header-button" alt="{{.Translation.Get "change-lobby-settings"}}"
title="{{.Translation.Get "change-lobby-settings"}}">
class="dialog-button header-button"
alt="{{.Translation.Get "change-lobby-settings-tooltip"}}"
title="{{.Translation.Get "change-lobby-settings-tooltip"}}">
<img src="{{.RootPath}}/resources/settings.svg" class="header-button-image" />
</button>
</div>
Expand Down Expand Up @@ -103,14 +104,14 @@
<div style="display: flex; flex-direction: row;">
<input class="namechange-field" type="text"
id="namechange-field-start-dialog"></input>
<button class="dialog-button"
<button class="dialog-button namechange-apply-button"
onclick="changeName(document.getElementById('namechange-field-start-dialog').value)">{{.Translation.Get "apply"}}</button>
</div>
</div>
<div class="button-center-wrapper">
<button class="dialog-button"
onclick="startGame()">{{.Translation.Get "start"}}</button>
</div>
</div>
<div class="button-center-wrapper">
<button class="dialog-button"
onclick="startGame()">{{.Translation.Get "start"}}</button>
</div>
</div>

Expand All @@ -123,7 +124,7 @@
<div style="display: flex; flex-direction: row;">
<input class="namechange-field" type="text"
id="namechange-field-unstarted-dialog"></input>
<button class="dialog-button"
<button class="dialog-button namechange-apply-button"
onclick="changeName(document.getElementById('namechange-field-unstarted-dialog').value)">{{.Translation.Get "apply"}}</button>
</div>
</div>
Expand All @@ -140,83 +141,80 @@
<div id="namechange-dialog" class="center-dialog">
<span class="dialog-title">{{.Translation.Get "change-your-name"}}</span>
<div class="center-dialog-content">
<form
<form id="username-form"
onsubmit="changeName(document.getElementById('namechange-field').value);hideNameChangeDialog();return false">
<input class="namechange-field" type="text" id="namechange-field"></input>
<div class="button-center-wrapper">
<button class="dialog-button" type="submit">{{.Translation.Get "save"}}</button>
<button class="dialog-button" type="button"
onclick="hideNameChangeDialog()">{{.Translation.Get "close"}}</button>
</div>
</form>
</div>
<div class="button-center-wrapper">
<button class="dialog-button" type="submit"
form="username-form">{{.Translation.Get "save"}}</button>
<button class="dialog-button" type="button"
onclick="hideNameChangeDialog()">{{.Translation.Get "close"}}</button>
</div>
</div>

<div id="lobbysettings-dialog" class="center-dialog">
<span class="dialog-title">{{.Translation.Get "change-lobby-settings"}}</span>
<span class="dialog-title">{{.Translation.Get "change-lobby-settings-title"}}</span>
<div class="center-dialog-content">
<div style="display: flex; flex-direction: column;">
<div class="input-container">
<b>{{.Translation.Get "drawing-time-setting"}}</b>
<input id="lobby-settings-drawing-time" class="input-item" type="number"
name="drawing_time" min="{{.MinDrawingTime}}" max="{{.MaxDrawingTime}}"
value="{{.DrawingTime}}" />
<b>{{.Translation.Get "rounds-setting"}}</b>
<input id="lobby-settings-max-rounds" class="input-item" type="number"
name="rounds" min="{{.MinRounds}}" max="{{.MaxRounds}}"
value="{{.Rounds}}" />
<b>{{.Translation.Get "max-players-setting"}}</b>
<input id="lobby-settings-max-players" type="number" name="max_players"
min="{{.MinMaxPlayers}}" max="{{.MaxMaxPlayers}}" value="{{.MaxPlayers}}" />
<b>{{.Translation.Get "public-lobby-setting"}}</b>
<input id="lobby-settings-public" type="checkbox" name="public" {{if eq
<div class="input-container">
<b>{{.Translation.Get "drawing-time-setting"}}</b>
<input id="lobby-settings-drawing-time" class="input-item" type="number"
name="drawing_time" min="{{.MinDrawingTime}}" max="{{.MaxDrawingTime}}"
value="{{.DrawingTime}}" />
<b>{{.Translation.Get "rounds-setting"}}</b>
<input id="lobby-settings-max-rounds" class="input-item" type="number" name="rounds"
min="{{.MinRounds}}" max="{{.MaxRounds}}" value="{{.Rounds}}" />
<b>{{.Translation.Get "max-players-setting"}}</b>
<input id="lobby-settings-max-players" type="number" name="max_players"
min="{{.MinMaxPlayers}}" max="{{.MaxMaxPlayers}}" value="{{.MaxPlayers}}" />
<b>{{.Translation.Get "public-lobby-setting"}}</b>
<input id="lobby-settings-public" type="checkbox" name="public" {{if eq
.Public true}}checked{{end}} />
<b>{{.Translation.Get "custom-words-chance-setting"}}</b>
<div style="display: flex;">
0%
<input style="flex: 1;" id="lobby-settings-custom-words-chance" type="range"
name="custom_words_chance" min="1" max="100"
value="{{.CustomWordsChance}}">
100%
</div>

<details class="advanced-section">
<summary>{{.Translation.Get "advanced-settings"}}</summary>
<div class="input-container">
<b>{{.Translation.Get "players-per-ip-limit-setting"}}</b>
<input id="lobby-settings-clients-per-ip-limit" type="number"
name="clients_per_ip_limit" min="{{.MinClientsPerIPLimit}}"
max="{{.MaxClientsPerIPLimit}}" value="{{.ClientsPerIPLimit}}" />
<b>{{.Translation.Get "enable-votekick-setting"}}</b>
<input id="lobby-settings-enable-votekick" type="checkbox"
name="enable_votekick" {{if eq .EnableVotekick
true}}checked{{end}} />
</div>
</details>
<button class="dialog-button" onclick="saveLobbySettings()"
style="grid-column-start: 1; grid-column-end: 3;">
{{.Translation.Get "save-settings"}}
</button>
</div>
<div class="button-center-wrapper">
<button class="dialog-button"
onclick="hideLobbySettingsDialog()">{{.Translation.Get "close"}}</button>
<b>{{.Translation.Get "custom-words-chance-setting"}}</b>
<div class="input-item percent-slider">
<span>0%</span>
<input id="lobby-settings-custom-words-chance" type="range"
name="custom_words_chance" min="1" max="100" value="{{.CustomWordsChance}}">
<span>100%</span>
</div>
<b>{{.Translation.Get "players-per-ip-limit-setting"}}</b>
<input id="lobby-settings-clients-per-ip-limit" type="number"
name="clients_per_ip_limit" min="{{.MinClientsPerIPLimit}}"
max="{{.MaxClientsPerIPLimit}}" value="{{.ClientsPerIPLimit}}" />
<b>{{.Translation.Get "enable-votekick-setting"}}</b>
<input id="lobby-settings-enable-votekick" type="checkbox" name="enable_votekick" {{if eq .EnableVotekick
true}}checked{{end}} />
</div>
</div>
<div class="button-center-wrapper">
<button class="dialog-button" onclick="saveLobbySettings()">
{{.Translation.Get "save-settings"}}
</button>
<button class="dialog-button"
onclick="hideLobbySettingsDialog()">{{.Translation.Get "close"}}</button>
</div>
</div>

<div id="game-over-dialog" class="center-dialog">
<span id="game-over-dialog-title" class="dialog-title">Game over!</span>
<div id="game-over-scoreboard"></div>
<button id="restart-button" class="dialog-button" onclick="startGame()">Restart</button>
<div class="center-dialog-content">
<div id="game-over-scoreboard"></div>
</div>
<div class="button-center-wrapper">
<button id="restart-button" class="dialog-button" onclick="startGame()">Restart</button>
</div>
</div>

<div id="kick-dialog" class="center-dialog">
<span class="dialog-title">{{.Translation.Get "votekick-a-player"}}</span>
<div id="kick-dialog-players"></div>
<button onclick="hideKickDialog()"
class="dialog-button dialog-close-button">{{.Translation.Get "close"}}</button>
<div class="center-dialog-content">
<div id="kick-dialog-players"></div>
</div>
<div class="button-center-wrapper">
<button onclick="hideKickDialog()"
class="dialog-button">{{.Translation.Get "close"}}</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -536,7 +534,7 @@
showDialog(id, title, messageNode);
}

function showDialog(id, title, contentNode) {
function showDialog(id, title, contentNode, buttonBar) {
const newDialog = document.createElement("div");
newDialog.classList.add("center-dialog");
if (id !== null && id !== "") {
Expand All @@ -553,6 +551,10 @@
dialogContent.appendChild(contentNode);
newDialog.appendChild(dialogContent);

if (buttonBar !== null && buttonBar !== undefined) {
newDialog.appendChild(buttonBar);
}

newDialog.style.visibility = "visible";
centerDialogs.appendChild(newDialog);
}
Expand Down Expand Up @@ -601,9 +603,7 @@
dialogContent.appendChild(controlsTextTwo);
dialogContent.appendChild(controlsTextThree);

dialogContent.appendChild(buttonBar);

showDialog(helpDialogId, '{{.Translation.Get "help"}}', dialogContent);
showDialog(helpDialogId, '{{.Translation.Get "help"}}', dialogContent, buttonBar);
}

function showKickDialog() {
Expand Down
Loading

0 comments on commit 796196c

Please sign in to comment.