reworked toolbar button/group styling...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

README.md

@@ -4,6 +4,7 @@
 
 - BUG?: for some reason toggling fullscreen on a mobile device changes 
 	font size...
+- toolbar: drag: broken for non-first relative toolbars...
 - <b>Save current gallery (zip/json?)</b>
 - Save current editor state (zip/json?)
 - ~~Views: Gallery / Details / Lightbox~~

css/grid-n-view.css

@@ -293,7 +293,9 @@ button:active {
 	position: sticky;
 
 	top: 0;
+	height: 0;
 	margin: 0 calc(var(--gallery-padding-horizontal) * -1);
+	overflow: visible;
 
 	z-index: calc(var(--base-layer) + 2);
 }
@@ -306,13 +308,17 @@ button:active {
 	--padding: 0.5rem;
 	--height: calc((var(--toolbar-button-size) + var(--padding) * 2));
 
-	position: absolute;
+	/*position: absolute;*/
+	position: relative;
 	display: inline-block;
 
 	left: var(--move-x);
 	top: var(--move-y);
 
 	width: fit-content;
+	min-height: var(--toolbar-button-size);
+
+	margin: 0.1em 0px;
 
 	padding: var(--padding);
 	padding-right: var(--height);
@@ -403,22 +409,43 @@ button:active {
 }
 
 
+
 /* groups... */
 .gallery .toolbar>* {
 	display: inline-block;
+	height: calc(100% - var(--padding) * 2);
 }
-.gallery .toolbar>*:not(:last-child) {
+.gallery .toolbar>*:not(:last-child):after {
-	padding-right: calc(var(--padding) / 2);
+	content: "";
+	display: inline-block;
+	position: absolute;
+	top: var(--padding);
+	bottom: var(--padding);
+	margin-left: calc(var(--padding) / 4);
 	border-right: solid 1px var(--gallery-secondary-color);
 }
 
+/* state list (group)... */
+.gallery .toolbar .states:empty {
+	display: inline-block;
+}
+.gallery .toolbar .states:empty:before {
+	content: "Empty...";
+	font-family: sans-serif;
+	line-height: var(--toolbar-button-size);
+	text-align: center;
+	vertical-align: bottom;
+	padding: 0 0.5em;
+	opacity: 0.3;
+}
+
+
 /* buttons... */
 .gallery .toolbar button {
 	min-width: var(--toolbar-button-size);
 
 	border: solid 1px transparent;
 	background: transparent;
-	
 
 	font-family: "Material Symbols Outlined";
 	font-size: var(--toolbar-button-size); 
@@ -446,6 +473,7 @@ button:active {
 	left: 0;
 	bottom: calc(var(--toolbar-button-size) / -6);
 	margin-left: calc(var(--toolbar-button-size) / -1.5625);
+	margin-right: -0.15em;
 
 	font-size: calc(var(--toolbar-button-size) / 1.15);
 
@@ -486,6 +514,16 @@ button:active {
 }
 
 
+
+.gallery .toolbar .states button {
+	font-family: sans-serif;
+	line-height: var(--toolbar-button-size);
+	text-align: center;
+	vertical-align: bottom;
+}
+
+
+
 /* button: collapse... */
 .gallery .toolbar button.collapse {
 	position: absolute;

grid-n-view.html

@@ -83,21 +83,6 @@ For more info see: <a href="./README.md">README.md</a>
 <div class="gallery otter">
 	<!-- toolbar -->
 	<div class="toolbar-anchor">
-		<!-- toolbar: states... -->
-		<!--div class="toolbar fixed">
-			<button class="drag-handle" title="Drag">drag_indicator</button> 
-			<div>
-				<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
-				<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
-				<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
-			</div>
-			<div class="states">
-				<button title="1">1</button> 
-				<button title="2">2</button> 
-				<button title="3">3</button> 
-			</div>
-			<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword</button>
-		</div-->
 		<!-- toolbar: general... -->
 		<div class="toolbar fixed">
 			<button class="drag-handle" title="Drag">drag_indicator</button> 
@@ -128,7 +113,21 @@ For more info see: <a href="./README.md">README.md</a>
 			<div>
 				<button onclick="gallery.clear()" title="clear">grid_on<sec>close</sec></button> 
 			</div>
-			<button class="collapse" title="Edit gallery (hold to make sticky)">edit_square</button>
+			<button class="collapse" title="Edit (hold to make sticky)">edit_square</button>
+		</div>
+		<!-- toolbar: states... -->
+		<div class="toolbar fixed">
+			<button class="drag-handle" title="Drag">drag_indicator</button> 
+			<div>
+				<button onclick="gallery" title="Save">crossword<sec>add</sec></button>
+			</div>
+			<div class="states"></div>
+			<!--div class="states">
+				<button onclick="gallery" title="Load 1">1</button>
+				<button onclick="gallery" title="Load 1">2</button>
+				<button onclick="gallery" title="Load 1">3</button>
+			</div-->
+			<button class="collapse" title="Saved (hold to make sticky)">crossword</button>
 		</div>
 	</div>
 	<!-- gallery: content -->

grid-n-view.js

@@ -155,6 +155,7 @@ function(evt, id){
 
 // - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - -
 
+// XXX account for relative-positioned elements...
 // XXX constrain this to:
 // 		viewport -- DONE but needs to be smoother...
 // 		parent
@@ -241,6 +242,8 @@ function(options={}){
 			data = {
 				bounds: bounds,
 				offset: {
+					// XXX get offset relative to position parent...
+					// 		...or relative to screen...
 					x: x - elem.offsetLeft, 
 					y: y - elem.offsetTop,
 				},
@@ -308,6 +311,7 @@ function(options={}){
 					Math.max(
 						screen.top,
 						data.y)) }
+			// deferred render..
 			// NOTE: we only allow a single requestAnimationFrame(..)
 			// 		to run per frame...
 			if(!data.animate){