add css custom classes

3 files changed, 96 insertions, 101 deletions

diff --git a/templates/index.php b/templates/index.php
index 0413227b0..e5f0d6485 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -1,61 +1,61 @@
 <?php
-script('news', 'vendor/traceur-runtime/traceur-runtime.min');
-script('news', 'vendor/angular/angular.min');
-script('news', 'vendor/angular-route/angular-route.min');
-script('news', 'vendor/angular-sanitize/angular-sanitize.min');
-script('news', 'vendor/angular-animate/angular-animate.min');
-script('news', 'vendor/momentjs/min/moment-with-locales.min');
-script('news', 'build/app.min');
-
-style('news', 'app');
-style('news', 'navigation');
-style('news', 'content');
-style('news', 'settings');
+script('news', [
+    'vendor/traceur-runtime/traceur-runtime.min',
+    'vendor/angular/angular.min',
+    'vendor/angular-route/angular-route.min',
+    'vendor/angular-sanitize/angular-sanitize.min',
+    'vendor/angular-animate/angular-animate.min',
+    'vendor/momentjs/min/moment-with-locales.min',
+    'build/app.min',
+]);
+
+style('news', [
+    'app',
+    'navigation',
+    'content',
+    'settings',
+    'custom'
+]);
 ?>
 
 
 <div id="app" ng-app="News" ng-cloak ng-controller="AppController as App">
 
-	<div id="global-loading" class="icon-loading" ng-show="App.loading.isLoading('global')"></div>
-
-	<!-- navigation -->
-	<div id="app-navigation" ng-controller="NavigationController as Navigation" ng-hide="App.loading.isLoading('global')">
-		<news-title-unread-count unread-count="{{ Navigation.getUnreadCount() }}"></news-title-unread-count>
-
-		<ul class="with-icon" data-folder-id="0" news-droppable>
-			<?php print_unescaped($this->inc('part.navigation.addfeed')) ?>
-			<?php print_unescaped($this->inc('part.navigation.addfolder')) ?>
-			<?php print_unescaped($this->inc('part.navigation.unreadfeed')) ?>
-			<?php print_unescaped($this->inc('part.navigation.starredfeed')) ?>
-			<?php print_unescaped($this->inc('part.navigation.feed', ['folderId' => '0'])) ?>
-			<?php print_unescaped($this->inc('part.navigation.folder')) ?>
-		</ul>
-
-		<!-- settings -->
-		<div id="app-settings" ng-controller="SettingsController as Settings">
-			<?php print_unescaped($this->inc('part.settings')) ?>
-		</div>
-
-	</div>
-
-	<!-- content -->
-	<script type="text/ng-template" id="content.html"><?php print_unescaped($this->inc('part.content')) ?></script>
-
-	<div id="app-content">
-		<div id="app-content-wrapper"
-			ng-class="{
-				'icon-loading': App.loading.isLoading('content'),
-				'autopaging': App.loading.isLoading('autopaging')
-			}"
-			ng-hide="App.loading.isLoading('global')"
-			ng-view
-			tabindex="-1"
-			news-auto-focus
-			news-scroll
-			news-scroll-enabled-auto-page="Content.autoPagingEnabled()"
-			news-scroll-enabled-mark-read="Content.markReadEnabled()"
-			news-scroll-auto-page="Content.autoPage()"
-			news-scroll-mark-read="Content.scrollRead(itemIds)">
-
-		</div>
+    <div id="global-loading" class="icon-loading" ng-show="App.loading.isLoading('global')"></div>
+
+    <!-- navigation -->
+    <div id="app-navigation" ng-controller="NavigationController as Navigation" ng-hide="App.loading.isLoading('global')">
+        <news-title-unread-count unread-count="{{ Navigation.getUnreadCount() }}"></news-title-unread-count>
+
+        <ul class="with-icon" data-folder-id="0" news-droppable>
+            <?php print_unescaped($this->inc('part.navigation.addfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.addfolder')) ?>
+            <?php print_unescaped($this->inc('part.navigation.unreadfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.starredfeed')) ?>
+            <?php print_unescaped($this->inc('part.navigation.feed', ['folderId' => '0'])) ?>
+            <?php print_unescaped($this->inc('part.navigation.folder')) ?>
+        </ul>
+
+        <!-- settings -->
+        <div id="app-settings" ng-controller="SettingsController as Settings">
+            <?php print_unescaped($this->inc('part.settings')) ?>
+        </div>
+
+    </div>
+
+    <!-- content -->
+    <script type="text/ng-template" id="content.html"><?php print_unescaped($this->inc('part.content')) ?></script>
+
+    <div id="app-content" ng-class="{'loading-content': App.loading.isLoading('content')}">
+        <div id="app-content-wrapper"
+            ng-class="{'autopaging': App.loading.isLoading('autopaging')}"
+            ng-hide="App.loading.isLoading('global')"
+            ng-view
+            tabindex="-1"
+            news-auto-focus
+            news-scroll
+            news-scroll-enabled-auto-page="Content.autoPagingEnabled()"
+            news-scroll-enabled-mark-read="Content.markReadEnabled()"
+            news-scroll-auto-page="Content.autoPage()"
+            news-scroll-mark-read="Content.scrollRead(itemIds)"></div>
 </div>
