From c6a8c288ce7df1f20e2f4ec8189cf287c77b9a27 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Sun, 26 May 2013 13:34:31 +0200
Subject: [PATCH] initial mobile design (#54)

---
 .../commafeed/frontend/pages/BasePage.html    |   1 +
 src/main/resources/i18n/en.properties         |   1 +
 src/main/resources/log4j.properties           |   3 +-
 src/main/webapp/WEB-INF/wro.properties        |   2 +-
 src/main/webapp/js/controllers.js             |  10 +-
 src/main/webapp/js/directives.js              |   5 +-
 src/main/webapp/js/services.js                |  11 ++
 src/main/webapp/sass/app.scss                 |   5 +-
 .../webapp/sass/components/_entry-list.scss   |   4 -
 .../sass/components/_subscription-list.scss   |   3 +-
 src/main/webapp/sass/mobile/_mobile.scss      |  45 +++++++
 src/main/webapp/templates/_subscribe.html     |   8 ++
 src/main/webapp/templates/_toolbar.html       | 122 ++++++++++--------
 src/main/webapp/templates/feeds.html          |   4 +-
 src/main/webapp/templates/feeds.view.html     |   4 +-
 15 files changed, 156 insertions(+), 72 deletions(-)
 create mode 100644 src/main/webapp/sass/mobile/_mobile.scss
diff --git a/src/main/java/com/commafeed/frontend/pages/BasePage.html b/src/main/java/com/commafeed/frontend/pages/BasePage.html
index 2ce83f54..32766075 100644
--- a/src/main/java/com/commafeed/frontend/pages/BasePage.html
+++ b/src/main/java/com/commafeed/frontend/pages/BasePage.html
@@ -3,6 +3,7 @@
 <head>
 	<title>CommaFeed</title>
 	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 </head>
 <body>
diff --git a/src/main/resources/i18n/en.properties b/src/main/resources/i18n/en.properties
index e309d35f..3fe82b70 100644
--- a/src/main/resources/i18n/en.properties
+++ b/src/main/resources/i18n/en.properties
@@ -5,6 +5,7 @@ global.required=Required
 global.download=Download
 global.link=Link
 global.bookmark=Bookmark
+global.close=Close
 
 tree.subscribe=Subscribe
 tree.import=Import
diff --git a/src/main/resources/log4j.properties b/src/main/resources/log4j.properties
index 2148c096..51576f36 100644
--- a/src/main/resources/log4j.properties
+++ b/src/main/resources/log4j.properties
@@ -1,5 +1,6 @@
 log4j.logger.com.commafeed=INFO, CONSOLE
-#log4j.logger.org=WARN, CONSOLE
+log4j.logger.org=WARN, CONSOLE
+log4j.logger.ro=WARN, CONSOLE
 
 log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
 log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
diff --git a/src/main/webapp/WEB-INF/wro.properties b/src/main/webapp/WEB-INF/wro.properties
index 0745b4a0..68e03452 100644
--- a/src/main/webapp/WEB-INF/wro.properties
+++ b/src/main/webapp/WEB-INF/wro.properties
@@ -10,7 +10,7 @@ jmxEnabled=false
 managerFactoryClassName=com.commafeed.frontend.resources.WroManagerFactory
 
 #List of preProcessors
-preProcessors=timestamp,cssUrlRewriting,sassImport,semicolonAppender,googleClosureSimple,sassOnlyProcessor,cssMin
+preProcessors=timestamp,cssUrlRewriting,sassImport,semicolonAppender,googleClosureSimple,sassOnlyProcessor,yuiCssMin
 #List of postProcessors
 postProcessors=
 
diff --git a/src/main/webapp/js/controllers.js b/src/main/webapp/js/controllers.js
index 9e770262..163f5bbc 100644
--- a/src/main/webapp/js/controllers.js
+++ b/src/main/webapp/js/controllers.js
@@ -28,8 +28,8 @@ module.run(['$rootScope', function($rootScope) {
 	});
 }]);
 
