changeset 260:1b9d45b823b8

UI changed to tab selection
author HIROSE Yuuji <yuuji@gentei.org>
date Wed, 20 Jul 2016 13:19:15 +0859
parents 85a001a9c7c5
children 1a4df907ac87
files examples/common/default/default.css examples/common/default/home.m4.html s4-funcs.sh
diffstat 3 files changed, 69 insertions(+), 25 deletions(-) [+]
line wrap: on
line diff
--- a/examples/common/default/default.css	Tue Jul 19 13:55:49 2016 +0859
+++ b/examples/common/default/default.css	Wed Jul 20 13:19:15 2016 +0859
@@ -105,6 +105,36 @@
     display: block; background: #fadede;
     height: auto; opacity: 1.0; transition: 1s;
 }
+
+/* fold2!! */
+div.foldtabs {
+    position: relative; max-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;
+}
+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.dumptable {max-height: 15em; overflow: auto;}
 table.dumpblogs td,
 div.lcto td {	/* LINK + CTIME + TITLE + OWNER + something... */
--- a/examples/common/default/home.m4.html	Tue Jul 19 13:55:49 2016 +0859
+++ b/examples/common/default/home.m4.html	Wed Jul 20 13:19:15 2016 +0859
@@ -5,17 +5,21 @@
 _PROFILE_
 </div>
 
-<div class="fold">
-<input type="checkbox" id="sd"><label for="sd">日記一覧を見る(_NBLOG_)</label>
+<div class="foldtabs">
+<input type="radio" id="sd" name="foldtabs"><label for="sd">自分の日記(_NBLOG_)</label>
 <div><!-- in home.m4 -->_BLOGS_</div><!-- in home.m4 -->
-</div>
+
 
-<div class="fold"> <!-- in home.m4.html -->
-<input type="checkbox" id="grp"><label
- for="grp">個人の参加グループ一覧を見る</label>
+<input type="radio" id="grp" name="foldtabs"><label
+ for="grp">参加中グループ</label>
 <div> <!-- div.fold hides this div (in home.m4.html) -->
 <div class="dumptable">
 _GROUPS_
 </div><!-- end of .dumptable -->
 </div><!-- div.fold hides upto here (in home.m4.html) -->
-</div> <!-- end of fold (in home.m4.html) -->
+
+_HOMETAIL_
+
+<input type="radio" id="close" name="foldtabs"><label
+for="close">×</label>
+</div> <!--  end of fold (in home.m4.html) -->
--- a/s4-funcs.sh	Tue Jul 19 13:55:49 2016 +0859
+++ b/s4-funcs.sh	Wed Jul 20 13:19:15 2016 +0859
@@ -1481,16 +1481,13 @@
   nblog=`query "SELECT count(id) FROM blog_s WHERE key='owner' AND \
 		val='$uname';"`
   listblog $uname			> $bf
-  listgroupbytable $formdir/grp.def $cond \
-      | _m4 -D_BODYCLASS_=home -D_TITLE_="spaste(\`$tf')" \
-	    -D_PROFILE_="spaste(\`$pf')$conflink" \
-	    -D_PROFIMG_="spaste(\`$imf')" \
-	    -D_BLOGS_="spaste(\`$bf')" \
-	    -D_SEARCH_="spaste(\`$sf')" \
-	    -D_NBLOG_="$nblog" \
-	    -D_GROUPS_="syscmd(\`cat')" \
-	    $layout/html.m4.html $layout/home.m4.html
+
+  hometail=$tmpd/tail.$$
+  mkfifo $hometail
+
+  #Calling listgroupbytable, originally here
   
+  (
   if [ x"$user" = x"$uname" ]; then
     # Display Most Recent Entry
     shortval=${dumpcollen:+"substr(val, 0, $dumpcollen)"}
@@ -1530,9 +1527,9 @@
 EOF
 
     cat<<-EOF
-	<div class="fold lcto">
-	`cgi_checkbox mrd yes id="mre"`<label
-	 for="mre">最近書き込んだ場所一覧</label>
+	`cgi_radio foldtabs yes id="mre"`<label
+	 for="mre">最近の書き込み先</label>
+	<div class="lcto">
 	`DT_VIEW=replyblog dumptable html blog`
 	</div>
 	EOF
@@ -1556,19 +1553,32 @@
     cont=$((cont-1))
     err newcount=$cont
     if [ $cont -gt 0 ]; then
-      echo "全体の新着記事${cont}傑" | html h2
-      echo "$new10"
+      #echo "全体の新着記事${cont}傑" | html h2
+      cgi_radio foldtabs yes 'id="new10"'
+      echo "<label for=\"new10\">新着${cont}傑</label><div>"
       cat<<-EOF | html form 'action="?home"'
-	<div class="fold noborder lcto">
-	`cgi_checkbox readchk yes 'id="read"'`<label
+	`cgi_checkbox fold yes 'id="read"'`<label
 	 for="read">新着ふくめて全部読んだことにする</label>
-	 <div>`cgi_submit '確定'`</div>
+	 `cgi_submit '確定'`
 	 `cgi_hidden read yes`
-	</div>
 	EOF
+      echo "$new10 <!-- new10 -->"
+      echo "</div>"
     fi
   fi
+  ) > $hometail &		# Is background call safe to m4??
   #
+  listgroupbytable $formdir/grp.def $cond |
+      _m4 -D_BODYCLASS_=home -D_TITLE_="spaste(\`$tf')" \
+	  -D_PROFILE_="spaste(\`$pf')$conflink" \
+	  -D_PROFIMG_="spaste(\`$imf')" \
+	  -D_BLOGS_="spaste(\`$bf')" \
+	  -D_SEARCH_="spaste(\`$sf')" \
+	  -D_NBLOG_="$nblog" \
+	  -D_GROUPS_="syscmd(\`cat')" \
+	  -D_HOMETAIL_="syscmd(\`cat $hometail')" \
+	  $layout/html.m4.html $layout/home.m4.html
+
   # Record access log
   [ -n "$1" ] && [ x"$1" != x"$user" ] && acclog user $1
 }

yatex.org