コミット: 68b31a025c76799907579ba1f9557783b5a9e7d7 - pukiwiki-fork (git)

コミットメタ情報

• リビジョン: 68b31a025c76799907579ba1f9557783b5a9e7d7 (tree)
• 日時: 2020-02-04 05:43:04
• 作者: umorigu <umorigu@gmai...>
• コミッター: umorigu

ログメッセージ

BugTrack/2387 Responsive layout for Smartphone

Use flexbox layout with modern web browsers that support CSS3.
Add viewport meta for device width.

* PC (over 768px): horizontal block layout
* Smartphone (under 768px): vertical stack layout

* break-all for URL and long words
* Plugin support with media query

• comment, pcomment and article plugin
  
• tracker and bugtrack plugin
  

* Suitable word wrap properties

• word-break: break-all;
  
• overflow-wrap: break-word;
  
• word-wrap: break-word; (for Compatibility)
  

* Fix too thin MenuBar for PC layout
* word-break in header
* Responsive edit_form and select for Smartphone
* Responsive images (max-width: 100%)
* Set max-width of div#body
* Fit textarea width to window

変更サマリ

• modified: plugin/article.inc.php
• modified: plugin/bugtrack.inc.php
• modified: plugin/comment.inc.php
• modified: plugin/pcomment.inc.php
• modified: plugin/tracker.inc.php
• modified: skin/pukiwiki.css
• modified: skin/pukiwiki.skin.php

差分

--- a/plugin/article.inc.php
+++ b/plugin/article.inc.php
@@ -2,7 +2,7 @@
 // PukiWiki - Yet another WikiWikiWeb clone
 // article.inc.php
 // Copyright
-//   2002-2017 PukiWiki Development Team
+//   2002-2020 PukiWiki Development Team
 //   2002      Originally written by OKAWARA,Satoshi <[e-mail]>
 //             http://www.dml.co.jp/~kawara/pukiwiki/pukiwiki.php
 // License: GPL v2 or (at your option) any later version
@@ -170,10 +170,13 @@ function plugin_article_convert()
   <input type="hidden" name="digest" value="$s_digest" />
   <input type="hidden" name="refer" value="$s_page" />
   <label for="_p_article_name_$article_no">$_btn_name</label>
-  <input type="text" name="name" id="_p_article_name_$article_no" size="$name_cols" /><br />
+  <input type="text" name="name" id="_p_article_name_$article_no"
+   size="$name_cols" class="_p_article_name" /><br />
   <label for="_p_article_subject_$article_no">$_btn_subject</label>
-  <input type="text" name="subject" id="_p_article_subject_$article_no" size="$subject_cols" /><br />
-  <textarea name="msg" rows="$article_rows" cols="$article_cols">\n</textarea><br />
+  <input type="text" name="subject" id="_p_article_subject_$article_no"
+   size="$subject_cols" class="_p_article_subject" /><br />
+  <textarea name="msg" rows="$article_rows" cols="$article_cols"
+   class="_p_article_msg">\n</textarea><br />
   <input type="submit" name="article" value="$_btn_article" />
  </div>
 </form>

--- a/plugin/bugtrack.inc.php
+++ b/plugin/bugtrack.inc.php
@@ -2,7 +2,7 @@
 // PukiWiki - Yet another WikiWikiWeb clone.
 // bugtrack.inc.php
 // Copyright
-//   2002-2017 PukiWiki Development Team
+//   2002-2020 PukiWiki Development Team
 //   2002 Y.MASUI GPL2  http://masui.net/pukiwiki/ [e-mail]
 //
 // BugTrack plugin
@@ -114,7 +114,7 @@ function plugin_bugtrack_print_form($base, $category)
 	$s_body     = htmlsc($_plugin_bugtrack['body']);
 	$s_submit   = htmlsc($_plugin_bugtrack['submit']);
 	$body = <<<EOD
-<form action="$script" method="post">
+<form action="$script" method="post" class="_p_bugtrack_form">
  <table border="0">
   <tr>
    <th><label for="_p_bugtrack_name_$id">$s_name</label></th>
@@ -144,11 +144,13 @@ function plugin_bugtrack_print_form($base, $category)
   </tr>
   <tr>
    <th><label for="_p_bugtrack_summary_$id">$s_summary</label></th>
-   <td><input  id="_p_bugtrack_summary_$id" name="summary" size="60" type="text" /></td>
+   <td><input  id="_p_bugtrack_summary_$id" name="summary" size="60"
+    class="_p_bugtrack_form_summary" type="text" /></td>
   </tr>
   <tr>
    <th><label   for="_p_bugtrack_body_$id">$s_body</label></th>
-   <td><textarea id="_p_bugtrack_body_$id" name="body" cols="60" rows="6"></textarea></td>
+   <td><textarea id="_p_bugtrack_body_$id" name="body" cols="60" rows="6"
+    class="_p_bugtrack_form_body"></textarea></td>
   </tr>
   <tr>
    <td colspan="2" align="center">

