styling

src/main/java/com/commafeed/frontend/pages/HomePage.html

@@ -7,23 +7,25 @@
 	<div ng-app="commafeed" id="main" class="main">
 		<div class="container-fluid">
 			<div class="row-fluid">
-				<div class="span2">
-					<div class="sidebar-nav-fixed">
-						<subscribe></subscribe>
-						<div class="css-treeview" ng-controller="CategoryTreeCtrl">
-							<ul>
-								<category node="SubscriptionService.subscriptions" feed-click="feedClicked(id)"
-									category-click="categoryClicked(id)" selected-type="selectedType"
-									selected-id="selectedId"
-									format-category-name="formatCategoryName(category)"
-									format-feed-name="formatFeedName(feed)"> </category>
-							</ul>
-						</div>
+				<div class="span2 sidebar-nav-fixed">
+					<subscribe></subscribe>
+					<div class="css-treeview" ng-controller="CategoryTreeCtrl">
+						<ul>
+							<category node="SubscriptionService.subscriptions" feed-click="feedClicked(id)"
+								category-click="categoryClicked(id)" selected-type="selectedType"
+								selected-id="selectedId"
+								format-category-name="formatCategoryName(category)"
+								format-feed-name="formatFeedName(feed)"> </category>
+						</ul>
 					</div>
 				</div>
 				<div class="span10">
-					<toolbar></toolbar>
-					<ng:view></ng:view>
+					<div class="toolbar">
+						<toolbar></toolbar>
+					</div>
+					<div class="entryList">
+						<ng:view></ng:view>
+					</div>
 				</div>
 			</div>
 		</div>

src/main/webapp/css/app.css

@@ -1,17 +1,26 @@
-.main {
-	margin-top: 10px;
+.main .spinner {
+	display: inline-block;
+	margin-left: 11px;
+	top: -4px;
 }
 
-.main .spinner {
-	width: 50px;
-	height: 50px;
-	top: 14px;
-	left: 20px;
+.toolbar {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	width: 100%;
+	z-index: 10;
+	position: fixed;
+	background-color: #FFF;
+	width: 100%;
+}
+
+.entryList {
+	padding-top: 50px;
 }
 
 /* tree*/
 .sidebar-nav-fixed {
-	overflow: visible;
+	margin-top: 10px;
 }
 
 .css-treeview {
@@ -30,6 +39,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: block;
+	margin: 3px 0px 3px;
 }
 
 .css-treeview label,.css-treeview a,.css-treeview label::before {
@@ -65,7 +75,7 @@
 }
 
 .entrylist-header h3 {
-	margin: 5px 0px 5px 0px;
+	margin: 0;
 }
 
 #feed-accordion .entry {
@@ -93,6 +103,7 @@
 	overflow: hidden;
 	white-space: nowrap;
 	position: absolute;
+	width: 145px;
 }
 
 #feed-accordion .entry-heading .entry-name {
@@ -100,10 +111,13 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	margin-left: 150px;
 	margin-right: 100px;
 }
 
+#feed-accordion .entry-heading .entry-name.shrink {
+	margin-left: 150px;
+}
+
 #feed-accordion .entry-heading .entry-date {
 	display: block;
 	position: absolute;

src/main/webapp/directives/toolbar.html

@@ -1,5 +1,5 @@
 <div>
-	<div class="pull-right" spinner shown="loading"></div>
+	
 	<div>
 		<div class="btn-group read-mode" data-toggle="buttons-radio">
 			<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'unread'">Unread</button>
@@ -17,6 +17,7 @@
 				<li><a href="logout"><i class="icon-user"></i> Logout</a></li>
 			</ul>
 		</div>
+		<div spinner shown="loading"></div>
 	</div>
 	
 </div>

src/main/webapp/js/directives.js

@@ -9,8 +9,10 @@ module.directive('scrollTo', function() {
 		link : function(scope, element, attrs) {
 			scope.$watch(attrs.scrollTo, function(value) {
 				if (value) {
+					var offset = parseInt(attrs.scrollToOffset, 10);
+					var scrollTop = $(element).offset().top + offset;
 					$('html, body').animate({
-						scrollTop : $(element).offset().top + 'px'
+						scrollTop : scrollTop
 					}, 0);
 				}
 			});
@@ -183,7 +185,7 @@ module.directive('spinner', function() {
 				shadow : false, // Whether to render a shadow
 				hwaccel : true, // Whether to use hardware acceleration
 				zIndex : 2e9, // The z-index (defaults to 2000000000)
-				top : 50, // Top position relative to parent in px
+				top : 'auto', // Top position relative to parent in px
 				left : 'auto' // Left position relative to parent in px
 			};
 			var spinner = new Spinner(opts);

src/main/webapp/templates/feeds.html

@@ -6,11 +6,11 @@
 	
 	<div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion">
 		<div ng-repeat="entry in entries" class="entry">
-			<a scroll-to="isOpen && current == entry" href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)" 
+			<a scroll-to="isOpen && current == entry" scroll-to-offset="-58" href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="entryClicked(entry, $event)" 
 				ng-class="{open: current == entry, closed: current != entry}">
 				<span ui-if="selectedType == 'category'" class="feed-name">{{entry.feedName}}</span>
 				<span class="entry-date">{{entry.date}}</span>
-				<span class="entry-name" ng-class="{unread: entry.read == false}" ng-bind-html-unsafe="entry.title"></span>
+				<span class="entry-name" ng-class="{unread: entry.read == false, shrink: selectedType == 'category'}" ng-bind-html-unsafe="entry.title"></span>
 				
 			</a>
 			<div class="entry-body" ui-if="isOpen && current == entry">