Improve the look of the conf dashboard

app/assets/stylesheets/osem-dashboard.scss

@@ -1,26 +1,34 @@
 @import "breakpoints.scss";
 
 .dashbox span.fa {
-  line-height: 1.1em;
+  margin-bottom: 2px;
+
+  @include breakpoint(xs) {
+    font-size: 1.5em;
+  }
   @include breakpoint(sm) {
-    font-size: 3em;
+    font-size: 2em;
   }
   @include breakpoint(md) {
-    font-size: 4em;
+    font-size: 3.5em;
   }
   @include breakpoint(lg) {
     font-size: 5em;
   }
 }
 
-.dashbox {
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
+.dashbox.panel {
+    padding: 10px;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    line-height: 1.6rem;
 
-.dashbox label {
-    display: block;
-    font-size: 1.1em;
+    label {
+      line-height: 2rem;
+    }
 }
 
 .todolist-missing span {

app/views/admin/conferences/show.html.haml

@@ -3,16 +3,16 @@
   Dashboard for #{@conference.title}
 %hr
 .row
-  .col-sm-3
+  .col-sm-3.col-xs-6
     = render "big_statistic",
       icon: "user", subtitle: "Registration", value: @total_reg, delta: @new_reg
-  .col-sm-3
+  .col-sm-3.col-xs-6
     = render "big_statistic",
       icon: "check-square", subtitle: "Submission", value: @total_submissions, delta: @new_submissions
-  .col-sm-3
+  .col-sm-3.col-xs-6
     = render "big_statistic",
       icon: "file-text", subtitle: "Hour", value: @program_length, delta: @new_program_length
-  .col-sm-3
+  .col-sm-3.col-xs-6
     = render "big_statistic",
       icon: "archive", subtitle: "Withdrawn", value: @total_withdrawn, delta: @new_withdrawn
 

app/views/application/_big_statistic.haml

@@ -1,13 +1,12 @@
 - reverse ||= false
 - variant = variant_from_delta(delta, reverse: reverse)
-.dashbox.text-center
-  %span.fa
-    = fa_icon(icon)
-    = value
-  %p.text-nowrap
-    %small
+.dashbox.panel.panel-primary
+  .paenl-body.text-center
+    %span.fa
+      = fa_icon(icon)
+      = value
+    %p
       = subtitle.pluralize(value)
-      %span.label{ class: "label-#{variant}" }
-        = delta
-        since you last logged in
-
+      .label{ class: "label-#{variant}" }
+        = delta || 0
+        since last log in