layout detail maps

backend/static/css/legends.css

@@ -8,9 +8,24 @@ a {
     outline: 0;
 }
 
+.page-header {
+    display: flex;
+    width: 100%;
+}
+
+.page-tabs {
+    flex: 100%;
+    margin-right: 16px;
+}
+
+.page-map {
+    flex: 300px;
+}
+
 .object-map {
     float: right !important;
-    margin-top: -7px;
+    margin-left: 16px;
+    margin-bottom: 16px;
 }
 
 .popover {

backend/templates/entity.html

@@ -3,6 +3,9 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
+<div class="page-header">
+    <div class="page-tabs">
+
         <h3>{{ title .Name }}</h3>
         <p>
             {{ .Race }}{{ if .Necromancer}} necromancer{{end}} {{ .Type }}
@@ -25,31 +28,23 @@
             {{- end }}
         </p>
 
-{{- if gt (len .Sites) 0 }}
-<div class="object-map">
-    <div id="map" style="width: 300px; height: 300px"></div>
-    <!-- <img class="site-map" src="$suburi/sitemap/$site.id" width="300" /> -->
-</div>
-{{initMap}}
-{{- range .Sites }}
-{{ addSite . false }}
-{{- end }}
-{{- end }}
-
         <nav>
             <div class="nav nav-tabs" id="nav-tab" role="tablist">
                 {{ $active := " active"}}
                 {{- if gt (len .Leaders) 0 }}
-        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-leaders" type="button" role="tab">Leaders</button>
+                <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-leaders" type="button"
+                    role="tab">Leaders</button>
                 {{ $active = ""}}{{- end}}
                 {{- if gt (len .Sites) 0 }}
                 <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-sites" type="button" role="tab">Sites</button>
                 {{ $active = ""}}{{- end}}
                 {{- if gt (len .HistfigId) 0 }}
-        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-members" type="button" role="tab">Members</button>
+                <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-members" type="button"
+                    role="tab">Members</button>
                 {{ $active = ""}}{{- end}}
                 {{- if gt (len .Child) 0 }}
-        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-children" type="button" role="tab">Groups</button>
+                <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-children" type="button"
+                    role="tab">Groups</button>
                 {{ $active = ""}}{{- end}}
                 {{- if gt (len .Wars) 0 }}
                 <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-wars" type="button" role="tab">Wars</button>
@@ -158,6 +153,19 @@
             </div>
             {{ $active = ""}}{{- end}}
         </div>
+    </div>
+    {{- if gt (len .Sites) 0 }}
+    <div class="page-map">
+        <div id="map" style="width: 300px; height: 300px"></div>
+        <!-- <img class="site-map" src="$suburi/sitemap/$site.id" width="300" /> -->
+        {{initMap}}
+        {{- range .Sites }}
+        {{ addSite . false }}
+        {{- end }}
+    </div>
+    {{- end }}
+</div>
+
 
 <h5>Events</h5>
 

backend/templates/landmass.html

@@ -3,9 +3,6 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
-<h1>{{ title .Name }}</h1>
-<p>landmass</p>
-
 <div class="object-map">
     <div id="map" style="width: 300px; height: 300px"></div>
 </div>
@@ -13,5 +10,8 @@
 {{ addLandmass .Id }}
 <script>map.addLayer(landmassesLayer);</script>
 
+<h1>{{ title .Name }}</h1>
+<p>landmass</p>
+
 <p>{{ json . }}</p>
 {{- end }}

backend/templates/mountain.html

@@ -3,15 +3,15 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
-<h3>{{ title .Name }}</h3>
-<p>{{ if .IsVolcano }}volcano{{else}}mountain{{end}}</p>
-
 <div class="object-map">
     <div id="map" style="width: 300px; height: 300px"></div>
 </div>
 {{initMap}}
 {{ addMountain .Id false }}
 
+<h3>{{ title .Name }}</h3>
+<p>{{ if .IsVolcano }}volcano{{else}}mountain{{end}}</p>
+
 <dl class="row">
     <dt class="col-2 col-lg-1">Height</dt>
     <dd class="col-10 col-lg-11">{{ .Height }}</dd>

backend/templates/site.html

@@ -3,16 +3,11 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
+<div class="page-header">
+    <div class="page-tabs">
         <h3>{{ title .Name }}</h3>
         <p>{{ .Type_ }}</p>
 
-<div class="object-map">
-    <div id="map" style="width: 300px; height: 300px"></div>
-    <!-- <img class="site-map" src="$suburi/sitemap/$site.id" width="300" /> -->
-</div>
-{{initMap}}
-{{ addSite .Id false }}
-
         <nav>
             <div class="nav nav-tabs" id="nav-tab" role="tablist">
                 {{ $active := " active"}}
@@ -24,6 +19,8 @@
                 <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-site-properties" type="button"
                     role="tab">Properties</button>
                 {{ $active = ""}}{{- end}}
+                <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-history" type="button"
+                    role="tab">History</button>
             </div>
         </nav>
         <div class="tab-content" id="nav-tabContent">
@@ -61,6 +58,17 @@
                 </table>
             </div>
             {{ $active = ""}}{{- end}}
+            <div class="tab-pane{{$active}}" id="nav-history" role="tabpanel">
+                {{ template "events.html" events (history .Id) }}
+            </div>
+        </div>
+    </div>
+    <div class="page-map">
+        <div id="map" style="width: 300px; height: 300px"></div>
+        <!-- <img class="site-map" src="$suburi/sitemap/$site.id" width="300" /> -->
+        {{initMap}}
+        {{ addSite .Id false }}
+    </div>
 </div>
 
 <h5 class="mt-3">Events</h5>

backend/templates/structure.html

@@ -3,15 +3,15 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
-<h3>{{ title .Name }}</h3>
-{{ .Type_ }} in {{ site .SiteId }}
-
 <div class="object-map">
     <div id="map" style="width: 300px; height: 300px"></div>
 </div>
 {{initMap}}
 {{ addSite .SiteId false }}
 
+<h3>{{ title .Name }}</h3>
+{{ .Type_ }} in {{ site .SiteId }}
+
 <h5 class="mt-3">Events</h5>
 {{ template "events.html" events . }}
 

backend/templates/worldconstruction.html

@@ -3,15 +3,15 @@
 {{define "title"}}{{ title .Name }}{{end}}
 
 {{define "content"}}
-<h3>{{ title .Name }}</h3>
-<p>{{ .Type }}</p>
-
 <div class="object-map">
     <div id="map" style="width: 300px; height: 300px"></div>
 </div>
 {{initMap}}
 {{ addWorldConstruction .Id }}
 
+<h3>{{ title .Name }}</h3>
+<p>{{ .Type }}</p>
+
 {{- if gt (len .Parts) 0 }}
 <h5>Parts</h5>
 <ul>