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

Improve mobile layout (Android phones)

Browse Source
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; text-decoration: underline;
} }
.item-menu,
.items p { .items p {
color: #aaa; color: #aaa;
font-size: 70%; font-size: 70%;
} }
.items p a {
color: #aaa;
}
.items .preview { .items .preview {
line-height: 1.5em; line-height: 1.5em;
font-size: 100%; font-size: 100%;
@ -539,13 +536,35 @@ nav .active a {
display: block; display: block;
} }
.infos { ul.item-menu,
padding-bottom: 20px; ul.item-infos {
color: #ccc; margin: 0;
padding: 0;
color: #aaa;
} }
.item .infos a { .item-menu li,
color: #ccc; 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 { span.downloading img {
@ -565,7 +584,7 @@ span.downloading img {
text-align: center; text-align: center;
} }
.item .infos a.bookmark-icon { a.bookmark-icon {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
} }
@ -605,6 +624,7 @@ iframe {
/* mobile design */ /* mobile design */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
ul li.hide-mobile,
.hide-mobile { .hide-mobile {
display: none; display: none;
} }
@ -640,9 +660,8 @@ iframe {
font-size: 0.75em; font-size: 0.75em;
} }
.item .infos { .item-infos {
font-size: 0.9em; font-size: 0.9em;
padding: 0;
} }
.item nav a { .item nav a {
@ -654,6 +673,13 @@ iframe {
color: #555; color: #555;
} }
.item-menu li,
ul.item-infos li {
padding-left: 0;
padding-right: 5px;
border: none;
}
section li { section li {
font-size: 0.85em; font-size: 0.85em;
} }

6
templates/bookmark_links.php
View File

@ -1,3 +1,4 @@
<li class="hide-mobile">
<?php if ($item['bookmark']): ?> <?php if ($item['bookmark']): ?>
<a <a
id="bookmark-<?= $item['id'] ?>" id="bookmark-<?= $item['id'] ?>"
@ -7,7 +8,7 @@
data-reverse-label="<?= t('bookmark') ?>" data-reverse-label="<?= t('bookmark') ?>"
> >
<?= t('remove bookmark') ?> <?= t('remove bookmark') ?>
</a> | </a>
<?php else: ?> <?php else: ?>
<a <a
id="bookmark-<?= $item['id'] ?>" id="bookmark-<?= $item['id'] ?>"
@ -17,5 +18,6 @@
data-reverse-label="<?= t('remove bookmark') ?>" data-reverse-label="<?= t('remove bookmark') ?>"
> >
<?= t('bookmark') ?> <?= t('bookmark') ?>
</a> | </a>
<?php endif ?> <?php endif ?>
</li>

46
templates/feeds.php
View File

@ -49,26 +49,32 @@
<?php endif ?> <?php endif ?>
</h2> </h2>
<p> <ul class="item-menu">
<a href="<?= $feed['site_url'] ?>" rel="noreferrer" target="_blank"><?= Helper\get_host_from_url($feed['site_url']) ?></a> | <li>
<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> </li>
<li class="hide-mobile">
<?php if ($feed['download_content']): ?> <a href="?action=confirm-remove-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('remove') ?></a>
<span class="hide-mobile"><a href="?action=disable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><strong><?= t('disable full content') ?></strong></a> |</span> </li>
<?php else: ?> <li class="hide-mobile">
<span class="hide-mobile"><a href="?action=enable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable full content') ?></a> |</span> <?php if ($feed['download_content']): ?>
<?php endif ?> <a href="?action=disable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><strong><?= t('disable full content') ?></strong></a>
<?php else: ?>
<?php if ($feed['enabled']): ?> <a href="?action=enable-grabber-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable full content') ?></a>
<span class="hide-mobile"><a href="?action=confirm-disable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('disable') ?></a> |</span> <?php endif ?>
<a href="?action=refresh-feed&amp;feed_id=<?= $feed['id'] ?>" data-feed-id="<?= $feed['id'] ?>" data-action="refresh-feed"><?= t('refresh') ?></a> | </li>
<?php else: ?> <li class="hide-mobile">
<span class="hide-mobile"><a href="?action=enable-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('enable') ?></a> |</span> <?php if ($feed['enabled']): ?>
<?php endif ?> <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>
<span class="hide-mobile"><a href="?action=edit-feed&amp;feed_id=<?= $feed['id'] ?>"><?= t('edit') ?></a></span> <?php else: ?>
</p> <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> </article>
<?php endforeach ?> <?php endforeach ?>
</section> </section>

42
templates/item.php
View File

@ -8,7 +8,7 @@
> >
<h2> <h2>
<?= $item['bookmark'] ? '<span id="bookmark-icon-'.$item['id'].'">★ </span>' : '' ?> <?= $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 <a
href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item['id'] ?>" href="?action=show&amp;menu=<?= $menu ?>&amp;id=<?= $item['id'] ?>"
data-item-id="<?= $item['id'] ?>" data-item-id="<?= $item['id'] ?>"
@ -21,29 +21,21 @@
<p class="preview"> <p class="preview">
<?= Helper\escape(Helper\summary(strip_tags($item['content']), 50, 300)) ?> <?= Helper\escape(Helper\summary(strip_tags($item['content']), 50, 300)) ?>
</p> </p>
<p> <ul class="item-menu">
<?php if (! isset($item['feed_title'])): ?> <li>
<?= Helper\get_host_from_url($item['url']) ?> | <?php if (! isset($item['feed_title'])): ?>
<?php else: ?> <?= Helper\get_host_from_url($item['url']) ?>
<a href="?action=feed-items&amp;feed_id=<?= $item['feed_id'] ?>" title="<?= t('Show only this subscription') ?>"><?= Helper\escape($item['feed_title']) ?></a> | <?php else: ?>
<?php endif ?> <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"> </li>
<?= dt('%e %B %Y %k:%M', $item['updated']) ?> | <li class="hide-mobile">
<?= \PicoTools\Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?> <?= dt('%e %B %Y %k:%M', $item['updated']) ?>
</li>
<a <li class="hide-mobile">
href="<?= $item['url'] ?>" <a href="<?= $item['url'] ?>" id="original-<?= $item['id'] ?>" rel="noreferrer" target="_blank" data-item-id="<?= $item['id'] ?>"><?= t('original link') ?></a>
id="original-<?= $item['id'] ?>" </li>
rel="noreferrer" <?= \PicoTools\Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?>
target="_blank"
data-item-id="<?= $item['id'] ?>"
>
<?= t('original link') ?>
</a> |
</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)) ?>
</ul>
</p>
</article> </article>

