now toolbar can be multiline (still need to resize to content better) + added an otter...

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

README.md

@@ -6,14 +6,14 @@
 - ~~Views: Gallery / Details / Lightbox~~
 - Details: populate fields
 - ~~toolbar -- floating over gallery~~
-	- lightbox (current)
-	- info (current)
+	- ~~info (current)~~ -- should this be floating over image??
 	- ~~select / deselect (current / all)~~
 	- ~~delete / clear deleted (current / all)~~
 	- crop
 	- load
 	- ~~styling and icons...~~
 	- draggable?
+	- handle wrapping better (collapsed / expandend)
 - toolbar -- floating over image (gallery/lightbox/details/...)
 	- lightbox
 	- info

css/grid-n-view.css

@@ -111,6 +111,8 @@ body {
 }
 .gallery .images:empty:after,
 .gallery .images:empty:before {
+	--font-size: 1.5rem;
+
 	position: absolute;
 	width: 100%;
 	left: 0;
@@ -121,14 +123,28 @@ body {
 }
 .gallery .images:empty:before {
 	content: "Empty";
+	font-size: var(--font-size);
 }
 .gallery .images:empty:after {
 	content: "(drag new images here)";
 	font-size: small;
-	margin-top: 1.1em;
+	margin-top: calc(var(--font-size) / 1.3);
 	opacity: 0.4;
 }
 
+/* empty otter... */
+.gallery.otter .images:empty:before,
+.gallery.otter .images:empty:after {
+	--font-size: 3em;
+}
+.gallery.otter .images:empty:before {
+	content: "🦦";
+	filter: saturate(0) contrast(200%);
+}
+.gallery.otter .images:empty:after {
+	margin-top: calc(var(--font-size) / 2);
+}
+
 /* image... */
 .gallery .images img {
 	height: var(--gallery-image-base-height);
@@ -234,8 +250,11 @@ body {
 
 	display: inline-block;
 	position: sticky;
+	width: fit-content;
 	top: calc(var(--height) * -1 + var(--top));
 	padding: var(--padding);
+	padding-right: var(--height);
+	padding-left: var(--height);
 	margin-left: calc(var(--gallery-padding-horizontal) * -1);
 	/* takeup no space... */
 	margin-top: calc(var(--height)  * -1);
@@ -287,7 +306,8 @@ body {
 /* XXX shoud the toolbar be vertical??? */
 .gallery .toolbar:not(.shown) {
 	translate: calc(-100% + var(--toolbar-button-size) + var(--padding)) 100%;
-	padding-right: calc(var(--padding) / 5);
+	/*padding-right: calc(var(--padding) / 5);*/
+	padding-right: var(--height);
 }
 .gallery .toolbar:not(.shown):not(:hover) {
 	box-shadow: none;
@@ -295,7 +315,6 @@ body {
 	z-index: var(--base-layer);
 	animation: 0.5s steps(1) tuck-to-backgroud;
 }
-
 @keyframes tuck-to-backgroud {
 	0% {
 		z-index: calc(var(--base-layer) + 2);
@@ -307,10 +326,10 @@ body {
 
 
 /* groups... */
-.gallery .toolbar>div {
+.gallery .toolbar>* {
 	display: inline-block;
 }
-.gallery .toolbar>div:not(:last-child) {
+.gallery .toolbar>*:not(:last-child) {
 	padding-right: calc(var(--padding) / 2);
 	border-right: solid 1px var(--gallery-secondary-color);
 }
@@ -320,7 +339,8 @@ body {
 	min-width: var(--toolbar-button-size);
 
 	border: solid 1px transparent;
-	background: var(--gallery-background-color);
+	background: transparent;
+	
 
 	font-family: "Material Symbols Outlined";
 	font-size: var(--toolbar-button-size); 
@@ -362,13 +382,18 @@ body {
 
 .gallery .toolbar button:hover {
 	border-radius: calc(var(--toolbar-button-size) / 5);
-	border: solid 1px var(--gallery-secondary-color);
+	border-color: var(--gallery-secondary-color);
 }
 
 
 /* button: collapse... */
 .gallery .toolbar button.collapse {
-	float: right;
+	position: absolute;
+	width: var(--height);
+	height: 100%;
+	top: 0;
+	right: 0;
+
 	opacity: 0.3;
 	transition: rotate 0.2s;
 }
@@ -377,10 +402,17 @@ body {
 }
 .gallery .toolbar button.collapse:hover {
 	opacity: 1;
-	border: solid 1px transparent;
+	border-color: transparent;
 }
 
-.gallery .toolbar .drag-handle {
+.gallery .toolbar button.drag-handle {
+	position: absolute;
+	height: calc(100% - var(--padding) * 2);
+	top: 0;
+	left: 0;
+	margin-top: var(--padding);
+	margin-bottom: var(--padding);
+
 	font-family: "Material Symbols Outlined";
 	font-size: var(--toolbar-button-size); 
 	line-height: var(--toolbar-button-size);
@@ -392,6 +424,7 @@ body {
 }
 .gallery .toolbar .drag-handle:hover {
 	color: var(--gallery-text-color);
+	border-color: transparent;
 }
 
 

grid-n-view.html

@@ -76,16 +76,19 @@ For more info see: <a href="./README.md">README.md</a>
 
 <hr>
 
-<div class="gallery">
+<div class="gallery otter">
 	<!-- toolbar -->
 	<div class="toolbar">
-		<div class="drag-handle" title="drag">drag_indicator</div> 
+		<button class="drag-handle" title="drag">drag_indicator</button> 
 		<div>
 			<button onclick="gallery" title="upload">cloud_upload</button> 
 			<button onclick="gallery" title="save">save</button> 
 		</div>
+		<!--div>
+			<button onclick="gallery" title="save">contrast</button> 
+		</div-->
 		<div>
-			<button onclick="gallery.details.show()" title="info">imagesmode<sec>label</sec></button> 
+			<!--button onclick="gallery.details.show()" title="info">imagesmode<sec>label</sec></button--> 
 			<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button> 
 		</div>
 		<div>
@@ -95,6 +98,10 @@ For more info see: <a href="./README.md">README.md</a>
 			<button onclick="gallery.markInverse()" title="reverse mark (ctrl-i)">select<sec>square</sec></button>
 			<button onclick="gallery.remove('marked')" title="remove marked">select<sec>close</sec></button> 
 		</div>
+		<div>
+			<button onclick="gallery" title="crop marked">select<sec>crossword</sec></button>
+			<button onclick="gallery" title="uncrop">select<sec>grid_on</sec></button>
+		</div>
 		<div>
 			<button onclick="gallery.toggleQueueRemoval()" title="queue removal (del)">delete</button> 
 			<button onclick="gallery.toggleQueueRemoval('marked')" title="toggle marked removal">delete<sec>select</sec></button>