WIP: record sheet layout

author: Catalin Mititiuc <webdevcat@proton.me> 2024-05-20 12:56:42 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-05-20 12:56:42 -0700
commit: 1818218abb9451a96ad779ecba875d01878d77ef (patch)
tree: 633ef981c764622819032d0dc84328ea78cb5bbe /public/assets/css
parent: 4d133b7181241adca3867afae721eb0962e4e645 (diff)
1 files changed, 108 insertions, 148 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 3e6842f..244b85f 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -53,98 +53,6 @@ div#status {
   font-family: monospace;
 }
 
-div#content {
-  display: flex;
-  border-left: 1px solid gray;
-  flex-basis: 0;
-  /* overflow: scroll; */
-  max-height: 100vh;
-  flex-direction: column;
-  /* padding: 2px; */
-  position: relative;
-}
-
-#content > div:first-of-type {
-  padding: 2px;
-  border-bottom: 1px solid gray;
-}
-
-#content #buttons {
-  line-height: 1.5em;
-}
-
-#content input[type="checkbox"].visible {
-  position: absolute;
-  right: 0;
-}
-
-#record-sheet {
-  /* max-height: 100%; */
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  /* display: none; */
-  background-color: gray;
-}
-
-#record-sheet .name {
-  text-transform: capitalize;
-}
-
-#record-sheet > div {
-  /* padding: 0 2px; */
-  overflow-y: auto;
-  /* border: 1px solid black; */
-}
-
-#record-sheet > div > p {
-  margin: 0;
-  margin-top: 0px;
-  margin-bottom: 1px;
-  padding: 6px 2px;
-  background-color: lightgray;
-}
-
-#record-sheet > div > div {
-  /* border: 1px solid black; */
-  margin-bottom: 1px;
-  padding: 6px 4px;
-  /* border-radius: 4px; */
-}
-
-#record-sheet > div:last-of-type {
-  margin-top: 2px;
-}
-
-#record-sheet > div > div:last-of-type {
-  margin-bottom: 0;
-}
-
-svg > defs > #point {
-  fill: inherit;
-  fill-opacity: inherit;
-  stroke: inherit;
-  stroke-width: inherit;
-  stroke-opacity: inherit;
-}
-
-use[href="#point"] {
-  opacity: 0;
-  fill: teal;
-  fill-opacity: 0.2;
-  stroke: black;
-  stroke-width: 0.5px;
-}
-
-use[href="#point"]:hover, use[href="#point"].hover {
-  opacity: 1;
-  fill: orange;
-}
-
-use[href="#point"].active {
-  opacity: 0.2;
-}
-
 polyline.move-trace {
   stroke: gray;
   stroke-dasharray: 2;
@@ -159,17 +67,6 @@ g#grid {
   fill: #bacae3;
 }
 
-#map2 {
-  transform-origin: 0px 0px;
-  transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
-}
-
-#map3 {
-  transform-origin: 0px 0px;
-  /* transform: translateY(1518px); */
-  transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
-}
-
 #panel {
   display: none;
   position: absolute;
@@ -196,12 +93,6 @@ g#grid {
   transform: rotate(180deg);
 }
 
-.weapon-symbol :not(use[href="#counter-base"]) {
-  stroke: white;
-  stroke-width: 0.75;
-  fill: none;
-}
-
 g.troop-counter-template, g.troop-counter-template use {
   r: inherit;
 }
@@ -227,33 +118,6 @@ g.troop-counter [href="#counter-prone"] {
   transform: translate(-5px, 6px);
 }
 
-g#points g use.counter {
-  r: 5px;
-}
-
-g#points g.hover use[href="#point"] {
-  opacity: 1;
-  fill: orange;
-}
-
-g#points g.hover use.counter {
-  r: 7px;
-}
-
-g#points use.clone {
-  stroke: white;
-  stroke-width: 0.5px;
-  stroke-dasharray: 1;
-}
-
-g#points use[data-allegiance="defender"].clone {
-  fill: rgb(255, 126, 126);
-}
-
-g#points use[data-allegiance="attacker"].clone {
-  fill: rgb(130, 190, 130);
-}
-
 text.counter, #troop-counter text {
   font-size: 12px;
   font-weight: bold;
