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}&nbsp; <!-- 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  	    }