some desktop refactoring and cleanup

hearth/media/css/categories.styl

@@ -40,36 +40,37 @@
 }
 
 .hovercats {
-    background: #fff;
+    background: $white;
     border-radius: 5px;
     display: none;
-    left: -162px;
+    left: -355px;
     position: absolute;
     top: 34px;
 
-    &.active {
+    &.active, &.active .cat-overlay {
         display: block;
     }
     &:after {
         border: 10px solid transparent;
         border-bottom: 10px solid #fff;
         content: "";
         height: 0;
-        left: 50%;
-        margin-left: -10px;
+        left: 100%;
+        margin-left: -65px;
         position: absolute;
         top: -20px;
         width: 0;
     }
 }
 
 .cat-overlay {
+    display: none;
     padding: 20px;
     width: 500px;
 
     li {
-        border-bottom: 1px solid #ccc;
-        border-right: 1px solid #ccc;
+        border-bottom: 1px solid $light-gray;
+        border-right: 1px solid $light-gray;
         float: left;
         font-size: 15px;
         padding: 10px;
@@ -79,6 +80,7 @@
 
         &:nth-child(2n) {
             border-right: 0;
+
             a {
                 padding-left: 50px;
 
@@ -87,6 +89,7 @@
                 }
             }
         }
+        // Last two children. 少しこわいい
         &:nth-last-child(-n + 2) {
             border-bottom: 0;
         }
@@ -110,3 +113,14 @@
         }
     }
 }
+
+@media $wider-desktop {
+    .hovercats {
+        left: -162px;
+
+        &:after{
+            left: 50%;
+            margin-left: -10px;
+        }
+    }
+}

hearth/media/css/feed.styl

@@ -474,7 +474,6 @@ $vertical-tile-margin = 10px;
     &.shelf-landing .feed-item {
         border-radius: 0;
         position: relative;
-        right: 10px;
         width: 320px;
 
         .curve,
@@ -531,7 +530,7 @@ $vertical-tile-margin = 10px;
             }
         }
     }