--- a/plugin/comment.inc.php
+++ b/plugin/comment.inc.php
@@ -2,7 +2,7 @@
 // PukiWiki - Yet another WikiWikiWeb clone
 // comment.inc.php
 // Copyright
-//   2002-2017 PukiWiki Development Team
+//   2002-2020 PukiWiki Development Team
 //   2001-2002 Originally written by yu-ji
 // License: GPL v2 or (at your option) any later version
 //
@@ -109,7 +109,7 @@ function plugin_comment_convert()
 			$_btn_name . '</label>' .
 			'<input type="text" name="name" id="_p_comment_name_' .
 			$comment_no .  '" size="' . PLUGIN_COMMENT_SIZE_NAME .
-			'" />' . "\n";
+			'" class="_p_comment_name" />' . "\n";
 	}
 	$nodate = in_array('nodate', $options) ? '1' : '0';
 	$above  = in_array('above',  $options) ? '1' :
@@ -128,7 +128,8 @@ function plugin_comment_convert()
   <input type="hidden" name="above"  value="$above" />
   <input type="hidden" name="digest" value="$digest" />
   $nametags
-  <input type="text"   name="msg" id="_p_comment_comment_{$comment_no}" size="$comment_cols" />
+  <input type="text" name="msg" id="_p_comment_comment_{$comment_no}"
+   class="_p_comment_msg" size="$comment_cols" />
   <input type="submit" name="comment" value="$_btn_comment" />
  </div>
 </form>

--- a/plugin/pcomment.inc.php
+++ b/plugin/pcomment.inc.php
@@ -1,7 +1,7 @@
 <?php
 // PukiWiki - Yet another WikiWikiWeb clone
 // pcomment.inc.php
-// Copyright 2002-2017 PukiWiki Development Team
+// Copyright 2002-2020 PukiWiki Development Team
 // License: GPL v2 or (at your option) any later version
 //
 // pcomment plugin - Show/Insert comments into specified (another) page
@@ -121,12 +121,15 @@ function plugin_pcomment_convert()
 			$name = '';
 		} else {
 			$title = $_pcmt_messages['btn_name'];
-			$name = '<input type="text" name="name" size="' . PLUGIN_PCOMMENT_SIZE_NAME . '" />';
+			$name = '<input type="text" name="name" size="' .
+			PLUGIN_PCOMMENT_SIZE_NAME .
+			'" class="_p_comment_name" />';
 		}
 
 		$radio   = $params['reply'] ?
 			'<input type="radio" name="reply" value="0" tabindex="0" checked="checked" />' : '';
-		$comment = '<input type="text" name="msg" size="' . PLUGIN_PCOMMENT_SIZE_MSG . '" />';
+		$comment = '<input type="text" name="msg" size="' .
+		PLUGIN_PCOMMENT_SIZE_MSG . '" class="_p_comment_msg" />';
 
 		$s_page   = htmlsc($page);
 		$s_refer  = htmlsc($vars_page);

--- a/plugin/tracker.inc.php
+++ b/plugin/tracker.inc.php
@@ -1,7 +1,7 @@
 <?php
 // PukiWiki - Yet another WikiWikiWeb clone
 // tracker.inc.php
-// Copyright 2003-2018 PukiWiki Development Team
+// Copyright 2003-2020 PukiWiki Development Team
 // License: GPL v2 or (at your option) any later version
 //
 // Issue tracker plugin (See Also bugtrack plugin)
@@ -76,7 +76,8 @@ function plugin_tracker_convert()
 		$retval = str_replace("[$name]",$replace,$retval);
 	}
 	return <<<EOD
-<form enctype="multipart/form-data" action="$script" method="post">
+<form enctype="multipart/form-data" action="$script" method="post"
+ class="_p_tracker_form">
 <div>
 $retval
 $hiddens

--- a/skin/pukiwiki.css
+++ b/skin/pukiwiki.css
@@ -24,6 +24,10 @@ body,td {
   font-size:90%;
   font-family:verdana, arial, helvetica, Sans-Serif;
 }
+textarea {
+  box-sizing:border-box;
+  max-width:99.5%;
+}
 
 a:link {
   color:#215dc6;
@@ -340,11 +344,15 @@ strong.word9 {
 .edit_form {
   clear:both;
 }
+.edit_form textarea,.edit_form select {
+  width:95%;
+}
 
 /* pukiwiki.skin.php */
 div#header {
   padding:0;
   margin:0;
+  word-break:break-all;
 }
 
 div#navigator {
@@ -353,18 +361,23 @@ div#navigator {
   margin:0;
 }
 
-td.menubar {
-  width:9em;
-  vertical-align:top;
+div#contents {
+  display:flex;
+  flex-flow:row nowrap;
+  word-break:break-all;
+  overflow-wrap:break-word;
+  word-wrap:break-word;
 }
 
 div#menubar {
-  width:9em;
+  min-width:9em;
+  max-width:9em;
   padding:0;
   margin:4px;
