no results text styling

Author: Ian Redpath

public/project/components/libraries/libraries.view.html

@@ -11,7 +11,7 @@ <h1>Libraries</h1>
 	  	</div>
   	</div>
   	<div *ngIf="!showSearchResults" class="libraries-no-search">
-	  	<h4>Highest rated libraries</h4>
+	  	<h4 class="h4-margins">Highest rated libraries</h4>
 	  	<div class="sample-libraries row">
 	  	<span class="no-results" *ngIf="highestRatedLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of highestRatedLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -30,7 +30,7 @@ <h4>Highest rated libraries</h4>
 		        </div>
 		    </div>
 		</div>
-		<h4>Libraries with the most movies</h4>
+		<h4 class="h4-margins">Libraries with the most movies</h4>
 		<div class="sample-libraries row">
 		<span class="no-results" *ngIf="mostMoviesLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of mostMoviesLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -43,7 +43,7 @@ <h4>Libraries with the most movies</h4>
 		        </div>
 		    </div>
 		</div>
-		<h4>Libraries with the most comments</h4>
+		<h4 class="h4-margins">Libraries with the most comments</h4>
 		<div class="sample-libraries row">
 		<span class="no-results" *ngIf="mostCommentsLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of mostCommentsLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -58,7 +58,7 @@ <h4>Libraries with the most comments</h4>
 		</div>
 	</div>
 	<div class="libraries-search" *ngIf="showSearchResults">
-		<div class="sample-libraries row">
+		<div class="search-results row">
 		<span class="no-results" *ngIf="getShownResults.length ===0">No results found</span>
 		    <div *ngFor="#library of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">

public/project/components/movies/movie.view.html

@@ -63,7 +63,7 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
     </div>
   </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="!fetchingLibraries">
-    <h3>Libraries With This Title</h3>
+    <h3 class="h4-margins">Libraries With This Title</h3>
     <div class="sample-libraries row">
     <span class="no-results" *ngIf="movie.libraries.length ===0">No libraries with this title</span>
         <div *ngFor="#library of movie.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">

public/project/components/movies/movies.view.html

@@ -11,7 +11,7 @@ <h1>Movies</h1>
 	  	</div>
   	</div>
   	<div *ngIf="!showSearchResults" class="movies-no-search">
-	  	<h4>Highest rated movies</h4>
+	  	<h4 class="h4-margins">Highest rated movies</h4>
 	  	<div class="sample-movies row">
 	  	<span class="no-results" *ngIf="highestRatedMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -31,7 +31,7 @@ <h4>Highest rated movies</h4>
 		        </div>
 		    </div>
 		  </div>	
-		<h4>Movies with the most libraries</h4>
+		<h4 class="h4-margins">Movies with the most libraries</h4>
 		<div class="sample-movies row">
 		<span class="no-results" *ngIf="mostLibsMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of mostLibsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -44,7 +44,7 @@ <h4>Movies with the most libraries</h4>
 		        </div>
 		    </div>
 		  </div>
-		<h4>Movies with the most comments</h4>
+		<h4 class="h4-margins">Movies with the most comments</h4>
 		<div class="sample-movies row">
 		<span class="no-results" *ngIf="mostCommentsMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of mostCommentsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -59,7 +59,7 @@ <h4>Movies with the most comments</h4>
 		  </div>
 	</div>
 	<div class="movies-search" *ngIf="showSearchResults">
-		<div class="movies-search-results row">
+		<div class="search-results row">
 	<span class="no-results" *ngIf="results.length ===0">No results found</span>
 			<div *ngFor="#movie of results" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">

public/project/components/users/users.view.html

@@ -11,7 +11,7 @@ <h1>Users</h1>
 	  	</div>
   	</div>
   	<div *ngIf="!showSearchResults" class="users-no-search">
-  	<h4>Users with the most libraries</h4>
+  	<h4 class="h4-margins">Users with the most libraries</h4>
   	<div class="sample-users row">
   	<span class="no-results" *ngIf="mostLibUsers.length ===0">No users found</span>
 	    <div *ngFor="#user of mostLibUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -24,7 +24,7 @@ <h4>Users with the most libraries</h4>
 	        </div>
 	    </div>
 	  </div>
-	<h4>Users with the most ratings</h4>
+	<h4 class="h4-margins">Users with the most ratings</h4>
 	<div class="sample-users row">
 	<span class="no-results" *ngIf="mostRatingsUsers.length ===0">No users found</span>
 		<div *ngFor="#user of mostRatingsUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
@@ -39,7 +39,7 @@ <h4>Users with the most ratings</h4>
 	  </div>
 	</div>
 	<div class="users-search" *ngIf="showSearchResults">
-		<div class="users-search-results row">
+		<div class="search-results row">
 		<span class="no-results" *ngIf="getShownResults.length ===0">No results found</span>
 	    <div *ngFor="#user of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 	        <div class="movie-poster-container">

public/project/css/style.css

@@ -1,10 +1,7 @@
 .clickable {
 	cursor: pointer;
 }
-.searchbar {
-	display: inline-block;
-	width: 45%
-}
+
 .movie-title {
 	margin-left: 15px;
 }
@@ -141,4 +138,17 @@
 
  .no-bot-margin {
  	margin-bottom: 4px;
- }
+ }
+
+.row {
+	text-align: center;
+}
+
+.h4-margins {
+	margin-top: 20px;
+	margin-bottom:20px;
+}
+
+.search-results {
+	margin-top: 50px;
+}