-    [data-page-type=leaf] {
+    [data-page-type~=leaf] {
         .column-a {
             float: left;
             width: 320px;

hearth/media/css/navbar.styl

@@ -185,11 +185,11 @@
         > li {
             display: inline-block;
             font-size: 15px;
+            line-height: 34px;
             position: relative;
+            text-align: center;
             text-transform: uppercase;
-            line-height: 34px;
             width: 25%;
-            text-align: center;
 
             &.active a {
                 color: $breezy-blue;
@@ -208,17 +208,17 @@
         .categories > a {
             &:hover {
                 color: $breezy-blue;
+
                 &:after {
                     border-top-color: $breezy-blue;
                 }
             }
-
             &:after {
-                position: absolute;
-                content: "";
                 border: 4px solid transparent;
                 border-top: 7px solid $dark-gray;
+                content: "";
                 margin-left: 8px;
+                position: absolute;
                 top: 12px;
             }
         }

hearth/media/js/navbar.js

@@ -137,30 +137,6 @@ define('navbar', ['capabilities', 'jquery', 'jquery.hammer', 'log', 'navigation'
                 z: z,
             })
         ).addClass('secondary-header');
-
-        // Categories hover menu.
-        if (caps.widescreen()) {
-            require('requests').get(urls.api.unsigned.params(
-                'categories',
-                {ordering: '-modified'}
-            )).done(function(result) {
-                var $menu = $('.hovercats');
-
-                $menu.html(
-                    nunjucks.env.render('cat_overlay.html', {
-                       categories: result.objects
-                    })
-                );
-
-                $('.navbar > .categories').on('mouseover', function() {
-                    $menu.addClass('active');
-                }).on('mouseout', function() {
-                    $menu.removeClass('active');
-                }).on('click', 'a', function() {
-                    $menu.removeClass('active');
-                });
-            });
-        }
     }
 
     // Render navbar.

hearth/templates/cat_overlay.html

@@ -1,12 +1,13 @@
-{# Gets rendered for desktop only - temporary until redesign. #}
-
-<ol class="cat-overlay c">
-  {% for cat in categories %}
-    <li>
-      <a class="cat-{{ cat.slug }} cur-cat"
-         href="{{ url('category', [cat.slug]) }}">
-         {{ cat.name }}
-      </a>
-    </li>
-  {% endfor %}
-</ol>
+{# Desktop categories - (possibly) temporary until redesign. #}
+{% defer (url=apiParams('categories', ordering='-modified'), pluck='objects') %}
+  <ol class="cat-overlay c">
+    {% for cat in categories %}
+      <li>
+        <a class="cat-{{ cat.slug }} cur-cat"
+           href="{{ url('category', [cat.slug]) }}">
+           {{ cat.name }}
+        </a>
+      </li>
+    {% endfor %}
+  </ol>
+{% end %}

hearth/templates/feed.html

@@ -24,3 +24,17 @@
     {% endif %}
   </p>
 {% end %}
+
+{# Desktop categories - (possibly) temporary until redesign. #}
+{% defer (url=apiParams('categories', ordering='-modified'), pluck='objects') %}
+  <ol class="cat-overlay c">
+    {% for cat in this %}
+      <li>
+        <a class="cat-{{ cat.slug }} cur-cat"
+           href="{{ url('category', [cat.slug]) }}">
+           {{ cat.name }}
+        </a>
+      </li>
+    {% endfor %}
+  </ol>
+{% end %}

src/media/css/header.styl

@@ -87,14 +87,14 @@
     top: 4px;
 }
 
-@media (min-width: 710px) {
+@media $at-least-desktop {
     .package .site-header .site:after {
         left: 2px;
         top: 5px;
     }
 }
 
-@media (min-width: 1024px) {
+@media $wider-desktop {
     .package .site-header .site:after {
         left: -4px;
         top: 7px;
@@ -492,7 +492,7 @@ main {
 // ***************** Cursor (Desktop) (>= 1024px)
 
 // This probably shouldn't be media query based.
-@media (min-width: 1024px) {
+@media $wider-desktop {
     main {
         padding: 0;
     }

src/media/css/incompatible.styl

@@ -41,7 +41,7 @@
     }
 }
 
-@media (min-width: 1024px) {
+@media $wider-desktop {
     #incompatibility-banner {
         margin-top: 0;
     }

src/media/css/lib.styl

@@ -5,6 +5,7 @@ $desktop-ftr = 732px;
 // Use these as @media $at-least-desktop {}
 $at-least-desktop = unquote('(min-width: 710px)');
 $narrower-than-desktop = unquote('(max-width: 709px)');
+$wider-desktop = unquote('(min-width: 1024px)');
 
 $retina-tablet = $retina unquote('and (max-width: 540px)');
 $retina-wide = $retina unquote('and (min-width: 1024px)');

src/media/js/views/homepage.js

@@ -5,11 +5,24 @@ define('views/homepage',
 
     var console = log('homepage');
     var gettext = l10n.gettext;
+    var catsTrigger = '.navbar > .categories';
 
     z.page.on('click', '.feed-brand .view-all', function() {
         $(this).hide().closest('.feed-brand').find('.app.hidden').show();
     });
 
+    z.body.on('mouseover', catsTrigger, function() {
+        var $menu = $('.hovercats');
+        if (!$menu.find('.cat-overlay').length) {
+            $menu.append($('.cat-overlay').detach());
+        }
+        $menu.addClass('active');
+    }).on('mouseout', catsTrigger, function() {
+        $('.hovercats').removeClass('active');
+    }).on('click', catsTrigger + ' a', function() {
+        $('.hovercats').removeClass('active');
+    });
+
     return function(builder, args, params) {
         params = params || {};