Add movies modal looks nicer

project/controllers/library.py

@@ -44,7 +44,14 @@ def removelibraryItem(name, index,user=None):
 	movie = library.hydrateUnit(index)
 	if not movie:
 		return jsonify(response='error',message='Unable to find the given Movie in Library %s' % library.name),404
+	
+	if library.name == 'Master':
+		libraries = Library.objects(user=user,unit='Movie')
+		for library in libraries:
 			library.removeUnit(movie)
+	else:		
+		library.removeUnit(movie)
+		
 	return jsonify(response='success',type='redirect',path=url_for(endpoint='library',name=name,_external=True))
 
 @app.route('/libraries/<name>/add', methods=['POST'])

project/static/css/style.css

@@ -26,3 +26,26 @@ html,body {
 .adjust-left {
   padding-right: 5%;
 }
+
+.movie-select {
+  padding: 10px 15px 0px 20px;
+  border-radius: 15px;
+  background-color: darkslategray;
+  margin: 5px;
+  width: 30%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.movie-select.selected {
+  background-color: slategray;
+}
+
+.clearfix {
+  float: none !important;
+}
+
+#results {
+  max-height: 500px;
+  overflow-y: scroll; 
+}
\ No newline at end of file

project/templates/library/addmovie_modal.html

@@ -11,7 +11,7 @@
 	        </form>
     	</div>
 	</div>
-	<div id="results" class="row well col-md-10 col-md-offset-1">
+	<div id="results" class="clearfix well col-md-10 col-md-offset-1">
     		Search for your movie!
 	</div>
 	<div class="hidden">
@@ -45,6 +45,8 @@
                     	listMovies($results,movies);
                     	$results.on('click','.movie-select',function(){
 							var id = $(this).data('id');
+							$('.selected').removeClass('selected');
+							$(this).addClass('selected');
 							$addForm.find('input').val(id);
 						});
                     },
@@ -63,9 +65,9 @@
 			var html = "";
 			for (var i = movies.length - 1; i >= 0; i--) {
 				movie = movies[i];
-				html += "<div class='col-md-3 movie-select' data-id='"+movie['id']+"'>";
+				html += "<div title='"+movie['title']+"' class='col-md-4 movie-select' data-id='"+movie['id']+"'>";
 				html += "<img class='img-thumbnail' src='"+movie['poster']+"'/>";
-				html += "<h3>"+movie['title']+"</h3>";
+				html += "<h6>"+movie['title']+"</h6>";
 				html += "</div>";
 			};
 			list.html(html);