From 468d3621ded23122176af2e50cd6a63df6a7af89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9fanni?= <stefannibrasil@gmail.com>
Date: Tue, 20 Feb 2018 12:03:13 -0800
Subject: [PATCH] Change /questions page layout (#2358)

The /questions page was displaying too much information. Now the
page has a clean layout.
---
 app/views/questions/index.html.erb | 41 ++++++++++++--------
 app/views/sidebar/_user.html.erb   |  4 --
 app/views/tag/_sorting.html.erb    | 62 +++++++++++++++---------------
 3 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/app/views/questions/index.html.erb b/app/views/questions/index.html.erb
index 4375dadc93a..3dd8786645b 100644
--- a/app/views/questions/index.html.erb
+++ b/app/views/questions/index.html.erb
@@ -1,6 +1,4 @@
-<%= render :partial => "sidebar/user" %>
-
-<div class="col-md-9">
+<div class="col-md-12">
 
   <% if params[:action] == 'answered' %>
   <h2>Recently Answered <small class="hidden-sm">Recently answered questions</small></h2>
@@ -11,28 +9,39 @@
   <% elsif params[:action] == 'liked' %>
   <h2>Liked Questions <small class="hidden-sm">Most liked questions</small></h2>
   <% else %>
+  <div class="text-center">
   <h2>Questions and Answers <small class="hidden-sm">Public Lab's growing knowledge base</small>
   </h2>
   <h4><small><%= t('questions.index.explanation') %></small></h4>
   <% end %>
 
   <p>New to Public Lab? <a href="/wiki/public-lab-q-and-a">Learn how this works &raquo;</a></p>
+  </div>
 
   <hr />
 
-  <form id="questions_searchform" class="form-horizontal" role="search" autocomplete="off" action="/post">
-    <div class="form-group">
-      <div class="col-sm-10">
-        <input tabindex="1" id="questions_searchform_input" type="text" name="title" class="form-control search-query typeahead" qryType="questions" placeholder="Search or Ask a question">
-      </div>
-      <input type="hidden" name="tags" value="question:general">
-      <input type="hidden" name="template" value="question">
-      <input type="hidden" name="redirect" value="question">
-      <div class="col-sm-2 hidden-xs">
-        <button type="submit" rel="tooltip" title="Ask a question with the entered title" class="btn btn-primary btn-block btn-md">Ask</button>
-      </div>
-    </div> 
-  </form>
+  <div class="row">
+    <div class="col-md-6">
+      <h4>Ask a question here</h4>
+      <form id="questions_searchform" class="form-horizontal" role="search" autocomplete="off" action="/post">
+        <div class="input-group">
+          <input tabindex="1" id="questions_searchform_input" type="text" name="title" class="form-control search-query typeahead" qryType="questions" placeholder="type your question">
+          <input type="hidden" name="tags" value="question:general">
+          <input type="hidden" name="template" value="question">
+          <input type="hidden" name="redirect" value="question">
+          <span class="input-group-btn">
+            <button type="submit" rel="tooltip" title="Ask a question with the entered title" class="btn btn-primary">Continue</button>
+          </span>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-6">
+      <% if params[:controller] == 'questions' %>
+        <%= render partial: 'tag/sorting' %>
+      <% end %>
+    </div>
+  </div>
+
   <hr />
 
   <%= render :partial => "notes/format_toggle" %>
diff --git a/app/views/sidebar/_user.html.erb b/app/views/sidebar/_user.html.erb
index acbb5d6621b..db1f51ddc5d 100644
--- a/app/views/sidebar/_user.html.erb
+++ b/app/views/sidebar/_user.html.erb
@@ -5,10 +5,6 @@
   <% if params[:controller] != 'questions' %>
     <%= feature('sidebar-feature') %>
   <% end %>
-  
-  <% if params[:controller] == 'questions' %>
-    <%= render partial: 'tag/sorting' %>
-  <% end %>
 
   <hr/>
 
diff --git a/app/views/tag/_sorting.html.erb b/app/views/tag/_sorting.html.erb
index 61811a8835b..5238db37846 100644
--- a/app/views/tag/_sorting.html.erb
+++ b/app/views/tag/_sorting.html.erb
@@ -1,34 +1,34 @@
-<div>
-<h4>Filter questions by topic</h4>
-<p>Refine questions by entering tags to search or answer questions on specific topics.</p>
-
-<form id="tagform" class="form" method="GET" action="/questions/tag/">
-  <div class="control-group">
-    <input autocomplete="off" id="taginput" name="id" type="text" placeholder="water-quality,dust" data-provide="typeahead" class="form-control" />
-    <script>
-      jQuery(document).ready(function() {
- 
-        $('#taginput').typeahead({
-          items: 8,
-          minLength: 3,
-          source: function (query, process) {
-            return $.post('/tag/suggested/' + query, {}, function (data) {
-              return process(data)
-            })
-          },
-          updater: function(text) { 
-            $('#taginput').val(text)
-            window.location = "/questions/tag/" + text;
-          }
-        });
+<h4>View questions by topic</h4>
+<form id="tagform" class="form-horizontal" method="GET" action="/questions/tag/">
+  <div class="input-group">
+    <input tabindex="1" autocomplete="off" id="taginput" name="id" type="text" placeholder="type your topic" data-provide="typeahead" class="form-control" />
+    <span class="input-group-btn" >
+      <button type="submit" rel="tooltip" title="View questions with the entered title" class="btn btn-primary">Search</button>
+    </span>
+  </div>
+</form>
+  <script>
+    jQuery(document).ready(function() {
 
-        $('#tagform').submit(function(e) {
-          e.preventDefault();
-          window.location = "/questions/tag/" + $('#taginput').val();
-        });
+      $('#taginput').typeahead({
+        items: 8,
+        minLength: 3,
+        source: function (query, process) {
+          return $.post('/tag/suggested/' + query, {}, function (data) {
+            return process(data)
+          })
+        },
+        updater: function(text) {
+          $('#taginput').val(text)
+          window.location = "/questions/tag/" + text;
+        }
+      });
 
+      $('#tagform').submit(function(e) {
+        e.preventDefault();
+        window.location = "/questions/tag/" + $('#taginput').val();
       });
-    </script>
-  </div>
-</form>
-</div>
+
+    });
+  </script>
+