Added some simple animations to achievement popups

app/styles/achievements.sass

@@ -51,10 +51,6 @@
 
 // Specific to the user stats page
 #user-achievements-view
-  .row
-    //.col-lg-4, .col-xs-12
-      padding-right: 0px !important
-
   .achievement-body
     width: 335px
     height: 120px
@@ -63,7 +59,7 @@
     .achievement-icon
       width: 120px
       height: 120px
-      top: 0px
+      top: -10px
 
       .achievement-image
         img
@@ -88,7 +84,7 @@
 
 .achievement-popup
   padding: 20px 0px
-  cursor: default
+  position: relative
 
   .achievement-body
     .achievement-icon
@@ -132,16 +128,23 @@
         bottom: 48px
 
         .user-level
+          background-image: url("/images/achievements/level-bg.png")
+          color: white
+          width: 38px
+          height: 38px
+          line-height: 38px
           font-size: 20px
           position: absolute
           left: -15px
-          margin-top: -3px
+          margin-top: -8px
-          box-shadow: 0 0 0 2px black, 0 0 0 4px lightgrey, 0 0 0 6px black
+          vertical-align: middle
+          z-index: 1000
+          font-family: $font-family-base
 
         > .progress-bar-wrapper
           position: absolute
-          margin-left: 12px
+          margin-left: 17px
-          width: 319px
+          width: 314px
           height: 20px
           z-index: 2
 
@@ -211,11 +214,6 @@
 .xp-bar-left
   background-color: #fffbfd
 
-.user-level
-  z-index: 1000
-  box-shadow: 0 0 0 1px black, 0 0 0 3px lightgrey, 0 0 0 4px black
-  font-family: $font-family-base
-
 // Achievements page
 .achievement-category-title
   margin-left: 20px
@@ -235,3 +233,7 @@
   position: fixed
   right: 0px
   bottom: 0px
+
+.popup
+  cursor: default
+  left: 600px

app/templates/achievements/achievement-popup.jade

@@ -9,10 +9,10 @@
 
     if popup
       .progress-wrapper
-        span.user-level.badge= level
+        span.user-level= level
         .progress-bar-wrapper
           .progress
             .progress-bar.xp-bar-old(style="width:#{oldXPWidth}%" data-toggle="tooltip" data-placement="top" title="#{currentXP} XP in total")
             .progress-bar.xp-bar-new(style="width:#{newXPWidth}%" data-toggle="tooltip" title="#{newXP} XP earned")
-            .progress-bar.xp-bar-left(style="width:#{leftXPWidth}%" data-toggle="tooltip" title="#{leftXP} XP until level #{nextLevel}")
+            .progress-bar.xp-bar-left(style="width:#{leftXPWidth}%" data-toggle="tooltip" title="#{leftXP} XP until level #{level+1}")
         .progress-bar-border

app/templates/editor/achievement/edit.jade

@@ -21,7 +21,6 @@ block content
     #achievement-treema
 
     #achievement-view.clearfix
-      #achievement-view-inner
 
     hr
 

app/views/achievements/AchievementPopup.coffee

@@ -13,6 +13,7 @@ module.exports = class AchievementPopup extends CocoView
     @container = options.container or @getContainer()
     @popup = options.container
     @popup ?= true
+    @className += ' popup' if @popup
     super options
     console.debug 'Created an AchievementPopup', @$el
 
@@ -40,15 +41,6 @@ module.exports = class AchievementPopup extends CocoView
     #console.debug "Current level is #{currentLevel} (#{currentLevelExp} xp), next level is #{nextLevel} (#{nextLevelXP} xp)."
     #console.debug "Need a total of #{nextLevelXP - currentLevelExp}, already had #{previousXP} and just now earned #{achievedXP} totalling on #{currentXP}"
 
-    alreadyAchievedBar = $("<div class='progress-bar xp-bar-old' 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)
-
-    alreadyAchievedBar.tooltip(title: "#{currentXP} XP in total")
-    newlyAchievedBar.tooltip(title: "#{achievedXP} XP earned")
-    emptyBar.tooltip(title: "#{nextLevelXP - currentXP} XP until level #{nextLevel}")
-
     data =
       title: @achievement.get('name')
       imgURL: @achievement.getImageURL()
@@ -71,7 +63,17 @@ module.exports = class AchievementPopup extends CocoView
   render: ->
     console.debug 'render achievement popup'
     super()
-    @container.append @$el
+    @container.prepend @$el
+    if @popup
+      @$el.animate
+        left: 0
+      @$el.on 'click', (e) =>
+        @$el.animate
+          left: 600
+        , =>
+          @$el.remove()
+          @destroy()
+
 
   getContainer: ->
     unless @container

app/views/editor/achievement/AchievementEditView.coffee

@@ -61,6 +61,7 @@ module.exports = class AchievementEditView extends RootView
     @pushChangesToPreview()
 
   pushChangesToPreview: =>
+    $('#achievement-view').empty()
 
     if @treema?
       for key, value of @treema.data

test/demo/fixtures/achievements.coffee

@@ -15,7 +15,6 @@ module.exports.Simulated = Simulated =
   _id: '53ba76249259823746b6b482'
   name: 'Simulated'
   description: 'Simulated Games.'
-  icon: '/images/achievements/cup-02.png'
   worth: 1
   collection: 'users'
   query: "{\"simulatedBy\":{\"$gt\":0}}"

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

@@ -9,16 +9,24 @@ module.exports = ->
   me.set 'points', 48
 
   unlockableObj = fixtures.DungeonArenaStarted
-
   earnedUnlockableObj =
     earnedPoints: 3
     notified: false
+  simulated = fixtures.Simulated
+  earnedSimulated =
+    achievedAmount: 1
+    earnedPoints: 1
+    notified: false
+
 
   unlockable = new Achievement unlockableObj
   earnedUnlockable = new EarnedAchievement earnedUnlockableObj
+  simulated = new Achievement simulated
+  earnedSimulated = new EarnedAchievement earnedSimulated
 
   view = new RootView
   view.render()
 
   view.showNewAchievement unlockable, earnedUnlockable
+  #view.showNewAchievement simulated, earnedSimulated
   view