s4
changeset 1013:1ffaa8b2b1bf
Modify blog comment form layout
author | HIROSE Yuuji <yuuji@gentei.org> |
---|---|
date | Tue, 11 Jul 2023 10:25:21 +0900 |
parents | 8de17709d0a2 |
children | 7976c8e5e628 |
files | examples/common/default/default.css s4-cgi.sh s4-main.js |
diffstat | 3 files changed, 27 insertions(+), 11 deletions(-) [+] |
line diff
1.1 --- a/examples/common/default/default.css Thu Jun 01 08:36:53 2023 +0900 1.2 +++ b/examples/common/default/default.css Tue Jul 11 10:25:21 2023 +0900 1.3 @@ -71,7 +71,16 @@ 1.4 button#morefile {visibility: hidden; background: #fe9;} 1.5 label.admin span {border-bottom: 1px solid blue;} 1.6 label.admin:after {content: "(ADMIN)"; color: red; text-decoration: none;} 1.7 - 1.8 +span.fileinput { 1.9 + display: inline-block; height: 3.2ex; 1.10 + border: 1px solid #4444; border-radius: 1ex; 1.11 + position: relative; width: 16em; background: #e7e7ea; text-align: center; 1.12 +} 1.13 +span.fileinput input[type="file"] { 1.14 + position: absolute; width: 100%; height: 100%; left: 0; top: 0; 1.15 + padding: 0; 1.16 +} 1.17 +span.fileinput:hover {background: #efc;} 1.18 /* keep/edit/rm action selector */ 1.19 input.action ~ input:not(.action), input.action ~ textarea { 1.20 display: none; 1.21 @@ -400,6 +409,11 @@ 1.22 input[type="submit"].all, button.all { 1.23 background: #cfc; padding: 0.4ex 2ex; 1.24 } 1.25 +button#c { 1.26 + padding: 0.2ex 4em; border-radius: 0.5ex; 1.27 +} 1.28 +input#cmt input[type="submit"] {height: 4em;} 1.29 + 1.30 input[type="reset"] {margin-left: 4em;} 1.31 1.32 /* 1.33 @@ -451,7 +465,7 @@ 1.34 visibility: visible; transform: rotateX(3600deg); transition: 30s; 1.35 } 1.36 span.loading {padding: 0 1em;} 1.37 -input.aux {margin-left: 10em; transform: scale(0.7);} 1.38 +input.aux, input[type="reset"] {margin-left: 10em; transform: scale(0.7);} 1.39 1.40 /* 1.41 * PR Web
2.1 --- a/s4-cgi.sh Thu Jun 01 08:36:53 2023 +0900 2.2 +++ b/s4-cgi.sh Tue Jul 11 10:25:21 2023 +0900 2.3 @@ -60,7 +60,7 @@ 2.4 case "$3" in 2.5 *multiple*) 2.6 onemore='<button type="button" id="morefile" title="More attachment file">添付追加</button>' 2.7 - multiple="$nl$onemore" 2.8 + # multiple="$nl$onemore" 2.9 ;; 2.10 esac 2.11 if [ -n "$2" -a -s "$dir/$2" ]; then 2.12 @@ -71,8 +71,9 @@ 2.13 icon="<img src=\"data:$ct,$data\">" 2.14 fi 2.15 cat<<EOF 2.16 - ${icon} 2.17 -<input type="file" name="$1" value="$bn" $3>$multiple 2.18 +<span class="fileinput">${icon} <!-- keep line hight --> 2.19 +<input type="file" name="$1" value="$bn" $3$multiple> 2.20 +</span>$onemore 2.21 EOF 2.22 ) 2.23 cgi_multi() (
3.1 --- a/s4-main.js Thu Jun 01 08:36:53 2023 +0900 3.2 +++ b/s4-main.js Tue Jul 11 10:25:21 2023 +0900 3.3 @@ -752,12 +752,13 @@ 3.4 } 3.5 if (filled) { 3.6 ih = i.parentNode.innerHTML; 3.7 - if (ih) { 3.8 - var inpf = ih.substring(ih.indexOf("<input")), 3.9 - newi = "<br>"+inpf.substring(0, inpf.indexOf(">")+1); 3.10 - i.insertAdjacentHTML("afterend", newi) 3.11 - i.nextSibling.nextSibling.addEventListener('change', () => { 3.12 - // next==br next.next==input[type=file] 3.13 + let ipph = i.parentNode.parentNode.innerHTML; //Entire td inside 3.14 + if (ipph) { 3.15 + let ip = i.parentNode; 3.16 + var inpf = ipph.substring(ipph.indexOf('<span class="file')), 3.17 + newi = "<br>"+inpf.substring(0, inpf.indexOf("/span>")+6); 3.18 + ip.insertAdjacentHTML("afterend", newi) 3.19 + ip.nextSibling.nextSibling.addEventListener('change', () => { 3.20 warnFileSize(document.forms[0]); 3.21 }); 3.22 }