# HG changeset patch
# User HIROSE Yuuji <yuuji@gentei.org>
# Date 1689038721 -32400
# Node ID 1ffaa8b2b1bf5bed235da4fe981e58742efedda0
# Parent  8de17709d0a27276862705a3429201f7ff1941e0
Modify blog comment form layout

diff -r 8de17709d0a2 -r 1ffaa8b2b1bf examples/common/default/default.css
--- a/examples/common/default/default.css	Thu Jun 01 08:36:53 2023 +0900
+++ b/examples/common/default/default.css	Tue Jul 11 10:25:21 2023 +0900
@@ -71,7 +71,16 @@
 button#morefile {visibility: hidden; background: #fe9;}
 label.admin span {border-bottom: 1px solid blue;}
 label.admin:after {content: "(ADMIN)"; color: red; text-decoration: none;}
-
+span.fileinput {
+    display: inline-block; height: 3.2ex;
+    border: 1px solid #4444; border-radius: 1ex;
+    position: relative; width: 16em; background: #e7e7ea; text-align: center;
+}
+span.fileinput input[type="file"] {
+    position: absolute; width: 100%; height: 100%; left: 0; top: 0;
+    padding: 0;
+}
+span.fileinput:hover {background: #efc;}
 /* keep/edit/rm action selector */
 input.action ~ input:not(.action), input.action ~ textarea {
     display: none;
@@ -400,6 +409,11 @@
 input[type="submit"].all, button.all {
     background: #cfc; padding: 0.4ex 2ex;
 }
+button#c {
+    padding: 0.2ex 4em; border-radius: 0.5ex;
+}
+input#cmt input[type="submit"] {height: 4em;}
+
 input[type="reset"] {margin-left: 4em;}
 
 /*
@@ -451,7 +465,7 @@
     visibility: visible; transform: rotateX(3600deg); transition: 30s;
 }
 span.loading {padding: 0 1em;}
-input.aux {margin-left: 10em; transform: scale(0.7);}
+input.aux, input[type="reset"] {margin-left: 10em; transform: scale(0.7);}
 
 /*
  * PR Web
diff -r 8de17709d0a2 -r 1ffaa8b2b1bf s4-cgi.sh
--- a/s4-cgi.sh	Thu Jun 01 08:36:53 2023 +0900
+++ b/s4-cgi.sh	Tue Jul 11 10:25:21 2023 +0900
@@ -60,7 +60,7 @@
   case "$3" in
     *multiple*)
       onemore='<button type="button" id="morefile" title="More attachment file">添付追加</button>'
-      multiple="$nl$onemore"
+      # multiple="$nl$onemore"
       ;;
   esac
   if [ -n "$2" -a -s "$dir/$2" ]; then
@@ -71,8 +71,9 @@
     icon="<img src=\"data:$ct,$data\">"
   fi
   cat<<EOF
- ${icon}
-<input type="file" name="$1" value="$bn" $3>$multiple
+<span class="fileinput">${icon}&nbsp; <!-- keep line hight -->
+<input type="file" name="$1" value="$bn" $3$multiple>
+</span>$onemore
 EOF
 )
 cgi_multi() (
diff -r 8de17709d0a2 -r 1ffaa8b2b1bf s4-main.js
--- a/s4-main.js	Thu Jun 01 08:36:53 2023 +0900
+++ b/s4-main.js	Tue Jul 11 10:25:21 2023 +0900
@@ -752,12 +752,13 @@
 	}
 	if (filled) {
 	    ih = i.parentNode.innerHTML;
-	    if (ih) {
-		var inpf = ih.substring(ih.indexOf("<input")),
-		    newi = "<br>"+inpf.substring(0, inpf.indexOf(">")+1);
-		i.insertAdjacentHTML("afterend", newi)
-		i.nextSibling.nextSibling.addEventListener('change', () => {
-		    // next==br next.next==input[type=file]
+	    let ipph = i.parentNode.parentNode.innerHTML; //Entire td inside
+	    if (ipph) {
+		let ip = i.parentNode;
+		var inpf = ipph.substring(ipph.indexOf('<span class="file')),
+		    newi = "<br>"+inpf.substring(0, inpf.indexOf("/span>")+6);
+		ip.insertAdjacentHTML("afterend", newi)
+		ip.nextSibling.nextSibling.addEventListener('change', () => {
 		    warnFileSize(document.forms[0]);
 		});
 	    }