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 {
display: inline;
padding-left: 30px;
padding-left: 3%;
}
header a {
@ -470,11 +470,6 @@ nav .active a {
font-size: 1.1em;
}
.item li pre,
.item p code {
}
.item h2,
.item h3 {
font-weight: bold;
@ -517,14 +512,18 @@ nav .active a {
.item nav span,
.item nav a,
.item nav a:visited {
color: #3366CC;
color: #333;
font-family: sans-serif;
}
.item nav {
width: 100%;
}
.item nav.bottom {
border-top: 1px dotted #ddd;
padding-top: 8px;
margin-top: 50px;
width: 100%;
}
.nav-left {
@ -589,6 +588,14 @@ iframe {
}
/* desktop design */
@media only screen and (min-width: 480px) {
.hide-desktop {
display: none;
}
}
/* mobile design */
@media only screen and (max-width: 480px) {
@ -602,36 +609,14 @@ iframe {
max-width: 480px;
}
header {
margin-bottom: 0;
}
nav .active a {
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 {
clear: both;
padding-top: 20px;
@ -646,7 +631,7 @@ iframe {
}
.item h1 {
font-size: 0.9em;
font-size: 0.75em;
}
.item .infos {
@ -654,6 +639,11 @@ iframe {
padding: 0;
}
.item nav a {
font-weight: bold;
text-decoration: none;
}
.items .preview {
color: #555;
}
@ -661,4 +651,17 @@ iframe {
section li {
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() {
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">
<?= 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>
<?= \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>
</article>

13
templates/layout.php
View File

@ -21,21 +21,24 @@
<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>
</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>
</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>
</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>
</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>
</li>
<li>
<li class="hide-mobile">
<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>
</li>
</ul>
</nav>
</header>

37
templates/show_item.php
View File

@ -1,7 +1,5 @@
<?php if (empty($item)): ?>
<p class="alert alert-info"><?= t('Item not found') ?></p>
<?php else: ?>
<article
class="item"
@ -11,6 +9,23 @@
data-item-bookmark="<?= $item['bookmark'] ?>"
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>
<a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank" id="original-<?= $item['id'] ?>">
<?= Helper\escape($item['title']) ?>
@ -58,32 +73,16 @@
</div>
<?php if (isset($item_nav)): ?>
<nav>
<nav class="bottom">
<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 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 ?>
</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 else: ?>
<?= t('Next') ?> »
<?php endif ?>
</span>
</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'): ?>
<a
id="status-<?= $item['id'] ?>"
@ -7,7 +15,7 @@
data-reverse-label="<?= t('mark as unread') ?>"
>
<?= t('mark as read') ?>
</a> |
</a>
<?php else: ?>
<a
id="status-<?= $item['id'] ?>"
@ -17,12 +25,5 @@
data-reverse-label="<?= t('mark as read') ?>"
>
<?= t('mark as unread') ?>
</a> |
</a>
<?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>