footer always on page bottom, minor tweaks for crud example

server/app/assets/stylesheets/main.scss

@@ -5,13 +5,22 @@ $fa-css-prefix: fa;
 @import "lib/bootstrap/scss/bootstrap.scss";
 @import "lib/play-cms/frontend/css/sortable";
 
+html {
+  height: 100%;
+}
+body {
+  min-height: 100%;
+  position: relative;
+  padding-bottom: 6rem;
+}
+
 img {
   display: block;
   max-width: 100%;
   height: auto;
 }
 
-.pcms-collection {
+main {
   margin: 5rem 0;
 }
 
@@ -20,6 +29,9 @@ footer {
   background-color: $gray-200;
   text-align: center;
   font-size: .8rem;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
   p {
     margin-top: 1rem;
   }

server/app/crud/page/views/show.scala.html

@@ -12,36 +12,34 @@
 @main(data) {
     <div class="container">
         <h1>@data.getPageTitle</h1>
-        <div class="box">
-            <h2 class="text-center">@data.getDealerTitle</h2>
-            <div class="table-responsive">
-                <table class="table">
-                    <thead>
+        <h2>@data.getDealerTitle</h2>
+        <div class="table-responsive table-striped">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>@Messages("example.crud.car.model")</th>
+                        <th>@Messages("example.crud.car.brand")</th>
+                        <th>@Messages("example.crud.car.registrationId")</th>
+                        <th>@Messages("example.crud.car.price")</th>
+                        <th>@Messages("example.crud.car.buyDate")</th>
+                    </tr>
+                </thead>
+                <tbody>
+                @if(cars.nonEmpty) {
+                    @cars.map { item =>
+                        <tr>
+                            <td>@item.getModel</td>
+                            <td>@item.getBrand.asScala.map(_.getTitle).getOrElse(Messages("example.crud.car.no.brand"))</td>
+                            <td>@item.getRegistrationId</td>
+                            <td>@item.getPrice</td>
+                            <td>@item.getBuyDate.asScala.map(dateTimeSwiss(_)).getOrElse("-")</td>
                         <tr>
-                            <th>@Messages("example.crud.car.model")</th>
-                            <th>@Messages("example.crud.car.brand")</th>
-                            <th>@Messages("example.crud.car.registrationId")</th>
-                            <th>@Messages("example.crud.car.price")</th>
-                            <th>@Messages("example.crud.car.buyDate")</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    @if(cars.nonEmpty) {
-                       @cars.map { item =>
-                           <tr>
-                               <td>@item.getModel</td>
-                               <td>@item.getBrand.asScala.map(_.getTitle).getOrElse(Messages("example.crud.car.no.brand"))</td>
-                               <td>@item.getRegistrationId</td>
-                               <td>@item.getPrice</td>
-                               <td>@item.getBuyDate.asScala.map(dateTimeSwiss(_)).getOrElse("-")</td>
-                            <tr>
-                       }
-                    } else {
-                        <tr><td colspan="5">@Messages("example.crud.car.no.result")</td></tr>
                     }
-                    </tbody>
-                </table>
-            </div>
+                } else {
+                    <tr><td colspan="5">@Messages("example.crud.car.no.result")</td></tr>
+                }
+                </tbody>
+            </table>
         </div>
     </div>
 }