diff --git a/templates/part.content.expand.php b/templates/part.content.expand.php
index 15209dca7..2d7aaa550 100644
--- a/templates/part.content.expand.php
+++ b/templates/part.content.expand.php
@@ -1,58 +1,53 @@
-<li class="item"
+<li class="item {{ Content.getFeed(item.feedId).cssClass }}"
     ng-repeat="item in Content.getItems() | orderBy:[Content.orderBy()] track by item.id"
     ng-click="Content.markRead(item.id)"
     ng-class="{read: !item.unread}"
     data-id="{{ item.id }}">
 
-    <h2 class="date">
-        <span class="timeago" title="{{ item.pubDate*1000|date:'dd-MM-yyyy' }}">
-            {{ Content.getRelativeDate(item.pubDate) }}
-        </span>
-    </h2>
-
-    <button class="star svg"
-            ng-click="Content.toggleStar(item.id)"
-            ng-class="{
-                'starred': item.starred
-            }"></button>
-
-    <h1 class="title">
-        <a target="_blank" ng-href="{{ item.url }}">
-            {{ item.title }}
-        </a>
-    </h1>
-
-    <h2 class="author">
-        <span>
-            <?php p($l->t('from')) ?>
-            <a ng-href="#/items/feeds/{{ item.feedId }}"
-                class="from_feed">{{ Content.getFeed(item.feedId).title }}</a>
-        </span>
-        <span ng-show="item.author">
-            <?php p($l->t('by')) ?>
-            {{ item.author }}
-        </span>
-    </h2>
-
-    <div class="enclosure" ng-if="item.enclosureLink">
-        <news-audio type="{{ item.enclosureType }}"
-                    ng-src="{{ item.enclosureLink|trustUrl }}">
-            <?php p($l->t('Download')) ?>
-        </news-audio>
-    </div>
-
-
-    <div class="body" news-bind-html-unsafe="item.body"></div>
-
-    <div class="bottom-utils">
+    <div class="utils">
         <ul>
+            <li ng-click="Content.toggleStar(item.id)">
+                <button class="star svg" ng-class="{'starred': item.starred}" title="<?php p($l->t('Star')); ?>"></button>
+            </li>
             <li ng-click="Content.toggleKeepUnread(item.id)">
-                <label for="keep-unread">
-                    <input type="checkbox" name="keep-unread" ng-checked="item.keepUnread"/>
-                    <?php p($l->t('Keep unread')); ?>
-                </label>
+                <button class="star svg" ng-class="{'starred': item.keepUnread}" title="<?php p($l->t('Keep unread')); ?>"></button>
             </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>
+
+        <h2 class="author">
+            <span>
+                <?php p($l->t('from')) ?>
+                <a ng-href="#/items/feeds/{{ item.feedId }}"
+                    class="from_feed">{{ Content.getFeed(item.feedId).title }}</a>
+            </span>
+            <span ng-show="item.author">
+                <?php p($l->t('by')) ?>
+                {{ item.author }}
+            </span>
+        </h2>
+
+        <div class="enclosure" ng-if="item.enclosureLink">
+            <news-audio type="{{ item.enclosureType }}"
+                        ng-src="{{ item.enclosureLink|trustUrl }}">
+                <?php p($l->t('Download')) ?>
+            </news-audio>
+        </div>
+
+        <div class="body" news-bind-html-unsafe="item.body"></div>
+
+    </div>
 </li>
 
diff --git a/templates/part.content.php b/templates/part.content.php
index 251a01772..b0e39f8d9 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -3,7 +3,7 @@
 </div>
 
 <div ng-if="!App.isFirstRun()">
-    <ul ng-if="Content.isCompactView()">
+	<ul ng-if="Content.isCompactView()">
         <?php print_unescaped($this->inc('part.content.compact')); ?>
     </ul>