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

Improve mobile layout (Android phones)

This commit is contained in:
Frédéric Guillot 2014-02-14 21:21:14 -05:00
parent 7346686e9a
commit da61d38249
10 changed files with 182 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
assets/css/app.css
View File

@ -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;
}

6
templates/bookmark_links.php
View File

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

46
templates/feeds.php
View File

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

42
templates/item.php
View File

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

2
templates/layout.php
View File

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

39
templates/show_item.php
View File

@ -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'] ?>

13
templates/status_links.php
View File

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

26
themes/bootstrap-light/css/app.css
View File

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

26
themes/bootswatch-cyborg/css/app.css
View File

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

17
themes/nostyle/css/app.css
View File

@ -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;
}