Skip to content

Commit

Permalink
Improve UX greatly
Browse files Browse the repository at this point in the history
  • Loading branch information
@yamamuteki
yamamuteki committed May 2, 2016
1 parent c1cd3fa commit 9cf9f50
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 98 deletions.
9 changes: 7 additions & 2 deletions app/assets/javascripts/geolocation.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$("input[data-geolocation]").click (e) ->
return if ($('#q').val() != '') # keyword search
$("button[data-geolocation]").click (e) ->
return if $(this).closest("form").find("#q").val() != '' # keyword search
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success, error)
else
Expand Down Expand Up @@ -40,3 +40,8 @@ $ ->
$(document).on 'page:change', ->
$(".turbolinks-loading").fadeOut 100
return

$ ->
$(window).on 'load resize', ->
return unless $(".list-window").length
$(".list-window").height($(window).height() - $(".list-window").offset().top - 10)
63 changes: 46 additions & 17 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,42 @@
@import "bootstrap-sprockets";
@import "bootstrap";

/* iPhoneでinputが拡大されるのを無効化 */
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}

h1, .h1, h2, .h2, h3, .h3 {
margin-top: 10px;
margin-bottom: 10px;
}

.page-top-search-box {
margin-top: 10px;
.menu-bar {
background-color: #f9f9f9;
margin-bottom: 10px;
}

input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
.round-image {
border-radius: 5px;
}

.title {
padding-top: 120px;
.brand-link:hover,
.brand-link:active,
{
text-decoration: none;
}

@media screen and (max-width: 736px) {
.title {
padding-top: 30px;
}
.home-parent {
height: calc(100vh - 68px);
display: table;
table-layout: fixed;
}

.map {
width: 100%;
height: 85vh;
margin-bottom: 10px;
.home-child {
display: table-cell;
vertical-align: middle;
}

.reference-info {
Expand All @@ -55,6 +62,28 @@ textarea {
padding-left: 20px;
}

.map {
width: 100%;
height: calc(100vh - 120px);
margin-bottom: 10px;
}

/* 高さはJSで指定 */
.list-window {
overflow: scroll;
}

@media screen and (max-width: 768px) {
.list-window {
overflow: visible;
}
}

.search-box {
margin-top: 10px;
margin-bottom: 10px;
}

.list-number {
float: left;
text-align: right;
Expand All @@ -66,7 +95,7 @@ textarea {
}

.draggable-checkbox {
margin-right: 10px;
margin-left: 10px;
}

.turbolinks-loading {
Expand Down
15 changes: 12 additions & 3 deletions app/views/application/_bus_stop_search_form.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
<%= form_tag bus_stops_path, :method => 'get' do %>
<%= form_tag bus_stops_path, method: 'get' do %>
<div class="input-group">
<%= text_field_tag :q, params[:q], placeholder: 'バス停名を省略すると周辺を検索します。', class: 'form-control' %>
<% if menu then %>
<span class="input-group-btn">
<a title="ホーム" href="<%= root_path %>" class="btn btn-default">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</a>
</span>
<% end %>
<%= text_field_tag :q, params[:q], placeholder: 'バス停名を省略すると周辺を検索します', class: 'form-control' %>
<span class="input-group-btn">
<%= submit_tag '検索', name: nil, class: 'btn btn-primary', data: { geolocation: '' } %>
<%= button_tag title: '検索', name: nil, class: 'btn btn-primary', data: { geolocation: '' } do %>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<% end %>
</span>
</div>
<% end %>
6 changes: 3 additions & 3 deletions app/views/application/_map.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<% if bus_stops.present? then %>
<div id="map" class="map"></div>
<div class="clearfix">
<%= link_to '中心付近を検索', '#', class: 'btn btn-default pull-right', data: { 'search-map-center' => '' } %>
<div class="checkbox pull-right draggable-checkbox">
<%= link_to '中心付近を検索', '#', class: 'btn btn-default pull-left', data: { 'search-map-center' => '' } %>
<div class="checkbox pull-left draggable-checkbox">
<label><input type="checkbox" data-toggle-draggable> 地図をロック</label>
</div>
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: { scrollwheel: false, MinZoom:15 }, internal: {id: 'map'}}, function(){
Expand Down
15 changes: 15 additions & 0 deletions app/views/application/_menu.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="row menu-bar">
<div class="col-xs-12 col-sm-8 hidden-xs">
<h2>
<a href="<%= root_path %>" class="brand-link">
<img src="<%= image_path "apple-touch-icon.png" %>" width="34" height="34" class="round-image">
chi-bus.jp
</a>
</h2>
</div>
<div class="col-xs-12 col-sm-4">
<div class="search-box">
<%= render partial: 'bus_stop_search_form', locals: { menu: true } %>
</div>
</div>
</div>
31 changes: 15 additions & 16 deletions app/views/bus_routes/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
<% cache params[:id] do %>
<div class="row page-top-search-box">
<div class="row">
<div class="col-xs-12 col-sm-8">
<%= render partial: 'map', locals: { bus_stops: @bus_route.bus_stops, bus_routes: [@bus_route] } %>
</div>
<div class="col-xs-12 col-sm-4">
<%= render partial: 'bus_stop_search_form' %>
<h1><%= @bus_route.line_name %></h1>
<h3><%= @bus_route.line_name %></h3>
<p><%= "#{@bus_route.operation_company} #{@bus_route.bus_type_label}" %></p>
<p>
<span class="label label-default"><%= "平日 #{@bus_route.weekday_rate}" %></span>
<span class="label label-primary"><%= "土曜 #{@bus_route.saturday_rate}" %></span>
<span class="label label-danger"><%= "日祝 #{@bus_route.holiday_rate}" %></span>
</p>
<div class="list-group">
<% @bus_route.bus_stops.each_with_index do |bus_stop, index| %>
<a href="<%= bus_stop_path(bus_stop) %>" class="list-group-item">
<div class="badge"><%= bus_stop.bus_routes.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_stop.name}" %></div>
</a>
<% end %>
<div class="list-window">
<div class="list-group">
<% @bus_route.bus_stops.each_with_index do |bus_stop, index| %>
<a href="<%= bus_stop_path(bus_stop) %>" class="list-group-item">
<div class="badge"><%= bus_stop.bus_routes.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_stop.name}" %></div>
</a>
<% end %>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<%= render partial: 'map', locals: { bus_stops: @bus_route.bus_stops, bus_routes: [@bus_route] } %>
</div>
</div>
<%= link_to 'ホーム', root_path, class: 'btn btn-default' %>
<%= link_to '戻る', 'javascript:history.back()', class: 'btn btn-default' %>
<% end %>
34 changes: 18 additions & 16 deletions app/views/bus_stops/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<% cache params[:q].to_s + params[:position].to_s do %>
<div class="row page-top-search-box">
<div class="col-xs-12 col-sm-4">
<%= render partial: 'bus_stop_search_form' %>
<h1>検索結果</h1>
<div class="list-group">
<% @bus_stops.each_with_index do |bus_stop, index| %>
<a href="<%=bus_stop_path(bus_stop) %>" class="list-group-item">
<div class="badge"><%= bus_stop.bus_routes.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_stop.name}" %></div>
</a>
<% end %>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8">
<%= render partial: 'map', locals: { bus_stops: @bus_stops, bus_routes: nil } %>
</div>
<div class="col-xs-12 col-sm-4">
<h3>検索結果</h3>
<% if @bus_stops.empty? then %>
<p>検索結果はありません。</p>
<% end %>
<div class="list-window">
<div class="list-group">
<% @bus_stops.each_with_index do |bus_stop, index| %>
<a href="<%=bus_stop_path(bus_stop) %>" class="list-group-item">
<div class="badge"><%= bus_stop.bus_routes.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_stop.name}" %></div>
</a>
<% end %>
</div>
</div>
</div>
</div>
<%= link_to 'ホーム', root_path, class: 'btn btn-default' %>
<%= link_to '戻る', 'javascript:history.back()', class: 'btn btn-default' %>
<% end %>
31 changes: 15 additions & 16 deletions app/views/bus_stops/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
<% cache params[:id] do %>
<div class="row page-top-search-box">
<div class="row">
<div class="col-xs-12 col-sm-8">
<%= render partial: 'map', locals: { bus_stops: [@bus_stop], bus_routes: @bus_stop.bus_routes } %>
</div>
<div class="col-xs-12 col-sm-4">
<%= render partial: 'bus_stop_search_form' %>
<h1><%= @bus_stop.name %></h1>
<h3><%= @bus_stop.name %></h3>
<p><%= link_to @bus_stop.address + '付近', "http://maps.google.co.jp/maps?q=#{@bus_stop.latitude},#{@bus_stop.longitude}" %></p>
<div class="list-group">
<% @bus_stop.bus_routes.each_with_index do |bus_route, index| %>
<a href="<%= bus_route_path(bus_route) %>" class="list-group-item">
<div class="badge"><%= bus_route.bus_stops.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_route.operation_company} #{bus_route.line_name}" %></div>
</a>
<% end %>
<div class="list-window">
<div class="list-group">
<% @bus_stop.bus_routes.each_with_index do |bus_route, index| %>
<a href="<%= bus_route_path(bus_route) %>" class="list-group-item">
<div class="badge"><%= bus_route.bus_stops.size %></div>
<div class="list-number"><%= "#{index + 1}." %></div>
<div class="list-content"><%= "#{bus_route.operation_company} #{bus_route.line_name}" %></div>
</a>
<% end %>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<%= render partial: 'map', locals: { bus_stops: [@bus_stop], bus_routes: @bus_stop.bus_routes } %>
</div>
</div>
<%= link_to 'ホーム', root_path, class: 'btn btn-default' %>
<%= link_to '戻る', 'javascript:history.back()', class: 'btn btn-default' %>
<% end %>
49 changes: 24 additions & 25 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
<div class="row title">
<div class="col-md-12 text-center">
<%= image_tag 'chi-ba-kun-small.png'%>
</div>
<div class="col-md-12 text-center">
<h1>
chi-bus.jp<br />
<small>チーバス・ジェイピー</small>
</h1>
</div>
<div class="col-md-12 text-center">
<p class="lead">
千葉のカオスを解消する<br />
千葉県民のためのバス停情報サイト<br />
<small>（こっそり東京都にも対応）</small>
</p>
</div>
<div class="col-sm-offset-4 col-sm-4 text-center">
<%= render partial: 'bus_stop_search_form' %>
</div>
<div class="col-sm-offset-4 col-sm-4">
<ul class="reference-info">
<li>本サービスでは国土交通省国土政策局の平成22年度バス停留所データ及び平成23年度バスルートデータを利用しています。</li>
<li>千葉県PRマスコットキャラクター　チーバくん</li>
</ul>
<div class="row home-parent">
<div class="row home-child">
<div class="col-xs-12 text-center">
<%= image_tag 'chi-ba-kun-small.png'%>
<h1>
chi-bus.jp<br />
<small>チーバス・ジェイピー</small>
</h1>
<p class="lead">
千葉のカオスを解消する<br />
千葉県民のためのバス停情報サイト<br />
<small>（こっそり東京都にも対応）</small>
</p>
</div>
<div class="col-xs-12 col-sm-offset-4 col-sm-4">
<%= render partial: 'bus_stop_search_form', locals: { menu: false } %>
<script type="text/javascript">
$(".home-parent #q").focus();
</script>
<ul class="reference-info">
<li>本サービスでは国土交通省国土政策局の平成22年度バス停留所データ及び平成23年度バスルートデータを利用しています。</li>
<li>千葉県PRマスコットキャラクター　チーバくん</li>
</ul>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function from_smartphone(){
<body>
<div class="turbolinks-loading"></div>
<div class="container-fluid">
<%= render partial: 'menu' %>
<%= yield %>
</div>
</body>
Expand Down

0 comments on commit 9cf9f50

Please sign in to comment.