Improvements to snippet edit

public/js/snippetedit.js

@@ -204,15 +204,15 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		if (el) {
 			snippetEdit.uploadBox.style.display = "none";
 			snippetEdit.previewBox.style.display = "block";
-			snippetEdit.uploadResetLink.style.display = "none";
+			snippetEdit.uploadResetBox.style.display = "none";
 			snippetEdit.previewContent = emptyElement(snippetEdit.previewContent);
 			snippetEdit.previewContent.appendChild(el);
 			snippetEdit.resetLink.style.display = (!originalAttachment || el == originalAttachment) ? "none" : "inline-block";
 		} else {
-			snippetEdit.uploadBox.style.display = "flex";
+			snippetEdit.uploadBox.style.display = "block";
 			snippetEdit.previewBox.style.display = "none";
 			if (originalAttachment) {
-				snippetEdit.uploadResetLink.style.display = "block";
+				snippetEdit.uploadResetBox.style.display = "block";
 			}
 		}
 	}
@@ -222,7 +222,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 		if (snippetEdit.file.files.length > 0 && snippetEdit.file.files[0].size > maxFilesize) {
 			// NOTE(asaf): Writing this out in bytes to make the limit exactly clear to the user.
 			let readableSize = new Intl.NumberFormat([], { useGrouping: "always" }).format(maxFilesize);
-			snippetEdit.errors.textContent = "File is too big! Max filesize is " + readableSize + " bytes";
+			snippetEdit.errors.textContent = "File is too big! Max filesize is " + readableSize + " bytes.";
 			sizeGood = false;
 		} else {
 			snippetEdit.errors.textContent = "";
@@ -279,7 +279,10 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 
 	snippetEdit.root.addEventListener("dragenter", function(ev) {
 		enterCounter++;
-		if (ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files.length > 0) {
+		let droppable = Array.from(ev.dataTransfer.items).some(
+			item => item.kind.toLowerCase() === "file"
+		);
+		if (droppable) {
 			snippetEdit.root.classList.add("drop");
 		}
 	});
@@ -348,6 +351,11 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
 	});
 	
 	snippetEdit.deleteButton.addEventListener("click", function(ev) {
+		if (!window.confirm("Are you sure you want to delete this snippet?")) {
+			ev.preventDefault();
+			return;
+		}
+
 		snippetEdit.file.value = "";
 	});
 

public/style.css

