improve layout of game list

diff --git a/site/modules/gamelist.js b/site/modules/gamelist.js
index a75a1cb03a30b0b6f502bec6d0a8f277d1de02e6..af118a3cfbd1b42802825ce36512ee397f5c4951 100644 (file)
--- 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 90145c1bfa839f27e118f4572fcbd8d48c928aef..26f052ea41c8c368d3f50696961143760f0f0564 100644 (file)
--- 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;
 }