From 36bacfcc0f53799ba07391bdb44004e9020a2f20 Mon Sep 17 00:00:00 2001
From: Bernhard Posselt <dev@bernhard-posselt.com>
Date: Wed, 10 Sep 2014 17:52:07 +0200
Subject: some pixel pushing

---
 CHANGELOG.md               |   2 +-
 css/content.css            | 102 +++++++++++++++++++--------------------------
 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,55 +157,48 @@
         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
  */
@@ -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>
-- 
cgit v1.2.3