@@ -4703,15 +4703,19 @@ code, .code {
 .optionbar .options button,
 .optionbar .options .button,
 .optionbar .options input[type=button],
-.optionbar .options input[type=submit], .post-content th, .post-content td {
+.optionbar .options input[type=submit], .post-content th, .post-content td,
+button.button-small,
+.button.button-small,
+input.button-small[type=button],
+input.button-small[type=submit] {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem; }
 
 .pv2, .tab-bar .tab-button,
-button,
+button:not(.button-small),
-.button,
+.button:not(.button-small),
-input[type=button],
+input[type=button]:not(.button-small),
-input[type=submit], .notice {
+input[type=submit]:not(.button-small), .notice {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem; }
 
@@ -4747,15 +4751,19 @@ input[type=submit], .notice {
 .optionbar .options button,
 .optionbar .options .button,
 .optionbar .options input[type=button],
-.optionbar .options input[type=submit], .pagination .button, .post-content th, .post-content td {
+.optionbar .options input[type=submit], .pagination .button, .post-content th, .post-content td,
+button.button-small,
+.button.button-small,
+input.button-small[type=button],
+input.button-small[type=submit] {
   padding-left: 0.5rem;
   padding-right: 0.5rem; }
 
 .ph3, .tab-bar .tab-button,
-button,
+button:not(.button-small),
-.button,
+.button:not(.button-small),
-input[type=button],
+input[type=button]:not(.button-small),
-input[type=submit], .notice {
+input[type=submit]:not(.button-small), .notice {
   padding-left: 1rem;
   padding-right: 1rem; }
 
@@ -7521,6 +7529,9 @@ article code {
 .g5 {
   gap: 4rem; }
 
+.hide-if-empty:empty {
+  display: none !important; }
+
 @media screen and (min-width: 30em) {
   .bi-avoid-ns {
     break-inside: avoid; }

src/rawdata/scss/_core.scss

@@ -364,6 +364,10 @@ article code {
 .g4 { gap: $spacing-large; }
 .g5 { gap: $spacing-extra-large; }
 
+.hide-if-empty:empty {
+  display: none !important;
+}
+
 @media #{$breakpoint-not-small} {
   .bi-avoid-ns { break-inside: avoid; }
   .cc-auto-ns { column-count: auto; }

src/rawdata/scss/_forms.scss

@@ -139,8 +139,15 @@ input, select, textarea {
 }
 
 #{$buttons} {
-  @extend .ph3;
+  &:not(.button-small) {
-  @extend .pv2;
+    @extend .ph3;
+    @extend .pv2;
+  }
+
+  &.button-small {
+    @extend .ph2;
+    @extend .pv1;
+  }
 
   @include usevar('color', 'form-button-color');
   @include usevar('background-color', 'form-button-background');

src/rawdata/scss/themes/dark/_variables.scss

@@ -3,7 +3,7 @@ $fg-font-color: #eee;
 $vars: (
   fg-font-color: $fg-font-color,
 
-  // Default theme colors in case the assets.css is busted
+  // Default theme colors in case the project.css is busted
   theme-color: #666,
   theme-color-dim: #444,
   theme-color-dimmer: #383838,

src/templates/src/include/snippet_edit.html

@@ -1,5 +1,15 @@
+<style>
+	.upload-box {
+		border-style: dashed;
+	}
+
+	.snippet-edit-root.drop .upload-box {
+		border-color: var(--theme-color);
+	}
+</style>
+
 <template id="snippet-edit">
-	<form data-tmpl="root" class="timeline-item pa3 mb2 br3" method="POST" action="{{ .SnippetEdit.SubmitUrl }}" enctype="multipart/form-data">
+	<form data-tmpl="root" class="snippet-edit-root timeline-item pa3 mb2 br3" method="POST" action="{{ .SnippetEdit.SubmitUrl }}" enctype="multipart/form-data">
 		{{ csrftoken .Session }}
 		<input data-tmpl="redirect" type="hidden" name="redirect" />
 		<input data-tmpl="snippetId" type="hidden" name="snippet_id" />
@@ -10,31 +20,35 @@
 			<a data-tmpl="username" class="flex-shrink-0"></a>
 			<div class="spacer flex-grow-1"></div>
 			<span data-tmpl="date" class="flex-shrink-0">Date</span>
-			<a data-tmpl="cancelLink" href="javascript:;" class="ml2 flex-shrink-0">&#10006;</a>
+			<a data-tmpl="cancelLink" href="javascript:;" title="Cancel" class="ml2 flex-shrink-0">&#10006;</a>
 		</div>
 		<textarea data-tmpl="text" placeholder="Description and/or links" class="w-100 h4 mt3" name="text"></textarea>
 		<div class="mv3">
-			<div data-tmpl="uploadBox" class="placeholder flex flex-column items-center">
+			<div data-tmpl="uploadBox">
-				<img src="" class="db w4 h4"/>
+				<a data-tmpl="uploadLink" class="upload-box flex flex-column items-center pa4 b--dimmest br3 mw6" href="javascript:;">
-				<a data-tmpl="uploadResetLink" class="mt3 dn" href="javascript:;">Restore</a>
+					Upload image, video, or other file
-				<a data-tmpl="uploadLink" class="mt3" href="javascript:;">Upload image, video, or other file</a>
+				</a>
+				<div data-tmpl="uploadResetBox" class="mt2 dn">
+					<a data-tmpl="uploadResetLink" class="button button-small" href="javascript:;">Restore</a>
+				</div>
 			</div>
 			<div data-tmpl="previewBox" class="preview dn">
-				<div class="actions">
-					<a data-tmpl="removeLink" href="javascript:;">Remove</a>
-					<a data-tmpl="resetLink" href="javascript:;">Restore</a>
-					<a data-tmpl="replaceLink" href="javascript:;">Replace</a>
-				</div>
 				<div data-tmpl="previewContent">
 				</div>
+				<div class="actions mt2">
+					<a data-tmpl="removeLink" class="button button-small" href="javascript:;">Remove</a>
+					<a data-tmpl="resetLink" class="button button-small" href="javascript:;">Restore</a>
+					<a data-tmpl="replaceLink" class="button button-small" href="javascript:;">Replace</a>
+				</div>
+				<div data-tmpl="errors" class="mt2 hide-if-empty"></div>
 			</div>
 		</div>
-		<div data-tmpl="projectList" class="flex flex-wrap g2"></div>
+		<div class="flex">
-		<div class="flex items-center">
+			<div data-tmpl="projectList" class="flex-grow-1 flex flex-wrap g2"></div>
-			<div data-tmpl="errors"></div>
+			<div class="flex-shrink-0 flex">
-			<div class="flex-grow-1"></div>
+				<input data-tmpl="deleteButton" class="flex-grow-0 flex-shrink-0 mr2" type="submit" name="action" value="Delete" />
-			<input data-tmpl="deleteButton" class="flex-grow-0 flex-shrink-0 mr3" type="submit" name="action" value="Delete" />
+				<input data-tmpl="saveButton" class="flex-grow-0 flex-shrink-0" type="submit" name="action" value="Save" />
-			<input data-tmpl="saveButton" class="flex-grow-0 flex-shrink-0" type="submit" name="action" value="Save" />
+			</div>
 		</div>
 	</form>
 </template>