Convert HTML to ERB: Dojo/Dojos partials

Author: yasulab

app/views/shared/_dojo.html+smartphone.erb

@@ -0,0 +1,27 @@
+<li class="dojo dojo-sp">
+  <header>
+    <%= link_to lazy_image_tag(dojo.logo, alt: "CoderDojo #{dojo.name}", class: 'dojo-picture-sp'), dojo.url,
+              target: "_blank", rel: "external noopener" %>
+    <p class="dojo-sp-info">
+      <span class="dojo-name dojo-name-sp">
+        <%= link_to "#{dojo.name} (#{dojo.prefecture.name})", dojo.url, target: "_blank", rel: "external noopener" %>
+        <% if not dojo.counter == 1 %>
+          <span class="dojo-counter" data-original-title="道場数"
+                data-placement="bottom"
+                data-toggle="tooltip"><%= dojo.counter %></span>
+        <% end %>
+      </span>
+      <span class="dojo-description">
+        <%= dojo.description %>
+        <% if dojo.is_private %>
+          <%= link_to 'Private', doc_path('private-dojo'), class: 'dojo-private' %>
+        <% end %>
+      </span>
+    </p>
+  </header>
+  <ul class="tags">
+    <% dojo.tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+</li> 

app/views/shared/_dojo.html+smartphone.haml

@@ -0,0 +1,25 @@
+<li class="dojo" id="<%= dojo.name %>">
+  <header>
+    <%= link_to lazy_image_tag(dojo.logo, alt: "CoderDojo #{dojo.name}", class: 'dojo-picture'), dojo.url,
+              target: "_blank", rel: "external noopener" %>
+    <span class="dojo-name">
+      <%= link_to "#{dojo.name} (#{dojo.prefecture.name})", dojo.url, target: "_blank", rel: "external noopener" %>
+      <% if not dojo.counter == 1 %>
+        <span class="dojo-counter" data-original-title="道場数"
+              data-placement="bottom"
+              data-toggle="tooltip"><%= dojo.counter %></span>
+      <% end %>
+    </span>
+  </header>
+  <ul class="tags">
+    <% dojo.tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+  <p class="dojo-description">
+    <%= dojo.description %>
+    <% if dojo.is_private %>
+      <%= link_to 'Private', doc_path('private-dojo'), class: 'dojo-private' %>
+    <% end %>
+  </p>
+</li> 

app/views/shared/_dojo.html.erb

@@ -0,0 +1,33 @@
+<div id="accordion" class="panel-group" aria-multiselectable="true" role="tablist">
+  <% regions_and_dojos.each_with_index do |(region, dojos), index| %>
+    <div class="panel panel-default">
+      <div class="panel-heading" id="heading<%= index %>" role="tab">
+        <h4 class="panel-title">
+          <a data-toggle="collapse"
+             href="#collapse<%= index %>" role="button">
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+            <%= region %>
+            - <%= dojos.pluck(:counter).sum %> Dojos
+          </a>
+        </h4>
+      </div>
+      <div class="panel-collapse collapse" id="collapse<%= index %>" role="tabpanel">
+        <div class="panel-body grayscale-bg dojo-flex">
+          <%= render partial: 'shared/dojo', collection: dojos %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<script>
+  $(document).ready(function() {
+    $('.collapse').on('shown.bs.collapse', function() {
+      $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
+    });
+  
+    $('.collapse').on('hidden.bs.collapse', function() {
+      $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
+    });
+  });
+</script> 

app/views/shared/_dojo.html.haml

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

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

@@ -0,0 +1 @@
+_dojos.html+smartphone.erb