show.slim in comable_backend-0.3.3

- old
+ new
@@ -1,63 +1,65 @@
-#comable-dashboard
-  h1.page-header
-    = Comable.t('admin.nav.dashboard')
+.comable-page
+  .comable-page-heading
+    h1.page-header
+      = Comable.t('admin.nav.dashboard')
 
-  section.row
-    .col-sm-4
-      - number = @this_week_orders.count
-      = render 'widget',
-        title: Comable.t('admin.new_orders'),
-        number: number_with_delimiter(number),
-        progress: (number.to_f / @last_week_orders.count) * 100,
-        color: 'green',
-        fa: 'shopping-cart'
+  .comable-page-body
+    section
+      .col-sm-4
+        - number = @this_week_orders.count
+        = render 'widget',
+          title: Comable.t('admin.new_orders'),
+          number: number_with_delimiter(number),
+          progress: (number.to_f / @last_week_orders.count) * 100,
+          color: 'green',
+          fa: 'shopping-cart'
 
-    .col-sm-4
-      - number = @this_week_orders.sum(:total_price)
-      = render 'widget',
-        title: Comable.t('admin.sales'),
-        number: number_to_currency(number),
-        progress:  (number.to_f / @last_week_orders.sum(:total_price)) * 100,
-        color: 'blue',
-        fa: 'dollar'
+      .col-sm-4
+        - number = @this_week_orders.sum(:total_price)
+        = render 'widget',
+          title: Comable.t('admin.sales'),
+          number: number_to_currency(number),
+          progress:  (number.to_f / @last_week_orders.sum(:total_price)) * 100,
+          color: 'blue',
+          fa: 'dollar'
 
-  / TODO: Comment out after adding timestamp columns
-    .col-sm-4
-      - number = @this_week_customers.count
-      = render 'widget',
-        title: Comable.t('admin.new_users'),
-        number: number_with_delimiter(number),
-        progress: (number.to_f / @last_week_customers.count) * 100,
-        color: 'black',
-        fa: 'user'
+    / TODO: Comment out after adding timestamp columns
+      .col-sm-4
+        - number = @this_week_customers.count
+        = render 'widget',
+          title: Comable.t('admin.new_users'),
+          number: number_with_delimiter(number),
+          progress: (number.to_f / @last_week_customers.count) * 100,
+          color: 'black',
+          fa: 'user'
 
-  section.row
-    .col-sm-12
-      .panel
-        .panel-body
-          #comable-morris.morris style="height: 300px;"
+    section
+      .col-sm-12
+        .panel.panel-default
+          .panel-body
+            #comable-morris.morris style="height: 300px;"
 
-    javascript:
-      morris_data = #{raw @this_month_orders.to_morris};
-      morris_keys = #{raw Comable::Order.morris_keys};
-      morris_labels = ['#{Comable.t('admin.order_count')}', '#{Comable.t('admin.sales')}'];
+      javascript:
+        morris_data = #{raw @this_month_orders.to_morris};
+        morris_keys = #{raw Comable::Order.morris_keys};
+        morris_labels = ['#{Comable.t('admin.order_count')}', '#{Comable.t('admin.sales')}'];
 
-    coffee:
-      new Morris.Line({
-        # ID of the element in which to draw the chart.
-        element: 'comable-morris',
-        # Chart data records -- each entry in this array corresponds to a point on
-        # the chart.
-        data: morris_data,
-        # The name of the data record attribute that contains x-values.
-        xkey: 'date',
-        # A list of names of data record attributes that contain y-values.
-        ykeys: morris_keys,
-        # Labels for the ykeys -- will be displayed when you hover over the
-        # chart.
-        labels: morris_labels,
-        xLabelAngle: 45,
-        xLabels: ['day'],
-        lineColors: ['#00acac', '#348fe2'],
-        hideHover: 'auto'
-      })
+      coffee:
+        new Morris.Line({
+          # ID of the element in which to draw the chart.
+          element: 'comable-morris',
+          # Chart data records -- each entry in this array corresponds to a point on
+          # the chart.
+          data: morris_data,
+          # The name of the data record attribute that contains x-values.
+          xkey: 'date',
+          # A list of names of data record attributes that contain y-values.
+          ykeys: morris_keys,
+          # Labels for the ykeys -- will be displayed when you hover over the
+          # chart.
+          labels: morris_labels,
+          xLabelAngle: 45,
+          xLabels: ['day'],
+          lineColors: ['#00acac', '#348fe2'],
+          hideHover: 'auto'
+        })