summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/battlemap/src/ElmModule/View.elm13
-rw-r--r--src/battlemap/www/style.css98
-rw-r--r--src/global/www/style.css1
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),