Merge pull request #728 from yuki384/master

Fix layout Dojos because those descriptions are cut off

Author: yasulab

app/assets/stylesheets/custom.scss

@@ -521,16 +521,22 @@ body>footer a:hover {
   padding-top: 1em;
   margin: .4em
 }
+.dojo-flex{
+  display: flex !important;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: auto;
+}
 
 .dojo {
-  display: inline-block;
-  height: 300px;
   width: 45%;
   margin: 5px;
   padding: 15px 0;
   background: #fff;
   position: relative;
-  text-align: center
+  text-align: center;
+  display: block;
+  height: auto
 }
 
 .dojo>p {
@@ -622,8 +628,7 @@ body>footer a:hover {
 
 @media only screen and (min-width:560px) {
   .dojo {
-    width: 220px;
-    height: 275px;
+    width: calc(220px - 10px);
     margin: 10px;
   }
   .event {

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

@@ -8,5 +8,5 @@
             = region
             \- #{dojos.count} Dojos
       .panel-collapse.collapse{:id => "collapse#{index}", :role => "tabpanel"}
-        .panel-body.grayscale-bg
+        .panel-body.grayscale-bg.dojo-flex
           = render partial: 'shared/dojo', collection: dojos

app/views/shared/_dojos.html.haml

@@ -1,2 +1,2 @@
-%ul.loaded
+%ul.loaded.dojo-flex
   = render partial: 'shared/dojo', collection: regions_and_dojos.values.flatten