2
templates/layout.php
View File

@ -37,7 +37,7 @@
<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' ?>"> <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> </li>
</ul> </ul>
</nav> </nav>

39
templates/show_item.php
View File

@ -36,7 +36,8 @@
</a> </a>
</h1> </h1>
<p class="infos"> <ul class="item-infos">
<li>
<?php if ($item['bookmark']): ?> <?php if ($item['bookmark']): ?>
<a <a
id="bookmark-<?=$item['id'] ?>" id="bookmark-<?=$item['id'] ?>"
@ -55,22 +56,26 @@
data-action="bookmark" data-action="bookmark"
data-item-id="<?= $item['id'] ?>" data-item-id="<?= $item['id'] ?>"
>☆</a> >☆</a>
<?php endif ?> | <?php endif ?>
</li>
<a href="?action=feed-items&amp;feed_id=<?= $feed['id'] ?>"><?= Helper\escape($feed['title']) ?></a> | <li>
<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> </li>
<li class="hide-mobile">
<span id="download-item" <?= dt('%e %B %Y %k:%M', $item['updated']) ?>
data-item-id="<?= $item['id'] ?>" </li>
data-failure-message="<?= t('unable to fetch content') ?>" <li class="hide-mobile">
data-before-message="<?= t('in progress...') ?>" <span id="download-item"
data-after-message="<?= t('content downloaded') ?>"> data-item-id="<?= $item['id'] ?>"
<a href="#" data-action="download-item"> data-failure-message="<?= t('unable to fetch content') ?>"
<?= t('download content') ?> data-before-message="<?= t('in progress...') ?>"
</a> data-after-message="<?= t('content downloaded') ?>">
</span> <a href="#" data-action="download-item">
</p> <?= t('download content') ?>
</a>
</span>
</li>
</ul>
<div id="item-content"> <div id="item-content">
<?= $item['content'] ?> <?= $item['content'] ?>

13
templates/status_links.php
View File

@ -1,11 +1,7 @@
<span class="hide-mobile"> <li class="hide-mobile">
<a <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>
href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>" </li>
> <li>
<?= t('remove') ?>
</a> |
</span>
<?php if ($item['status'] == 'unread'): ?> <?php if ($item['status'] == 'unread'): ?>
<a <a
id="status-<?= $item['id'] ?>" id="status-<?= $item['id'] ?>"
@ -27,3 +23,4 @@
<?= t('mark as unread') ?> <?= t('mark as unread') ?>
</a> </a>
<?php endif ?> <?php endif ?>
</li>

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

@ -4612,6 +4612,32 @@ section .alert ul {
padding-left: 0; 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) { @media (max-width:1200px) {
.hide-mobile { .hide-mobile {
display: none !important; display: none !important;

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

@ -4612,6 +4612,32 @@ section .alert ul {
padding-left: 0; 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) { @media (max-width:1200px) {
.hide-mobile { .hide-mobile {
display: none !important; display: none !important;

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

@ -79,6 +79,22 @@ iframe {
padding: 3px; 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 */ /* desktop design */
@media only screen and (min-width: 480px) { @media only screen and (min-width: 480px) {
@ -90,6 +106,7 @@ iframe {
/* mobile design */ /* mobile design */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
ul li.hide-mobile,
.hide-mobile { .hide-mobile {
display: none; display: none;
} }