Replace lightbox grabbing cursor

readme.md

@@ -21,7 +21,6 @@
 4. Add a GPX file named <project_codename>.gpx to /geo/
 ## To Do List
 * ECMA import/export
-* Reset zoom on image closing (lightbox)
 * Add mail frequency slider
 * Use WMTS servers directly when not using Geo Caching Server
 * Allow HEIF picture format

script/lightbox.js

@@ -285,6 +285,7 @@
 	    	fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
 
 	    	this.$image.css('--scale', fNewZoom);
+			this.$container.toggleClass('moveable', (fNewZoom > 1));
 	    	this.$image.css('--translate-x', fTransX+'px');
             this.$image.css('--translate-y', fTransY+'px');
     	}
@@ -484,6 +485,7 @@
 	this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
 	self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
 	this.$outerContainer.addClass('animating');
+	this.$container.removeClass('moveable moving');
 
 	oSpot.updateHash('media', self.album[imageNumber].id);
 
@@ -694,7 +696,10 @@
       //ADDED-END
     }
 
-    if (this.album.length > 1 && this.options.showImageNumberLabel) {
+	//ADDED-START
+	/*
+	//ADDED-END
+	if (this.album.length > 1 && this.options.showImageNumberLabel) {
       var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
       //ADDED-START
       //this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
@@ -703,6 +708,9 @@
     } else {
       this.$lightbox.find('.lb-number').hide();
     }
+	//ADDED-START
+	*/
+	//ADDED-END
 
     this.$outerContainer.removeClass('animating');
 

style/_lightbox.scss

@@ -29,13 +29,13 @@
 			height: 30px;
 			
 			.lb-data {
+				flex-direction: row;
+
 				.lb-details {
-					display: inline-block;
 					width: calc(100% - 1.25rem);
 					
 					.lb-caption {
 						.lb-caption-line {
-							display: inline-block;
 							padding-right: 1em;
 							line-height: 1.33333333333em; //icon height
 							overflow: hidden;
@@ -64,6 +64,8 @@
 			height: 100%;
 			
 			.lb-data {
+				flex-direction: column;
+				
 				.lb-caption-line {
 					display: block;
 					margin-top: 1em;
@@ -85,7 +87,6 @@
 				.lb-closeContainer .lb-close {
 					margin-top: calc(1em/1.33333333);
 					float: none;
-					text-align: center;
 				}
 			}
 		}
@@ -101,10 +102,14 @@
 		.lb-container {
 			overflow: hidden;
 		
-			&.moving {
+			&.moveable {
 				cursor: grab;
 			}
 
+			&.moving {
+				cursor: grabbing;
+			}
+
 			.lb-image {
 				image-orientation: from-image;
 				border-radius: 0;
@@ -191,6 +196,7 @@
 		.lb-data {
 			text-align: left;
 			padding: 0.5rem 0.5rem 0 0.5rem;
+			display: flex;
 			
 			.lb-details {
 				float: none;
@@ -202,27 +208,16 @@
 						margin-top: 0;
 					}
 				}
-			
-				.lb-number {
-					display: none !important;
-				}
 			}
-			.lb-closeContainer {
-				color: white;
-				font-size: 1em;
+
+			.lb-closeContainer  .lb-close {
+				@include lightbox-icon(close);
+				@extend .fa-lg;
+				@extend .fa-fw;
+				height: auto;
+				font-size: 1.3333333333em;
 				line-height: 1em;
-				width: 1.25em;
-				vertical-align: top;
-				display: inline-block;
-				
-				.lb-close {
-					@include lightbox-icon(close);
-					@extend .fa-lg;
-					width: 1.25em;
-					height: auto;
-					font-size: 1.3333333333em;
-					line-height: 1em;
-				}
+				color: white;
 			}
 		}
 	}

style/_mask_project.scss

@@ -376,6 +376,7 @@ $legend-color: $post-color;
 		input, textarea {
 			background-color: $post-input-bg;
 			color: $post-color;
+			outline: none;
 		}
 
 		button, a.button {
@@ -721,7 +722,7 @@ $legend-color: $post-color;
 						font-size: 0.8em;
 						margin: 0;
 						color: $subtitle-color;
-						cursor: pointer;
+						cursor: default;
 						transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
 
 						span {