Got down the basic layout for achievement overview

Achievement style is now compatible between overview and popup

app/lib/utils.coffee

@@ -103,6 +103,6 @@ module.exports.functionCreators =
 module.exports.keepDoingUntil = (func, wait=100, totalWait=5000) ->
   waitSoFar = 0
   (done = (success) ->
-    if (waitSoFar += wait) <= totalWait && not success
+    if (waitSoFar += wait) <= totalWait and not success
       _.delay (-> func done), wait) false
 

app/styles/achievements.sass

@@ -1,15 +1,11 @@
-.notifyjs-achievement-base
-  cursor: auto
-  white-space: nowrap
-  text-overflow: ellipsis
-  padding: 20px 0px
+.locked
+  filter: grayscale(100%)
+  -moz-filter: grayscale(100%)
+  -webkit-filter: grayscale(100%)
 
 .achievement-body
   .achievement-icon
     position: absolute
-    width: 200px
-    height: 200px
-    left: -140px
     top: 0px
 
     .achievement-image
@@ -23,6 +19,25 @@
         right: 0
         bottom: 0
 
+  .achievement-content
+    background-image: url("/images/achievements/reward_background2.png")
+    background-size: 100% 100%
+    text-align: center
+    overflow: hidden
+
+    .achievement-title
+      font-family: Bangers
+      overflow: hidden
+
+    .achievement-description
+      white-space: initial
+      font-size: 12px
+      line-height: 1.3em
+      overflow: hidden
+      max-height: 2.6em
+      margin-top: auto
+      margin-bottom: 0px !important
+
   .achievement-border-wood
     background: url("/images/achievements/border_wood.png") no-repeat
     background-size: 100% 100%
@@ -31,70 +46,109 @@
     background: url("/images/achievements/border_silver.png") no-repeat
     background-size: 100% 100%
 
-  .achievement-content
-    background-image: url("/images/achievements/reward_background2.png")
-    background-size: 100% 100%
-    width: 450px
-    height: 160px
-    text-align: center
-    padding: 24px 30px 20px 60px
-    overflow: hidden
+#user-achievements-view
+  .row
+    //.col-lg-4, .col-xs-12
+      padding-right: 0px !important
 
+  .achievement-body
+    width: 335px
+    height: 120px
+    margin: 10px 0px
 
-    .achievement-title
-      font-family: Bangers
-      font-size: 28px
-      padding-left: -50px
-      overflow: hidden
+    .achievement-icon
+      width: 120px
+      height: 120px
+      top: 0px
 
-    .achievement-description
-      white-space: initial
-      font-size: 15px
-      line-height: 1.3em
-      overflow: hidden
-      max-height: 2.6em
-      margin-top: auto
-      margin-bottom: 0px !important
+      .achievement-image
+        img
+          -moz-transform: scale(0.6)
+          -webkit-transform: scale(0.6)
+          transform: scale(0.6)
 
-    .achievement-progress
-      padding: 8px 0px 0px 0px
+    .achievement-content
+      margin-left: 60px
+      margin-right: 5px
+      width: 260px
+      height: 100px
+      padding: 20px 10px 20px 60px
 
-      .achievement-message
-        font-family: Bangers
-        font-size: 18px
-        &:empty
-          display: none
+      .achievement-title
+        font-size: 20px
+        padding-left: -50px
 
+      .achievement-description
+        font-size: 12px
+        line-height: 1.3em
+        max-height: 2.6em
 
+.notifyjs-achievement-base
+  padding: 20px 0px
 
-      .progress-wrapper
-        position: absolute
-        padding-right: 30px
-        bottom: 0px
+  .achievement-body
+    .achievement-icon
+      width: 200px
+      height: 200px
+      left: -140px
+      top: 0px
 
-        .achievement-level
-          float: left
-          font-size: 15px
+      .achievement-image
+        img
+          position: absolute
+          margin: auto
+          top: 0
+          left: 0
+          right: 0
+          bottom: 0
 
-        .progress-bar-wrapper
-          padding-left: 30px
-          width: 100%
-          .progress
-            border-radius: 20px
+    .achievement-content
+      width: 450px
+      height: 160px
+      padding: 24px 30px 20px 60px
 
-        .progress-bar-border
-          padding-left: 30px
-          position: relative
-          top: -44px
+      .achievement-title
+        font-size: 28px
+        padding-left: -50px
 