-module.controller('SubscribeCtrl', ['$scope', 'FeedService', 'CategoryService', 
-function($scope, FeedService, CategoryService) {
+module.controller('SubscribeCtrl', ['$scope', 'FeedService', 'CategoryService', 'MobileService',
+function($scope, FeedService, CategoryService, MobileService) {
 
 	$scope.opts = {
 		backdropFade : true,
@@ -41,6 +41,7 @@ function($scope, FeedService, CategoryService) {
 	$scope.sub = {};
 
 	$scope.CategoryService = CategoryService;
+	$scope.MobileService = MobileService;
 
 	$scope.open = function() {
 		$scope.sub = {
@@ -436,9 +437,9 @@ module.controller('CategoryDetailsCtrl', ['$scope', '$state', '$stateParams', 'F
 }]);
 
 module.controller('ToolbarCtrl', ['$scope', '$http', '$state', '$stateParams', 
-	'$route', '$location', 'SettingsService', 'EntryService', 'ProfileService', 'AnalyticsService', 'ServerService', 'FeedService',
+	'$route', '$location', 'SettingsService', 'EntryService', 'ProfileService', 'AnalyticsService', 'ServerService', 'FeedService', 'MobileService',
 function($scope, $http, $state, $stateParams, $route, $location,
-		SettingsService, EntryService, ProfileService, AnalyticsService, ServerService, FeedService) {
+		SettingsService, EntryService, ProfileService, AnalyticsService, ServerService, FeedService, MobileService) {
 
 	function totalActiveAjaxRequests() {
 		return ($http.pendingRequests.length + $.active);
@@ -447,6 +448,7 @@ function($scope, $http, $state, $stateParams, $route, $location,
 	$scope.session = ProfileService.get();
 	$scope.ServerService = ServerService.get();
 	$scope.settingsService = SettingsService;
+	$scope.MobileService = MobileService;
 	
 	$scope.loading = true;
 	$scope.$watch(totalActiveAjaxRequests, function() {
diff --git a/src/main/webapp/js/directives.js b/src/main/webapp/js/directives.js
index 5ceb53d7..20fef789 100644
--- a/src/main/webapp/js/directives.js
+++ b/src/main/webapp/js/directives.js
@@ -231,8 +231,9 @@ module.directive('category', [ function() {
 				'FeedService',
 				'CategoryService',
 				'SettingsService',
+				'MobileService',
 				function($scope, $state, $dialog, FeedService, CategoryService,
-						SettingsService) {
+						SettingsService, MobileService) {
 					$scope.settingsService = SettingsService;
 					
 					$scope.getClass = function(level) {
@@ -265,6 +266,7 @@ module.directive('category', [ function() {
 					};
 
 					$scope.feedClicked = function(id) {
+						MobileService.toggleLeftMenu();
 						if ($scope.selectedType == 'feed'
 								&& id == $scope.selectedId) {
 							$scope.$emit('emitReload');
@@ -277,6 +279,7 @@ module.directive('category', [ function() {
 					};
 
 					$scope.categoryClicked = function(id) {
+						MobileService.toggleLeftMenu();
 						if ($scope.selectedType == 'category'
 								&& id == $scope.selectedId) {
 							$scope.$emit('emitReload');
diff --git a/src/main/webapp/js/services.js b/src/main/webapp/js/services.js
index bc738687..b8acbda7 100644
--- a/src/main/webapp/js/services.js
+++ b/src/main/webapp/js/services.js
@@ -12,6 +12,17 @@ module.service('AnalyticsService', [ '$state', function($state) {
 	};
 } ]);
 
+module.service('MobileService', [ '$state', function($state) {
+	this.toggleLeftMenu = function() {
+		$('body').toggleClass('left-menu-active');
+	}
+	this.toggleRightMenu = function() {
+		$('body').toggleClass('right-menu-active');
+	}
+	var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+	this.mobile = width < 979;
+}]);
+
 
 module.factory('ProfileService', ['$resource', function($resource) {
 	var res = $resource('rest/user/profile/');
diff --git a/src/main/webapp/sass/app.scss b/src/main/webapp/sass/app.scss
index c0bf1e38..85dacaf9 100644
--- a/src/main/webapp/sass/app.scss
+++ b/src/main/webapp/sass/app.scss
@@ -1,4 +1,3 @@
-
 @import "generic/misc";
 
 
@@ -6,4 +5,6 @@
 @import "components/toolbar";
 @import "components/entry-list";
 @import "components/subscription-list";
-@import "components/help";
\ No newline at end of file
+@import "components/help";
+
+@import "mobile/mobile";
\ No newline at end of file
diff --git a/src/main/webapp/sass/components/_entry-list.scss b/src/main/webapp/sass/components/_entry-list.scss
index 6e2bdad3..22f329a3 100644
--- a/src/main/webapp/sass/components/_entry-list.scss
+++ b/src/main/webapp/sass/components/_entry-list.scss
@@ -12,10 +12,6 @@
 	margin: 0;
 }
 
-.entry-header, .entry-body-content {
-	padding-left: 25px;
-}
-
 #feed-accordion .entry {
 	border-bottom: 1px solid #CCCCCC;
 }
diff --git a/src/main/webapp/sass/components/_subscription-list.scss b/src/main/webapp/sass/components/_subscription-list.scss
index ef37d6dc..df149f6e 100644
--- a/src/main/webapp/sass/components/_subscription-list.scss
+++ b/src/main/webapp/sass/components/_subscription-list.scss
@@ -1,4 +1,3 @@
-
 /* tree*/
 .sidebar-nav-fixed {
 	margin-top: 10px;
@@ -100,4 +99,4 @@
 
 .css-treeview .indent5 {
 	padding-left: 110px;
-}
+}
\ No newline at end of file
diff --git a/src/main/webapp/sass/mobile/_mobile.scss b/src/main/webapp/sass/mobile/_mobile.scss
new file mode 100644
index 00000000..e42c2a2b
--- /dev/null
+++ b/src/main/webapp/sass/mobile/_mobile.scss
@@ -0,0 +1,45 @@
+@media ( max-width : 979px) {
+	body {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+	.container-fluid {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.left-menu {
+		display: none !important;
+	}
+	.toolbar .hidden-desktop.btn-group {
+		display: inline-block !important;
+	}
+	.main-content {
+		display: block !important;
+		float: none !important;
+		width: 100% !important;
+		margin-left: 0 !important;
+	}
+	#feed-accordion .entry-heading .shrink {
+		margin-left: 0;
+	}
+	#feed-accordion .entry-heading .entry-name {
+		margin-right: 0;
+	}
+	body.left-menu-active .left-menu {
+		display: block !important;
+		width: 100%;
+	}
+	body.left-menu-active .sidebar-nav-fixed {
+		width: 100%;
+	}
+	body.left-menu-active .main-content {
+		display: none !important;
+	}
+	body.right-menu-active .toolbar .actions {
+		margin-top: 5px;
+		margin-left: 0;
+	}
+	body.right-menu-active .toolbar .actions .visible-desktop {
+		display: inherit !important;
+	}
+}
\ No newline at end of file
diff --git a/src/main/webapp/templates/_subscribe.html b/src/main/webapp/templates/_subscribe.html
index 62c83886..4238c586 100644
--- a/src/main/webapp/templates/_subscribe.html
+++ b/src/main/webapp/templates/_subscribe.html
@@ -1,4 +1,5 @@
 <div ng-controller="SubscribeCtrl">
+	
 	<div class="btn-group">
 		<button class="btn" ng-click="open()"><span class="icon-rss"></span> ${tree.subscribe}</button>
 		<button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -9,6 +10,13 @@
 			<li><a ng-click="openCategory()"><i class="icon-plus"></i> ${tree.new_category}</a></li>
 		</ul>
 	</div>
+	
+	<div class="btn-group">
+		<button type="button" class="btn hidden-desktop" ng-click="MobileService.toggleLeftMenu()">
+			<i class="icon-remove"></i> ${global.close}
+		</button>
+	</div>
+	
 	<div modal="isOpen" close="close()" options="opts">
 		<div class="modal-header">
 			<button type="button" class="close" ng-click="close()">&times;</button>
diff --git a/src/main/webapp/templates/_toolbar.html b/src/main/webapp/templates/_toolbar.html
index 4ab22e21..aec219f7 100644
--- a/src/main/webapp/templates/_toolbar.html
+++ b/src/main/webapp/templates/_toolbar.html
@@ -1,60 +1,76 @@
 <div ng-controller="ToolbarCtrl">
 	<div class="form-horizontal">
-		<span>
-			<div class="btn-group read-mode" data-toggle="buttons-radio">
-				<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'unread'">${toolbar.unread}</button>
-				<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'all'">${toolbar.all}</button>
+		<div class="btn-group hidden-desktop">
+			<button type="button" class="btn" ng-click="MobileService.toggleLeftMenu()">
+				<i class="icon-list-alt"></i>
+			</button>
+		</div>
+		
+		<div class="btn-group">
+			<a type="button" class="btn" ng-click="previousEntry()" title="${toolbar.previous_entry}"><i class="icon-chevron-up"></i></a>
+			<a type="button" class="btn" ng-click="nextEntry()" title="${toolbar.next_entry}"><i class="icon-chevron-down"></i></a>
+			<a type="button" class="btn" ng-click="refresh()" title="${toolbar.refresh}"><i class="icon-refresh"></i></a>
+		</div>
+		
+		<div class="btn-group">
+			<a type="button" class="btn" ng-click="markAllAsRead()" title="${toolbar.mark_all_as_read}"><i class="icon-check"></i></a>
+			<button class="btn dropdown-toggle" data-toggle="dropdown">
+				<span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu pull-right">
+				<li><a ng-click="markAllDay()">${toolbar.mark_all_older_day}</a></li>
+				<li><a ng-click="markAllWeek()">${toolbar.mark_all_older_week}</a></li>
+				<li><a ng-click="markAllTwoWeeks()">${toolbar.mark_all_older_two_weeks}</a></li>
+			</ul>
+		</div>
+		
+		<div class="btn-group hidden-desktop">
+			<button type="button" class="btn" ng-click="MobileService.toggleRightMenu()">
+				<i class="icon-wrench"></i>
+			</button>
+		</div>
+	
+		<div class="actions btn-group">
+			<div class="visible-desktop">
+				<div class="btn-group read-mode" data-toggle="buttons-radio">
+					<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'unread'">${toolbar.unread}</button>
+					<button type="button" class="btn" ng-model="settingsService.settings.readingMode" btn-radio="'all'">${toolbar.all}</button>
+				</div>
+				
+				<div class="btn-group">
+					<a type="button" class="btn" ng-click="toggleOrder()" title="${toolbar.sort_by_asc_desc}">
+						<i ng-class="{'icon-arrow-up' : settingsService.settings.readingOrder == 'asc', 'icon-arrow-down': settingsService.settings.readingOrder == 'desc'}"></i>
+					</a>
+				</div>
+				
+				<div class="btn-group" data-toggle="buttons-radio">
+					<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'title'" title="${toolbar.titles_only}"><i class="icon-list"></i></a>
+					<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'expanded'" title="${toolbar.expanded_view}"><i class="icon-th-list"></i></a>
+				</div>
+				
+				<div class="btn-group">
+					<a class="btn" ng-click="toSettings()" title="${toolbar.settings}"><i class="icon-cog"></i></a>
+					<button class="btn dropdown-toggle" data-toggle="dropdown">
+						<span class="caret"></span>
+					</button>
+					<ul class="dropdown-menu pull-right">
+						<li><a ng-click="toProfile()"><i class="icon-user"></i> ${toolbar.profile}</a></li>
+						<li ng-show="session.admin"><a ng-click="toAdmin()"><i class="icon-edit"></i> ${toolbar.admin}</a></li>
+						<li class="divider"></li>
+						<li><a href="logout"><i class="icon-off"></i> ${toolbar.logout}</a></li>
+					</ul>
+				</div>
+				<form ng-submit="search()" class="btn-group input-append hidden-phone hidden-tablet">
+					<input type="text" ng-model="keywords"></input>
+					<button class="btn" type="submit"><i class="icon-search"></i></button>
+				</form>
+				<div class="btn-group donate">
+					<button class="btn btn-success" type="button" ng-click="toHelp()"><i class="icon-question-sign"></i> ${toolbar.about} / ${toolbar.donate}</button>
+				</div>
+				
 			</div>
-			
-			<a type="button" class="btn" ng-click="toggleOrder()" title="${toolbar.sort_by_asc_desc}">
-				<i ng-class="{'icon-arrow-up' : settingsService.settings.readingOrder == 'asc', 'icon-arrow-down': settingsService.settings.readingOrder == 'desc'}"></i>
-			</a>
-			
-			<div class="btn-group" data-toggle="buttons-radio">
-				<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'title'" title="${toolbar.titles_only}"><i class="icon-list"></i></a>
-				<a type="button" class="btn" ng-model="settingsService.settings.viewMode" btn-radio="'expanded'" title="${toolbar.expanded_view}"><i class="icon-th-list"></i></a>
-			</div>
-			
-			<div class="btn-group">
-				<a type="button" class="btn" ng-click="previousEntry()" title="${toolbar.previous_entry}"><i class="icon-chevron-up"></i></a>
-				<a type="button" class="btn" ng-click="nextEntry()" title="${toolbar.next_entry}"><i class="icon-chevron-down"></i></a>
-				<a type="button" class="btn" ng-click="refresh()" title="${toolbar.refresh}"><i class="icon-refresh"></i></a>
-			</div>
-			
-			<div class="btn-group">
-				<a type="button" class="btn" ng-click="markAllAsRead()" title="${toolbar.mark_all_as_read}"><i class="icon-check"></i></a>
-				<button class="btn dropdown-toggle" data-toggle="dropdown">
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu pull-right">
-					<li><a ng-click="markAllDay()">${toolbar.mark_all_older_day}</a></li>
-					<li><a ng-click="markAllWeek()">${toolbar.mark_all_older_week}</a></li>
-					<li><a ng-click="markAllTwoWeeks()">${toolbar.mark_all_older_two_weeks}</a></li>
-				</ul>
-			</div>
-			
-			<div class="btn-group">
-				<a class="btn" ng-click="toSettings()" title="${toolbar.settings}"><i class="icon-cog"></i></a>
-				<button class="btn dropdown-toggle" data-toggle="dropdown">
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu pull-right">
-					<li><a ng-click="toProfile()"><i class="icon-user"></i> ${toolbar.profile}</a></li>
-					<li ng-show="session.admin"><a ng-click="toAdmin()"><i class="icon-edit"></i> ${toolbar.admin}</a></li>
-					<li class="divider"></li>
-					<li><a href="logout"><i class="icon-off"></i> ${toolbar.logout}</a></li>
-				</ul>
-			</div>
-		</span>
-		<form ng-submit="search()" class="input-append">
-			<input type="text" ng-model="keywords"></input>
-			<button class="btn" type="submit"><i class="icon-search"></i></button>
-		</form>
-		<div class="donate">
-			<button class="btn btn-success" type="button" ng-click="toHelp()"><i class="icon-question-sign"></i> ${toolbar.about} / ${toolbar.donate}</button>
 		</div>
 		<div spinner shown="loading"></div>
-		<span>{{ServerService.announcement}}</span>
-		
+		<span class="hidden-phone hidden-tablet">{{ServerService.announcement}}</span>
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/main/webapp/templates/feeds.html b/src/main/webapp/templates/feeds.html
index b26b186d..e85d5324 100644
--- a/src/main/webapp/templates/feeds.html
+++ b/src/main/webapp/templates/feeds.html
@@ -1,12 +1,12 @@
 <div class="container-fluid">
 	<div class="row-fluid">
-		<div class="span2">
+		<div class="span2 left-menu">
 			<div class="sidebar-nav-fixed" mousewheel-scrolling>
 				<div ng-include="'templates/_subscribe.html'"></div>
 				<div ng-include="'templates/_tree.html'"></div>
 			</div>
 		</div>
-		<div class="span10">
+		<div class="span10 main-content">
 			<div class="toolbar" ng-include="'templates/_toolbar.html'"></div>
 			<div class="entryList">
 				<div ui-view></div>
diff --git a/src/main/webapp/templates/feeds.view.html b/src/main/webapp/templates/feeds.view.html
index 5bae5485..8416ed8b 100644
--- a/src/main/webapp/templates/feeds.view.html
+++ b/src/main/webapp/templates/feeds.view.html
@@ -10,7 +10,7 @@
 			on-scroll-middle="onScroll(entry)" ng-class="{current: current==entry}">
 			<a href="{{entry.url}}" target="_blank" class="entry-heading" ng-click="noop($event)" ng-mouseup="entryClicked(entry, $event)"
 				ng-class="{open: current == entry, closed: current != entry}">
-				<span class="feed-name">
+				<span class="feed-name visible-desktop">
 					<span class="star" ng-mouseup="star(entry, !entry.starred, $event)">
 						<i ng-class="{'icon-star icon-star-yellow': entry.starred, 'icon-star-empty': !entry.starred}"
 							class="pointer"></i>
@@ -18,7 +18,7 @@
 					<favicon url="entry.feedLink" />
 					{{entry.feedName}}
 				</span>
-				<span class="entry-date">{{entry.date | entryDate}}</span>
+				<span class="entry-date visible-desktop">{{entry.date | entryDate}}</span>
 				<span class="entry-name" ng-class="{unread: entry.read == false, shrink: true}" ng-bind-html-unsafe="entry.title"></span>
 				
 			</a>
