Commit: b5c7a243be981a711086556af8c1befc7b50320d - teswiki (git)

blogger

Commit MetaInfo

• Révision: b5c7a243be981a711086556af8c1befc7b50320d (tree)
• l'heure: 2020-02-04 05:43:04
• Auteur: umorigu <umorigu@gmai...>
• Commiter: umorigu

Message de Log

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

Other details:

* 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

Change Summary

• 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

Modification

--- 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
@@ -163,7 +163,7 @@ function plugin_article_convert()
 	$article_rows = PLUGIN_ARTICLE_ROWS;
 	$article_cols = PLUGIN_ARTICLE_COLS;
 	$string = <<<EOD
-<form action="$script" method="post">
+<form action="$script" method="post" class="_p_article_form">
  <div>
   <input type="hidden" name="article_no" value="$article_no" />
   <input type="hidden" name="plugin" value="article" />

--- 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>

--- 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
 //
@@ -119,7 +119,7 @@ function plugin_comment_convert()
 	$s_page = htmlsc($page);
 	$string = <<<EOD
 <br />
-<form action="$script" method="post">
+<form action="$script" method="post" class="_p_comment_form">
  <div>
   <input type="hidden" name="plugin" value="comment" />
   <input type="hidden" name="refer"  value="$s_page" />

--- 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
@@ -133,7 +133,8 @@ function plugin_pcomment_convert()
 		$s_nodate = htmlsc($params['nodate']);
 		$s_count  = htmlsc($count);
 
-		$form_start = '<form action="' . get_base_uri() . '" method="post">' . "\n";
+		$form_start = '<form action="' . get_base_uri() .
+			'" method="post" class="_p_pcomment_form">' . "\n";
 		$form = <<<EOD
   <div>
   <input type="hidden" name="digest" value="$digest" />

--- 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,21 @@ span.new5 {
   font-size:xx-small;
 }
 
+/* comment.inc.php */
+._p_comment_form input[name="msg"] {
+  max-width:90%;
+}
+
+/* pcomment.inc.php */
+._p_pcomment_form input[name="msg"] {
+  max-width:90%;
+}
+
+/* article.inc.php */
+._p_article_form input[name="subject"] {
+  max-width:82%;
+}
+
 /* popular.inc.php */
 span.counter {
   font-size:70%;
@@ -646,6 +679,17 @@ tr.bugtrack_state_cancel td {
 tr.bugtrack_state_undef td {
   background-color:#ff3333;
 }
+._p_bugtrack_form input[name="summary"],
+._p_bugtrack_form textarea {
+  box-sizing:border-box;
+  width:35em;
+  max-width:99.5%;
+}
+
+/* tracker.inc.php */
+._p_tracker_form th {
+  min-width:5em;
+}
 
 /* search2.inc.php  */
 .search-result-page-summary {
@@ -656,6 +700,49 @@ 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_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],
+  ._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 input[name="summary"],
+  ._p_bugtrack_form textarea {
+    box-sizing:border-box;
+    width:99.5%;
+  }
+}
+
 @media print {
   a:link,
   a:visited {
@@ -664,7 +751,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>