モバイル版のDojo一覧を地域ごとにアコーディオンにまとめるようにする

Gemfile

@@ -33,6 +33,8 @@ gem 'faraday_middleware', '0.10'
 
 gem 'koala'
 
+gem 'rack-user_agent'
+
 group :development do
   gem 'web-console'
   gem 'spring'

Gemfile.lock

@@ -155,6 +155,9 @@ GEM
       rack
     rack-test (0.7.0)
       rack (>= 1.0, < 3)
+    rack-user_agent (0.5.2)
+      rack (>= 1.5)
+      woothee (>= 1.0.0)
     rails (5.1.4)
       actioncable (= 5.1.4)
       actionmailer (= 5.1.4)
@@ -294,6 +297,7 @@ GEM
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
+    woothee (1.7.0)
     xpath (2.1.0)
       nokogiri (~> 1.3)
 
@@ -316,6 +320,7 @@ DEPENDENCIES
   pg
   pry-rails
   rack-host-redirect
+  rack-user_agent
   rails (= 5.1.4)
   rails-controller-testing
   rake

app/assets/javascripts/static_pages.coffee

@@ -0,0 +1,5 @@
+$ ->
+  $('.collapse').on 'shown.bs.collapse', ->
+    $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down")
+  $('.collapse').on 'hidden.bs.collapse', ->
+    $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right")

app/controllers/application_controller.rb

@@ -6,6 +6,8 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
   include SessionsHelper
 
+  before_action :set_request_variant
+
   private
 
     def store_location
@@ -16,4 +18,7 @@ def login_page_access?
       %w(login_page sessions).include? self.controller_name
     end
 
+  def set_request_variant
+    request.variant = request.device_variant
+  end
 end

app/controllers/static_pages_controller.rb

@@ -1,6 +1,7 @@
 class StaticPagesController < ApplicationController
   def home
-    @dojos = Dojo.all
+    @dojo_count = Dojo.count
+    @regions_and_dojos = Dojo.includes(:prefecture).group_by { |dojo| dojo.prefecture.region }
   end
 
   def letsencrypt

app/views/static_pages/_dojo.html.erb

@@ -0,0 +1,14 @@
+<li class="dojo">
+  <header>
+    <a href="<%= dojo.url %>">
+      <span class="dojo-picture" style="background-image: url(<%= dojo.logo %>);"></span>
+      <span class="dojo-name"><%= dojo.name %></span>
+    </a>
+  </header>
+  <ul class="tags">
+    <% dojo.tags.each do |tag| %>
+        <li><%= tag %></li>
+    <% end %>
+  </ul>
+  <p><%= dojo.description %></p>
+</li>

app/views/static_pages/_dojos.html+smartphone.erb

@@ -0,0 +1,21 @@
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
+  <% @regions_and_dojos.each_with_index do |(region, dojos), index| %>
+    <div class="panel panel-default">
+      <div class="panel-heading" role="tab" id="<%= "heading#{index}" %>">
+        <h4 class="panel-title">
+          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#<%= "collapse#{index}" %>">
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+            <%= region %> - <%= dojos.count %> Dojos
+          </a>
+        </h4>
+      </div>
+      <div id="<%= "collapse#{index}" %>" class="panel-collapse collapse" role="tabpanel">
+        <div class="panel-body grayscale-bg">
+          <%= render partial: 'dojo', collection: dojos %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+</div>

app/views/static_pages/_dojos.html.erb

@@ -0,0 +1,3 @@
+<ul class="loaded">
+  <%= render partial: 'dojo', collection: @regions_and_dojos.values.flatten %>
+</ul>

app/views/static_pages/home.html.erb

@@ -9,7 +9,7 @@
 </section>
 
 <section class="introduction text-center list">
-  <p>CoderDojo は7〜17歳の子どもを対象にしたプログラミング道場です。2011年にアイルランドで始まり、世界では<%= Dojo::NUM_OF_COUNTRIES %>カ国・<%= Dojo::NUM_OF_WHOLE_DOJOS %>の道場、日本では全国に<b><%= @dojos.count %></b>以上の道場があります。これまでに<b><%= Dojo::NUM_OF_WHOLE_EVENTS %></b>回以上のイベントが開催されました。</p>
+  <p>CoderDojo は7〜17歳の子どもを対象にしたプログラミング道場です。2011年にアイルランドで始まり、世界では<%= Dojo::NUM_OF_COUNTRIES %>カ国・<%= Dojo::NUM_OF_WHOLE_DOJOS %>の道場、日本では全国に<b><%= @dojo_count %></b>以上の道場があります。これまでに<b><%= Dojo::NUM_OF_WHOLE_EVENTS %></b>回以上のイベントが開催されました。</p>
   <p>CoderDojo で学べる内容は道場ごとに異なります。例えば、次の内容を学べる道場があります。</p>
   <ul>
     <li>Scratch, Hour of Code</li>
@@ -84,24 +84,9 @@
   <br />
   <h2>全国の道場</h2>
   <br />
-  <ul class="loaded">
-    <% @dojos.each do |dojo| %>
-      <li class="dojo">
-	<header>
-	  <a href="<%= dojo.url %>">
-	    <span class="dojo-picture" style="background-image: url(<%= dojo.logo %>);"></span>
-	    <span class="dojo-name"><%= dojo.name %></span>
-	  </a>
-	</header>
-	<ul class="tags">
-	<% dojo.tags.each do |tag| %>
-          <li><%= tag %></li>
-	<% end %>
-	</ul>
-	<p><%= dojo.description %></p>
-      </li>
-    <% end %>
-  </ul>
+
+  <%= render 'dojos' %>
+
 </section>
 
 <section class="text-center">