@@ -269,14 +133,6 @@ text.counter, #troop-counter text {
   user-select: none;
 }
 
-polygon.firing-arc[data-allegiance="defender"] {
-  fill: red;
-}
-
-polygon.firing-arc[data-allegiance="attacker"] {
-  fill: blue;
-}
-
 #shapes {
   opacity: 0.1;
 }
@@ -312,7 +168,11 @@ button.set-firing-arc img {
   margin-right: .4em;
 }
 
-.soldier-record[data-allegiance="attacker"] svg {
+polygon.firing-arc[data-allegiance="defender"] {
+  fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
   fill: blue;
 }
 
@@ -320,6 +180,10 @@ button.set-firing-arc img {
   fill: red;
 }
 
+.soldier-record[data-allegiance="attacker"] svg {
+  fill: blue;
+}
+
 .soldier-record svg {
   width: 20px;
   height: 20px;
@@ -336,6 +200,12 @@ button.set-firing-arc img {
   font-family: monospace;
 }
 
+.weapon-symbol :not(use[href="#counter-base"]) {
+  stroke: white;
+  stroke-width: 0.75;
+  fill: none;
+}
+
 .soldier-record.selected {
   background-color: khaki;
 }
@@ -383,10 +253,91 @@ input[type="file"] {
   display: none;
 }
 
-@media (width >= 1800px) {
+
+
+div#content {
+  display: flex;
+  border-left: 1px solid gray;
+  flex-basis: 0;
+  /* overflow: scroll; */
+  max-height: 100vh;
+  flex-direction: column;
+  /* padding: 2px; */
+  position: relative;
+}
+
+#content > div:first-of-type {
+  padding: 2px;
+  border-bottom: 1px solid gray;
+}
+
+#content #buttons {
+  line-height: 1.5em;
+}
+
+#content input[type="checkbox"].visible {
+  position: absolute;
+  right: 0;
+}
+
+#record-sheet {
+  /* max-height: 100%; */
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* display: none; */
+  background-color: gray;
+}
+
+#record-sheet .name {
+  text-transform: capitalize;
+}
+
+#record-sheet > div {
+  /* padding: 0 2px; */
+  overflow-y: auto;
+  /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+  margin: 0;
+  margin-top: 0px;
+  margin-bottom: 1px;
+  padding: 6px 2px;
+  background-color: lightgray;
+}
+
+#record-sheet .soldier-record {
+  /* border: 1px solid black; */
+  margin-bottom: 1px;
+  padding: 6px 4px;
+  /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+  margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+  margin-bottom: 0;
+}
+
+
+
+/* @media (width >= 1800px) { */
+@media (width >= 10px) {
   #record-sheet {
     flex-direction: row;
     /* gap: 2px; */
+    overflow-y: unset;
+    min-height: 0;
+    flex-grow: 1;
+    /* height: 100%;
+    max-height: 100%; */
+  }
+
+  #record-sheet * {
+    /* display: none; */
   }
 
   #record-sheet > div > p {
@@ -395,8 +346,17 @@ input[type="file"] {
 
   #record-sheet > div {
     /* max-height: unset; */
-    overflow-y: unset;
-    height: min-content;
+    /* overflow-y: unset; */
+    /* height: min-content; */
+    display: flex;
+    flex-direction: column;
+  }
+
+  #record-sheet .records {
+    /* max-height: 100vh; */
+    /* height: 561px; */
+    /* height: min-content; */
+    overflow-y: auto;
   }
 
   #record-sheet div:last-of-type {
author	Catalin Mititiuc <webdevcat@proton.me>	2024-05-20 12:56:42 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-05-20 12:56:42 -0700
commit	1818218abb9451a96ad779ecba875d01878d77ef (patch)
tree	633ef981c764622819032d0dc84328ea78cb5bbe /public/assets/css
parent	4d133b7181241adca3867afae721eb0962e4e645 (diff)