Skip to content
This repository has been archived by the owner on Dec 24, 2020. It is now read-only.

Commit

Permalink
Merge pull request #30 from connorshea/move-search-to-sidebar
Browse files Browse the repository at this point in the history 
Move search to sidebar
  • Loading branch information
@connorshea
connorshea authored May 3, 2018
2 parents 0309bba + ee63f5f commit d7d9caf
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 144 deletions.
70 changes: 42 additions & 28 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,33 @@
@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});
}

.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;
}
&.search-page {
max-width: 100vw;

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) {
.no-wrap-row {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
}
}
}
}

@include media-breakpoint-up(lg) {
.navbar.sticky-header {
position: sticky;
top: 0;
z-index: $zindex-header;
}
}

.site-footer {
min-height: $site-footer;
height: auto;
Expand Down Expand Up @@ -100,6 +89,10 @@ $site-footer: 65px;
overflow: hidden;
}

.card-body-scroll {
overflow: scroll;
}

@include media-breakpoint-up(lg) {
.sticky-column {
position: sticky;
Expand Down Expand Up @@ -180,3 +173,24 @@ td.browser-support-info {
margin-top: 8px;
}
}

@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;
}

.search-button-container {
position: sticky;
bottom: 10px;
}
}
}
2 changes: 2 additions & 0 deletions app/controllers/features_controller.rb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
class FeaturesController < ApplicationController
def index
@sticky_header = true

if params[:query].present?
features = Feature.search(params[:query])
else
Expand Down
2 changes: 1 addition & 1 deletion app/views/features/_features_list.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
236 changes: 122 additions & 114 deletions app/views/features/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,132 @@
<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", class: "w-100") do %>
<div class="search-filters-container">
<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>
<% 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="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="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-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="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("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("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("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("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>

<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="search-button-container">
<%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block search-button") %>
</div>
<% end %>
</div>
</div>

<%= submit_tag("Search", class: "btn btn-primary btn-lg btn-block") %>
<% end %>
</div>
<div class="col-lg-9 col-12 py-3">
<h1>Features</h1>

<div class="row">
<% unless @feature_count.zero? %>
<p>Features: <%= @feature_count %></p>
<% end %>

<%= render 'features_list',
features: @features,
browsers: @browsers %>
<% unless @feature_count.zero? %>
<p>Features: <%= @feature_count %></p>
<% end %>
<%= render 'features_list',
features: @features,
browsers: @browsers %>
</div>
</div>
</div>

</div>
2 changes: 1 addition & 1 deletion app/views/shared/_header.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down

0 comments on commit d7d9caf

Please sign in to comment.