Style the general dashboard icons

app/assets/stylesheets/application.css

@@ -9,6 +9,7 @@
  *= require osem-rating
  *= require osem-schedule
  *= require osem-schedule-print
+ *= require osem-dashboard
  *= require font-awesome
  *= require bootstrap-markdown.min
 */

app/assets/stylesheets/breakpoints.css.scss

@@ -0,0 +1,21 @@
+@mixin breakpoint($class) {
+  @if $class == xs {
+    @media (max-width: 767px) { @content; }
+  }
+ 
+  @else if $class == sm {
+    @media (min-width: 750px) { @content; }
+  }
+ 
+  @else if $class == md {
+    @media (min-width: 970px) { @content; }
+  }
+ 
+  @else if $class == lg {
+    @media (min-width: 1170px) { @content; }
+  }
+ 
+  @else {
+    @warn "Breakpoint mixin supports: xs, sm, md, lg";
+  }
+}

app/assets/stylesheets/osem-dashboard.css.scss

@@ -0,0 +1,14 @@
+@import "breakpoints.css.scss";
+
+.dashbox span.fa {
+  line-height: 1.1em;
+  @include breakpoint(sm) {
+    font-size: 3em;
+  }
+  @include breakpoint(md) {
+    font-size: 4em;
+  }
+  @include breakpoint(lg) {
+    font-size: 5em;
+  }
+}

app/views/admin/conference/index.html.haml

@@ -1,25 +1,41 @@
 .row
-  .col-sm-4
+  .col-sm-4.col-xs-4
     .dashbox.text-center
-      .icon
-        %i.glyphicon.glyphicon-user
-      .text
-        %label.text-muted total user: #{@total_user}
-        %label.text-muted new user: #{@new_user}
-  .col-sm-4
+      %span.fa.fa-user.fa-lg
+      %span.fa.fa-lg
+        = @total_user
+      %p
+        %small
+          #{'User'.pluralize(@total_user)}
+          - if @new_user
+            %span.label.label-success{title: "+ #{@new_user} since you last logged in!"}
+              +
+              = @new_user
+  .col-sm-4.col-xs-4
     .dashbox.text-center
-      .icon
-        %i.glyphicon.glyphicon-star
-      .text
-        %label.text-muted total registrations: #{@total_reg}
-        %label.text-muted new registrations: #{@new_reg}
-  .col-sm-4
+      %span.fa.fa-check-square.fa-lg
+      %span.fa.fa-lg
+        = @total_reg
+      %p
+        %small
+          #{'Registration'.pluralize(@total_reg)}
+          - if @new_reg
+            %span.label.label-success{title: "+#{@new_reg} since you last logged in!"}
+              +
+              = @new_reg
+  .col-sm-4.col-xs-4
     .dashbox.text-center
-      .icon
-        %i.glyphicon.glyphicon-comment
-      .text
-        %label.text-muted total submissions: #{@total_submissions}
-        %label.text-muted new submissions: #{@new_submissions}
+      %span.fa.fa-file-text.fa-lg
+      %span.fa.fa-lg
+        = @total_submissions
+      %p
+        %small
+          #{'Submission'.pluralize(@total_submissions)}
+          - if @new_submissions
+            %span.label.label-success{title: "+#{@new_submissions} since you last logged in!"}
+              +
+              = @new_submissions
+
 .row#registrations
   .col-md-8
     = render partial: 'line_chart', locals: { title: 'Registrations over time',