Merge branch 'metrics' of github.com:startexploding/webmaker-events into metrics

assets/css/events/metrics.less

@@ -9,14 +9,35 @@ body#events.metrics {
 
     .metrics {
       position: relative;
-      font-size: .85em;
+      font-size: 1em;
+      text-shadow: 1px 1px 1px #c9c9c9;
+
+      em {
+        font-weight: 600;
+        font-style: normal;
+        line-height: 1;
+        font-size: 1.1em;
+
+        &.huge  {
+          font-size: 2em;
+        }
+      }
+
+      .stat {
+        margin-bottom: 25px;
+        display: block;
+        line-height: .75;
+      }
 
       .value {
         font-weight: bold;
-        font-size: 1.8em;
+        font-size: 2.2em;
         display: block;
         line-height: 1;
-        margin-top: 10px;
+      }
+
+      .value.inline {
+        display: inline-block;
       }
 
       .squares {
@@ -28,12 +49,24 @@ body#events.metrics {
           height: 370px;
           margin-bottom: 20px;
 
-          &.blue {
-            background: rgba(39, 170, 225, .9) url(/img/frosted.png);
+          &.red {
+            background: rgba(224, 54, 52, .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: 40%;
+              }
+            }
           }
         }
       }
@@ -41,21 +74,81 @@ body#events.metrics {
       .rectangle {
         width: 66%;
         height: 760px;
-        background: rgba(224, 54, 52, .8) url(/img/frosted.png);
+        background: rgba(39, 170, 225, .75);
         display: inline-block;
         margin-left: 20px;
+
+        .value {
+          vertical-align: middle;
+        }
+        .stat {
+          &:first-of-type {
+            padding-top: 36%;
+          }
+          &:nth-of-type(2) {
+            margin-bottom: 0px;
+          }
+        }
+        em {
+          vertical-align: middle;
+        }
       }
 
       .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;
+          }
         }
       }
     }

views/events/metrics.html

@@ -8,22 +8,33 @@
 <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>
-        Total Events <br />
+          <em>Total Events</em>
+        </span>
           Submitted by
-        <span class="value">{{ stats.users|intcomma }}</span> users
+        <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 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">
+      <span class="value inline">{{ stats.countries|intcomma }}</span> <em>Countries</em>
+      </span>
     </div>
   </div>