default.html.erb in gh-cards-0.2.2

- old
+ new

@@ -9,35 +9,42 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css">
   <style>
     .card-deck .card {
-       max-width: calc(33% - 30px);
+      max-width: calc(33% - 30px);
+      height: 350px;
     }
+    @media print {
+      .row {
+        page-break-before: always;
+      }
+    }
 </style>
 </head>
 <body>
   <div class="container">
+    <% cards.each_slice(12) do |cardslice| -%>
     <div class="row">
       <div class="col-12">
         <div class="card-deck">
-        <% cards.each_slice(3) do |slice| %>
-          <% slice.each do |card| %>
+        <% cardslice.each_slice(3) do |slice| -%>
+          <%- slice.each do |card| %>
           <div class="card">
             <div class="card-header">
               <%= repo.split('/')[-1] %>
             </div>
             <div class="card-body">
-              <h4 class="card-title"><span class="font-weight-bold">#<%= card[:number] %></span> <%= card[:title] %></h4>
+              <h4 class="card-title"><span class="font-weight-bold">#<%= card[:number] %></span> <%= card[:title].length > 40 ? card[:title][0, 80 - 3] + "..." : card[:title] %></h4>
               <% if card[:milestone] %>
               <h6 class="text-secondary"><span class="octicon octicon-milestone" aria-hidden="true"></span><%= card[:milestone] %></h6>
               <br />
               <% end %>
-              <% if card[:labels].length > 0 %>
+              <% if card[:labels].length > 0 -%>
               <h6 class="text-secondary">Labels:</h6>
               <div class="small text-secondary test-lowercase">
-                <% for label in card[:labels] %>
+                <% for label in card[:labels] -%>
                 <%= label[:name] %><br />
                 <% end %>
               </div>
               <% end %>
             </div>
@@ -50,8 +57,9 @@
           <div class="w-100 py-2"></div>
         <% end %>
         </div>
       </div>
     </div>
+  <% end %>
   </div>
 </body>
 </html>