Merge pull request #193 from appirio-tech/mobile-empty-state-ios

Finish mobile empty state on dashboard and add source sans pro fonts

Author: nlitwin

app/my-dashboard/programs/programs.controller.js

@@ -23,10 +23,9 @@
     activate();
 
     function activate() {
-
       MemberCertService.getMemberRegistration(userId, CONSTANTS.SWIFT_PROGRAM_ID)
       .then(function(res) {
-        if (res === undefined || res === null) {
+        if (res == null) {
           vm.registered = false;
           vm.loading = false;
         } else {

app/my-dashboard/programs/programs.jade

@@ -1,19 +1,23 @@
 .section-loading(ng-show="vm.loading")
 
 section.ios(ng-hide="vm.loading")
-  h1.section-title #[span iOS]: Show Your Skills
+  .unregistered(ng-hide="vm.registered")
+    img(src="/images/learn-and-improve.png", srcset="/images/learn-and-improve2x.png 2x")
 
-  .unregistered(ng-hide="vm.registered || vm.loading")
     .join-program
-      .logo
-        i.fa.fa-apple.fa-3x
+      h3 #[span iOS]: Show Your Skills
 
-        p iOS Dev Community
+      h4 Take the first steps to stand out in the Community
 
-      .call-to-action(ng-click="vm.registerUser()")
-        p Join Us
+      p Experienced and proven iOS developers are in high-demand. Prove your skills by earning these iOS topcoder badges and gain exclusive access to iOS challenges and prize accelerators, special previews into content and releases, and special community-related events and info.
 
-  .registered(ng-show="vm.registered && !vm.loading")
+      a View all the Details
+
+      //- .call-to-action(ng-click="vm.registerUser()")
+      //-   p Join Us
+
+  .registered(ng-show="vm.registered")
+    h1.section-title #[span iOS]: Show Your Skills
 
     .registered-badge
       i.fa.fa-apple.fa-3x

assets/css/account/account.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   text-align: center;
   justify-content: center;
-  @include source-sans;
+  @include source-sans-regular;
 
   // Basic element stylings
   h1 {
@@ -33,7 +33,7 @@
     padding: 0;
     padding-left: 15px;
     border: 0;
-    @include source-sans;
+    @include source-sans-regular;
     font-size: 16px;
     color: #231F20;
   }

assets/css/directives/challenge-tiles.scss

@@ -110,7 +110,7 @@
     min-height: 36px;
     margin-bottom: 25px;
     color: #3D3D3D;
-    @include source-sans;
+    @include source-sans-regular;
     font-size: 13px;
     line-height: 18px;
   }

assets/css/directives/toggle-password-with-tips.scss

@@ -14,7 +14,7 @@ toggle-password-with-tips {
   padding-right: 10px;
   border: 0;
 
-  @include source-sans;
+  @include source-sans-regular;
   font-size: 16px;
   background-color: $white;
   color: #231F20;

assets/css/directives/toggle-password.scss

@@ -14,7 +14,7 @@ toggle-password {
   padding-right: 10px;
   border: 0;
 
-  @include source-sans;
+  @include source-sans-regular;
   font-size: 16px;
   background-color: $white;
   color: #231F20;

assets/css/layout/footer.scss

@@ -1,7 +1,7 @@
 @import '../partials/combined';
 
 footer {
-  @include source-sans;
+  @include source-sans-regular;
   background-color: $light-black;
   color: $light-gray;
   min-height: 150px;

assets/css/my-dashboard/my-dashboard.scss

@@ -16,6 +16,12 @@
     width: 100%;
   }
 
+  .programs {
+    @media only screen and (max-width: 450px) {
+      padding-top: 10px;
+    }
+  }
+
   .section-title {
     @include sofia-pro-bold;
     font-size: 22px;

assets/css/my-dashboard/programs.scss

@@ -1,66 +1,63 @@
 @import '../partials/combined';
 
 .programs {
-  min-width: 1242px;
-
-  .section-title {
-    margin-bottom: 35px;
-
-    span {
-      text-transform: none;
-    }
+  .section-loading {
+    min-height: 500px;
   }
 
-  section.ios {
-    min-height: 175px;
-  }
+  section.ios { min-height: 175px; }
 
-  a {
-    color: inherit;
-    text-decoration: none;
+  h1.section-title {
+    span { text-transform: none; }
   }
 
-  .join-program {
-    height: 175px;
-    background-color: #e7e7e7;
+  .unregistered {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
 
-    & > div {
-      flex: 1;
-      display: flex;
-      text-align: center;
-      align-items: center;
+    img {
+      width: 100%;
     }
+  }
 
-    .logo {
-      justify-content: center;
+  .join-program {
+    width: 260px;
+    padding-bottom: 40px;
 
-      p {
-        margin-left: 20px;
-      }
+    h3 {
+      margin-top: 30px;
+      @include sofia-pro-light;
+      font-size: 23px;
+      text-transform: uppercase;
+      color: #3D3D3D;
+
+      span { text-transform: none; }
     }
 
-    .call-to-action {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
+    h4 {
+      margin-top: 10px;
+      @include source-sans-light;
+      font-size: 18px;
+      line-height: 24px;
+      color: #A3A3AE;
+    }
 
-      justify-content: space-around;
-      @include source-sans-bold;
-      color: #727272;
-      font-size: 22px;
-      cursor: pointer;
+    p {
+      margin-top: 20px;
+      @include source-sans-regular;
+      font-size: 13px;
+      line-height: 26px;
+    }
 
-      p {
-        width: 255px;
-        line-height: 1.2;
-        border-radius: 5px;
-        padding: 10px;
-        background-color: $dark-gray;
-        margin: 10px;
-        color: $white;
-      }
+    a {
+      display: block;
+      margin-top: 30px;
+      font-size: 13px;
+      color: $primary-color;
+      text-decoration: none;
+      text-transform: uppercase;
     }
   }
 

assets/css/partials/_fonts.scss

@@ -164,6 +164,16 @@
   font-style: italic;
 }
 
+/**********     SOURCE SANS PRO     **********/
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Light-webfont.eot');
+  src: url('/fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Light-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Light-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Light-webfont.svg#webfont') format('svg');
+  font-weight: 300;
+}
 
 @font-face {
   font-family: 'Source Sans Pro';
@@ -174,3 +184,34 @@
        url('/fonts/SourceSansPro-Regular-webfont.svg#webfont') format('svg');
   font-weight: normal;
 }
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-It-webfont.eot');
+  src: url('/fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-It-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-It-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-It-webfont.svg#webfont') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Semibold-webfont.eot');
+  src: url('/fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Semibold-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Semibold-webfont.svg#webfont') format('svg');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Bold-webfont.eot');
+  src: url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Bold-webfont.svg#webfont') format('svg');
+  font-weight: 700;
+}

assets/css/partials/_mixins.scss

@@ -44,7 +44,7 @@
   font-weight: 300;
 }
 
-@mixin source-sans {
+@mixin source-sans-regular {
   font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
   font-weight: 400;
 }
@@ -241,7 +241,7 @@
   padding: 0;
   padding-left: 15px;
   border: 0;
-  @include source-sans;
+  @include source-sans-regular;
   font-size: 16px;
   color: #231F20;
 }

assets/css/peer-review/peer-review.scss

@@ -58,7 +58,7 @@
 
     h1 {
       @include ellipsis;
-      @include source-sans;
+      @include source-sans-regular;
       display: inline-block;
       vertical-align: middle;
       font-size: 38px;
@@ -70,7 +70,7 @@
   }
 
   table.review-info {
-    @include source-sans;
+    @include source-sans-regular;
     margin-top: 15px;
     margin-left: 5px;
 
@@ -106,7 +106,7 @@
     background-color: $white;
 
     .scorecard {
-      @include source-sans;
+      @include source-sans-regular;
       color: $dark-gray;
 
       h5.description {

assets/css/peer-review/reviewStatus.scss

@@ -2,7 +2,7 @@
 
 .review-status-container {
   h1 {
-    @include source-sans;
+    @include source-sans-regular;
     font-size: 38px;
     color: $light-black;
     margin-top: 11px;
@@ -69,7 +69,7 @@
     width: 100%;
     color: $dark-gray;
     text-align: center;
-    @include source-sans;
+    @include source-sans-regular;
 
     thead {
       background-color: $table-head-gray;

assets/css/topcoder.scss

@@ -12,7 +12,7 @@ html {
 }
 
 body {
-  @include source-sans;
+  @include source-sans-regular;
   background-color: $ui-page-gray;
 }