Improve the UI

Author: mbuffa

assets/css/app.scss

@@ -1,5 +1,4 @@
 /* This file is for your main application css. */
-@import "./phoenix.css";
 @import "./tile_map.scss";
 @import "../node_modules/nprogress/nprogress.css";
 

assets/css/phoenix.css

@@ -7,22 +7,23 @@ body {
   padding: 0;
 }
 
-h1 {
+h3 {
   margin: 1em;
   text-align: center;
 }
 
 div.tilemap-container {
   display: flex;
-  flex-flow: row nowrap;
-  width: 100%;
+  flex-flow: column wrap;
+  justify-content: baseline;
 }
 
 div.tile_map {
   background-color: black;
 
   display: table;
   table-layout: fixed;;
+  width: fit-content;
 
   div.row {
     display: table-row;
@@ -127,11 +128,12 @@ div.toolbar {
   flex: auto;
 
   display: flex;
-  flex-flow: column wrap;
-  justify-content: space-around;
+  flex-flow: row nowrap;
+  justify-content: left;
 
   button {
-    padding: 1em;
+    margin: 0.5rem;
+    padding: 0.5rem;
     font-size: 1.4em;
     cursor: pointer;
   }

assets/css/tile_map.scss

@@ -34,10 +34,25 @@ defmodule MoveYourCedricWeb.MapLive do
   end
 
   def render(assigns) do
+    # <img class="morpheus" src="/images/morpheus.jpg">
+
     ~L"""
-    <h1>Move Your Cédric</h1>
+    <h3>Move Your Cédric</h3>
 
     <div class="tilemap-container">
+      <div class="toolbar">
+        <button phx-click="update-path">Find the path</button>
+        <button phx-click="walk-path">Walk the path</button>
+      </div>
+
+      <ul class="entities-list">
+        <%= for entity <- @tile_map.entities do %>
+          <li>
+            <%= entity.name %> is at <%= entity.position |> List.first %> <%= entity.position |> List.last %> and is <%= phrasing_status(entity.status) %>
+          </li>
+        <% end %>
+      </ul>
+
       <div class="tile_map">
         <%= Enum.map(@tile_map.tiles, fn row -> %>
           <div class="row">
@@ -95,20 +110,6 @@ defmodule MoveYourCedricWeb.MapLive do
           </div>
         <% end) %>
       </div>
-
-      <div class="toolbar">
-        <img class="morpheus" src="/images/morpheus.jpg">
-        <button phx-click="update-path">Find the path</button>
-        <button phx-click="walk-path">Walk the path</button>
-
-        <ul class="entities-list">
-          <%= for entity <- @tile_map.entities do %>
-            <li>
-              <%= entity.name %> is at <%= entity.position |> List.first %> <%= entity.position |> List.last %> and is <%= phrasing_status(entity.status) %>
-            </li>
-          <% end %>
-        </ul>
-      </div>
     </div>
     """
   end