-        .progress-bar-border img
-          width: 100%
-        /*.earned-exp
-          padding-left: 5px
+      .achievement-description
+        font-size: 15px
+        line-height: 1.3em
+        max-height: 2.6em
+        margin-top: auto
+        margin-bottom: 0px !important
+
+      .achievement-progress
+        padding: 8px 0px 0px 0px
+
+        .achievement-message
           font-family: Bangers
-          font-size: 16px
-          float: right
-          */
+          font-size: 18px
+          &:empty
+            display: none
+
+        .progress-wrapper
+          position: absolute
+          padding-right: 30px
+          bottom: 0px
+
+          .achievement-level
+            float: left
+            font-size: 15px
+
+          .progress-bar-wrapper
+            padding-left: 30px
+            width: 100%
+            .progress
+              border-radius: 20px
+
+          .progress-bar-border
+            padding-left: 30px
+            position: relative
+            top: -44px
+
+          .progress-bar-border img
+            width: 100%
 
 .progress-bar-white
   background-color: white

app/templates/achievement_notify.jade

@@ -1,6 +1,6 @@
 div
   .clearfix.achievement-body
-    .achievement-icon.achievement-border-silver
+    .achievement-icon.achievement-border-silver(class=locked === true ? "locked" : "")
       .achievement-image(data-notify-html="image")
         if imgURL
           img(src=imgURL)

app/templates/user/achievements.jade

@@ -6,5 +6,6 @@ block append content
       - var title = achievement.get('name');
       - var description = achievement.get('description');
       - var imgURL = achievement.get('icon');
-      .col-sm-6.col-xs-12
+      - var locked = ! achievement.get('unlocked');
+      .col-lg-4.col-xs-12
         include ../achievement_notify

app/views/kinds/UserView.coffee

@@ -28,5 +28,4 @@ module.exports = class UserView extends RootView
     console.log 'onUserLoaded'
 
   onLoaded: ->
-    console.log 'onLoaded'
     super()

app/views/user/achievements.coffee

@@ -21,6 +21,17 @@ module.exports = class UserAchievementsView extends UserView
     @achievements = @supermodel.loadCollection(new AchievementCollection, 'achievements').model
     @earnedAchievements = @supermodel.loadCollection(new EarnedAchievementCollection(@user), 'earnedAchievements').model
 
+  onLoaded: ->
+    console.log @earnedAchievements
+    console.log 'onLoaded'
+    _.each @earnedAchievements.models, (earned) =>
+      console.log earned
+      return unless relatedAchievement = _.find @achievements.models, (achievement) ->
+        achievement.get('_id') is earned.get 'achievement'
+      relatedAchievement.set 'unlocked', true
+      earned.set 'achievement', relatedAchievement
+    super()
+
   getRenderData: ->
     context = super()
     context.achievements = @achievements.models

test/demo/fixtures/achievements.coffee

@@ -4,7 +4,7 @@ oneDayBefore = (new Date now).setDate(now.getDate() - 1)
 module.exports.DungeonArenaStarted = DungeonArenaStarted =
   _id: '53ba76249259823746b6b481'
   name: 'Dungeon Arena Started'
-  description: 'Started playing Dungeon Arena. '
+  description: 'Started playing Dungeon Arena. It was a really really hard game. So hard in fact, that this line should already be spanning'
   icon: '/images/achievements/swords-01.png'
   worth: 3
   collection: 'level.session'
@@ -22,6 +22,20 @@ module.exports.Simulated = Simulated =
   userField: '_id'
   proportionalTo: 'simulatedBy'
 
+module.exports.Simulated2 = Simulated2 =
+  _id: '53ba76249259823746b6b483'
+  name: 'Simulated2'
+  description: 'Simulated games for real.'
+  icon: '/images/achievements/cup-02.png'
+  worth: 1.5
+  collection: 'users'
+  query: "{\"simulatedBy\":{\"$gt\":0}}"
+  userField: '_id'
+  proportionalTo: 'simulatedBy'
+  function:
+    kind: 'logarithmic'
+    parameters: {a: 1, b: .5, c: .5, d: 1}
+
 module.exports.DungeonArenaStartedEarned = DungeonArenaStartedEarned =
   user: ''
   achievement: DungeonArenaStarted._id
@@ -47,5 +61,5 @@ module.exports.SimulatedEarned = SimulatedEarned =
   notified: true
 
 
-module.exports.achievements = [DungeonArenaStarted, Simulated]
+module.exports.achievements = [DungeonArenaStarted, Simulated, Simulated2]
 module.exports.earnedAchievements = [DungeonArenaStartedEarned, SimulatedEarned]