Greatly redid achievement styling for various scenarios

app/application.coffee

@@ -40,12 +40,11 @@ Application = initialize: ->
   @facebookHandler = new FacebookHandler()
   @gplusHandler = new GPlusHandler()
   $(document).bind 'keydown', preventBackspace
-  #$.notify.addStyle 'achievement', html: $(AchievementNotify popup:true)
   $.notify.addStyle 'achievement-wood', html: $(AchievementNotify popup:true)
   $.notify.addStyle 'achievement-stone', html: $(AchievementNotify popup:true)
   $.notify.addStyle 'achievement-silver', html: $(AchievementNotify popup:true)
   $.notify.addStyle 'achievement-gold', html: $(AchievementNotify popup:true)
-  $.notify.addStyle 'achievement-diamong', html: $(AchievementNotify popup:true)
+  $.notify.addStyle 'achievement-diamond', html: $(AchievementNotify popup:true)
   @linkedinHandler = new LinkedInHandler()
   preload(COMMON_FILES)
   $.i18n.init {

app/styles/achievements.sass

@@ -25,11 +25,11 @@
     text-align: center
     overflow: hidden
 
-    .achievement-title
+    > .achievement-title
       font-family: Bangers
       overflow: hidden
 
-    .achievement-description
+    > .achievement-description
       white-space: initial
       font-size: 12px
       line-height: 1.3em
@@ -37,6 +37,7 @@
       max-height: 2.6em
       margin-top: auto
       margin-bottom: 0px !important
+      padding-left: 8px
 
 #user-achievements-view
   .row
@@ -78,9 +79,11 @@
 .notifyjs-achievement-wood-base, .notifyjs-achievement-stone-base, .notifyjs-achievement-silver-base,
 .notifyjs-achievement-gold-base, .notifyjs-achievement-diamond-base
   padding: 20px 0px
+  cursor: default
 
   .achievement-body
     .achievement-icon
+      z-index: 1000
       width: 200px
       height: 200px
       left: -140px
@@ -96,6 +99,7 @@
           bottom: 0
 
     .achievement-content
+      position: relative
       width: 450px
       height: 160px
       padding: 24px 30px 20px 60px
@@ -111,37 +115,38 @@
         margin-top: auto
         margin-bottom: 0px !important
 
-      .achievement-progress
-        padding: 8px 0px 0px 0px
+      .progress-wrapper
+        margin-left: 20px
+        position: absolute
+        bottom: 48px
 
-        .achievement-message
-          font-family: Bangers
-          font-size: 18px
-          &:empty
-            display: none
-
-        .progress-wrapper
+        .achievement-level
+          font-size: 20px
+          z-index: 1000
           position: absolute
-          padding-right: 30px
-          bottom: 0px
+          left: -15px
+          margin-top: -3px
+          box-shadow: 0 0 0 2px black, 0 0 0 3px lightgrey, 0 0 0 5px black
 
-          .achievement-level
-            float: left
-            font-size: 15px
+        > .progress-bar-wrapper
+          position: absolute
+          width: 331px
+          height: 20px
+          z-index: 2
 
-          .progress-bar-wrapper
-            padding-left: 30px
-            width: 100%
-            .progress
-              border-radius: 20px
+          > .progress
+            margin-top: 5px
+            border-radius: 50px
+            height: 14px
 
-          .progress-bar-border
-            padding-left: 30px
-            position: relative
-            top: -44px
-
-          .progress-bar-border img
-            width: 100%
+        > .progress-bar-border
+          position: absolute
+          width: 340px
+          height: 30px
+          margin-top: -2px
+          background: url("/images/achievements/bar_border.png") no-repeat
+          background-size: 100% 100%
+          z-index: 1
 
 .notifyjs-achievement-wood-base
   .achievement-icon
@@ -168,5 +173,11 @@
     background: url("/images/achievements/border_diamond.png") no-repeat
     background-size: 100% 100%
 
-.progress-bar-white
-  background-color: white
+.exp-bar-accumulated
+  background-color: #680080
+
+.exp-bar-new
+  background-color: #0096ff
+
+.exp-bar-left
+  background-color: #fffbfd

app/templates/achievement_notify.jade

@@ -9,11 +9,10 @@ div
       p.achievement-description(data-notify-html="description") #{description}
 
       if popup
-        .achievement-progress
-          .achievement-message(data-notify-html="message")
-          .progress-wrapper
-            //.earned-exp(data-notify-html="earnedExp")
-            span.achievement-level.badge(data-notify-html="level")
-            .progress-bar-wrapper(data-notify-html="progressBar")
-            .progress-bar-border(data-notify-html="barBorder")
-              //img(src='/images/achievements/bar_border.png' width='100%')
+        .progress-wrapper
+          //.earned-exp(data-notify-html="earnedExp")
+          span.achievement-level.badge(data-notify-html="level")
+          .progress-bar-wrapper(data-notify-html="progressBar")
+          .progress-bar-border
+            //(data-notify-html="barBorder")
+            //img(src='/images/achievements/bar_border.png' width='100%')

app/views/kinds/RootView.coffee

@@ -49,9 +49,9 @@ module.exports = class RootView extends CocoView
     console.debug "Current level is #{currentLevel} (#{currentLevelExp} xp), next level is #{nextLevel} (#{nextLevelExp} xp)."
     console.debug "Need a total of #{nextLevelExp - currentLevelExp}, already had #{previousExp} and just now earned #{achievedExp} totalling on #{currentExp}"
 
-    alreadyAchievedBar = $("<div class='progress-bar progress-bar-warning' style='width:#{alreadyAchievedPercentage}%'></div>")
-    newlyAchievedBar = $("<div data-toggle='tooltip' class='progress-bar progress-bar-success' style='width:#{newlyAchievedPercentage}%'></div>")
-    emptyBar = $("<div data-toggle='tooltip' class='progress-bar progress-bar-white' style='width:#{100 - newlyAchievedPercentage - alreadyAchievedPercentage}%'></div>")
+    alreadyAchievedBar = $("<div class='progress-bar exp-bar-accumulated' style='width:#{alreadyAchievedPercentage}%'></div>")
+    newlyAchievedBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-new' style='width:#{newlyAchievedPercentage}%'></div>")
+    emptyBar = $("<div data-toggle='tooltip' class='progress-bar exp-bar-left' style='width:#{100 - newlyAchievedPercentage - alreadyAchievedPercentage}%'></div>")
     progressBar = $('<div class="progress" data-toggle="tooltip"></div>').append(alreadyAchievedBar).append(newlyAchievedBar).append(emptyBar)
     #message = if (currentLevel isnt 1) and leveledUp then "Reached level #{currentLevel}!" else null
 
@@ -61,6 +61,7 @@ module.exports = class RootView extends CocoView
 
     barBorder = $('<img src="/images/achievements/bar_border.png" />')
 
+    ###
     barBorder.hover (e) ->
       #console.debug e
       x = e.pageX
@@ -79,7 +80,7 @@ module.exports = class RootView extends CocoView
       #console.debug $actualHover
       $actualHover.trigger e if $actualHover
 
-    # TODO a default should be linked here
+    ###
     data =
       title: achievement.get('name')
       image: $("<img src='#{achievement.getImageURL()}' />")

test/demo/fixtures/achievements.coffee

@@ -5,7 +5,7 @@ module.exports.DungeonArenaStarted = DungeonArenaStarted =
   _id: '53ba76249259823746b6b481'
   name: 'Dungeon Arena Started'
   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'
+  #icon: '/images/achievements/swords-01.png'
   worth: 3
   collection: 'level.session'
   query: "{\"level.original\":\"dungeon-arena\"}"

test/demo/views/achievement/AchievementGet.demo.coffee

@@ -19,14 +19,15 @@ module.exports = ->
 
   console.log currentView
   data = currentView.createNotifyData unlockable, earnedUnlockable
-  imageURL = '/images/achievements/swords-01.png'
-  data.image = $("<img src='#{imageURL}' />")
   options =
     autoHideDelay: 10000
     globalPosition: 'bottom right'
     showDuration: 400
-    style: 'achievement'
+    style: 'achievement-silver'
     autoHide: false
     clickToHide: false
 
   $.notify data, options
+
+  view = new RootView
+  view.render()