From 6416e6090f29d2aa8c208aac595dbecc765ea81b Mon Sep 17 00:00:00 2001
From: Alexander Kampf <alexander.kampf@student.uni-halle.de>
Date: Sun, 12 Jul 2020 11:44:52 +0200
Subject: [PATCH] map paging styled
---
index.html | 21 ---------
out/main.js | 114 ++++++++++++++++++++++++++++-----------------
res/Stysheet.css | 56 +++++++++++++++-------
src/DungeonMap.elm | 29 +++++++-----
src/Main.elm | 10 ++--
src/Model.elm | 2 +-
6 files changed, 134 insertions(+), 98 deletions(-)
diff --git a/index.html b/index.html
index 03b36a1..1a4b4e9 100644
--- a/index.html
+++ b/index.html
@@ -9,27 +9,6 @@
<title>Main</title>
<script src="out/main.js"></script>
<style>
- .MonsterIcon:hover {
- fill: grey-darker;
- opacity:0.5;
- fill-opacity:0.5;
- width:30px;
- height:30px;
- }
- .PlayerIcon:hover {
- fill: grey-darker;
- opacity:0.5;
- fill-opacity:0.5;
- width:25px;
- height:25px;
- }
- .ObjectIcon:hover {
- fill: grey-darker;
- opacity:0.5;
- fill-opacity:0.5;
- width:25px;
- height:25px;
- }
</style>
</head>
diff --git a/out/main.js b/out/main.js
index 3f4ed1f..71693db 100644
--- a/out/main.js
+++ b/out/main.js
@@ -5632,7 +5632,7 @@ var $avh4$elm_color$Color$rgb = F3(
var $author$project$Model$init = function (_v0) {
return _Utils_Tuple2(
{
- activeTooltip: 'Tooltip',
+ activeTooltip: '',
addCharacterIcon: $author$project$Model$DrawingInactive,
bonusDamage: 0,
characterId: 0,
@@ -8572,8 +8572,8 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
- activeTooltip: 'Beschreibung',
- mouseInIcon: (tooltip === 'Beschreibung') ? false : true
+ activeTooltip: '',
+ mouseInIcon: (tooltip === '') ? false : true
}),
$elm$core$Platform$Cmd$none);
} else {
@@ -8582,7 +8582,7 @@ var $author$project$Main$update = F2(
model,
{
activeTooltip: tooltip,
- mouseInIcon: (tooltip === 'Beschreibung') ? false : true
+ mouseInIcon: (tooltip === '') ? false : true
}),
$elm$core$Platform$Cmd$none);
}
@@ -8606,7 +8606,7 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
- activeTooltip: 'Beschreibung',
+ activeTooltip: '',
objectIconList: A2(
$elm$core$List$filter,
$author$project$Main$isNotId(id),
@@ -8618,7 +8618,7 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
- activeTooltip: 'Beschreibung',
+ activeTooltip: '',
characterList: A2(
$elm$core$List$filter,
$author$project$Main$isNotId(id),
@@ -11999,6 +11999,13 @@ var $rundis$elm_bootstrap$Bootstrap$Tab$config = function (toMsg) {
{attributes: _List_Nil, isPill: false, items: _List_Nil, layout: $elm$core$Maybe$Nothing, toMsg: toMsg, useHash: false, withAnimation: false});
};
var $author$project$Model$ClearCharacterList = {$: 'ClearCharacterList'};
+var $author$project$Model$Pick = {$: 'Pick'};
+var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Attrs = function (a) {
+ return {$: 'Attrs', a: a};
+};
+var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$attrs = function (attrs_) {
+ return $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Attrs(attrs_);
+};
var $rundis$elm_bootstrap$Bootstrap$Grid$Column = function (a) {
return {$: 'Column', a: a};
};
@@ -12009,6 +12016,12 @@ var $rundis$elm_bootstrap$Bootstrap$Grid$col = F2(
});
var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Disabled = {$: 'Disabled'};
var $rundis$elm_bootstrap$Bootstrap$Form$Textarea$disabled = $rundis$elm_bootstrap$Bootstrap$Form$Textarea$Disabled;
+var $rundis$elm_bootstrap$Bootstrap$Table$TableAttr = function (a) {
+ return {$: 'TableAttr', a: a};
+};
+var $rundis$elm_bootstrap$Bootstrap$Table$attr = function (attr_) {
+ return $rundis$elm_bootstrap$Bootstrap$Table$TableAttr(attr_);
+};
var $rundis$elm_bootstrap$Bootstrap$Table$Bordered = {$: 'Bordered'};
var $rundis$elm_bootstrap$Bootstrap$Table$bordered = $rundis$elm_bootstrap$Bootstrap$Table$Bordered;
var $author$project$Model$AddCharacterIcon = function (a) {
@@ -12137,10 +12150,6 @@ var $author$project$DungeonMap$characters2rows = F2(
}),
$elm$core$Array$toList(chars));
});
-var $rundis$elm_bootstrap$Bootstrap$Table$Responsive = function (a) {
- return {$: 'Responsive', a: a};
-};
-var $rundis$elm_bootstrap$Bootstrap$Table$responsive = $rundis$elm_bootstrap$Bootstrap$Table$Responsive($elm$core$Maybe$Nothing);
var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) {
return A2(
$elm$html$Html$div,
@@ -12153,7 +12162,12 @@ var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) {
$rundis$elm_bootstrap$Bootstrap$Table$table(
{
options: _List_fromArray(
- [$rundis$elm_bootstrap$Bootstrap$Table$hover, $rundis$elm_bootstrap$Bootstrap$Table$bordered, $rundis$elm_bootstrap$Bootstrap$Table$responsive]),
+ [
+ $rundis$elm_bootstrap$Bootstrap$Table$hover,
+ $rundis$elm_bootstrap$Bootstrap$Table$bordered,
+ $rundis$elm_bootstrap$Bootstrap$Table$attr(
+ $elm$html$Html$Attributes$class('map-table'))
+ ]),
tbody: A2(
$rundis$elm_bootstrap$Bootstrap$Table$tbody,
_List_Nil,
@@ -12188,7 +12202,6 @@ var $author$project$DungeonMap$dungeonMap_MonsterList = function (model) {
};
var $author$project$Model$DragEnter = {$: 'DragEnter'};
var $author$project$Model$DragLeave = {$: 'DragLeave'};
-var $author$project$Model$Pick = {$: 'Pick'};
var $elm$file$File$decoder = _File_decoder;
var $elm$json$Json$Decode$list = _Json_decodeList;
var $elm$json$Json$Decode$oneOrMoreHelp = F2(
@@ -12663,7 +12676,7 @@ var $author$project$DungeonMap$placeIcon = function (s) {
$elm$svg$Svg$Events$onMouseOver(
A2($author$project$Model$HighlightTableRow, id, text)),
$elm$svg$Svg$Events$onMouseOut(
- A2($author$project$Model$HighlightTableRow, 0, 'Beschreibung')),
+ A2($author$project$Model$HighlightTableRow, 0, '')),
$elm$svg$Svg$Events$onClick(
A2($author$project$Model$DeleteIcon, iconType, id))
]),
@@ -12718,7 +12731,7 @@ var $author$project$DungeonMap$placeIcon = function (s) {
$elm$svg$Svg$Events$onMouseOver(
A2($author$project$Model$HighlightTableRow, id, text)),
$elm$svg$Svg$Events$onMouseOut(
- A2($author$project$Model$HighlightTableRow, 0, 'Beschreibung')),
+ A2($author$project$Model$HighlightTableRow, 0, '')),
$elm$svg$Svg$Events$onClick(
A2($author$project$Model$DeleteIcon, iconType, id))
]),
@@ -12743,7 +12756,7 @@ var $author$project$DungeonMap$placeIcon = function (s) {
$elm$svg$Svg$Events$onMouseOver(
$author$project$Model$ToolTipMsg(text)),
$elm$svg$Svg$Events$onMouseOut(
- $author$project$Model$ToolTipMsg('Beschreibung')),
+ $author$project$Model$ToolTipMsg('')),
$elm$svg$Svg$Attributes$class('ObjectIcon'),
$elm$svg$Svg$Events$onClick(
A2($author$project$Model$DeleteIcon, iconType, id))
@@ -12775,7 +12788,7 @@ var $author$project$DungeonMap$placeIcon = function (s) {
$elm$svg$Svg$Events$onMouseOver(
$author$project$Model$ToolTipMsg(text)),
$elm$svg$Svg$Events$onMouseOut(
- $author$project$Model$ToolTipMsg('Beschreibung')),
+ $author$project$Model$ToolTipMsg('')),
$elm$svg$Svg$Attributes$class('ObjectIcon'),
$elm$svg$Svg$Events$onClick(
A2($author$project$Model$DeleteIcon, iconType, id))
@@ -12848,17 +12861,6 @@ var $author$project$DungeonMap$newIconsView = function (addCharacterIcon) {
return _List_Nil;
}
};
-var $rundis$elm_bootstrap$Bootstrap$Button$onClick = function (message) {
- return $rundis$elm_bootstrap$Bootstrap$Button$attrs(
- _List_fromArray(
- [
- A2(
- $elm$html$Html$Events$preventDefaultOn,
- 'click',
- $elm$json$Json$Decode$succeed(
- _Utils_Tuple2(message, true)))
- ]));
-};
var $elm$svg$Svg$svg = $elm$svg$Svg$trustedNode('svg');
var $author$project$DungeonMap$svgIconList = function (model) {
return A3(
@@ -12882,7 +12884,7 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) {
A2(
$elm$html$Html$Attributes$style,
'border',
- model.hover ? '6px dashed purple' : '6px dashed #ccc'),
+ model.hover ? '6px dashed purple' : '6px dashed #bfbfbf'),
A2(
$author$project$DungeonMap$hijackOn,
'dragenter',
@@ -12900,16 +12902,6 @@ var $author$project$DungeonMap$dungeonMap_Svg = function (model) {
_List_fromArray(
[
A2(
- $rundis$elm_bootstrap$Bootstrap$Button$button,
- _List_fromArray(
- [
- $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$Pick)
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('Upload Map')
- ])),
- A2(
$elm$html$Html$figure,
_List_fromArray(
[
@@ -13614,6 +13606,17 @@ var $author$project$DungeonMap$newObjectIconModal = function (model) {
$rundis$elm_bootstrap$Bootstrap$Modal$config(
$author$project$Model$CloseModal($author$project$Model$ObjectIconModal)))))));
};
+var $rundis$elm_bootstrap$Bootstrap$Button$onClick = function (message) {
+ return $rundis$elm_bootstrap$Bootstrap$Button$attrs(
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$Events$preventDefaultOn,
+ 'click',
+ $elm$json$Json$Decode$succeed(
+ _Utils_Tuple2(message, true)))
+ ]));
+};
var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Col = {$: 'Col'};
var $rundis$elm_bootstrap$Bootstrap$Grid$Internal$Width = F2(
function (screenSize, columnCount) {
@@ -14530,7 +14533,7 @@ var $author$project$DungeonMap$dungeonMapView = function (model) {
$elm$html$Html$section,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('container is-widescreen')
+ $elm$html$Html$Attributes$class('content-box is-widescreen')
]),
_List_fromArray(
[
@@ -14558,7 +14561,12 @@ var $author$project$DungeonMap$dungeonMapView = function (model) {
[
$rundis$elm_bootstrap$Bootstrap$Form$Textarea$rows(1),
$rundis$elm_bootstrap$Bootstrap$Form$Textarea$disabled,
- $rundis$elm_bootstrap$Bootstrap$Form$Textarea$value(model.activeTooltip)
+ $rundis$elm_bootstrap$Bootstrap$Form$Textarea$value(model.activeTooltip),
+ $rundis$elm_bootstrap$Bootstrap$Form$Textarea$attrs(
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('text-area')
+ ]))
])),
A2($elm$html$Html$br, _List_Nil, _List_Nil),
$author$project$DungeonMap$dungeonMap_Svg(model)
@@ -14590,11 +14598,31 @@ var $author$project$DungeonMap$dungeonMapView = function (model) {
[
A2($elm$html$Html$br, _List_Nil, _List_Nil),
A2(
- $elm$html$Html$button,
+ $rundis$elm_bootstrap$Bootstrap$Button$button,
+ _List_fromArray(
+ [
+ $rundis$elm_bootstrap$Bootstrap$Button$attrs(
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('metalButton map-buttons')
+ ])),
+ $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$Pick)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Upload Map')
+ ])),
+ A2(
+ $rundis$elm_bootstrap$Bootstrap$Button$button,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('metalButton'),
- $elm$html$Html$Events$onClick($author$project$Model$ClearCharacterList)
+ $rundis$elm_bootstrap$Bootstrap$Button$attrs(
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('metalButton map-buttons'),
+ A2($elm$html$Html$Attributes$style, 'margin-top', '5px')
+ ])),
+ $rundis$elm_bootstrap$Bootstrap$Button$onClick($author$project$Model$ClearCharacterList)
]),
_List_fromArray(
[
diff --git a/res/Stysheet.css b/res/Stysheet.css
index c555f69..907a08d 100644
--- a/res/Stysheet.css
+++ b/res/Stysheet.css
@@ -20,6 +20,11 @@
max-width: 100%;
}
+.body-fix {
+ display:flex;
+ flex-direction:column;
+}
+
.grid-container {
display: grid;
grid-gap: 2%;
@@ -32,7 +37,7 @@
border-left-style: double;
border-width: 5px;
height: 75%;
- width: 120%;
+ width: 100%;
}
.th {
@@ -49,7 +54,7 @@ tr:nth-child(even) {background-color: white;}
background-image: repeating-linear-gradient(to right bottom, #acacac , #bfbfbf , #acacac 40% );
border-radius: 8px;
padding: 8px 28px;
- color: white;
+ color: white !important;
align-self: flex-end;
text-align: center;
text-decoration: none;
@@ -61,28 +66,47 @@ tr:nth-child(even) {background-color: white;}
background-image: repeating-linear-gradient(to right bottom, #acacac , #bfbfbf 10%, #acacac 40% );
}
-.PlayerIcon {
- fill: black;
- stroke: red;
- stroke-width: 2;
- fill-opacity:0;
-}
-.MonsterIcon {
- fill: black;
- stroke: red;
- stroke-width: 2;
- fill-opacity:0;
+.MonsterIcon:hover {
+ fill: grey-darker;
+ opacity:0.5;
+ fill-opacity:0.5;
+ width:30px;
+ height:30px;
+ cursor: pointer;
}
-
.PlayerIcon:hover {
fill: grey-darker;
opacity:0.5;
fill-opacity:0.5;
+ width:25px;
+ height:25px;
+ cursor: pointer;
}
-
-.MonsterIcon:hover {
+.ObjectIcon:hover {
fill: grey-darker;
opacity:0.5;
fill-opacity:0.5;
+ width:25px;
+ height:25px;
+ cursor: pointer;
+}
+
+.content-box {
+ margin-right: 20px;
+ margin-left: 20px;
+ padding: 15px;
+}
+
+.text-area {
+ color: #666666 !important;
+ background-color: #e4be9b !important;
+}
+
+.map-buttons {
+ width: 120px;
+}
+
+.map-table {
+ border: 2px solid #bfbfbf !important;
}
\ No newline at end of file
diff --git a/src/DungeonMap.elm b/src/DungeonMap.elm
index 4d1730b..2419bd0 100644
--- a/src/DungeonMap.elm
+++ b/src/DungeonMap.elm
@@ -27,7 +27,7 @@ import Model exposing (..)
dungeonMapView : Model -> Html Msg
dungeonMapView model =
- Html.section [ class "container is-widescreen" ]
+ Html.section [ class "content-box is-widescreen" ]
[ div [ class "section" ]
[ Grid.row []
[ Grid.col []
@@ -36,6 +36,7 @@ dungeonMapView model =
[ Textarea.rows 1
, Textarea.disabled
, Textarea.value model.activeTooltip
+ , Textarea.attrs [ class "text-area" ]
]
, Html.br [] []
, dungeonMap_Svg model
@@ -48,9 +49,13 @@ dungeonMapView model =
]
, Grid.col [ Col.xs4 ]
[ Html.br [] []
- , Html.button
- [ class "metalButton"
- , onClick ClearCharacterList ]
+ , Button.button
+ [ Button.attrs [ class "metalButton map-buttons"]
+ , Button.onClick Pick ]
+ [ text "Upload Map" ]
+ , Button.button
+ [ Button.attrs [ class "metalButton map-buttons", style "margin-top" "5px" ]
+ , Button.onClick ClearCharacterList ]
[ text "Clear Map" ]
]
]
@@ -63,7 +68,7 @@ dungeonMapView model =
dungeonMap_MonsterList : Model -> Html Msg
dungeonMap_MonsterList model =
div [ class "container" ]
- [ Table.table { options = [ Table.hover, Table.bordered, Table.responsive ]
+ [ Table.table { options = [ Table.hover, Table.bordered, Table.attr (class "map-table") ]
, thead = Table.simpleThead
[ Table.th [] [ Html.text "ID" ]
, Table.th [] [ Html.text "Name" ]
@@ -73,6 +78,7 @@ dungeonMap_MonsterList model =
Table.tbody []
<| characters2rows model.enemy model.highlightedTableRow
}
+
]
characters2rows : Array.Array Character -> Int -> List (Table.Row Msg)
@@ -103,14 +109,13 @@ characters2rows chars highlighted =
dungeonMap_Svg : Model -> Html Msg
dungeonMap_Svg model =
div [ class "container"
- , style "border" (if model.hover then "6px dashed purple" else "6px dashed #ccc")
+ , style "border" (if model.hover then "6px dashed purple" else "6px dashed #bfbfbf")
, hijackOn "dragenter" (Json.Decode.succeed DragEnter)
, hijackOn "dragover" (Json.Decode.succeed DragEnter)
, hijackOn "dragleave" (Json.Decode.succeed DragLeave)
, hijackOn "drop" dropDecoder
]
- [ Button.button [ Button.onClick Pick ] [ text "Upload Map" ]
- , Html.figure [ class "image" ]
+ [ Html.figure [ class "image" ]
[ Svg.svg
([ SvgAtt.width "100%", SvgAtt.viewBox "0 0 800 600", SvgAtt.version "1.1" ]
++ mouseDrawEvents model.addCharacterIcon
@@ -207,7 +212,7 @@ placeIcon s =
, SvgAtt.xlinkHref ("res/icons/enemy.png")
, SvgAtt.class "MonsterIcon"
, Svg.Events.onMouseOver (HighlightTableRow id text)
- , Svg.Events.onMouseOut (HighlightTableRow 0 "Beschreibung")
+ , Svg.Events.onMouseOut (HighlightTableRow 0 "")
, Svg.Events.onClick (DeleteIcon iconType id)
] []
]
@@ -226,7 +231,7 @@ placeIcon s =
, SvgAtt.xlinkHref ("res/icons/hero.png")
, SvgAtt.class "PlayerIcon"
, Svg.Events.onMouseOver (HighlightTableRow id text)
- , Svg.Events.onMouseOut (HighlightTableRow 0 "Beschreibung")
+ , Svg.Events.onMouseOut (HighlightTableRow 0 "")
, Svg.Events.onClick (DeleteIcon iconType id)
] []
]
@@ -240,7 +245,7 @@ placeIcon s =
, SvgAtt.r "10"
, SvgAtt.style (buildCustomObjectIconStyle color)
, Svg.Events.onMouseOver (ToolTipMsg text)
- , Svg.Events.onMouseOut (ToolTipMsg "Beschreibung")
+ , Svg.Events.onMouseOut (ToolTipMsg "")
, SvgAtt.class "ObjectIcon"
, Svg.Events.onClick (DeleteIcon iconType id)
]
@@ -254,7 +259,7 @@ placeIcon s =
, SvgAtt.y (String.fromFloat (Maybe.withDefault 0 (String.toFloat y) - 11.5))
, SvgAtt.xlinkHref (getIconPath typeID)
, Svg.Events.onMouseOver (ToolTipMsg text)
- , Svg.Events.onMouseOut (ToolTipMsg "Beschreibung")
+ , Svg.Events.onMouseOut (ToolTipMsg "")
, SvgAtt.class "ObjectIcon"
, Svg.Events.onClick (DeleteIcon iconType id)
] []
diff --git a/src/Main.elm b/src/Main.elm
index 1202f37..49e3345 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -266,13 +266,13 @@ update msg model =
ToolTipMsg tooltip ->
case tooltip of
- "" -> ( { model | activeTooltip = "Beschreibung"
- , mouseInIcon = (if tooltip=="Beschreibung" then False else True) }
+ "" -> ( { model | activeTooltip = ""
+ , mouseInIcon = (if tooltip=="" then False else True) }
, Cmd.none
)
_ -> ( { model | activeTooltip = tooltip
- , mouseInIcon = (if tooltip=="Beschreibung" then False else True) }
+ , mouseInIcon = (if tooltip=="" then False else True) }
, Cmd.none
)
@@ -287,7 +287,7 @@ update msg model =
case iconType of
"object" ->
( { model | objectIconList = List.filter (isNotId id) model.objectIconList
- , activeTooltip = "Beschreibung" }
+ , activeTooltip = "" }
, Cmd.none
)
@@ -295,7 +295,7 @@ update msg model =
_ ->
( { model | characterList = List.filter (isNotId id) model.characterList
, highlightedTableRow = 0
- , activeTooltip = "Beschreibung" }
+ , activeTooltip = "" }
, Cmd.none
)
diff --git a/src/Model.elm b/src/Model.elm
index 9a435f8..fba87ca 100644
--- a/src/Model.elm
+++ b/src/Model.elm
@@ -78,7 +78,7 @@ init _ =
, colorPicker = ColorPicker.empty
, colour = Color.rgb 255 0 0
, radioCheckedID = 0
- , activeTooltip = "Tooltip"
+ , activeTooltip = ""
, highlightedTableRow = 0
, mouseInIcon = False
}
--
GitLab