-  word-break:break-all;
   font-size:90%;
   overflow:hidden;
+  order:1;
+  flex-grow:0;
 }
 div#menubar ul {
   margin:0 0 0 .5em;
@@ -380,11 +393,16 @@ div#menubar h4 {
 div#body {
   padding:0;
   margin:0 0 0 .5em;
+  max-width:98%;
+  order:2;
+  flex-grow:1;
 }
+
 div#note {
   clear:both;
   padding:0;
   margin:0;
+  word-break:break-all;
 }
 div#attach {
   clear:both;
@@ -591,6 +609,27 @@ span.new5 {
   font-size:xx-small;
 }
 
+/* comment.inc.php */
+._p_comment_name {
+  width:9em;
+}
+._p_comment_msg {
+  width:38em;
+  max-width:90%;
+}
+
+/* article.inc.php */
+._p_article_name {
+  width:15em;
+}
+._p_article_subject {
+  width:35em;
+}
+._p_article_msg {
+  width:38em;
+  height:5em;
+}
+
 /* popular.inc.php */
 span.counter {
   font-size:70%;
@@ -646,6 +685,17 @@ tr.bugtrack_state_cancel td {
 tr.bugtrack_state_undef td {
   background-color:#ff3333;
 }
+._p_bugtrack_form_summary {
+  width:35em;
+}
+._p_bugtrack_form_body {
+  width:35em;
+}
+
+/* tracker.inc.php */
+._p_tracker_form th {
+  min-width:5em;
+}
 
 /* search2.inc.php  */
 .search-result-page-summary {
@@ -656,6 +706,59 @@ tr.bugtrack_state_undef td {
   white-space:nowrap;
 }
 
+/* Mobile-friendly Responsive layout */
+@media (max-width:767px) {
+  div#contents {
+    flex-flow:column wrap;
+  }
+  div#menubar {
+    width:auto;
+    max-width:none;
+    font-size:100%;
+    order:2;
+  }
+  div#body {
+    order:1;
+  }
+  div#body img {
+    max-width:95%;
+    height:auto;
+  }
+
+  ._p_article_subject {
+    width:82%;
+  }
+  ._p_article_msg {
+    box-sizing:border-box;
+    width:99.5%;
+  }
+
+  ._p_tracker_form th,._p_tracker_form td {
+    display:block;
+    text-align:left !important;
+    width:auto !important;
+    margin:0;
+  }
+  ._p_tracker_form td input[type=text] {
+    box-sizing:border-box;
+    width:99.5%;
+  }
+  ._p_tracker_form td textarea {
+    box-sizing:border-box;
+    width:99.5%;
+  }
+
+  ._p_bugtrack_form th,._p_bugtrack_form td {
+    display:block;
+    text-align:left !important;
+    margin:0;
+  }
+  ._p_bugtrack_form_summary,._p_bugtrack_form_body {
+    box-sizing:border-box;
+    width:99.5%;
+  }
+}
+
 @media print {
   a:link,
   a:visited {
@@ -664,7 +767,6 @@ tr.bugtrack_state_undef td {
   img#logo,
   div#navigator,
   div#menubar,
-  td.menubar,
   div#related,
   div#attach,
   div#toolbar {

--- a/skin/pukiwiki.skin.php
+++ b/skin/pukiwiki.skin.php
@@ -2,7 +2,7 @@
 // PukiWiki - Yet another WikiWikiWeb clone.
 // pukiwiki.skin.php
 // Copyright
-//   2002-2017 PukiWiki Development Team
+//   2002-2020 PukiWiki Development Team
 //   2001-2002 Originally written by yu-ji
 // License: GPL v2 or (at your option) any later version
 //
@@ -61,6 +61,7 @@ header('Content-Type: text/html; charset=' . CONTENT_CHARSET);
 <html lang="<?php echo LANG ?>">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <?php if ($nofollow || ! $is_read)  { ?> <meta name="robots" content="NOINDEX,NOFOLLOW" /><?php } ?>
 <?php if ($html_meta_referrer_policy) { ?> <meta name="referrer" content="<?php echo htmlsc(html_meta_referrer_policy) ?>" /><?php } ?>
 
@@ -153,20 +154,12 @@ function _navigator($key, $value = '', $javascript = ''){
 
 <?php echo $hr ?>
 
+<div id="contents">
+ <div id="body"><?php echo $body ?></div>
 <?php if ($menu !== FALSE) { ?>
-<table border="0" style="width:100%">
- <tr>
-  <td class="menubar">
-   <div id="menubar"><?php echo $menu ?></div>
-  </td>
-  <td valign="top">
-   <div id="body"><?php echo $body ?></div>
-  </td>
- </tr>
-</table>
-<?php } else { ?>
-<div id="body"><?php echo $body ?></div>
+ <div id="menubar"><?php echo $menu ?></div>
 <?php } ?>
+</div>
 
 <?php if ($notes != '') { ?>
 <div id="note"><?php echo $notes ?></div>