Move picking to a dropup

source/documents/partials/comparison.html.jade

@@ -1,11 +1,18 @@
-// bottom menu
-.pure-menu.pure-menu-open.pure-menu-horizontal.menu-verses
+.pure-menu.pure-menu-open.pure-menu-horizontal.menu-verses(ng-click="flipPick()")
 	.pure-g-r
 		.version(ng-repeat="heading in headings")
 			.version-padded
 				.version-menu
 					.text(ng-bind-html="heading")
 
+.pick(ng-show="pick")
+	.pick-in
+		table
+			tr
+				th(ng-repeat="(attribute, value) in all[0].meta" ng-if="attribute != 'Active'" ng-bind-html="attribute")
+			tr(ng-repeat="poem in all" class="switch" ng-class="{disabled: !poem.meta.Active}" ng-click="switchActive(poem)")
+				td(ng-repeat="(attribute, value) in poem.meta" ng-if="attribute != 'Active'" ng-bind-html="value")
+
 // verses
 #content
 	.pure-g-r(ng-repeat="verse in verses")

source/documents/partials/pick.html.jade

@@ -1,8 +0,0 @@
-table
-	tr
-		th Active
-		th(ng-repeat="(attribute, value) in poems[0].meta" ng-if="attribute != 'Active'" ng-bind-html="attribute")
-	tr(ng-repeat="poem in poems" ng-class="{disabled: !poem.meta.Active}")
-		td
-			input(type="checkbox" ng-model="poem.meta.Active")
-		td(ng-repeat="(attribute, value) in poem.meta" ng-if="attribute != 'Active'" ng-bind-html="value")

source/documents/scripts/app.js.coffee

@@ -1,10 +1,6 @@
 angular.module('sideBySide', ['sideBySide.controllers', 'ngRoute', 'ngSanitize'])
 	.config [ '$routeProvider', ($routeProvider) ->
 		$routeProvider
-			.when '/:base?/pick', {
-				templateUrl: 'partials/pick.html'
-				controller: 'PickController'
-			}
 			.when '/:base?', {
 				templateUrl: 'partials/comparison.html'
 				controller: 'ComparisonController'

source/documents/scripts/controllers.js.coffee

@@ -15,9 +15,9 @@ angular.module("sideBySide.controllers", [])
 	'$scope', 'poems', 'transformer'
 	($scope, poems, transformer) ->
 		$scope.$watch () ->
-			(poem for poem in poems.all when poem.meta.Active is true).length
+			poems.getActive().length
 		, () ->
-			active = (poem for poem in poems.all when poem.meta.Active is true)
+			active = poems.getActive()
 
 			$scope.columns = active.length
 			transformed = transformer(active)
@@ -26,13 +26,15 @@ angular.module("sideBySide.controllers", [])
 
 			headingKey = poems.heading or "Author"
 			$scope.headings = (version[headingKey] for version in transformed.meta)
-]
 
-.controller "PickController", [
-	'$scope', 'poems'
-	($scope, poems) ->
-		$scope.$watch () ->
-			(poem for poem in poems.all when poem.meta.Active is true).length
-		, () ->
-			$scope.poems = poems.all
+			$scope.all = poems.all
+
+		$scope.switchActive = (poem) ->
+			if (not poem.meta.Active || poems.getActive().length > 1)
+				poem.meta.Active = not poem.meta.Active
+
+		$scope.flipPick = () ->
+			$scope.pick = not $scope.pick
+
+		$scope.pick = true
 ]

source/documents/scripts/services/poems.js.coffee

@@ -10,6 +10,9 @@ angular.module("sideBySide").service "poems", ['$q', 'fetch', ($q, fetch) ->
 	}]
 	@heading = undefined
 
+	@getActive = () ->
+		(poem for poem in @all when poem.meta.Active is true)
+
 	@load = (base = '') =>
 		config = base.replace(/\./g, '/') + "/config.json"
 

source/documents/styles/style.css.styl

@@ -29,11 +29,12 @@ body
 	margin-bottom: 1em
 
 .pure-menu.menu-verses
-	// background: #F2F2DA
 	background: #22220C
 	position: fixed
 	left: 0
 	bottom: 0
+	:hover
+		cursor: pointer
 
 .version
 	vertical-align: top
@@ -60,8 +61,36 @@ body
 		left: 0px
 		top: -6px
 
-.disabled
-	color: #997
+.pick
+	background: #332
+	color: #C6C684
+	position: fixed
+	left: 0
+	bottom: 36px
+
+	width: 100%
+	.pick-in
+		padding: 10px
+
+	z-index: 2
+	max-height: 50%
+	overflow: auto
+
+	a
+		color: #886
+
+	table
+		th
+			text-align: left
+			color: #E5E5A1
+		td,th
+			padding: 5px 15px
+		tr.switch:hover
+			background: #443
+			cursor: pointer
+
+	.disabled
+		color: #886
 
 max_columns = 6
 for columns in 1 .. max_columns