Improve an UX

yamamuteki · Apr 24, 2016 · 89305cd · 89305cd
1 parent 194d523
commit 89305cd
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -17,6 +17,15 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
+h1, .h1, h2, .h2, h3, .h3 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.page-top-search-box {
+  margin-top: 10px;
+}
+
 input[type='text'],
 input[type='number'],
 textarea {

diff --git a/app/controllers/bus_stops_controller.rb b/app/controllers/bus_stops_controller.rb
@@ -1,5 +1,6 @@
 class BusStopsController < ApplicationController
   def index
+    session[:q] = params[:q]
     @bus_stops = BusStop.where("name like '%#{params[:q]}%'").limit(100)
     @hash = Gmaps4rails.build_markers(@bus_stops) do |bus_stop, marker|
       marker.lat bus_stop.latitude

diff --git a/app/views/bus_route_infos/show.html.erb b/app/views/bus_route_infos/show.html.erb
@@ -1,3 +1,15 @@
+<div class="row page-top-search-box">
+  <div class="col-sm-4">
+    <%= form_tag bus_stops_path, :method => 'get' do %>
+      <div class="input-group">
+        <%= text_field_tag :q, session[:q], placeholder: 'バス停名を入力してください。', class: 'form-control' %>
+        <span class="input-group-btn">
+          <%= submit_tag "検索", name: nil, class: 'btn btn-primary' %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>
 <h1><%= @bus_route_info.line_name %></h1>
 <p>
 <%= "#{@bus_route_info.operation_company}" %><br />

diff --git a/app/views/bus_stops/index.html.erb b/app/views/bus_stops/index.html.erb
@@ -1,5 +1,4 @@
-<h1>検索結果</h1>
-<div class="row">
+<div class="row page-top-search-box">
   <div class="col-sm-4">
     <%= form_tag bus_stops_path, :method => 'get' do %>
       <div class="input-group">
@@ -11,6 +10,7 @@
     <% end %>
   </div>
 </div>
+<h1>検索結果</h1>
 <ol class="find-result">
   <% @bus_stops.each do |bus_stop| %>
     <li><%= link_to bus_stop.name, bus_stop_path(bus_stop) %></li>

diff --git a/app/views/bus_stops/show.html.erb b/app/views/bus_stops/show.html.erb
@@ -1,3 +1,15 @@
+<div class="row page-top-search-box">
+  <div class="col-sm-4">
+    <%= form_tag bus_stops_path, :method => 'get' do %>
+      <div class="input-group">
+        <%= text_field_tag :q, session[:q], placeholder: 'バス停名を入力してください。', class: 'form-control' %>
+        <span class="input-group-btn">
+          <%= submit_tag "検索", name: nil, class: 'btn btn-primary' %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>
 <h1><%= @bus_stop.name %></h1>
 <p><%= link_to @bus_stop.address + '付近', "http://maps.google.co.jp/maps?q=#{@bus_stop.latitude},#{@bus_stop.longitude}" %></p>
 <ol>