feat(tpl): add mkdir controls for frontend

Author: marjune163

src/tpl/assert/main.css

@@ -17,6 +17,11 @@ body {
 	hyphens: none;
 }
 
+form {
+	margin: 0;
+	padding: 0;
+}
+
 ul, ol, li {
 	display: block;
 	margin: 0;
@@ -117,11 +122,6 @@ em {
 	display: block;
 }
 
-.upload form {
-	margin: 0;
-	padding: 0;
-}
-
 .upload input {
 	display: block;
 	width: 100%;
@@ -175,6 +175,25 @@ em {
 	transform: rotate(45deg);
 }
 
+.mkdir {
+	margin: 1em;
+	padding: 1em;
+	background: #f7f7f7;
+}
+
+.mkdir form {
+	display: flex;
+}
+
+.mkdir input {
+	flex: 1 1 auto;
+}
+
+.mkdir button {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+}
+
 .item-list {
 	margin: 1em;
 }

src/tpl/assert/main.css.go

@@ -17,6 +17,10 @@ font-variant-ligatures: none;
 font-kerning: none;
 hyphens: none;
 }
+form {
+margin: 0;
+padding: 0;
+}
 ul, ol, li {
 display: block;
 margin: 0;
@@ -102,10 +106,6 @@ background: #c9c;
 .upload.dragging::before {
 display: block;
 }
-.upload form {
-margin: 0;
-padding: 0;
-}
 .upload input {
 display: block;
 width: 100%;
@@ -152,6 +152,21 @@ border-left-color: transparent;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }
+.mkdir {
+margin: 1em;
+padding: 1em;
+background: #f7f7f7;
+}
+.mkdir form {
+display: flex;
+}
+.mkdir input {
+flex: 1 1 auto;
+}
+.mkdir button {
+padding-left: 0.5em;
+padding-right: 0.5em;
+}
 .item-list {
 margin: 1em;
 }

src/tpl/page.html

@@ -37,6 +37,15 @@
 	</div>
 {{end}}
 
+{{if .CanMkdir}}
+	<div class="mkdir">
+		<form method="POST" action="{{$subItemPrefix}}?mkdir">
+			<input type="text" name="name" autocomplete="off"/>
+			<button type="submit">mkdir</button>
+		</form>
+	</div>
+{{end}}
+
 <ul class="item-list">
 	<li class="dir parent">
 		<a href="{{if .IsRoot}}./{{else}}../{{end}}">

src/tpl/page.html.go

@@ -42,6 +42,14 @@ const pageTplStr = `
 <a href="{{$subItemPrefix}}?zip" download="{{.ItemName}}.zip">.zip</a>
 </div>
 {{end}}
+{{if .CanMkdir}}
+<div class="mkdir">
+<form method="POST" action="{{$subItemPrefix}}?mkdir">
+<input type="text" name="name" autocomplete="off"/>
+<button type="submit">mkdir</button>
+</form>
+</div>
+{{end}}
 <ul class="item-list">
 <li class="dir parent">
 <a href="{{if .IsRoot}}./{{else}}../{{end}}">