add button to show more then 10 results

Author: willi84

i18n/locale-de.json

@@ -20,7 +20,8 @@
 		"SEARCH": {
 			"PLACEHOLDER":		"Ist mein Projekt bei metacollect?",
 			"NO_MATCHES":		"Es wurden keine Einträge gefunden.",
-			"REGISTER":			"Jetzt anmelden"
+			"REGISTER":			"Jetzt anmelden",
+			"MORE_MATCHES": 	"Mehr Ergebnisse anzeigen"
 		}
 	},
 

i18n/locale-en.json

@@ -20,7 +20,8 @@
 		"SEARCH": {
 			"PLACEHOLDER":		"Is my project with metacollect?",
 			"NO_MATCHES":		"No results found.",
-			"REGISTER":			"Enter your information now."
+			"REGISTER":			"Enter your information now.",
+			"MORE_MATCHES": 	"Show more results"
 		}
 	},
 

js/controllers.js

@@ -6,25 +6,33 @@ angular.module('mcControllers', [])
 	'$http',
 
 	function($scope, $http){
-		$scope.data 	= undefined
-		$scope.search 	= ''
+		$scope.data 	= undefined;
+		$scope.search 	= '';
+
+		// number of shown result-items
+		$scope.limitResults = 10;
+
+		// increase number of shown items
+		$scope.moreResults = function(){
+			$scope.limitResults += 10;
+		}
 
 
 		$scope.getData = function(){
 
 			var search = $scope.search.replace(/[^a-zA-Z0-9 ]/g, " ")
 
-			$scope.data = true
+			$scope.data = true;
 
 			var long_search = (" "+search).replace(/\s+/g,"&title*icontains=")
 
 			$http.get('http://django.dsini20.schedar.uberspace.de/api/search/project?format=json'+long_search)
 			.then(
 				function(result){
-					$scope.data = result.data
+					$scope.data = result.data;
 				},
 				function(error){
-					$scope.data = []
+					$scope.data = [];
 				}
 			)
 		}

partials/database.html

@@ -37,7 +37,7 @@ <h1 translate = "DATABASE.HEADING"></h2>
 				>
 				</a>
 			</li>
-			<li ng-repeat = "item in data | limitTo:10">
+			<li ng-repeat = "item in data | limitTo:limitResults">
 				<span class ="logo" style ="background-image: url('{{item.logo}}')"></span><!--
 			--><span class ="title"><a href ="http://django.dsini20.schedar.uberspace.de/mainApp/{{item.id}}/">{{item.title | htmlToPlaintext}}</a></span>
 				<div class ="description">
@@ -50,6 +50,7 @@ <h1 translate = "DATABASE.HEADING"></h2>
 				</div>
 			</li>
 		</ul>
+			<button ng-if="data.length > 10" ng-hide="data.length > 10 && data.length < limitResults" id="button__more-results" ng-click="moreResults()" translate = "DATABASE.SEARCH.MORE_MATCHES"></button>
 	</div>
-</articlle>
+</article>
 

styles/styles.css

@@ -853,4 +853,11 @@ a.logo:hover{
 	width:					24rem;
 }
 
+/* show more result button */
+#button__more-results{
+	line-height: 30px;
+	border: 1px solid #333;
+	width: 100%;
+}
+