Refactor community

Author: Nick Litwin

app/index.jade

@@ -82,6 +82,9 @@ html
     link(rel="stylesheet", href="assets/css/directives/challenge-tile.css")
     link(rel="stylesheet", href="assets/css/directives/challenge-links.directive.css")
     link(rel="stylesheet", href="assets/css/directives/badge-tooltip.css")
+    link(rel="stylesheet", href="assets/css/community/statistics.css")
+    link(rel="stylesheet", href="assets/css/community/members.css")
+    link(rel="stylesheet", href="assets/css/community/community.css")
     link(rel="stylesheet", href="assets/css/account/reset-password.css")
     link(rel="stylesheet", href="assets/css/account/registered-successfully.css")
     link(rel="stylesheet", href="assets/css/account/register.css")

assets/css/community/_community.scss renamed to assets/css/community/community.scss

@@ -1,3 +1,5 @@
+@import 'tc-includes';
+
 .community-view {
   background: $gray-lighter;
   color: $community-text-dark;

assets/css/community/members.scss

@@ -1,13 +1,16 @@
-// @import 'community';
+@import 'tc-includes';
 
 .members-container {
   padding: 15px 0 0;
+
   a {
     text-decoration: none;
   }
+
   @media only screen and (min-width: 1070px) {
     padding: 60px 67px 0;
   }
+
   %reviewboard-panel {
     background: $white;
     padding: 10px;
@@ -37,17 +40,20 @@
       }
     }
   }
+
   .platform-stats-container {
     background: $white;
     padding: 10px;
     margin-bottom: 6px;
     height: 70px;
     font-family: "Sofia Pro",Arial,Helvetica,sans-serif;
+
     .stat {
       float: left;
       width: 25% ;
       text-align: center;
     }
+
     .statVal {
       color: #3d3d3d;
       font-size: 32px;
@@ -61,13 +67,15 @@
       font-weight: 400;
     }
   }
+
   .search-container {
     @include module-full-width;
     background: $white;
     padding: 15px;
     @media only screen and (min-width: 1070px) {
       padding: 30px 40px 30px 41px;
     }
+
     form {
       @include module-full-width;
       @include community-form-placeholder;
@@ -80,6 +88,7 @@
         border-radius: 7px;
       }
     }
+
     input[type="text"] {
       @include module-full-width;
       @include font-with-weight('Sofia Pro', 300);
@@ -91,6 +100,7 @@
         font-size: 22px;
       }
     }
+
     .search-ico {
       display: inline-block;
       height: 15px;
@@ -112,6 +122,7 @@
       }
     }
   }
+
   h2 {
     @include font-with-weight('Sofia Pro', 500);
     font-size: 20px;
@@ -120,6 +131,7 @@
     padding-top: 31px;
     padding-bottom: 17px;
     position: relative;
+
     small {
       @include font-with-weight;
       font-size: 16px;
@@ -128,9 +140,11 @@
       color: $gray-dark-alt;
       padding-top: 8px;
     }
+
     span {
       color: $member-search-highlight;
     }
+
     @media only screen and (min-width: 1070px) {
       font-size: 28px;
       padding-top: 92px;
@@ -141,12 +155,14 @@
       }
     }
   }
+
   .default-show-container > div,
   .search-result-container {
     margin-top: 6px;
     background: $white;
     position: relative;
   }
+
   %members-gray-wrapper {
     background: $gray-lightest;
     border: {

assets/css/community/statistics.scss

@@ -1,4 +1,4 @@
-// @import 'community';
+@import 'tc-includes';
 
 .statistics-container {
   margin-top: 15px;
@@ -10,10 +10,12 @@
   @media only screen and (min-width: 1030px) {
     margin: 60px 67px;
   }
+
   %statistics-panel {
     background: $white;
     padding: 10px;
     margin-bottom: 6px;
+
     h2 {
       @include font-with-weight('Sofia Pro', 700);
       font-size: 18px;
@@ -26,18 +28,21 @@
         padding-top: 82px;
         padding-bottom: 82px;
       }
+
       small {
         font-size: 16px;
         display: block;
         text-transform: capitalize;
         color: $gray-dark-alt;
         padding-top: 8px;
       }
+
       span {
         color: $member-search-highlight;
       }
     }
   }
+
   .winner-tile {
     @include font-with-weight;
     display: flex;