Center video list with javascript

Evangenieur · Dec 13, 2012 · 473f22e · 473f22e
1 parent dd687e8
commit 473f22e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/public/javascripts/hvidio.js b/public/javascripts/hvidio.js
@@ -2,14 +2,10 @@
     var loader, socket,
         $main = $('#main'),
         $form = $('#form'),
-        $list = $('#video-list'),
         $keyword = $('#keyword'),
         $results = $('#results'),
-        $hashtags = $('#hashtags'),
         $player = $('#player'),
         $close = $('#close'),
-        $up = $('#up'),
-        $down = $('#down'),
         $header = $('#header'),
         $clickjack = $('#clickjack');
 
@@ -41,14 +37,6 @@
                 Search.com_init(socket);
             });
 
-            // hashtags
-            $hashtags.on('click', 'a', function(e) {
-                $keyword.val($keyword.val());
-                $form.submit();
-
-                e.preventDefault();
-            });
-
             // toggle main window
             $clickjack.on('click', function(e) {
                 hvidio.show();
@@ -325,10 +313,18 @@
         },
 
         resize: function() {
+            // Adjusts result div height
             var mh = $main.height(),
                 hh = $header.outerHeight();
 
             $results.outerHeight(mh - hh - 20);
+
+            // Adjusts/centers result list
+            var mw = $main.width(),
+                ew = $results.find('li').outerWidth(true),
+                rw = (Math.floor(mw / ew)) * ew;
+
+            $results.find('.video-list').width(rw);
         }
     }
 

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -13,6 +13,7 @@ body {
   color: white;
   font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
   text-align: center;
+  overflow: hidden;
 }
 a:link,
 a:visited,
@@ -138,14 +139,13 @@ p.tagline {
   margin-top: 20px;
   overflow: scroll;
 }
-#results #video-list {
-  margin: 20px 1%;
-  width: 98%;
+#results .video-list {
+  overflow: hidden;
+  margin: 0 auto;
 }
 #results .video {
-  visibility: hidden;
-  display: inline-block;
-  margin: 10px 1%;
+  float: left;
+  margin: 10px 10px;
   min-height: 200px;
   width: 230px;
   position: relative;

diff --git a/public/stylesheets/style.less b/public/stylesheets/style.less
@@ -22,6 +22,7 @@ body {
     color: white;
     font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
     text-align: center;
+    overflow: hidden;
 }
 
 a:link, a:visited, a:hover, a:active {
@@ -162,15 +163,16 @@ p.tagline {
     margin-top: 20px;
     overflow: scroll;
 
-    #video-list {
-        margin: 20px 1%;
-        width: 98%;
+    .video-list {
+        overflow: hidden;
+        margin: 0 auto;
     }
 
     .video {
-        visibility: hidden;
-        display: inline-block;
-        margin: 10px 1%;
+        // visibility: hidden;
+        // display: inline-block;
+        float: left;
+        margin: 10px 10px;
         min-height: @cell-height;
         width: 230px;
         position: relative;

diff --git a/views/index.jade b/views/index.jade
@@ -23,7 +23,7 @@ block content
         div#close
 
     script#videosTemplate(type='text/template')
-        |  <ul id="video-list-<%= search %>">
+        |  <ul id="video-list-<%= search %>" class="video-list">
         |  <% _.each(videos, function(video) { %>
         |  <% include videoTemplate %>
         |  <% }) %>