Przeglądaj źródła

Sexy project list resizing

James Allen 12 lat temu
rodzic
commit
5c18f4fe02

+ 1 - 1
services/web/app/views/project/list.jade

@@ -18,7 +18,7 @@ block content
 	.content.content-alt(ng-controller="ProjectPageController")
 	.content.content-alt(ng-controller="ProjectPageController")
 		.container
 		.container
 			.row
 			.row
-				.col-md-2.col-xs-3
+				aside.col-md-2.col-xs-3
 					include ./list/side-bar
 					include ./list/side-bar
 
 
 				.col-md-10.col-xs-9
 				.col-md-10.col-xs-9

+ 2 - 2
services/web/app/views/project/list/project-list.jade

@@ -109,11 +109,11 @@
 
 
 .row.row-spaced
 .row.row-spaced
 	.col-xs-12
 	.col-xs-12
-		.card.card-thin
+		.card.card-thin.project-list-card
 			ul.list-unstyled.project-list.structured-list(
 			ul.list-unstyled.project-list.structured-list(
 				select-all-list,
 				select-all-list,
 				ng-if="projects.length > 0",
 				ng-if="projects.length > 0",
-				max-height="windowHeight - 290",
+				max-height="projectListHeight - 25",
 				ng-cloak
 				ng-cloak
 			)
 			)
 				li.container-fluid
 				li.container-fluid

+ 20 - 3
services/web/public/coffee/main/project-list.coffee

@@ -59,11 +59,28 @@ define [
 		$scope.predicate = "lastUpdated"
 		$scope.predicate = "lastUpdated"
 		$scope.reverse = true
 		$scope.reverse = true
 
 
-		$scope.windowHeight = $window.innerHeight
+		recalculateProjectListHeight = () ->
+			topOffset = $(".project-list-card").offset().top
+			bottomOffset = $("footer").outerHeight() + 25
+			sideBarHeight = $("aside").height() - 56
+			# When footer is visible and page doesn't need to scroll we just make it
+			# span between header and footer
+			height = $window.innerHeight - topOffset - bottomOffset
+			
+			# When page is small enough that this pushes the project list smaller than
+			# the side bar, then the window going to have to scroll to take into account the
+			# footer. So we now start to track to the bottom of the window, with a 25px padding
+			# since the footer is hidden below the fold. Don't ever get bigger than the sidebar
+			# though since that's what triggered this happening in the first place.
+			if height < sideBarHeight
+				height = Math.min(sideBarHeight, $window.innerHeight - topOffset - 25)
+			$scope.projectListHeight = height
+			
+		recalculateProjectListHeight()
 		angular.element($window).bind "resize", () ->
 		angular.element($window).bind "resize", () ->
-			$scope.windowHeight = $window.innerHeight
+			recalculateProjectListHeight()
 			$scope.$apply()
 			$scope.$apply()
-
+			
 		# Allow tags to be accessed on projects as well
 		# Allow tags to be accessed on projects as well
 		projectsById = {}
 		projectsById = {}
 		for project in $scope.projects
 		for project in $scope.projects