Mercurial > hgrepos > hgweb.cgi > s4
changeset 1002:47b3e770372d draft
Auth-ON/OFF button available in all modes
author | HIROSE Yuuji <yuuji@gentei.org> |
---|---|
date | Sun, 04 Dec 2022 16:59:59 +0859 |
parents | bbd5a0c50d5b |
children | 5bd1b5125049 |
files | examples/common/default/default.css s4-blog.sh s4-main.js |
diffstat | 3 files changed, 67 insertions(+), 52 deletions(-) [+] |
line wrap: on
line diff
--- a/examples/common/default/default.css Sun Dec 04 10:36:33 2022 +0859 +++ b/examples/common/default/default.css Sun Dec 04 16:59:59 2022 +0859 @@ -1,6 +1,13 @@ /* * Default CSS definitions */ +@media print { + div.blogcomment, div.blogcomment *, div.topmenu, + table.bloghead button { + display: none + } + a {text-decoration: none;} +} body {background: #eff; margin: 2px; padding: 6px;} h2, h3, hr {clear: both;} *.warn {color: red;} @@ -222,54 +229,56 @@ body.grouphome p.groupimg img { max-width: 380px; max-height: 380px;} -div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} -div.noborder {border: 0px; margin: 0;} -div.fold > div { +@media screen { + div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;} + div.noborder {border: 0px; margin: 0;} + div.fold > div { xxdisplay: none; max-height: 80%; overflow: auto; height: 0px; opacity: 0; padding: 0 1ex; -} -div.fold input[type="checkbox"]:checked ~ div, -div.fold input[type="radio"]:checked ~ div { + } + div.fold input[type="checkbox"]:checked ~ div, + div.fold input[type="radio"]:checked ~ div { display: block; background: #fadede; height: auto; opacity: 1.0; transition: 1s; -} -input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} -input[type="checkbox"].fold:checked + label + *.folded { - opacity: 1.0; transition: 2s; -} -input[type="checkbox"].fold:checked + label + div.folded { - display: block; hight: auto; transition: 2s; -} + } + input.fold + label + *.folded {opacity: 0; display: none; hight: 0;} + input[type="checkbox"].fold:checked + label + *.folded { + opacity: 1.0; transition: 2s; + } + input[type="checkbox"].fold:checked + label + div.folded { + display: block; hight: auto; transition: 2s; + } -/* fold2!! */ -div.foldtabs { - position: relative; height: 5em; margin-top: 1em; - border-top: 1px solid black; padding-top: 1em; -} -div.foldtabs > div { - position: absolute; top: 2.5em; opacity: 0.0; background: pink; - margin: 2px; overflow: auto; + /* fold2!! */ + div.foldtabs { + position: relative; height: 5em; margin-top: 1em; + border-top: 1px solid black; padding-top: 1em; + } + div.foldtabs > div { + position: absolute; top: 2.5em; opacity: 0.0; background: pink; + margin: 2px; overflow: auto; + } + div.foldtabs input[type="radio"] {display: none;} + div.foldtabs input[type="radio"]:checked + label + div { + display: block; opacity: 1.0; transition: 0.2s; width: 100%; + margin: 0; z-index: 2; + } + div.foldtabs > label { + border: 1px outset #ddd; background: #ddd; xbackground: pink; + border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; + margin: 0; + padding: 0.2ex 0.5em; height: 3em; + } + div.foldtabs > input:active + label {background: white;} + div.foldtabs input:checked + label { + background: pink; border: pink 1px solid; border-bottom-width: 6px; + } + div.foldtabs input:checked + label:last-of-type {border-width: 1px;} + input[type="checkbox"] + label + input[type="submit"] {display: none;} + input[type="checkbox"]:checked + label + input[type="submit"] { + display: inline;} + div.foldtabs p {margin: 0;} } -div.foldtabs input[type="radio"] {display: none;} -div.foldtabs input[type="radio"]:checked + label + div { - display: block; opacity: 1.0; transition: 0.2s; width: 100%; - margin: 0; z-index: 2; -} -div.foldtabs > label { - border: 1px outset #ddd; background: #ddd; xbackground: pink; - border-top-left-radius: 0.8em; border-top-right-radius: 0.8em; - margin: 0; - padding: 0.2ex 0.5em; height: 3em; -} -div.foldtabs > input:active + label {background: white;} -div.foldtabs input:checked + label { - background: pink; border: pink 1px solid; border-bottom-width: 6px; -} -div.foldtabs input:checked + label:last-of-type {border-width: 1px;} -input[type="checkbox"] + label + input[type="submit"] {display: none;} -input[type="checkbox"]:checked + label + input[type="submit"] { - display: inline;} -div.foldtabs p {margin: 0;} /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */ input.s4-checkbox {display: none;} /* Do not show real checkbox */
--- a/s4-blog.sh Sun Dec 04 10:36:33 2022 +0859 +++ b/s4-blog.sh Sun Dec 04 16:59:59 2022 +0859 @@ -269,13 +269,16 @@ case "$isgrpadmin$blog_mode" in false*closed*|false*quiz|false*enquete*) ;; *) - href3="(ファイル取得[<a href=\"?gethandout+$rowid\" accesskey=\"f\" title=\"Shortcut: F${nl}File Retrieval\">記事順</a>|<a href=\"?gethandout+$rowid+by_uname\" accesskey=\"u\" title=\"Shortcut: F${nl}File Retrieval by User\">著者順</a>])" + href3="(ファイル取得[<a href=\"?gethandout+$rowid\" accesskey=\"f\" title=\"Shortcut: F${nl}File Retrieval\">記事順</a>|<a href=\"?gethandout+$rowid+by_uname\" accesskey=\"u\" title=\"Shortcut: U${nl}File Retrieval by User\">著者順</a>])" ;; esac ;; esac fi - href4="${blog_math:+<span id=\"mathjax\">Math</span>} <a href=\"#bottom\" accesskey=\"b\" title=\"Shortcut: B${nl}to the Bottom\"> 末尾へ</a>" + hidebtn='<button type="button" id="hideauth" accesskey="a" title="Shortcut: A +Hide/Show Author - Useful for summary printing +OFFにするとまとめ印刷に便利。">著者OFF</button>' + href4="${blog_math:+<span id=\"mathjax\">Math</span>} $hidebtn <a href=\"#bottom\" accesskey=\"b\" title=\"Shortcut: B${nl}to the Bottom\"> 末尾へ</a>" $isgrpadmin && href5="<a href=\"?blogseen+$rowid\" accesskey=\"s\" title=\"Shortcut: S${nl}State of Accesses\"> 読刻</a>" quizmodefile=$tmpd/quiz; rm -f "$quizmodefile" # XXX: Global state @@ -311,7 +314,6 @@ case "$blogtype" in "クイズ"|"XXXX集計") echo "${blogtype}モードは本人と管理者の書き込みのみが表示されます" - echo "隠す/見せる(Hide/Show)" | html button 'id="quizwarn" type="button"' ;; esac | html p 'class="warn"'
--- a/s4-main.js Sun Dec 04 10:36:33 2022 +0859 +++ b/s4-main.js Sun Dec 04 16:59:59 2022 +0859 @@ -803,21 +803,23 @@ } return elem; } - var quizwarnVisible = false; + var authVisible = false; function toggleAuthorVisibility(e) { - // In QUIZ mode, click to quizwarn line toggles visibility of author + // Click to hideauth button toggles visibility of author columns e.stopPropagation(); - if (quizwarnVisible) { + let b = document.getElementById("hideauth"); + if (authVisible) { for (let i of document.querySelectorAll("td.repatt")) { i.classList.remove("hideauthor"); } - quizwarnVisible = false; + authVisible = false; } else { for (let i of document.querySelectorAll("td.repatt")) { i.classList.add("hideauthor"); } - quizwarnVisible = true; + authVisible = true; } + b.textContent = b.textContent.replace(/OFF|ON/, authVisible ? "ON" : "OFF"); } function downloadFile(filename, content, BOM) { let bom = new Uint8Array([0xEF, 0xBB, 0xBF]); @@ -926,7 +928,9 @@ let btn = document.createElement("button"); btn.innerText = "CSVget"; btn.type = "button"; - btn.title = `見えている書き込みをCSVで取得します + btn.accessKey = "g"; + btn.title = `Shortcut: G +見えている書き込みをCSVで取得します 全件表示されていることを確認してから利用して下さい。 Excelで利用する場合は Ctrl を押しながらクリックして下さい。 Get seen TEXT content as CSV.`; @@ -949,7 +953,7 @@ warnFileSize(document.forms[0]); }, false) } - if (i=document.getElementById("quizwarn")) { + if (i=document.getElementById("hideauth")) { i.addEventListener('click', toggleAuthorVisibility, false); } // Hack article_m links