Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Athou
2013-03-29 10:44:41 +01:00
parent da3be45c8f
commit dd4334ff48
5 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/main/java/com/commafeed/frontend/pages/HomePage.html
View File

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

34
src/main/webapp/css/app.css
View File

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

3
src/main/webapp/directives/toolbar.html
View File

@@ -1,5 +1,5 @@
<div> <div>
<div class="pull-right" spinner shown="loading"></div>
<div> <div>
<div class="btn-group read-mode" data-toggle="buttons-radio"> <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> <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> <li><a href="logout"><i class="icon-user"></i> Logout</a></li>
</ul> </ul>
</div> </div>
<div spinner shown="loading"></div>
</div> </div>
</div> </div>

6
src/main/webapp/js/directives.js
View File

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

4
src/main/webapp/templates/feeds.html
View File

@@ -6,11 +6,11 @@
<div infinite-scroll="loadMoreEntries()" infinite-scroll-disabled="busy || !settingsService.settings.readingMode" infinite-scroll-distance="1" id="feed-accordion"> <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"> <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}"> ng-class="{open: current == entry, closed: current != entry}">
<span ui-if="selectedType == 'category'" class="feed-name">{{entry.feedName}}</span> <span ui-if="selectedType == 'category'" class="feed-name">{{entry.feedName}}</span>
<span class="entry-date">{{entry.date}}</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> </a>
<div class="entry-body" ui-if="isOpen && current == entry"> <div class="entry-body" ui-if="isOpen && current == entry">