From da61d38249a8bff1fb2e25579ecd11bcd420eb46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= <contact@fredericguillot.com>
Date: Fri, 14 Feb 2014 21:21:14 -0500
Subject: [PATCH] Improve mobile layout (Android phones)

---
 assets/css/app.css                   | 50 +++++++++++++++++++++-------
 templates/bookmark_links.php         |  6 ++--
 templates/feeds.php                  | 46 ++++++++++++++-----------
 templates/item.php                   | 42 ++++++++++-------------
 templates/layout.php                 |  2 +-
 templates/show_item.php              | 39 ++++++++++++----------
 templates/status_links.php           | 13 +++-----
 themes/bootstrap-light/css/app.css   | 26 +++++++++++++++
 themes/bootswatch-cyborg/css/app.css | 26 +++++++++++++++
 themes/nostyle/css/app.css           | 17 ++++++++++
 10 files changed, 182 insertions(+), 85 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 262dfd4..d8a9a5a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -429,15 +429,12 @@ nav .active a {
     text-decoration: underline;
 }
 
+.item-menu,
 .items p {
     color: #aaa;
     font-size: 70%;
 }
 
-.items p a {
-    color: #aaa;
-}
-
 .items .preview {
     line-height: 1.5em;
     font-size: 100%;
@@ -539,13 +536,35 @@ nav .active a {
     display: block;
 }
 
-.infos {
-    padding-bottom: 20px;
-    color: #ccc;
+ul.item-menu,
+ul.item-infos {
+    margin: 0;
+    padding: 0;
+    color: #aaa;
 }
 
-.item .infos a {
-    color: #ccc;
+.item-menu li,
+ul.item-infos li {
+    margin: 0;
+    padding-left: 7px;
+    padding-right: 5px;
+    display: inline;
+    border-right: 1px solid #ccc;
+}
+
+.item-menu li:first-child,
+ul.item-infos li:first-child {
+    padding-left: 0;
+}
+
+.item-menu li:last-child,
+ul.item-infos li:last-child {
+    border: none;
+}
+
+.item-menu a,
+ul.item-infos a {
+    color: #aaa;
 }
 
 span.downloading img {
@@ -565,7 +584,7 @@ span.downloading img {
     text-align: center;
 }
 
-.item .infos a.bookmark-icon {
+a.bookmark-icon {
     color: #333;
     text-decoration: none;
 }
@@ -605,6 +624,7 @@ iframe {
 /* mobile design */
 @media only screen and (max-width: 480px) {
 
+    ul li.hide-mobile,
     .hide-mobile {
         display: none;
     }
@@ -640,9 +660,8 @@ iframe {
         font-size: 0.75em;
     }
 
-    .item .infos {
+    .item-infos {
         font-size: 0.9em;
-        padding: 0;
     }
 
     .item nav a {
@@ -654,6 +673,13 @@ iframe {
         color: #555;
     }
 
+    .item-menu li,
+    ul.item-infos li {
+        padding-left: 0;
+        padding-right: 5px;
+        border: none;
+    }
+
     section li {
         font-size: 0.85em;
     }
diff --git a/templates/bookmark_links.php b/templates/bookmark_links.php
index 6fbe3e1..16bbd2c 100644
--- a/templates/bookmark_links.php
+++ b/templates/bookmark_links.php
@@ -1,3 +1,4 @@
+<li class="hide-mobile">
 <?php if ($item['bookmark']): ?>
     <a
         id="bookmark-<?= $item['id'] ?>"
@@ -7,7 +8,7 @@
         data-reverse-label="<?= t('bookmark') ?>"
     >
         <?= t('remove bookmark') ?>
-    </a> |
+    </a>
 <?php else: ?>
     <a
         id="bookmark-<?= $item['id'] ?>"
@@ -17,5 +18,6 @@
         data-reverse-label="<?= t('remove bookmark') ?>"
     >
         <?= t('bookmark') ?>
-    </a> |
+    </a>
 <?php endif ?>
+</li>
\ No newline at end of file
diff --git a/templates/feeds.php b/templates/feeds.php
index c16eb8b..c393eec 100644
--- a/templates/feeds.php
+++ b/templates/feeds.php
@@ -49,26 +49,32 @@
 
                 <?php endif ?>
             </h2>
-            <p>
-                <a href="<?= $feed['site_url'] ?>" rel="noreferrer" target="_blank"><?= Helper\get_host_from_url($feed['site_url']) ?></a> |
-
-                <span class="hide-mobile"><a href="?action=confirm-remove-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('remove') ?></a> |</span>
-
-                <?php if ($feed['download_content']): ?>
-                    <span class="hide-mobile"><a href="?action=disable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><strong><?= t('disable full content') ?></strong></a> |</span>
-                <?php else: ?>
-                    <span class="hide-mobile"><a href="?action=enable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable full content') ?></a> |</span>
-                <?php endif ?>
-
-                <?php if ($feed['enabled']): ?>
-                    <span class="hide-mobile"><a href="?action=confirm-disable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('disable') ?></a> |</span>
-                    <a href="?action=refresh-feed&amp;feed_id=<?= $feed['id'] ?>" data-feed-id="<?= $feed['id'] ?>" data-action="refresh-feed"><?= t('refresh') ?></a> |
-                <?php else: ?>
-                    <span class="hide-mobile"><a href="?action=enable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable') ?></a> |</span>
-                <?php endif ?>
-
-                <span class="hide-mobile"><a href="?action=edit-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('edit') ?></a></span>
-            </p>
+            <ul class="item-menu">
+                <li>
+                    <a href="<?= $feed['site_url'] ?>" rel="noreferrer" target="_blank"><?= Helper\get_host_from_url($feed['site_url']) ?></a>
+                </li>
+                <li class="hide-mobile">
+                    <a href="?action=confirm-remove-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('remove') ?></a>
+                </li>
+                <li class="hide-mobile">
+                    <?php if ($feed['download_content']): ?>
+                        <a href="?action=disable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><strong><?= t('disable full content') ?></strong></a>
+                    <?php else: ?>
+                        <a href="?action=enable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable full content') ?></a>
+                    <?php endif ?>
+                </li>
+                <li class="hide-mobile">
+                    <?php if ($feed['enabled']): ?>
+                        <a href="?action=confirm-disable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('disable') ?></a>
+                        <a href="?action=refresh-feed&amp;feed_id=<?= $feed['id'] ?>" data-feed-id="<?= $feed['id'] ?>" data-action="refresh-feed"><?= t('refresh') ?></a>
+                    <?php else: ?>
+                        <a href="?action=enable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable') ?></a>
+                    <?php endif ?>
+                </li>
+                <li class="hide-mobile">
+                    <a href="?action=edit-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('edit') ?></a>
+                </li>
+            </ul>
         </article>
     <?php endforeach ?>
     </section>
diff --git a/templates/item.php b/templates/item.php
index 603706d..c9beb4a 100644
--- a/templates/item.php
+++ b/templates/item.php
@@ -8,7 +8,7 @@
     >
     <h2>
         <?= $item['bookmark'] ? '<span id="bookmark-icon-'.$item['id'].'">★ </span>' : '' ?>
-        <?= $item['status'] === 'read' ? '<span id="read-icon-'.$item['id'].'">☑ </span>' : '' ?>
+        <?= $item['status'] === 'read' ? '<span id="read-icon-'.$item['id'].'">✔ </span>' : '' ?>
         <a
             href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item['id'] ?>"
             data-item-id="<?= $item['id'] ?>"
@@ -21,29 +21,21 @@
     <p class="preview">
         <?= Helper\escape(Helper\summary(strip_tags($item['content']), 50, 300)) ?>
     </p>
-    <p>
-        <?php if (! isset($item['feed_title'])): ?>
-            <?= Helper\get_host_from_url($item['url']) ?> |
-        <?php else: ?>
-            <a href="?action=feed-items&amp;feed_id=<?= $item['feed_id'] ?>" title="<?= t('Show only this subscription') ?>"><?= Helper\escape($item['feed_title']) ?></a> |
-        <?php endif ?>
-
-        <span class="hide-mobile">
-            <?= dt('%e %B %Y %k:%M', $item['updated']) ?> |
-            <?= \PicoTools\Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?>
-
-            <a
-                href="<?= $item['url'] ?>"
-                id="original-<?= $item['id'] ?>"
-                rel="noreferrer"
-                target="_blank"
-                data-item-id="<?= $item['id'] ?>"
-            >
-                <?= t('original link') ?>
-            </a> |
-        </span>
-
+    <ul class="item-menu">
+        <li>
+            <?php if (! isset($item['feed_title'])): ?>
+                <?= Helper\get_host_from_url($item['url']) ?>
+            <?php else: ?>
+                <a href="?action=feed-items&amp;feed_id=<?= $item['feed_id'] ?>" title="<?= t('Show only this subscription') ?>"><?= Helper\escape($item['feed_title']) ?></a>
+            <?php endif ?>
+        </li>
+        <li class="hide-mobile">
+            <?= dt('%e %B %Y %k:%M', $item['updated']) ?>
+        </li>
+        <li class="hide-mobile">
+            <a href="<?= $item['url'] ?>" id="original-<?= $item['id'] ?>" rel="noreferrer" target="_blank" data-item-id="<?= $item['id'] ?>"><?= t('original link') ?></a>
+        </li>
+        <?= \PicoTools\Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?>
         <?= \PicoTools\Template\load('status_links', array('item' => $item, 'redirect' => $menu, 'offset' => $offset)) ?>
-
-    </p>
+    </ul>
 </article>
\ No newline at end of file
diff --git a/templates/layout.php b/templates/layout.php
index 017947d..e5f512e 100644
--- a/templates/layout.php
+++ b/templates/layout.php
@@ -37,7 +37,7 @@
                         <a href="?action=logout"><?= t('logout') ?></a>
                     </li>
                     <li class="<?= isset($menu) && $menu === 'more' ? 'active hide-desktop' : 'hide-desktop' ?>">
-                        <a href="?action=more"><?= t('▾ menu') ?></a>
+                        <a href="?action=more"><?= t('∨ menu') ?></a>
                     </li>
                 </ul>
             </nav>
diff --git a/templates/show_item.php b/templates/show_item.php
index c2a07e0..f7552fb 100644
--- a/templates/show_item.php
+++ b/templates/show_item.php
@@ -36,7 +36,8 @@
             </a>
         </h1>
 
-        <p class="infos">
+        <ul class="item-infos">
+            <li>
             <?php if ($item['bookmark']): ?>
                 <a
                     id="bookmark-<?=$item['id'] ?>"
@@ -55,22 +56,26 @@
                     data-action="bookmark"
                     data-item-id="<?= $item['id'] ?>"
                 >☆</a>
-            <?php endif ?> |
-
-            <a href="?action=feed-items&amp;feed_id=<?= $feed['id'] ?>"><?= Helper\escape($feed['title']) ?></a> |
-
-            <span class="hide-mobile"><?= dt('%e %B %Y %k:%M', $item['updated']) ?> |</span>
-
-            <span id="download-item"
-                  data-item-id="<?= $item['id'] ?>"
-                  data-failure-message="<?= t('unable to fetch content') ?>"
-                  data-before-message="<?= t('in progress...') ?>"
-                  data-after-message="<?= t('content downloaded') ?>">
-                <a href="#" data-action="download-item">
-                    <?= t('download content') ?>
-                </a>
-            </span>
-        </p>
+            <?php endif ?>
+            </li>
+            <li>
+                <a href="?action=feed-items&amp;feed_id=<?= $feed['id'] ?>"><?= Helper\escape($feed['title']) ?></a>
+            </li>
+            <li class="hide-mobile">
+                <?= dt('%e %B %Y %k:%M', $item['updated']) ?>
+            </li>
+            <li class="hide-mobile">
+                <span id="download-item"
+                      data-item-id="<?= $item['id'] ?>"
+                      data-failure-message="<?= t('unable to fetch content') ?>"
+                      data-before-message="<?= t('in progress...') ?>"
+                      data-after-message="<?= t('content downloaded') ?>">
+                    <a href="#" data-action="download-item">
+                        <?= t('download content') ?>
+                    </a>
+                </span>
+            </li>
+        </ul>
 
         <div id="item-content">
             <?= $item['content'] ?>
diff --git a/templates/status_links.php b/templates/status_links.php
index 59bc26f..4e48a2e 100644
--- a/templates/status_links.php
+++ b/templates/status_links.php
@@ -1,11 +1,7 @@
-<span class="hide-mobile">
-    <a
-        href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>"
-    >
-        <?= t('remove') ?>
-    </a> |
-</span>
-
+<li class="hide-mobile">
+    <a href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>"><?= t('remove') ?></a>
+</li>
+<li>
 <?php if ($item['status'] == 'unread'): ?>
     <a
         id="status-<?= $item['id'] ?>"
@@ -27,3 +23,4 @@
         <?= t('mark as unread') ?>
     </a>
 <?php endif ?>
+</li>
\ No newline at end of file
diff --git a/themes/bootstrap-light/css/app.css b/themes/bootstrap-light/css/app.css
index e108ca6..ec1b1df 100644
--- a/themes/bootstrap-light/css/app.css
+++ b/themes/bootstrap-light/css/app.css
@@ -4612,6 +4612,32 @@ section .alert ul {
     padding-left: 0;
 }
 
+ul.item-menu,
+ul.item-infos {
+    margin: 0;
+    padding: 0;
+    color: #428bca;
+}
+
+.item-menu li,
+ul.item-infos li {
+    margin: 0;
+    padding-left: 7px;
+    padding-right: 5px;
+    display: inline;
+    border-right: 1px solid #ccc;
+}
+
+.item-menu li:first-child,
+ul.item-infos li:first-child {
+    padding-left: 0;
+}
+
+.item-menu li:last-child,
+ul.item-infos li:last-child {
+    border: none;
+}
+
 @media (max-width:1200px) {
     .hide-mobile {
         display: none !important;
diff --git a/themes/bootswatch-cyborg/css/app.css b/themes/bootswatch-cyborg/css/app.css
index 6952732..e6187c7 100644
--- a/themes/bootswatch-cyborg/css/app.css
+++ b/themes/bootswatch-cyborg/css/app.css
@@ -4612,6 +4612,32 @@ section .alert ul {
     padding-left: 0;
 }
 
+ul.item-menu,
+ul.item-infos {
+    margin: 0;
+    padding: 0;
+    color: #2a9fd6;
+}
+
+.item-menu li,
+ul.item-infos li {
+    margin: 0;
+    padding-left: 7px;
+    padding-right: 5px;
+    display: inline;
+    border-right: 1px solid #ccc;
+}
+
+.item-menu li:first-child,
+ul.item-infos li:first-child {
+    padding-left: 0;
+}
+
+.item-menu li:last-child,
+ul.item-infos li:last-child {
+    border: none;
+}
+
 @media (max-width:1200px) {
     .hide-mobile {
         display: none !important;
diff --git a/themes/nostyle/css/app.css b/themes/nostyle/css/app.css
index e8b339b..6665d92 100644
--- a/themes/nostyle/css/app.css
+++ b/themes/nostyle/css/app.css
@@ -79,6 +79,22 @@ iframe {
     padding: 3px;
 }
 
+ul.item-menu,
+ul.item-infos {
+    padding: 0;
+}
+
+ul.item-menu li,
+ul.item-infos li {
+    margin: 0;
+    padding-right: 5px;
+    display: inline;
+}
+
+a.bookmark-icon {
+    text-decoration: none;
+}
+
 /* desktop design */
 @media only screen and (min-width: 480px) {
 
@@ -90,6 +106,7 @@ iframe {
 /* mobile design */
 @media only screen and (max-width: 480px) {
 
+    ul li.hide-mobile,
     .hide-mobile {
         display: none;
     }