jan/miniflux-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve mobile layout

Browse Source
This commit is contained in:
Frédéric Guillot 2014-02-04 21:47:59 -05:00
parent 232cf848b5
commit 4a17f614fe
7 changed files with 110 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
assets/css/app.css
View File

@ -322,7 +322,7 @@ header ul {
header li { header li {
display: inline; display: inline;
padding-left: 30px; padding-left: 3%;
} }
header a { header a {
@ -470,11 +470,6 @@ nav .active a {
font-size: 1.1em; font-size: 1.1em;
} }
.item li pre,
.item p code {
}
.item h2, .item h2,
.item h3 { .item h3 {
font-weight: bold; font-weight: bold;
@ -517,14 +512,18 @@ nav .active a {
.item nav span, .item nav span,
.item nav a, .item nav a,
.item nav a:visited { .item nav a:visited {
color: #3366CC; color: #333;
font-family: sans-serif;
} }
.item nav { .item nav {
width: 100%;
}
.item nav.bottom {
border-top: 1px dotted #ddd; border-top: 1px dotted #ddd;
padding-top: 8px; padding-top: 8px;
margin-top: 50px; margin-top: 50px;
width: 100%;
} }
.nav-left { .nav-left {
@ -589,6 +588,14 @@ iframe {
} }
/* desktop design */
@media only screen and (min-width: 480px) {
.hide-desktop {
display: none;
}
}
/* mobile design */ /* mobile design */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
@ -602,36 +609,14 @@ iframe {
max-width: 480px; max-width: 480px;
} }
header {
margin-bottom: 0;
}
nav .active a { nav .active a {
font-weight: normal; font-weight: normal;
} }
.logo {
display: block;
float: none;
}
header {
margin: 0;
width: 100%;
}
header ul {
text-align: left;
}
header li {
padding: 0;
width: 50%;
float: right;
display: block;
line-height: 30px;
}
nav ul {
padding-top: 5px;
}
.page { .page {
clear: both; clear: both;
padding-top: 20px; padding-top: 20px;
@ -646,7 +631,7 @@ iframe {
} }
.item h1 { .item h1 {
font-size: 0.9em; font-size: 0.75em;
} }
.item .infos { .item .infos {
@ -654,6 +639,11 @@ iframe {
padding: 0; padding: 0;
} }
.item nav a {
font-weight: bold;
text-decoration: none;
}
.items .preview { .items .preview {
color: #555; color: #555;
} }
@ -661,4 +651,17 @@ iframe {
section li { section li {
font-size: 0.85em; font-size: 0.85em;
} }
.menu-more li {
font-size: 1.1em;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
list-style-type: none;
}
.menu-more a {
text-decoration: none;
color: #333;
}
} }

8
controllers/common.php
View File

@ -65,4 +65,10 @@ Router\get_action('js', function() {
Router\get_action('show-help', function() { Router\get_action('show-help', function() {
Response\html(Template\load('show_help')); Response\html(Template\load('show_help'));
}); });
// Show menu "more" with the mobile view
Router\get_action('more', function() {
Response\html(Template\layout('show_more', array('menu' => 'more')));
});

19
templates/item.php
View File

@ -31,18 +31,19 @@
<span class="hide-mobile"> <span class="hide-mobile">
<?= dt('%e %B %Y %k:%M', $item['updated']) ?> | <?= dt('%e %B %Y %k:%M', $item['updated']) ?> |
<?= \PicoTools\Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?> <?= \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> </span>
<?= \PicoTools\Template\load('status_links', array('item' => $item, 'redirect' => $menu, 'offset' => $offset)) ?> <?= \PicoTools\Template\load('status_links', array('item' => $item, 'redirect' => $menu, 'offset' => $offset)) ?>
<a
href="<?= $item['url'] ?>"
id="original-<?= $item['id'] ?>"
rel="noreferrer"
target="_blank"
data-item-id="<?= $item['id'] ?>"
>
<?= t('original link') ?>
</a>
</p> </p>
</article> </article>

13
templates/layout.php
View File

@ -21,21 +21,24 @@
<li <?= isset($menu) && $menu === 'unread' ? 'class="active"' : '' ?>> <li <?= isset($menu) && $menu === 'unread' ? 'class="active"' : '' ?>>
<a href="?action=unread"><?= t('unread') ?> <span id="nav-counter"><?= isset($nb_unread_items) ? '('.$nb_unread_items.')' : '' ?></span></a> <a href="?action=unread"><?= t('unread') ?> <span id="nav-counter"><?= isset($nb_unread_items) ? '('.$nb_unread_items.')' : '' ?></span></a>
</li> </li>
<li <?= isset($menu) && $menu === 'bookmarks' ? 'class="active"' : '' ?>> <li class="<?= isset($menu) && $menu === 'bookmarks' ? 'active hide-mobile' : 'hide-mobile' ?>">
<a href="?action=bookmarks"><?= t('bookmarks') ?></a> <a href="?action=bookmarks"><?= t('bookmarks') ?></a>
</li> </li>
<li <?= isset($menu) && $menu === 'history' ? 'class="active"' : '' ?>> <li class="<?= isset($menu) && $menu === 'history' ? 'active hide-mobile' : 'hide-mobile' ?>">
<a href="?action=history"><?= t('history') ?></a> <a href="?action=history"><?= t('history') ?></a>
</li> </li>
<li <?= isset($menu) && $menu === 'feeds' ? 'class="active"' : '' ?>> <li class="<?= isset($menu) && $menu === 'feeds' ? 'active hide-mobile' : 'hide-mobile' ?>">
<a href="?action=feeds"><?= t('subscriptions') ?></a> <a href="?action=feeds"><?= t('subscriptions') ?></a>
</li> </li>
<li <?= isset($menu) && $menu === 'config' ? 'class="active"' : '' ?>> <li class="<?= isset($menu) && $menu === 'config' ? 'active hide-mobile' : 'hide-mobile' ?>">
<a href="?action=config"><?= t('preferences') ?></a> <a href="?action=config"><?= t('preferences') ?></a>
</li> </li>
<li> <li class="hide-mobile">
<a href="?action=logout"><?= t('logout') ?></a> <a href="?action=logout"><?= t('logout') ?></a>
</li> </li>
<li class="<?= isset($menu) && $menu === 'more' ? 'active hide-desktop' : 'hide-desktop' ?>">
<a href="?action=more"><?= t('▾ menu') ?></a>
</li>
</ul> </ul>
</nav> </nav>
</header> </header>

37
templates/show_item.php
View File

@ -1,7 +1,5 @@
<?php if (empty($item)): ?> <?php if (empty($item)): ?>
<p class="alert alert-info"><?= t('Item not found') ?></p> <p class="alert alert-info"><?= t('Item not found') ?></p>
<?php else: ?> <?php else: ?>
<article <article
class="item" class="item"
@ -11,6 +9,23 @@
data-item-bookmark="<?= $item['bookmark'] ?>" data-item-bookmark="<?= $item['bookmark'] ?>"
data-item-page="<?= $menu ?>" data-item-page="<?= $menu ?>"
> >
<?php if (isset($item_nav)): ?>
<nav class="top hide-desktop">
<span class="nav-left">
<?php if ($item_nav['previous']): ?>
<a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['previous']['id'] ?>" id="previous-item" title="<?= t($item_nav['previous']['title']) ?>">« <?= t('Previous') ?></a>
<?php endif ?>
</span>
<span class="nav-right">
<?php if ($item_nav['next']): ?>
<a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['next']['id'] ?>" id="next-item" title="<?= t($item_nav['next']['title']) ?>"><?= t('Next') ?> »</a>
<?php endif ?>
</span>
</nav>
<?php endif ?>
<h1> <h1>
<a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank" id="original-<?= $item['id'] ?>"> <a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank" id="original-<?= $item['id'] ?>">
<?= Helper\escape($item['title']) ?> <?= Helper\escape($item['title']) ?>
@ -58,32 +73,16 @@
</div> </div>
<?php if (isset($item_nav)): ?> <?php if (isset($item_nav)): ?>
<nav> <nav class="bottom">
<span class="nav-left"> <span class="nav-left">
<?php if ($item_nav['previous']): ?> <?php if ($item_nav['previous']): ?>
<a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['previous']['id'] ?>" id="previous-item" title="<?= t($item_nav['previous']['title']) ?>">« <?= t('Previous') ?></a> <a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['previous']['id'] ?>" id="previous-item" title="<?= t($item_nav['previous']['title']) ?>">« <?= t('Previous') ?></a>
<?php else: ?>
« <?= t('Previous') ?>
<?php endif ?>
</span>
<span class="nav-middle">
<?php if ($item_nav['previous'] && $item_nav['next']): ?>
<a href="?action=<?= $menu ?>&amp;feed_id=<?= $feed['id'] ?>#item-<?= $item_nav['next']['id'] ?>"><?= t('Listing') ?></a>
<?php elseif ($item_nav['previous'] && ! $item_nav['next']): ?>
<a href="?action=<?= $menu ?>&amp;feed_id=<?= $feed['id'] ?>#item-<?= $item_nav['previous']['id'] ?>"><?= t('Listing') ?></a>
<?php elseif (! $item_nav['previous'] && $item_nav['next']): ?>
<a href="?action=<?= $menu ?>&amp;feed_id=<?= $feed['id'] ?>#item-<?= $item_nav['next']['id'] ?>"><?= t('Listing') ?></a>
<?php elseif (! $item_nav['previous'] && ! $item_nav['next']): ?>
<a href="?action=<?= $menu ?>&amp;feed_id=<?= $feed['id'] ?>"><?= t('Listing') ?></a>
<?php endif ?> <?php endif ?>
</span> </span>
<span class="nav-right"> <span class="nav-right">
<?php if ($item_nav['next']): ?> <?php if ($item_nav['next']): ?>
<a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['next']['id'] ?>" id="next-item" title="<?= t($item_nav['next']['title']) ?>"><?= t('Next') ?> »</a> <a href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item_nav['next']['id'] ?>" id="next-item" title="<?= t($item_nav['next']['title']) ?>"><?= t('Next') ?> »</a>
<?php else: ?>
<?= t('Next') ?> »
<?php endif ?> <?php endif ?>
</span> </span>
</nav> </nav>

19
templates/show_more.php Normal file
View File

@ -0,0 +1,19 @@
<div class="menu-more">
<ul>
<li>
<a href="?action=bookmarks"><?= t('bookmarks') ?></a>
</li>
<li>
<a href="?action=history"><?= t('history') ?></a>
</li>
<li>
<a href="?action=feeds"><?= t('subscriptions') ?></a>
</li>
<li>
<a href="?action=config"><?= t('preferences') ?></a>
</li>
<li>
<a href="?action=logout"><?= t('logout') ?></a>
</li>
</ul>
</div>

19
templates/status_links.php
View File

@ -1,3 +1,11 @@
<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>
<?php if ($item['status'] == 'unread'): ?> <?php if ($item['status'] == 'unread'): ?>
<a <a
id="status-<?= $item['id'] ?>" id="status-<?= $item['id'] ?>"
@ -7,7 +15,7 @@
data-reverse-label="<?= t('mark as unread') ?>" data-reverse-label="<?= t('mark as unread') ?>"
> >
<?= t('mark as read') ?> <?= t('mark as read') ?>
</a> | </a>
<?php else: ?> <?php else: ?>
<a <a
id="status-<?= $item['id'] ?>" id="status-<?= $item['id'] ?>"
@ -17,12 +25,5 @@
data-reverse-label="<?= t('mark as read') ?>" data-reverse-label="<?= t('mark as read') ?>"
> >
<?= t('mark as unread') ?> <?= t('mark as unread') ?>
</a> | </a>
<?php endif ?> <?php endif ?>
<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>