Removing some 'grid' displays from the CSS.

3 files changed, 74 insertions, 38 deletions

diff --git a/src/battlemap/src/ElmModule/View.elm b/src/battlemap/src/ElmModule/View.elm
index 5b437b0..8dd4eac 100644
--- a/src/battlemap/src/ElmModule/View.elm
+++ b/src/battlemap/src/ElmModule/View.elm
@@ -39,10 +39,17 @@ view model =
          ),
          (Html.div
             [
-               (Html.Attributes.class "battlemap-container"),
-               (Html.Attributes.id Constants.UI.viewer_html_id)
+               (Html.Attributes.class "battlemap-container-centerer")
+            ]
+            [
+               (Html.div
+                  [
+                     (Html.Attributes.class "battlemap-container"),
+                     (Html.Attributes.id Constants.UI.viewer_html_id)
+                  ]
+                  [(View.Battlemap.get_html model)]
+               )
             ]
-            [(View.Battlemap.get_html model)]
          ),
          (View.SubMenu.get_html model),
          (View.MessageBoard.get_html model)
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 2ac4f39..9e51e5a 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -1,19 +1,16 @@
 /******************************************************************************/
 /** LAYOUT ********************************************************************/
 /******************************************************************************/
-.fullscreen-module
-{
-   display: grid;
+.fullscreen-module {}
 
-   grid-template-columns: [col] 15em [col] auto [col] 20em;
-   grid-template-rows: [row] 3em [row] auto [row] 10em;
-   grid-gap: 1em;
-}
 
 .battlemap-main-menu
 {
-   grid-column: col 1 / span 3;
-   grid-row: row 1;
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   height: 3em;
 
    display: flex;
 
@@ -33,8 +30,12 @@
 
 .battlemap-message-board
 {
-   grid-column: col 1 / span 3;
-   grid-row: row 3;
+   position: absolute;
+   bottom: 0;
+   left: 0;
+   right: 0;
+
+   height: 10em;
 
    border: 3px solid #502D16;
    border-radius: 15px 15px 0 0;
@@ -50,15 +51,27 @@
    justify-content: space-between;
 }
 
-.battlemap-container
+.battlemap-container-centerer
 {
-   grid-column: col 2;
-   grid-row: row 2;
+   position: absolute;
+   top: 4em;
+   left: 16em;
+   right: 21em;
+   bottom: 11em;
 
    display: flex;
-   margin: 0 1em 0 1em;
-   max-width: 100%;
+}
+
+.battlemap-container
+{
+   display: inline-block;
    max-height: 100%;
+   max-width: 100%;
+   /*
+    * 4em: main-menu + margin.
+    * 11em: message-board + margin.
+    */
+   /*margin: 0 1em 0 1em; */
    overflow: scroll;
 
    margin: auto;
@@ -70,8 +83,15 @@
 
 .battlemap-controlled
 {
-   grid-column: col 1;
-   grid-row: row 2;
+   position: absolute;
+   left: 0;
+   top: 4em;
+   width: 15em;
+   /*
+    * 4em: main-menu + margin.
+    * 11em: message-board + margin.
+    */
+   height: calc(100% - 11em - 4em);
 
    display: flex;
    flex-flow: column;
@@ -89,9 +109,15 @@
 
 .battlemap-sub-menu
 {
-   grid-column: col 3;
-   grid-row: row 2;
-
+   position: absolute;
+   right: 0;
+   top: 4em;
+   width: 20em;
+   /*
+    * 4em: main-menu + margin.
+    * 11em: message-board + margin.
+    */
+   height: calc(100% - 11em - 4em);
    padding: 0.5em;
    overflow: auto;
 
@@ -152,14 +178,8 @@
 .battlemap-character-card-top,
 .battlemap-tile-card-top
 {
-   display: grid;
-   grid-template-columns: [col] auto [col] 1fr;
-   grid-template-rows: [row] 1em [row] 1fr [row] 1em [row] 1fr [row] 1em;
-   grid-column-gap: 0.5em;
-
-   align-items: center;
-   justify-content: left;
-   margin-top: 0.3em;
+   margin-top: 0.5em;
+   position: relative;
 }
 
 .battlemap-character-portrait
@@ -210,8 +230,9 @@
 .battlemap-character-card .battlemap-character-portrait,
 .battlemap-tile-card-icon
 {
-   grid-column: col 1;
-   grid-row: row 1 / span 6;
+   position: absolute:
+   top: 0;
+   left: 0;
    margin: 0;
    box-sizing: border-box;
    box-shadow:
@@ -254,7 +275,7 @@
    border-radius: 5px;
    border: 2px solid #6C5D53;
    text-align: center;
-   height: 1.5em;
+   height: 2em;
 }
 
 .battlemap-gauge-text
@@ -289,6 +310,11 @@
 .battlemap-character-card-health,
 .battlemap-tile-card-cost
 {
+   position: absolute;
+   left: 100px;
+   top: 1em;
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
    grid-column: col 2;
    grid-row: row 2;
 }
@@ -301,9 +327,11 @@
 .battlemap-character-card-movement,
 .battlemap-tile-card-location
 {
-   grid-column: col 2;
-   grid-row: row 4;
-   height: 100%;
+   position: absolute;
+   left: 100px;
+   top: calc(1em + 1.5em + 1em);
+   margin-left: 0.5em;
+   width: calc(100% - 100px - 0.5em);
 }
 
 .battlemap-character-card-movement > .battlemap-gauge-bar
diff --git a/src/global/www/style.css b/src/global/www/style.css
index 7fbdf0d..2baaa2a 100644
--- a/src/global/www/style.css
+++ b/src/global/www/style.css
@@ -14,6 +14,7 @@ html, body, .fullscreen-module
 }
 
 * {
+   box-sizing: border-box;
    color: #FFEEAA;
    text-shadow:
       1px 0px 1px rgba(80, 45, 22, 0.5),