From 19fee28ec5c2906fa1a191d5a659e0648a2b1975 Mon Sep 17 00:00:00 2001
From: Connor Shea <connor.james.shea@gmail.com>
Date: Wed, 2 May 2018 16:08:17 -0600
Subject: [PATCH 1/3] Move feature search to a sidebar.

---
 app/assets/stylesheets/application.scss |  17 ++
 app/views/features/index.html.erb       | 234 ++++++++++++------------
 2 files changed, 137 insertions(+), 114 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ebdd80c5..79d5408c 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -5,6 +5,16 @@ $site-footer: 65px;
 
 .container {
   min-height: calc(100vh - #{$site-footer} -  #{$site-header});
+
+  &.search-page {
+    max-width: 100vw;
+
+    .no-wrap-row {
+      display: flex;
+      flex-flow: row;
+      flex-wrap: nowrap;
+    }
+  }
 }
 
 .site-header {
@@ -180,3 +190,10 @@ td.browser-support-info {
     margin-top: 8px;
   }
 }
+
+.search-sidebar {
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  border-right: 1px solid #ddd;
+}
diff --git a/app/views/features/index.html.erb b/app/views/features/index.html.erb
index c46c3a2d..2432cdbe 100644
--- a/app/views/features/index.html.erb
+++ b/app/views/features/index.html.erb
@@ -1,124 +1,130 @@
-<div class="container">
-  <div class="container">
-  <div class="row py-4 w-100">
-    <%= form_tag("/features", method: "get", class: "w-100") do %>
-      <%= text_field_tag(:query, 
-                         params['query'],
-                         placeholder: "Search",
-                         class: "form-control") %>
+<div class="container search-page">
+  <div class="row no-wrap-row">
+    <div class="col-lg-3 col-12 search-sidebar">
+      <div class="row p-2">
+        <%= form_tag("/features", method: "get") do %>
+          <div class="form-group">
+            <%= text_field_tag(:query, 
+                              params['query'],
+                              placeholder: "Search",
+                              class: "form-control") %>
+          </div>
 
-      <div class="py-2 w-100">
-        <div class="px-2 d-block d-md-inline-block">
-          Categories:
-        </div>
-        <% @categories.each do |key, value| %>
-          <div class="px-2 d-block d-md-inline-block">
-            <%= check_box_tag(
-              "categories[]",
-              key,
-              (true if params["categories"].present? && params["categories"].include?(key.to_s)),
-              {id: key}
-            ) %>
-            <%= label_tag(key, value) %>
+          <div class="form-group">
+            <div class="px-2 d-block d-md-inline-block">
+              Categories:
+            </div>
+            <% @categories.each do |key, value| %>
+              <div class="px-2 d-block d-md-inline-block">
+                <%= check_box_tag(
+                  "categories[]",
+                  key,
+                  (true if params["categories"].present? && params["categories"].include?(key.to_s)),
+                  {id: key}
+                ) %>
+                <%= label_tag(key, value) %>
+              </div>
+            <% end %>
           </div>
-        <% end %>
-      </div>
-      <div class="py-2 w-100">
-        <div class="px-2 d-block d-md-inline-block">
-          Filters:
-        </div>
-        <div class="px-2 d-block d-md-inline-block">
-          <%= label_tag("mdn_url", "Includes an MDN URL?") %>
-          <%= select_tag(
-            "mdn_url",
-            options_for_select(
-              [
-                ['Has an MDN URL', true],
-                ['Has no MDN URL', false]
-              ],
-              params["mdn_url"]
-            ),
-            { include_blank: true }
-          ) %>
-        </div>
 
-        <div class="px-2 d-block d-md-inline-block">
-          <%= label_tag("description", "Includes a description?") %>
-          <%= select_tag(
-            "description",
-            options_for_select(
-              [
-                ['Has a description', true],
-                ['Has no description', false]
-              ],
-              params["description"]
-            ),
-            { include_blank: true }
-          ) %>
-        </div>
+          <div class="form-group">
+            <div class="px-2 d-block d-md-inline-block">
+              Filters:
+            </div>
+            <div class="px-2 d-block d-md-inline-block">
+              <%= label_tag("mdn_url", "Includes an MDN URL?") %>
+              <%= select_tag(
+                "mdn_url",
+                options_for_select(
+                  [
+                    ['Has an MDN URL', true],
+                    ['Has no MDN URL', false]
+                  ],
+                  params["mdn_url"]
+                ),
+                { include_blank: true }
+              ) %>
+            </div>
 
-        <div class="px-2 d-block d-md-inline-block">
-          <%= label_tag("deprecated", "Deprecated?") %>
-          <%= select_tag(
-            "deprecated",
-            options_for_select(
-              [
-                ['Deprecated', true],
-                ['Not deprecated', false],
-                ['No deprecation info', "no_info"]
-              ],
-              params["deprecated"]
-            ),
-            { include_blank: true }
-          ) %>
-        </div>
+            <div class="px-2 d-block d-md-inline-block">
+              <%= label_tag("description", "Includes a description?") %>
+              <%= select_tag(
+                "description",
+                options_for_select(
+                  [
+                    ['Has a description', true],
+                    ['Has no description', false]
+                  ],
+                  params["description"]
+                ),
+                { include_blank: true }
+              ) %>
+            </div>
 
-        <div class="px-2 d-block d-md-inline-block">
-          <%= label_tag("experimental", "Experimental?") %>
-          <%= select_tag(
-            "experimental",
-            options_for_select(
-              [
-                ['Experimental', true],
-                ['Not experimental', false],
-                ['No experimental info', "no_info"]
-              ],
-              params["experimental"]
-            ),
-            { include_blank: true }
-          ) %>
-        </div>
+            <div class="px-2 d-block d-md-inline-block">
+              <%= label_tag("deprecated", "Deprecated?") %>
+              <%= select_tag(
+                "deprecated",
+                options_for_select(
+                  [
+                    ['Deprecated', true],
+                    ['Not deprecated', false],
+                    ['No deprecation info', "no_info"]
+                  ],
+                  params["deprecated"]
+                ),
+                { include_blank: true }
+              ) %>
+            </div>
 
-        <div class="px-2 d-block d-md-inline-block">
-          <%= label_tag("standard_track", "Standard track?") %>
-          <%= select_tag(
-            "standard_track",
-            options_for_select(
-              [
-                ['On standard track', true],
-                ['Not on standard track', false],
-                ['No standard track info', "no_info"]
-              ],
-              params["standard_track"]
-            ),
-            { include_blank: true }
-          ) %>
-        </div>
-      </div>
+            <div class="px-2 d-block d-md-inline-block">
+              <%= label_tag("experimental", "Experimental?") %>
+              <%= select_tag(
+                "experimental",
+                options_for_select(
+                  [
+                    ['Experimental', true],
+                    ['Not experimental', false],
+                    ['No experimental info', "no_info"]
+                  ],
+                  params["experimental"]
+                ),
+                { include_blank: true }
+              ) %>
+            </div>
 
-      <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block") %>
-    <% end %>
-  </div>
+            <div class="px-2 d-block d-md-inline-block">
+              <%= label_tag("standard_track", "Standard track?") %>
+              <%= select_tag(
+                "standard_track",
+                options_for_select(
+                  [
+                    ['On standard track', true],
+                    ['Not on standard track', false],
+                    ['No standard track info', "no_info"]
+                  ],
+                  params["standard_track"]
+                ),
+                { include_blank: true }
+              ) %>
+            </div>
+          </div>
 
-  <div class="row">
-    <% unless @feature_count.zero? %>
-      <p>Features: <%= @feature_count %></p>
-    <% end %>
-    
-    <%= render 'features_list',
-        features: @features,
-        browsers: @browsers %>
-  </div>
-</div>
+          <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block") %>
+        <% end %>
+      </div>
+    </div>
 
+    <div class="col-lg-9 col-12">
+      <div class="row px-4 py-2">
+        <% unless @feature_count.zero? %>
+          <p>Features: <%= @feature_count %></p>
+        <% end %>
+        
+        <%= render 'features_list',
+            features: @features,
+            browsers: @browsers %>
+      </div>
+    </div>
+  </div>
 </div>

From f6983e054b78e93cefabe584107cff7531bde5ab Mon Sep 17 00:00:00 2001
From: Connor Shea <connor.james.shea@gmail.com>
Date: Wed, 2 May 2018 16:59:10 -0600
Subject: [PATCH 2/3] Improve the design of the search sidebar.

---
 app/assets/stylesheets/application.scss |  11 +-
 app/views/features/index.html.erb       | 166 ++++++++++++------------
 2 files changed, 92 insertions(+), 85 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 79d5408c..0d2c1e62 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -192,8 +192,17 @@ td.browser-support-info {
 }
 
 .search-sidebar {
-  height: 100vh;
+  max-height: 100vh;
+  height: auto;
+  min-height: calc(100vh - #{$site-header});
   position: sticky;
   top: 0;
   border-right: 1px solid #ddd;
+  overflow: scroll;
+
+  .form-group-title {
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
 }
diff --git a/app/views/features/index.html.erb b/app/views/features/index.html.erb
index 2432cdbe..3bd47f32 100644
--- a/app/views/features/index.html.erb
+++ b/app/views/features/index.html.erb
@@ -2,7 +2,7 @@
   <div class="row no-wrap-row">
     <div class="col-lg-3 col-12 search-sidebar">
       <div class="row p-2">
-        <%= form_tag("/features", method: "get") do %>
+        <%= form_tag("/features", method: "get", class: "w-100") do %>
           <div class="form-group">
             <%= text_field_tag(:query, 
                               params['query'],
@@ -10,107 +10,105 @@
                               class: "form-control") %>
           </div>
 
+          <div class="form-group-title">
+            Categories
+          </div>
           <div class="form-group">
-            <div class="px-2 d-block d-md-inline-block">
-              Categories:
-            </div>
             <% @categories.each do |key, value| %>
-              <div class="px-2 d-block d-md-inline-block">
+              <div class="form-check">
                 <%= check_box_tag(
                   "categories[]",
                   key,
                   (true if params["categories"].present? && params["categories"].include?(key.to_s)),
-                  {id: key}
+                  {id: key, class: "form-check-input"}
                 ) %>
-                <%= label_tag(key, value) %>
+                <%= label_tag(key, value, class: "form-check-label") %>
               </div>
             <% end %>
           </div>
 
+          <div class="form-group-title">
+            Filters
+          </div>
           <div class="form-group">
-            <div class="px-2 d-block d-md-inline-block">
-              Filters:
-            </div>
-            <div class="px-2 d-block d-md-inline-block">
-              <%= label_tag("mdn_url", "Includes an MDN URL?") %>
-              <%= select_tag(
-                "mdn_url",
-                options_for_select(
-                  [
-                    ['Has an MDN URL', true],
-                    ['Has no MDN URL', false]
-                  ],
-                  params["mdn_url"]
-                ),
-                { include_blank: true }
-              ) %>
-            </div>
+            <%= label_tag("mdn_url", "Includes an MDN URL?") %>
+            <%= select_tag(
+              "mdn_url",
+              options_for_select(
+                [
+                  ['Has an MDN URL', true],
+                  ['Has no MDN URL', false]
+                ],
+                params["mdn_url"]
+              ),
+              { include_blank: true, class: "form-control form-control-sm" }
+            ) %>
+          </div>
 
-            <div class="px-2 d-block d-md-inline-block">
-              <%= label_tag("description", "Includes a description?") %>
-              <%= select_tag(
-                "description",
-                options_for_select(
-                  [
-                    ['Has a description', true],
-                    ['Has no description', false]
-                  ],
-                  params["description"]
-                ),
-                { include_blank: true }
-              ) %>
-            </div>
+          <div class="form-group">
+            <%= label_tag("description", "Includes a description?") %>
+            <%= select_tag(
+              "description",
+              options_for_select(
+                [
+                  ['Has a description', true],
+                  ['Has no description', false]
+                ],
+                params["description"]
+              ),
+              { include_blank: true, class: "form-control form-control-sm" }
+            ) %>
+          </div>
 
-            <div class="px-2 d-block d-md-inline-block">
-              <%= label_tag("deprecated", "Deprecated?") %>
-              <%= select_tag(
-                "deprecated",
-                options_for_select(
-                  [
-                    ['Deprecated', true],
-                    ['Not deprecated', false],
-                    ['No deprecation info', "no_info"]
-                  ],
-                  params["deprecated"]
-                ),
-                { include_blank: true }
-              ) %>
-            </div>
+          <div class="form-group">
+            <%= label_tag("deprecated", "Deprecated?") %>
+            <%= select_tag(
+              "deprecated",
+              options_for_select(
+                [
+                  ['Deprecated', true],
+                  ['Not deprecated', false],
+                  ['No deprecation info', "no_info"]
+                ],
+                params["deprecated"]
+              ),
+              { include_blank: true, class: "form-control form-control-sm" }
+            ) %>
+          </div>
 
-            <div class="px-2 d-block d-md-inline-block">
-              <%= label_tag("experimental", "Experimental?") %>
-              <%= select_tag(
-                "experimental",
-                options_for_select(
-                  [
-                    ['Experimental', true],
-                    ['Not experimental', false],
-                    ['No experimental info', "no_info"]
-                  ],
-                  params["experimental"]
-                ),
-                { include_blank: true }
-              ) %>
-            </div>
+          <div class="form-group">
+            <%= label_tag("experimental", "Experimental?") %>
+            <%= select_tag(
+              "experimental",
+              options_for_select(
+                [
+                  ['Experimental', true],
+                  ['Not experimental', false],
+                  ['No experimental info', "no_info"]
+                ],
+                params["experimental"]
+              ),
+              { include_blank: true, class: "form-control form-control-sm" }
+            ) %>
+          </div>
 
-            <div class="px-2 d-block d-md-inline-block">
-              <%= label_tag("standard_track", "Standard track?") %>
-              <%= select_tag(
-                "standard_track",
-                options_for_select(
-                  [
-                    ['On standard track', true],
-                    ['Not on standard track', false],
-                    ['No standard track info', "no_info"]
-                  ],
-                  params["standard_track"]
-                ),
-                { include_blank: true }
-              ) %>
-            </div>
+          <div class="form-group">
+            <%= label_tag("standard_track", "Standard track?") %>
+            <%= select_tag(
+              "standard_track",
+              options_for_select(
+                [
+                  ['On standard track', true],
+                  ['Not on standard track', false],
+                  ['No standard track info', "no_info"]
+                ],
+                params["standard_track"]
+              ),
+              { include_blank: true, class: "form-control form-control-sm" }
+            ) %>
           </div>
 
-          <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block") %>
+          <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block search-button") %>
         <% end %>
       </div>
     </div>

From ee63f5fda1a985670db83b68f21720faeb5aba23 Mon Sep 17 00:00:00 2001
From: Connor Shea <connor.james.shea@gmail.com>
Date: Thu, 3 May 2018 10:36:17 -0600
Subject: [PATCH 3/3] Make the header sticky on the features page, misc design
 improvements for the page.

---
 app/assets/stylesheets/application.scss    |  80 ++++----
 app/controllers/features_controller.rb     |   2 +
 app/views/features/_features_list.html.erb |   2 +-
 app/views/features/index.html.erb          | 220 +++++++++++----------
 app/views/shared/_header.html.erb          |   2 +-
 5 files changed, 150 insertions(+), 156 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0d2c1e62..4b83ba75 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,7 +1,8 @@
 @import "bootstrap";
 
-$site-header: 65px;
+$site-header: 56px;
 $site-footer: 65px;
+$zindex-header: 1080; // This ensures the header will be above popovers/tooltips.
 
 .container {
   min-height: calc(100vh - #{$site-footer} -  #{$site-header});
@@ -9,43 +10,21 @@ $site-footer: 65px;
   &.search-page {
     max-width: 100vw;
 
-    .no-wrap-row {
-      display: flex;
-      flex-flow: row;
-      flex-wrap: nowrap;
+    @include media-breakpoint-up(lg) {
+      .no-wrap-row {
+        display: flex;
+        flex-flow: row;
+        flex-wrap: nowrap;
+      }
     }
   }
 }
 
-.site-header {
-  height: $site-header;
-  padding: 20px 25px;
-  background-color: #f2f2f2;
-  border-bottom: 1px solid #ddd;
-
-  ul {
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-    margin: auto;
-  }
-
-  li {
-    display: inline-block;
-    text-align: center;
-    margin: 0 20px;
-
-    &.active {
-      font-weight: 600;
-    }
-
-    a {
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+@include media-breakpoint-up(lg) {
+  .navbar.sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-header;
   }
 }
 
@@ -110,6 +89,10 @@ $site-footer: 65px;
   overflow: hidden;
 }
 
+.card-body-scroll {
+  overflow: scroll;
+}
+
 @include media-breakpoint-up(lg) {
   .sticky-column {
     position: sticky;
@@ -191,18 +174,23 @@ td.browser-support-info {
   }
 }
 
-.search-sidebar {
-  max-height: 100vh;
-  height: auto;
-  min-height: calc(100vh - #{$site-header});
-  position: sticky;
-  top: 0;
-  border-right: 1px solid #ddd;
-  overflow: scroll;
+@include media-breakpoint-up(lg) {
+  .search-sidebar {
+    height: calc(100vh - #{$site-header});
+    position: sticky;
+    top: $site-header;
+    border-right: 1px solid #ddd;
+    overflow: scroll;
 
-  .form-group-title {
-    text-transform: uppercase;
-    font-size: 0.8rem;
-    font-weight: 600;
+    .form-group-title {
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    .search-button-container {
+      position: sticky;
+      bottom: 10px;
+    }
   }
 }
diff --git a/app/controllers/features_controller.rb b/app/controllers/features_controller.rb
index eeb0e661..f91331f5 100644
--- a/app/controllers/features_controller.rb
+++ b/app/controllers/features_controller.rb
@@ -1,5 +1,7 @@
 class FeaturesController < ApplicationController
   def index
+    @sticky_header = true
+
     if params[:query].present?
       features = Feature.search(params[:query])
     else
diff --git a/app/views/features/_features_list.html.erb b/app/views/features/_features_list.html.erb
index 2bbb2461..fadcc620 100644
--- a/app/views/features/_features_list.html.erb
+++ b/app/views/features/_features_list.html.erb
@@ -31,7 +31,7 @@
         <%= link_to "MDN", feature.mdn_url, class: "card-link mdn-link" %>
       <% end %>
     </div>
-    <div class="card-body p-0">
+    <div class="card-body p-0 card-body-scroll">
       <table class="table table-responsive-lg mb-0 features-table width-full">
         <thead>
           <tr>
diff --git a/app/views/features/index.html.erb b/app/views/features/index.html.erb
index 3bd47f32..a391dead 100644
--- a/app/views/features/index.html.erb
+++ b/app/views/features/index.html.erb
@@ -3,126 +3,130 @@
     <div class="col-lg-3 col-12 search-sidebar">
       <div class="row p-2">
         <%= form_tag("/features", method: "get", class: "w-100") do %>
-          <div class="form-group">
-            <%= text_field_tag(:query, 
-                              params['query'],
-                              placeholder: "Search",
-                              class: "form-control") %>
-          </div>
+          <div class="search-filters-container">
+            <div class="form-group">
+              <%= text_field_tag(:query, 
+                                params['query'],
+                                placeholder: "Search",
+                                class: "form-control") %>
+            </div>
 
-          <div class="form-group-title">
-            Categories
-          </div>
-          <div class="form-group">
-            <% @categories.each do |key, value| %>
-              <div class="form-check">
-                <%= check_box_tag(
-                  "categories[]",
-                  key,
-                  (true if params["categories"].present? && params["categories"].include?(key.to_s)),
-                  {id: key, class: "form-check-input"}
-                ) %>
-                <%= label_tag(key, value, class: "form-check-label") %>
-              </div>
-            <% end %>
-          </div>
+            <div class="form-group-title">
+              Categories
+            </div>
+            <div class="form-group">
+              <% @categories.each do |key, value| %>
+                <div class="form-check">
+                  <%= check_box_tag(
+                    "categories[]",
+                    key,
+                    (true if params["categories"].present? && params["categories"].include?(key.to_s)),
+                    {id: key, class: "form-check-input"}
+                  ) %>
+                  <%= label_tag(key, value, class: "form-check-label") %>
+                </div>
+              <% end %>
+            </div>
 
-          <div class="form-group-title">
-            Filters
-          </div>
-          <div class="form-group">
-            <%= label_tag("mdn_url", "Includes an MDN URL?") %>
-            <%= select_tag(
-              "mdn_url",
-              options_for_select(
-                [
-                  ['Has an MDN URL', true],
-                  ['Has no MDN URL', false]
-                ],
-                params["mdn_url"]
-              ),
-              { include_blank: true, class: "form-control form-control-sm" }
-            ) %>
-          </div>
+            <div class="form-group-title">
+              Filters
+            </div>
+            <div class="form-group">
+              <%= label_tag("mdn_url", "Includes an MDN URL?") %>
+              <%= select_tag(
+                "mdn_url",
+                options_for_select(
+                  [
+                    ['Has an MDN URL', true],
+                    ['Has no MDN URL', false]
+                  ],
+                  params["mdn_url"]
+                ),
+                { include_blank: true, class: "form-control form-control-sm" }
+              ) %>
+            </div>
 
-          <div class="form-group">
-            <%= label_tag("description", "Includes a description?") %>
-            <%= select_tag(
-              "description",
-              options_for_select(
-                [
-                  ['Has a description', true],
-                  ['Has no description', false]
-                ],
-                params["description"]
-              ),
-              { include_blank: true, class: "form-control form-control-sm" }
-            ) %>
-          </div>
+            <div class="form-group">
+              <%= label_tag("description", "Includes a description?") %>
+              <%= select_tag(
+                "description",
+                options_for_select(
+                  [
+                    ['Has a description', true],
+                    ['Has no description', false]
+                  ],
+                  params["description"]
+                ),
+                { include_blank: true, class: "form-control form-control-sm" }
+              ) %>
+            </div>
 
-          <div class="form-group">
-            <%= label_tag("deprecated", "Deprecated?") %>
-            <%= select_tag(
-              "deprecated",
-              options_for_select(
-                [
-                  ['Deprecated', true],
-                  ['Not deprecated', false],
-                  ['No deprecation info', "no_info"]
-                ],
-                params["deprecated"]
-              ),
-              { include_blank: true, class: "form-control form-control-sm" }
-            ) %>
-          </div>
+            <div class="form-group">
+              <%= label_tag("deprecated", "Deprecated?") %>
+              <%= select_tag(
+                "deprecated",
+                options_for_select(
+                  [
+                    ['Deprecated', true],
+                    ['Not deprecated', false],
+                    ['No deprecation info', "no_info"]
+                  ],
+                  params["deprecated"]
+                ),
+                { include_blank: true, class: "form-control form-control-sm" }
+              ) %>
+            </div>
 
-          <div class="form-group">
-            <%= label_tag("experimental", "Experimental?") %>
-            <%= select_tag(
-              "experimental",
-              options_for_select(
-                [
-                  ['Experimental', true],
-                  ['Not experimental', false],
-                  ['No experimental info', "no_info"]
-                ],
-                params["experimental"]
-              ),
-              { include_blank: true, class: "form-control form-control-sm" }
-            ) %>
-          </div>
+            <div class="form-group">
+              <%= label_tag("experimental", "Experimental?") %>
+              <%= select_tag(
+                "experimental",
+                options_for_select(
+                  [
+                    ['Experimental', true],
+                    ['Not experimental', false],
+                    ['No experimental info', "no_info"]
+                  ],
+                  params["experimental"]
+                ),
+                { include_blank: true, class: "form-control form-control-sm" }
+              ) %>
+            </div>
 
-          <div class="form-group">
-            <%= label_tag("standard_track", "Standard track?") %>
-            <%= select_tag(
-              "standard_track",
-              options_for_select(
-                [
-                  ['On standard track', true],
-                  ['Not on standard track', false],
-                  ['No standard track info', "no_info"]
-                ],
-                params["standard_track"]
-              ),
-              { include_blank: true, class: "form-control form-control-sm" }
-            ) %>
+            <div class="form-group">
+              <%= label_tag("standard_track", "Standard track?") %>
+              <%= select_tag(
+                "standard_track",
+                options_for_select(
+                  [
+                    ['On standard track', true],
+                    ['Not on standard track', false],
+                    ['No standard track info', "no_info"]
+                  ],
+                  params["standard_track"]
+                ),
+                { include_blank: true, class: "form-control form-control-sm" }
+              ) %>
+            </div>
           </div>
 
-          <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block search-button") %>
+          <div class="search-button-container">
+            <%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block search-button") %>
+          </div>
         <% end %>
       </div>
     </div>
 
-    <div class="col-lg-9 col-12">
-      <div class="row px-4 py-2">
-        <% unless @feature_count.zero? %>
-          <p>Features: <%= @feature_count %></p>
-        <% end %>
-        
-        <%= render 'features_list',
-            features: @features,
-            browsers: @browsers %>
-      </div>
+    <div class="col-lg-9 col-12 py-3">
+      <h1>Features</h1>
+
+      <% unless @feature_count.zero? %>
+        <p>Features: <%= @feature_count %></p>
+      <% end %>
+      
+      <%= render 'features_list',
+          features: @features,
+          browsers: @browsers %>
     </div>
   </div>
 </div>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index 87fe8eb1..cf9275fd 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-light bg-light <%= "sticky-header" if @sticky_header == true %>">
   <%= link_to "BCD Explorer", root_path, class: "d-inline-block d-md-none navbar-brand" %>
   <%= link_to "MDN Browser Compatability Data Explorer", root_path, class: "d-none d-md-inline-block navbar-brand" %>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">