resizeable subscription list

src/main/webapp/WEB-INF/wro.xml

@@ -20,6 +20,7 @@
 		<js minimize="false">/vendor/momentjs/*.js</js>
 		<js minimize="false">/vendor/devicejs/*.js</js>
 		
+		<css minimize="false">/vendor/jqueryui/*.css</css>
 		<css minimize="false">/vendor/select2/*.css</css>
 		<css minimize="false">/vendor/bootstrap/*.css</css>
 		<css minimize="false">/vendor/fontawesome/css/*.css</css>

src/main/webapp/js/controllers.js

@@ -155,6 +155,10 @@ module.controller('CategoryTreeCtrl', [
 				$scope.selectedId = $stateParams._id;
 			});
 
+			$scope.resizeCallback = function(event, ui) {
+				$('.main-content').css('margin-left', $(ui.element).outerWidth(true) + 'px');
+			};
+
 			$timeout(function refreshTree() {
 				AnalyticsService.track();
 				CategoryService.refresh(function() {
@@ -1216,6 +1220,7 @@ module.controller('FeedListCtrl', [
 
 			Mousetrap.bind('f', function(e) {
 				$('body').toggleClass('full-screen');
+				$('.main-content').css('margin-left', '');
 				return false;
 			});
 

src/main/webapp/sass/components/_entry-list.scss

@@ -1,3 +1,7 @@
+.main-content {
+	margin-left: 250px;
+}
+
 .full-screen .main-content {
 	width: 100%;
 	margin-left: 0;

src/main/webapp/sass/components/_subscription-list.scss

@@ -22,10 +22,10 @@
 /* tree*/
 .sidebar-nav-fixed {
 	margin-top: 10px;
+	width: 250px;
 	position: fixed;
 	top: 0;
 	bottom: 0;
-	width: 16%;
 	overflow: hidden;
 }
 
@@ -33,6 +33,11 @@
 	overflow-y: auto;
 }
 
+.sidebar-nav-fixed .ui-resizable-e {
+	width: 5px;
+	right: 0;
+}
+
 .full-screen .left-menu {
 	display: none;
 }
@@ -120,26 +125,27 @@
 .css-treeview .tree-item:hover .config {
 	display: block;
 	padding-top: 3px;
+	margin-right: 5px;
 	width: 16px;
 	height: 16px;
 }
 
 .css-treeview .indent1 {
-	padding-left: 22px;
+	padding-left: 16px;
 }
 
 .css-treeview .indent2 {
-	padding-left: 44px;
+	padding-left: 32px;
 }
 
 .css-treeview .indent3 {
-	padding-left: 66px;
+	padding-left: 48px;
 }
 
 .css-treeview .indent4 {
-	padding-left: 88px;
+	padding-left: 64px;
 }
 
 .css-treeview .indent5 {
-	padding-left: 110px;
+	padding-left: 80px;
 }

src/main/webapp/templates/_tree.html

@@ -1,4 +1,5 @@
-<div ng-controller="CategoryTreeCtrl">
+<div ng-controller="CategoryTreeCtrl" class="sidebar-nav-fixed" mousewheel-scrolling ui-jq="resizable"
+	ui-options="{handles: 'e', resize: resizeCallback}">
 	<div class="btn-group">
 		<button class="btn btn-default" ui-sref="feeds.subscribe" ng-click="MobileService.toggleLeftMenu()">
 			<span class="icon-rss"></span>

src/main/webapp/templates/feeds.html

@@ -1,16 +1,12 @@
 <div class="container-full">
-	<div class="row">
+	<div class="left-menu">
-		<div class="col-xs-2 left-menu">
+		<div ng-include="'templates/_tree.html'"></div>
-			<div class="sidebar-nav-fixed" mousewheel-scrolling>
+		<div ng-include="'templates/_feedsearch.html'"></div>
-				<div ng-include="'templates/_tree.html'"></div>
+	</div>
-				<div ng-include="'templates/_feedsearch.html'"></div>
+	<div class="main-content">
-			</div>
+		<div id="toolbar" class="toolbar" ng-include="'templates/_toolbar.html'"></div>
-		</div>
+		<div class="entryList">
-		<div class="col-xs-10 main-content">
+			<div ui-view></div>
-			<div id="toolbar" class="toolbar" ng-include="'templates/_toolbar.html'"></div>
-			<div class="entryList">
-				<div ui-view></div>
-			</div>
 		</div>
 	</div>
 	<div ng-include="'templates/_footer.html'"></div>