From 812cb7854e8def070d1cf1e343e3dcbde4cffd09 Mon Sep 17 00:00:00 2001
From: Richard Enlow <richard@amoe.ba>
Date: Mon, 22 Jul 2013 19:13:19 -0700
Subject: [PATCH 1/2] Adjusting style and breakpoints

---
 assets/css/events/metrics.less | 96 +++++++++++++++++++++++++++++++---
 views/events/metrics.html      | 30 +++++++----
 2 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/assets/css/events/metrics.less b/assets/css/events/metrics.less
index c090478..15d3b4c 100644
--- a/assets/css/events/metrics.less
+++ b/assets/css/events/metrics.less
@@ -9,14 +9,33 @@ body#events.metrics {
 
     .metrics {
       position: relative;
-      font-size: .85em;
+      font-size: 1em;
+      text-shadow: 1px 1px 1px #c9c9c9;
+
+      em {
+        text-transform: uppercase;
+        font-weight: bold;
+        font-style: normal;
+        line-height: 1;
+        font-size: 1.1em;
+      }
+
+      .stat {
+        margin-bottom: 25px;
+        display: block;
+        line-height: .75;
+      }
 
       .value {
         font-weight: bold;
-        font-size: 1.8em;
+        font-size: 2em;
         display: block;
         line-height: 1;
-        margin-top: 10px;
+        text-transform: uppercase;
+      }
+
+      .value.inline {
+        display: inline-block;
       }
 
       .squares {
@@ -29,11 +48,23 @@ body#events.metrics {
           margin-bottom: 20px;
 
           &.blue {
-            background: rgba(39, 170, 225, .9) url(/img/frosted.png);
+            background: rgba(39, 170, 225, .7);
+
+            .stat {
+              &:first-of-type {
+                padding-top: 5%;
+              }
+            }
           }
 
           &.gray {
-            background: rgba(150, 152, 156, .9) url(/img/frosted.png);
+            background: rgba(150, 152, 156, .7);
+
+            .stat {
+              &:first-of-type {
+                padding-top: 30%;
+              }
+            }
           }
         }
       }
@@ -41,21 +72,72 @@ body#events.metrics {
       .rectangle {
         width: 66%;
         height: 760px;
-        background: rgba(224, 54, 52, .8) url(/img/frosted.png);
+        background: rgba(224, 54, 52, .7);
         display: inline-block;
         margin-left: 20px;
+
+        .stat {
+          &:first-of-type {
+            padding-top: 40%;
+          }
+        }
       }
 
       .square, .rectangle {
         padding: 30px;
         color: white;
-        font-size: 3em;
+        font-size: 2.8em;
       }
 
       .squares, .rectangle {
         @media (max-width: 800px) {
           width: 90%;
           margin: 5%;
+
+          .stat {
+            &:first-of-type {
+              padding-top: 0;
+            }
+          }
+
+          .value, em {
+            font-size: 1em;
+          }
+        }
+      }
+
+      .squares, .square, .rectangle {
+        @media (max-width: 1000px) {
+          margin-bottom: 0;
+          margin-top: 0;
+        }
+      }
+
+      .value, em  {
+        @media (max-width: 1300px) {
+          font-size: .75em;
+        }
+      }
+
+      .square, .rectangle  {
+        @media (max-width: 1300px) {
+          font-size: 2.5em;
+        }
+      }
+
+      .metrics {
+        @media (max-width: 1000px) {
+          .square, .rectangle {
+            padding: 30px;
+            color: white;
+            font-size: .5em;
+          }
+
+          .stat {
+            margin-bottom: 25px;
+            display: block;
+            line-height: .75;
+          }
         }
       }
     }
diff --git a/views/events/metrics.html b/views/events/metrics.html
index 1e5e6a0..3efdb94 100644
--- a/views/events/metrics.html
+++ b/views/events/metrics.html
@@ -9,21 +9,31 @@
   <div class="metrics">
     <div class="squares">
       <div class="square blue">
-        <span class="value">{{ stats.total_events|intcomma }}</span>
-        Total Events <br />
-        Submitted by
-        <span class="value">{{ stats.users|intcomma }}</span> users
+        <span class="stat">
+          <span class="value">{{ stats.total_events|intcomma }}</span>
+          <em>Total Events</em>
+        </span>
+          Submitted by
+        <span class="stat">
+          <span class="value inline">{{ stats.users|intcomma }}</span> <em>Users</em>
+        </span>
       </div>
       <div class="square gray">
