[spalenque] - center popup with jquery

Author: santipalenque

app/app.js

@@ -53,9 +53,8 @@ define(['jquery', 'ractive', 'rv!templates/template', 'text!css/widget-styles.cs
                             if ( timeout_suggestions ) clearTimeout(timeout_suggestions);
 
                             doSearch(that, true);
-                            $('.ossw-search-results', el).show();
-                            $('.ossw-search-suggestions', el).hide();
-                            $('.ossw-suggestions-wrapper', el).hide();
+                            centerPopup(el);
+
                         } else {
                             $('.ossw-search-suggestions', el).show();
                             if ( timeout_suggestions ) clearTimeout(timeout_suggestions);
@@ -204,6 +203,26 @@ define(['jquery', 'ractive', 'rv!templates/template', 'text!css/widget-styles.cs
         }
     }
 
+    function centerPopup(el) {
+        var winW = $(window).width();
+        var newPopWidth = winW * 0.8;
+        var popMaxWidth = parseInt($('.ossw-container', el).css('max-width').slice(0, -2));
+
+        $('.ossw-search-results', el).show();
+        $('.ossw-search-suggestions', el).hide();
+        $('.ossw-suggestions-wrapper', el).hide();
+
+        if (newPopWidth < popMaxWidth) {
+            $('.ossw-container', el).css('left', winW*0.1);
+            $('.ossw-container', el).css('width', winW*0.8);
+        } else {
+            var halfWin = winW / 2;
+            var halfPop = popMaxWidth / 2;
+            $('.ossw-container', el).css('left', (halfWin - halfPop) );
+        }
+
+    }
+
     return search_widget;
 
 });

css/widget-styles.css

@@ -158,10 +158,10 @@
 .ossw-search-results .ossw-container {
 	position: fixed;
 	top: 0;
-	left: 20%;
 	margin: 64px 0 0 0;
 	width: 60%;
 	height: 80%;
+	max-width: 800px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
@@ -181,10 +181,6 @@
 }
 
 @media (max-width: 660px) {
-	.ossw-search-results .ossw-container {
-		left: 10%;
-	}
-
 	.ossw-pagination .ossw-page-link:not(.ossw-active):not(.next) {
 		display: none !important;
 	}