README.md

@@ -4,7 +4,6 @@
 
 - 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,9 +293,7 @@ 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);
 }
@@ -308,17 +306,13 @@ button:active {
 	--padding: 0.5rem;
 	--height: calc((var(--toolbar-button-size) + var(--padding) * 2));
 
-	/*position: absolute;*/
-	position: relative;
+	position: absolute;
 	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);
@@ -409,43 +403,22 @@ button:active {
 }
 
 
-
 /* groups... */
 .gallery .toolbar>* {
 	display: inline-block;
-	height: calc(100% - var(--padding) * 2);
 }
-.gallery .toolbar>*:not(:last-child):after {
-	content: "";
-	display: inline-block;
-	position: absolute;
-	top: var(--padding);
-	bottom: var(--padding);
-	margin-left: calc(var(--padding) / 4);
+.gallery .toolbar>*:not(:last-child) {
+	padding-right: calc(var(--padding) / 2);
 	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); 
@@ -473,7 +446,6 @@ 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);
 
@@ -514,16 +486,6 @@ 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,6 +83,21 @@ 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> 
@@ -113,21 +128,7 @@ 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 (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>
+			<button class="collapse" title="Edit gallery (hold to make sticky)">edit_square</button>
 		</div>
 	</div>
 	<!-- gallery: content -->

grid-n-view.js

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