Fix table list layout

This commit is contained in:
Christoph Hagen 2021-12-25 16:54:10 +01:00
parent 9cc4cdb27c
commit f040ad5a0c
2 changed files with 10 additions and 16 deletions

View File

@ -16,10 +16,6 @@
<button id="logout-button" class="standard-button" onclick="logoutUser()">Log out</button>
</div>
<div id="table-list-bar">
<input type="text" id="table-name-field" name="tablename" placeholder="Create new table..." required>
<input type="checkbox" id="table-public-checkbox" name="public-table" checked="checked">
<span id="table-public-label">Public</span>
<button id="create-table-button" class="standard-button" onclick="createTable()">Create table</button>
<button id="refresh-tables" class="standard-button" onclick="refreshTables()">Refresh list</button>
</div>
<div id="game-bar">
@ -31,6 +27,10 @@
<div id="main">
<div id="main-spacer"></div>
<div id="table-list">
<input type="text" id="table-name-field" name="tablename" placeholder="Create new table..." required>
<input type="checkbox" id="table-public-checkbox" name="public-table" checked="checked">
<span id="table-public-label">Public</span>
<button id="create-table-button" class="standard-button" onclick="createTable()">Create table</button>
</div>
<div id="table-players">
<div id="table-player-card-top" class="table-card"></div>

View File

@ -139,12 +139,12 @@ body {
#table-list-bar {
position: absolute;
width: 460px; /* 540px */
width: 250px; /* 540px */
height: 40px;
top: 5px;
left: 10px;
display: grid;
grid-template-columns: 200px 120px 120px; /* 200px 30px 50px 120px 120px */
grid-template-columns: 120px 120px; /* 200px 30px 50px 120px 120px */
column-gap: 10px;
align-items: center;
justify-content: center;
@ -154,7 +154,9 @@ body {
#table-name-field {
width: 100%;
font-size: medium;
grid-column: 1;
grid-column: 2;
grid-row: 1 / span 2;
max-width: 200px;
}
#table-public-checkbox {
@ -168,21 +170,13 @@ body {
grid-column: 3;
}
#create-table-button {
width: 120px;
grid-column: 2; /* 4 in future */
padding: 0px;
height: 34px;
}
#refresh-tables {
width: 120px;
grid-column: 3; /* 5 in future */
padding: 0px;
height: 34px;
grid-column: 1;
}
#game-bar {
position: absolute;
width: 270px;