-        <span class="value">{{ stats.upcoming_events|intcomma }}</span> Upcoming Events
+      <span class="stat">
+        <span class="value">{{ stats.upcoming_events|intcomma }}</span> <em>Upcoming Events</em>
+      </span>
       </div>
     </div>
     <div class="rectangle">
-      <span class="value">{{ stats.total_attendees|intcomma }} </span>
-      <span class="value">Attendees </span>
-      in <span class="value">{{ stats.cities|intcomma }}</span> Cities
-
-      Across <span class="value">{{ stats.countries|intcomma }}</span> Countries
+      <span class="stat">
+        <span class="value">{{ stats.total_attendees|intcomma }} </span> <em>Attendees</em>
+      </span>
+      <span class="stat">
+        in <span class="value inline">{{ stats.cities|intcomma }}</span> <em>Cities</em>
+      </span>
+      <span class="stat">
+        Across <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
+      </span>
     </div>
   </div>
 

From 8d89ba446552ef0d1438663361bdc71b33a79851 Mon Sep 17 00:00:00 2001
From: Richard Enlow <richard@amoe.ba>
Date: Mon, 22 Jul 2013 19:55:16 -0700
Subject: [PATCH 2/2] Adjusting metrics dashboard style

---
 assets/css/events/metrics.less | 29 ++++++++++++++++++++---------
 views/events/metrics.html      |  7 ++++---
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/assets/css/events/metrics.less b/assets/css/events/metrics.less
index 15d3b4c..88c6916 100644
--- a/assets/css/events/metrics.less
+++ b/assets/css/events/metrics.less
@@ -13,11 +13,14 @@ body#events.metrics {
       text-shadow: 1px 1px 1px #c9c9c9;
 
       em {
-        text-transform: uppercase;
-        font-weight: bold;
+        font-weight: 600;
         font-style: normal;
         line-height: 1;
         font-size: 1.1em;
+
+        &.huge  {
+          font-size: 2em;
+        }
       }
 
       .stat {
@@ -28,10 +31,9 @@ body#events.metrics {
 
       .value {
         font-weight: bold;
-        font-size: 2em;
+        font-size: 2.2em;
         display: block;
         line-height: 1;
-        text-transform: uppercase;
       }
 
       .value.inline {
@@ -47,8 +49,8 @@ body#events.metrics {
           height: 370px;
           margin-bottom: 20px;
 
-          &.blue {
-            background: rgba(39, 170, 225, .7);
+          &.red {
+            background: rgba(224, 54, 52, .7);
 
             .stat {
               &:first-of-type {
@@ -62,7 +64,7 @@ body#events.metrics {
 
             .stat {
               &:first-of-type {
-                padding-top: 30%;
+                padding-top: 40%;
               }
             }
           }
@@ -72,14 +74,23 @@ body#events.metrics {
       .rectangle {
         width: 66%;
         height: 760px;
-        background: rgba(224, 54, 52, .7);
+        background: rgba(39, 170, 225, .75);
         display: inline-block;
         margin-left: 20px;
 
+        .value {
+          vertical-align: middle;
+        }
         .stat {
           &:first-of-type {
-            padding-top: 40%;
+            padding-top: 36%;
           }
+          &:nth-of-type(2) {
+            margin-bottom: 0px;
+          }
+        }
+        em {
+          vertical-align: middle;
         }
       }
 
diff --git a/views/events/metrics.html b/views/events/metrics.html
index 3efdb94..51c0dba 100644
--- a/views/events/metrics.html
+++ b/views/events/metrics.html
@@ -8,7 +8,7 @@
 <div class="dashboard">
   <div class="metrics">
     <div class="squares">
-      <div class="square blue">
+      <div class="square red">
         <span class="stat">
           <span class="value">{{ stats.total_events|intcomma }}</span>
           <em>Total Events</em>
@@ -26,13 +26,14 @@
     </div>
     <div class="rectangle">
       <span class="stat">
-        <span class="value">{{ stats.total_attendees|intcomma }} </span> <em>Attendees</em>
+        <span class="value">{{ stats.total_attendees|intcomma }} </span> <em class="huge">Attendees</em>
       </span>
       <span class="stat">
         in <span class="value inline">{{ stats.cities|intcomma }}</span> <em>Cities</em>
       </span>
+      Across
       <span class="stat">
-        Across <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
+      <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
       </span>
     </div>
   </div>