diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-09-10 17:52:07 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-09-10 17:52:07 +0200 |
commit | 36bacfcc0f53799ba07391bdb44004e9020a2f20 (patch) | |
tree | b2959d4cc1b24cc70593f0854f712135db2d0a18 | |
parent | 0ebc5fdf649784844a18ebc5632577b50152f3e5 (diff) |
some pixel pushing
-rw-r--r-- | CHANGELOG.md | 2 | ||||
-rw-r--r-- | css/content.css | 102 | ||||
-rw-r--r-- | templates/part.content.php | 34 |
3 files changed, 61 insertions, 77 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a25ff055..edce902c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,7 @@ owncloud-news (3.001) * Move undo feed/folder deletion button into the navigation bar * Add create folder form in addition to the subscribe form * Loading icon is now displayed until all feeds and folders are loaded - +* Optimize for mobile owncloud-news (2.003) * Use correct url for folder and feed api update methods diff --git a/css/content.css b/css/content.css index 7cd0d2099..8fbd55309 100644 --- a/css/content.css +++ b/css/content.css @@ -65,7 +65,7 @@ border-bottom: 1px solid #eee; line-height: 52px; box-sizing: border-box; - padding: 0 40px; + padding: 0 45px; } #app-content .utils ul { @@ -81,8 +81,12 @@ vertical-align: middle; } + #app-content .utils li:last-child { + padding-right: 0; + } + #app-content .utils .util { - padding: 9px 20px 9px 0; + padding: 9px; } #app-content .utils button, @@ -126,6 +130,10 @@ */ #app-content .utils .title { width: 100%; + padding-left: 35px; + background-position: left center; + background-size: 20px 20px; + background-repeat: no-repeat; } #app-content .utils .title a { @@ -133,7 +141,6 @@ white-space: nowrap; overflow: hidden; width: 100%; - padding: 0 20px; line-height: 40px; display: inline-block; color: #222; @@ -150,56 +157,49 @@ color: #888; } - /** - * Source - */ - @media (max-width: 700px) { - #app-content .utils .source { - display: none; - } - - #app-content .utils .date { - display: none; - } - } - - #app-content .utils .source { - width: 200px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - padding: 0 15px; - font-size: 15px; - } - - #app-content .utils .source a { - color: #aaa; - } - - #app-content .utils .source a:hover { - text-decoration: underline; - } - - /** - * Timestamp - */ - #app-content .date { - color: #aaa; - font-size: 15px; - padding-right: 40px; - white-space: nowrap; - } /** * Actual content */ #app-content .article { min-height: 69px; - padding: 35px 45px 45px 45px; + padding: 10px 45px 45px 45px; border-bottom: 1px solid #eee; + background-image: -moz-linear-gradient(center top , #F8F8F8 0px, #FFF 69px); } /** + * Timestamp + */ +#app-content .subtitle { + color: #aaa; + font-size: 15px; + width: 100%; + padding-bottom: 25px; +} + +#app-content .date { + float: right; + display: inline-block; +} + +/** + * Author + */ +#app-content .author { + color: #aaa; + font-size: 15px; +} + + #app-content .author a { + color: inherit; + } + + #app-content .author a:hover { + text-decoration: underline; + } + +/** * Enclosure */ #app-content .enclosure { @@ -312,19 +312,3 @@ -/** - * Author - */ -#app-content .author { - color: #aaa; - font-size: 15px; - padding: 20px 0 10px 0; -} - - #app-content .author a { - color: inherit; - } - - #app-content .author a:hover { - text-decoration: underline; - }
\ No newline at end of file diff --git a/templates/part.content.php b/templates/part.content.php index b5c63c439..459ffb88e 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -12,6 +12,15 @@ <div class="utils" ng-click="Content.toggleItem(item)"> <ul> + <li class="title" + title="{{ item.title }}" + ng-style="{ backgroundImage: 'url(' + Content.getFeed(item.feedId).faviconLink + ')'}"> + <h1> + <a target="_blank" > + {{ item.title }} + </a> + </h1> + </li> <li ng-click="Content.toggleStar(item.id)" class="util" news-stop-propagation> <button class="star svg" ng-class="{'starred': item.starred}" title="<?php p($l->t('Star')); ?>"></button> </li> @@ -26,27 +35,19 @@ news-stop-propagation> </a> </li> - <li class="title" title="{{ item.title }}"> - <h1> - <a target="_blank" > - {{ item.title }} - </a> - </h1> - </li> - <li class="source"> - <a ng-href="#/items/feeds/{{ item.feedId }}/" news-stop-propagation>{{ Content.getFeed(item.feedId).title }}</a> - </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" ng-show="!Content.isCompactView() || item.show"> + <div class="subtitle"> + <span class="author" ng-show="item.author"><?php p($l->t('By')) ?> {{ item.author }}</span> + <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> + </div> + <div class="enclosure" ng-if="item.enclosureLink"> <news-audio type="{{ item.enclosureType }}" ng-src="{{ item.enclosureLink|trustUrl }}"> @@ -56,7 +57,6 @@ <div class="body" news-bind-html-unsafe="item.body"></div> - <h2 class="author" ng-show="item.author">© {{ item.author }}</h2> </div> </li> </ul> |