From: Geoffrey Allott <geoffrey@allott.email>
Date: Thu, 1 Apr 2021 17:13:47 +0000 (+0100)
Subject: improve layout of game list
X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=a27f6fb24b0f957cf4f2f6676602a3a6c442d3bf;p=pokerwave.git

improve layout of game list
---

diff --git a/site/modules/gamelist.js b/site/modules/gamelist.js
index a75a1cb..af118a3 100644
--- a/site/modules/gamelist.js
+++ b/site/modules/gamelist.js
@@ -11,6 +11,10 @@ export class GameList {
 
         const game_list_outside = document.createElement("div");
         game_list_outside.classList.add("game-list-outside");
+        this.game_list_filter_input = document.createElement("input");
+        this.game_list_filter_input.value = filter;
+        this.game_list_filter_input.onchange = () => this.send({type: "JoinLobby", filter: this.game_list_filter_input.value});
+        game_list_outside.append(this.game_list_filter_input);
         this.game_list_container = document.createElement("div");
         this.game_list_container.classList.add("game-list-container");
         this.game_list = document.createElement("table");
@@ -19,13 +23,9 @@ export class GameList {
         game_list_outside.append(this.game_list_container);
         const game_list_new = document.createElement("button");
         game_list_new.classList.add("game-list-new");
-        game_list_new.innerText = "New";
+        game_list_new.innerText = "Create New Game";
         game_list_new.onclick = () => this.show_new_game_popup();
         game_list_outside.append(game_list_new);
-        this.game_list_filter_input = document.createElement("input");
-        this.game_list_filter_input.value = filter;
-        this.game_list_filter_input.onchange = () => this.send({type: "JoinLobby", filter: this.game_list_filter_input.value});
-        game_list_outside.append(this.game_list_filter_input);
 
         this.container.append(game_list_outside);
 
diff --git a/site/style/game-list.css b/site/style/game-list.css
index 90145c1..26f052e 100644
--- a/site/style/game-list.css
+++ b/site/style/game-list.css
@@ -4,30 +4,30 @@
     display: grid;
     overflow: hidden;
     font-size: 3vw;
-    grid: auto-flow / 1fr 8vw;
+    align-content: stretch;
 }
 
 .game-list-outside > input {
     grid-column: 1;
-    grid-row: 2;
-    align-self: end;
-    height: 10vw;
+    grid-row: 1;
+    align-self: start;
+    height: 4vw;
     font-size: inherit;
 }
 
 .game-list-outside > button {
-    grid-column: 2;
-    grid-row: 2;
+    grid-column: 1;
+    grid-row: 3;
     align-self: end;
     height: 10vw;
     font-size: inherit;
 }
 
 .game-list-container {
-    grid-column: 1 / span 2;
-    grid-row: 1;
-    width: 100%;
-    height: 100%;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: stretch;
+    height: calc(100vh - 16vw);
     overflow-x: clip;
     overflow-y: scroll;
 }