Numerous improvements to mappings UI

Lorp · May 29, 2024 · 1c7ceb7 · 1c7ceb7
1 parent dd1c903
commit 1c7ceb7
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 61 deletions.
diff --git a/src/fencer.html b/src/fencer.html
@@ -183,17 +183,26 @@
 		display: grid;
 		grid-template-columns: 40px 10px 1fr 10px;
 		grid-template-rows: 40px 10px 1fr 10px 80px;
+		background-color: #eee;
+	}
+	.svg-container { /* this contains the SVG element */
+		position: relative;
 	}
 	#mappings-visual { /* this is the SVG element */
-		background-color: #eee;
-		width: 100%;
-		height: 100%;
+		position: absolute;
+		width: calc(100% + 20px);
+		height: calc(100% + 20px);
+		left: -10px;
+		top: -10px;
 	}
 	.ruler {
-		background-color: #ccc;
+		position: relative;
 		color: black;
 		font-size: 0.8em;
 	}
+	.extra {
+		background-color: white;
+	}
 }
 
 .window.mappings {
@@ -227,6 +236,9 @@
 	.zoom {
 		font-family: Material Symbols Outlined;
 	}
+	details[open] {
+		background-color: #bad5fe;
+	}
 }
 
 .window.renders {
@@ -335,10 +347,6 @@
 	display: none;
 }
 
-.mappings details[open] {
-	background-color: #bad5fe;
-}
-
 input.numeric {
 	font-weight: bold;
 	width: calc(100% - 7px);
@@ -349,9 +357,9 @@
 	color: grey;
 }
 
-
 </style>
 
+
 <!-- Google Fonts preconnect -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -393,9 +401,9 @@ <h2>Mappings</h2>
 
 			<div class="content">
 
-				<div></div><div></div><div class="ruler horizontal">Ruler</div><div></div>
+				<div></div><div></div><div class="ruler horizontal"></div><div></div>
 				<div></div><div></div><div></div><div></div>
-				<div class="ruler vertical">R</div><div></div>
+				<div class="ruler vertical"></div><div></div>
 					<div class="svg-container"></div>
 				<div></div>
 				<div></div><div></div><div></div><div></div>
@@ -416,7 +424,6 @@ <h2>Mappings</h2>
 					<br>
 					<label for="integer-snapping">Snap to integers</label> <input type="checkbox" id="integer-snapping">
 
-
 					<div id="mappings-ui-info">
 						<div id="coords"></div>
 					</div>