Merge pull request #324 from appirio-tech/feature/tom-style-badge-modal

updated badges styling

Author: tladendo

app/profile/badges/badges.controller.js

@@ -4,12 +4,13 @@
   /**
    * The controller for badges section of member-profile page.
    */
-  var BadgeCtrl = function ($scope, CONSTANTS, ProfileService, UserService, userHandle) {
+  var BadgeCtrl = function ($scope, CONSTANTS, ProfileService, UserService, userHandle, profile) {
     var badgeCtrl = this;
     // use logged in user's handle for showing badges if not injected into the controller
     badgeCtrl.userHandle = userHandle ? userHandle : UserService.getUserIdentity().username;
     badgeCtrl.init($scope);
     badgeCtrl.mapBadges();
+    badgeCtrl.profile = profile;
 
     badgeCtrl.dealWithBadgeData($scope, ProfileService);
 
@@ -668,5 +669,5 @@
     .module('tc.profile')
     .controller('BadgesController', BadgeCtrl);
 
-  BadgeCtrl.$inject = ['$scope', 'CONSTANTS', 'ProfileService', 'UserService', 'userHandle'];
-})();
+  BadgeCtrl.$inject = ['$scope', 'CONSTANTS', 'ProfileService', 'UserService', 'userHandle', 'profile'];
+})();

app/profile/badges/badges.jade

@@ -1,10 +1,20 @@
+header.head
+  .breadcrumbs
+    .handle
+      img.profile-circle(fallback-src="/images/avatarPlaceholder.png", ng-src="{{vm.profile.photoURL}}")
+
+      span.handle
+        | {{vm.userHandle}}
+
+      span.space  // 
+
+      span.title BADGES
+
 aside.badges
-  header.head
-    h4 Badges
   .content
     .badgeGroups
       .groupBadge(ng-repeat='ag in vm.achievementGroups', ng-class='ag.groupClass', ng-show='ag.specificAchievements[0].active')
         span.subBadge.hpLogo(ng-if="ag.groupClass.substring(0 , 9) === 'HP-Badges'")
         span.subBadge(ng-repeat='achievement in ag.specificAchievements', ng-class="(achievement.isStudio ? 'Studio-' : '') + achievement.specificClass + ' ' + ( achievement.active | iif : 'selected' : '' )", badge-tooltip, badge='achievement')
     .footer-badges
-      .singleBadge(ng-class=" achievement.groupClass  + ' ' + (achievement.active | iif : 'selected' : '' ) ", ng-repeat='achievement in vm.singleAchievements', ng-show='achievement.active', badge-tooltip, badge='achievement')
+      .singleBadge(ng-class=" achievement.groupClass  + ' ' + (achievement.active | iif : 'selected' : '' ) ", ng-repeat='achievement in vm.singleAchievements', ng-show='achievement.active', badge-tooltip, badge='achievement')

app/profile/profile.controller.js

@@ -88,6 +88,9 @@
         resolve: {
           userHandle: function() {
             return vm.userHandle;
+          },
+          profile: function() {
+            return vm.profile;
           }
         }
       });

assets/css/profile/badges.scss

@@ -1,43 +1,77 @@
 @import '../partials/combined';
 
-.ngdialog.ngdialog-theme-default .ngdialog-content {
-  display: flex;
-  flex-flow: row wrap;
-
-  .badges {
+.ngdialog.ngdialog-theme-default {
+  padding: 0;
+  .ngdialog-content {
+    padding: 30px;
+    background: white;
+    opacity: 0.95;
     width: 100%;
-    margin-top: 10px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
 
-    .content {
-      max-height: 300px;
-      overflow: auto;
-      .badgeGroups {
-        display: flex;
-        flex-flow: column wrap;
-        align-items: center;
+    header.head {
+      font-family: 'Sofia Pro';
+      font-size: 28px;
+      line-height: 34px;
+      font-weight: 200;
+      span {
+        display: inline;
+        &.title {
+          color: $primary-color;
+          font-weight: bold;
+        }
       }
-      .footer-badges {
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: center;
+      img.profile-circle {
+        display: inline;
+        border-radius: 50%;
+        height: 30px;
+        margin-bottom: -5px;
+        margin-right: 13px;
+      }
+ 
+    }
+
+    .badges {
+      margin-top: 30px;
+      padding: 30px;
+      background: #fbfbfb;
+      border: 1px solid #f0f0f0;
+      width: 30%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .content {
+        overflow: auto;
+        .badgeGroups {
+          display: flex;
+          flex-flow: column wrap;
+          align-items: center;
+        }
+        .footer-badges {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: center;
+        }
       }
     }
   }
 }
 
+
 .ngdialog.ngdialog-theme-default .ngdialog-content {
   @media (max-width: 768px) {
     width: 100%;
     border-radius: 0;
   }
   @media (min-width: 768px) {
-    width: 80%;
   }
   @media (min-width: 992px) {
-    width: 60%;
   }
   @media (min-width: 1200px) {
-    width: 50%;
   }
-}
+}