diff options
| -rw-r--r-- | css/content.css | 110 | ||||
| -rw-r--r-- | db/feed.php | 1 | ||||
| -rw-r--r-- | templates/part.content.expand.php | 39 |
3 files changed, 89 insertions, 61 deletions
diff --git a/css/content.css b/css/content.css index ea8080eeb..9be4c4600 100644 --- a/css/content.css +++ b/css/content.css @@ -52,6 +52,11 @@ #app-content .item { min-height: 120px; cursor: default; + border-top: 1px solid #eee; +} + +#app-content .item:first-child { + border-top: 0; } /** @@ -59,39 +64,56 @@ */ #app-content .utils { width: 100%; - border-top: 1px solid #eee; border-bottom: 1px solid #eee; - line-height: 40px; + line-height: 52px; + box-sizing: border-box; padding: 5px 40px; } #app-content .utils ul { - width: 100%; - line-height: 40px; height: 40px; list-style-type: none; - -moz-box-sizing: border-box; - box-sizing: border-box; + display: flex; + margin: 0; + padding: 0; } #app-content .utils li { - display: inline-block; line-height: 40px; - height: 40px; - padding-right: 15px; + vertical-align: middle; } - #app-content .utils button { + #app-content .utils .util { + padding: 5px 15px 5px 0; + } + + #app-content .utils button, + #app-content .utils .external { padding: 0; - margin: 5px; + margin: 0; height: 30px; width: 30px; border: 0; + float: left; background-color: transparent; background-size: 100%; background-repeat: no-repeat; } + #app-content .utils .external, + #app-content .utils .menu button, + #app-content .utils .icon-toggle { + display: inline-block; + opacity: 0.3; + } + + #app-content .utils .external:hover, + #app-content .utils .menu button:hover, + #app-content .utils .icon-toggle:hover, + #app-content .utils .icon-toggle.keep-unread { + opacity: 1; + } + #app-content .utils .star { background-image: url('../img/inactive_star.svg'); } @@ -101,54 +123,50 @@ background-image: url('../img/active_star.svg'); } -/** - * Actual content - */ -#app-content .article { - padding: 30px 45px 30px 45px; -} - -/** - * Article title - */ -#app-content .title { - font-size: 19px; - line-height: 25px; - margin-right: 200px; - font-weight: bold; - word-wrap: break-word; - display: inline-block; -} + /** + * Article title + */ + #app-content .utils .title { + width: 100%; + } - #app-content .title a { + #app-content .utils .title a { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100%; + padding: 0 20px; + line-height: 40px; + display: inline-block; color: #222; + font-weight: bold; + font-size: 19px; } - #app-content .title a:hover { - color: #222; + #app-content .utils .title a:hover { text-decoration: underline; } -#app-content .read .title { - font-weight: normal; -} - - #app-content .read .title a { + #app-content .read .utils .title a { + font-weight: normal; color: #888; } - + /** + * Timestamp + */ + #app-content .date { + color: #aaa; + font-size: 15px; + white-space: nowrap; + } /** - * Timestamp + * Actual content */ -#app-content .date { - float: right; - display: block; - color: #aaa; - line-height: 25px; - margin-right: 20px; - font-size: 15px; +#app-content .article { + padding: 30px 45px 30px 45px; } /** diff --git a/db/feed.php b/db/feed.php index 32565f09b..72df6122e 100644 --- a/db/feed.php +++ b/db/feed.php @@ -101,6 +101,7 @@ class Feed extends Entity implements IAPI, \JsonSerializable { return $serialized; } + public function toAPI() { return $this->serializeFields([ 'id', diff --git a/templates/part.content.expand.php b/templates/part.content.expand.php index 2d7aaa550..a995b3daa 100644 --- a/templates/part.content.expand.php +++ b/templates/part.content.expand.php @@ -6,27 +6,36 @@ <div class="utils"> <ul> - <li ng-click="Content.toggleStar(item.id)"> + <li ng-click="Content.toggleStar(item.id)" class="util"> <button class="star svg" ng-class="{'starred': item.starred}" title="<?php p($l->t('Star')); ?>"></button> </li> - <li ng-click="Content.toggleKeepUnread(item.id)"> - <button class="star svg" ng-class="{'starred': item.keepUnread}" title="<?php p($l->t('Keep unread')); ?>"></button> + <li class="util"> + <a class="external icon-link" + target="_blank" + ng-href="{{ item.url }}" + title="<?php p($l->t('Open website')) ?>"> + </a> + </li> + <li ng-click="Content.toggleKeepUnread(item.id)" class="util"> + <button class="icon-toggle" ng-class="{'keep-unread': item.keepUnread}" title="<?php p($l->t('Keep unread')); ?>"></button> + </li> + <li class="title"> + <h1> + <a target="_blank" ng-click="item.hide=!item.hide"> + {{ item.title }} + </a> + </h1> + </li> + <li class="date"> + <time title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}" + datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}"> + {{ Content.getRelativeDate(item.pubDate) }} + </time> </li> </ul> </div> - <div class="article"> - <time class="date" title="{{ item.pubDate*1000|date:'yyyy-MM-dd HH:mm:ss' }}" - datetime="{{ item.pubDate*1000|date:'yyyy-MM-ddTHH:mm:ssZ' }}""> - {{ Content.getRelativeDate(item.pubDate) }} - </time> - - <h1 class="title"> - <a target="_blank" ng-href="{{ item.url }}"> - {{ item.title }} - </a> - </h1> - + <div class="article" ng-hide="item.hide"> <h2 class="author"> <span> <?php p($l->t('from')) ?> |