Redesign Guides

app/assets/stylesheets/_bootstrap.scss

@@ -22,7 +22,6 @@
 @import "bootstrap/input-groups";
 @import "bootstrap/navs";
 @import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
 @import "bootstrap/pagination";
 @import "bootstrap/pager";
 @import "bootstrap/labels";

app/assets/stylesheets/utilities/_type.scss

@@ -33,7 +33,7 @@
 
 .caps {
   text-transform: uppercase;
-  letter-spacing: 0.2px;
+  letter-spacing: 0.1em;
   font-size: 1rem;
 }
 

app/assets/stylesheets/vars/_base.scss

@@ -512,15 +512,6 @@ $badge-line-height:   1;
 $badge-border-radius: $border-radius-base;
 
 
-// Breadcrumbs
-
-$breadcrumb-padding-vertical:   0;
-$breadcrumb-padding-horizontal: 0;
-$breadcrumb-bg:                 transparent;
-$breadcrumb-color:              $brand-muted;
-$breadcrumb-active-color:       $brand-muted;
-
-
 // Carousel
 
 $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);

app/controllers/guides_controller.rb

@@ -1,8 +1,19 @@
 class GuidesController < ApplicationController
-
-  def index
-    @guide_groups = GuidesGroup.all
-    @guide_group = GuidesGroup.find_by_slug!(params.fetch(:group, 'platform'))
+  def faq
+    @article_list = FaqGroup.all
+    @article = FaqGroup.find_by_slug!(params.fetch(:group))
+    @title = "FAQs"
+    @description = "Frequently asked questions about #{@article.name.downcase} on Assembly."
+    @show_toc = false
+    render :index
   end
 
+  def guides
+    @article_list = GuidesGroup.all
+    @article = GuidesGroup.find_by_slug!(params.fetch(:group, "platform"))
+    @title = "Guides"
+    @description = "A guide about #{@article.name.downcase} on Assembly."
+    @show_toc = true
+    render :index
+  end
 end

app/views/guides/index.html.erb

@@ -1,51 +1,43 @@
-<% title @guide_group.name, 'Guides' %>
-<% provide(:description, "Frequently asked questions about #{@guide_group.name.downcase} on Assembly.") %>
-
-<!-- TODO Deprecate. Pages now use gray bg. (chrislloyd) -->
-<style>body { background-color: white !important; }</style>
-
-<%= render 'shared/navbar' %>
-
-<%# cache FaqGroup.cache_key(@guide_group) do %>
-  <div class="container">
-
-    <div class="border-bottom py3 mb4">
-      <ol class="breadcrumb mb2">
-        <li class="active">Guides</li>
-        <li></li>
-      </ol>
-      <h1 class="mt2 mb0"><%= @guide_group.name %></h1>
-    </div>
-
-    <div class="clearfix mxn4">
-      <div class="md-col md-col-8 px4">
-
-            <ul class="list-reset">
-              <% @guide_group.questions.each do |question| %>
-                <li class="question">
-                  <%= link_to question[:name], anchor: question[:anchor] %>
-                </li>
-              <% end %>
-            </ul>
-
-            <hr class="border-bottom mt4 mb4">
-
-            <%= @guide_group.body.html_safe %>
-
-      </div>
-
-      <div class="md-col md-col-4 px4">
-        <ul class="list-reset">
-          <% @guide_groups.each do |guide_group| %>
-            <li>
-              <a class="block gray-1 py1 <%= 'bold blue' if @guide_group.slug == guide_group.slug %>" href="<%= guides_path(guide_group) %>"><%= guide_group.name %></a>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-
-    </div>
-  </div>
-<%# end %>
-
-<%= render 'shared/footer' %>
+<% title @article.name, @title %>
+<% provide(:description, @description) %>
+<% provide(:body_class, "bg-white") %>
+
+<%= render "shared/navbar" %>
+
+<div class="container mt3">
+  <section class="mt4 p3 right well">
+    <h4 class="caps gray-2 center mt0 mb2">More <%= @title %></h4>
+    <ul class="list-reset mt2 mb0">
+      <% @article_list.each do |article| %>
+        <li class="mt1">
+          <span class="icon icon-chevron-right gray-3"></span>
+          <% @article_link = help_path(article) if @title == "FAQs" %>
+          <% @article_link = guides_path(article) if @title == "Guides" %>
+          <%= link_to article.name, @article_link.to_s, class: ("gray-1" + " bold blue" if @article.slug == article.slug) %>
+        </li>
+      <% end %>
+    </ul>
+  </section>
+
+  <article class="sm-col-11 md-col-8 left">
+
+    <h2 class="mtn1 py2 border-bottom"><%= @title %>: <span class="regular"><%= @article.name %></span></h2>
+
+    <% if @show_toc == true %>
+    <h5 class="m0 py2 caps gray-2">In this guide:</h5>
+    <ul class="list-reset">
+      <% @article.questions.each do |question| %>
+        <li>
+          <span class="icon icon-chevron-right gray-3"></span>
+          <%= link_to question[:name], anchor: question[:anchor] %>
+        </li>
+      <% end %>
+    </ul>
+    <% end %>
+
+    <%= @article.body.html_safe %>
+
+  </article>
+</div>
+
+<%= render "shared/footer" %>

app/views/layouts/application.html.erb

@@ -34,7 +34,7 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
-  <body class="<%= yield(:body_class) %> bg-gray-6">
+  <body class="<%= yield(:body_class) %> <%= 'bg-gray-6' unless yield(:body_class) == 'bg-white' %>">
     <%= yield %>
 
     <% hydrate_stores %>

config/routes.rb

@@ -198,16 +198,14 @@
     post 'unfollow'
   end
 
-  # Help
-  get '/help/:group', :to => 'questions#index', :as => :help
-  get '/help' => redirect('/help/basics'), :as => :faq
+  # Guides & Help
+  get "/help/:group" => "questions#index", as: :help
+  get "/help" => redirect("/help/basics"), as: :faq
+  get "/guides/:group" => "guides#index", as: :guides
+  get "/guides" => "guides#index"
 
   get '/metrics' => 'metrics#overview'
 
-  # Guides
-  get '/guides/:group', :to => 'guides#index', :as => :guides
-  get '/guides', :to => 'guides#index'
-
   # redirect support-foo to helpful
   get '/support-foo', to: redirect('/helpful')
   get '/support-foo/*extra', to: redirect {|p, req| "/helpful/#{p[:extra]}" }