From 14cc550d594cc721a0ef8f41c606428fa4f02328 Mon Sep 17 00:00:00 2001
From: nsensfel <SpamShield0@noot-noot.org>
Date: Wed, 18 Apr 2018 16:18:51 +0200
Subject: Prevents the map from moving around.

---
 src/battlemap/src/ElmModule/View.elm | 15 ++++--------
 src/battlemap/www/style.css          | 45 ++++++++++++++++++------------------
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/battlemap/src/ElmModule/View.elm b/src/battlemap/src/ElmModule/View.elm
index b46548c..bb25fb7 100644
--- a/src/battlemap/src/ElmModule/View.elm
+++ b/src/battlemap/src/ElmModule/View.elm
@@ -29,21 +29,14 @@ view model =
       ]
       [
          (View.MainMenu.get_html model),
+         (View.Controlled.get_html model),
          (Html.div
             [
-               (Html.Attributes.class "battlemap-main-content")
-            ]
-            [
-               (View.Controlled.get_html model),
-               (Html.div
-                  [
-                     (Html.Attributes.class "battlemap-container")
-                  ]
-                  [(View.Battlemap.get_html model)]
-               ),
-               (View.SubMenu.get_html model)
+               (Html.Attributes.class "battlemap-container")
             ]
+            [(View.Battlemap.get_html model)]
          ),
+         (View.SubMenu.get_html model),
          (View.Help.get_html model)
       ]
    )
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index dc75da4..379b7f0 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -6,14 +6,15 @@
 {
    display: grid;
 
-   grid-template-columns: 100%;
-   grid-template-rows: 3em calc(100% - 15em) 10em;
+   grid-template-columns: [col] 15em [col] auto [col] 20em;
+   grid-template-rows: [row] 3em [row] calc(100% - 15em) [row] 10em;
    grid-gap: 1em;
 }
 
 .battlemap-main-menu
 {
-   grid-row: 1;
+   grid-column: col 1 / span 3;
+   grid-row: row 1;
 
    display: flex;
 
@@ -35,17 +36,10 @@
    margin: 0 1em 0 1em;
 }
 
-.battlemap-main-content
-{
-   grid-row: 2;
-
-   display: flex;
-   flex-direction: row;
-}
-
 .battlemap-help
 {
-   grid-row: 3;
+   grid-column: col 1 / span 3;
+   grid-row: row 3;
 
    border: 1px solid #502D16;
    border-radius: 15px 15px 0 0;
@@ -69,10 +63,16 @@
 /** Main Content **************************************************************/
 .battlemap-container
 {
+   grid-column: col 2;
+   grid-row: row 2;
 
-   flex-grow: 1;
+   display: flex;
+   margin: 0 1em 0 1em;
+   max-width: 100%;
+   max-height: 100%;
+   overflow: scroll;
 
-   overflow: auto;
+   margin: auto;
 
    border: 1px solid #502D16;
    border-radius: 15px;
@@ -81,23 +81,19 @@
        1px  0px 2px #502D16,
        0px -1px 2px #502D16,
        0px  1px 2px #502D16;
-
-   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
-   position: relative;
-   margin: 0 1em 0 1em;
-   background-color: rgba(145,124,111,1);
 }
 
 .battlemap-controlled
 {
+   grid-column: col 1;
+   grid-row: row 2;
+
    display: flex;
    flex-flow: column;
 
    align-items: center;
    justify-content: center;
 
-   width: 15em;
-
    padding: 0.5em;
 
    border: 1px solid #502D16;
@@ -113,7 +109,8 @@
 
 .battlemap-sub-menu
 {
-   width: 20em;
+   grid-column: col 3;
+   grid-row: row 2;
 
    padding: 0.5em;
    overflow: auto;
@@ -134,6 +131,10 @@
 {
    display: inline-block;
    transform-origin: top left;
+
+   /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+   position: relative;
+   background-color: rgba(145,124,111,1);
 }
 
 /******************************************************************************/
-- 
cgit v1.2.3-70-g09d2