Set up the goals view to be more hidden by default, and shows up on mouse hover.

This commit is contained in:
Scott Erickson 2014-05-19 11:31:18 -07:00
parent 078f6b5dcd
commit 179702b0eb
5 changed files with 20 additions and 14 deletions

View file

@ -16,6 +16,7 @@ body.is-playing
#canvas-wrapper
width: 55%
position: relative
overflow: hidden
canvas#surface
background-color: #333

View file

@ -1,25 +1,24 @@
@import "../../bootstrap/mixins"
#goals-view
position: absolute
left: 10px
top: 42px
top: -100px
@include transition(top 0.5s ease-in-out)
background-color: rgba(200,200,200,0.8)
&.brighter
background-color: rgba(200,200,200,1.0)
border: black
padding: 5px 7px 5px 5px
padding: 15px 7px 5px 5px
box-sizing: border-box
border: 1px solid #333
border-radius: 5px
cursor: pointer
user-select: none
-webkit-user-select: none
h3
font-size: 16px
font-size: 14px
margin: 0
line-height: 20px
color: black
i

View file

@ -11,8 +11,7 @@
canvas(width=924, height=589)#surface
#canvas-left-gradient.gradient
#canvas-top-gradient.gradient
#goals-view.secret
#goals-view.secret
#gold-view.secret.expanded

View file

@ -1,5 +1,3 @@
h3
i.icon-plus-sign.expanded
i.icon-minus-sign.collapsed
ul#primary-goals-list
h3
span(data-i18n="play_level.goals") Goals
ul#primary-goals-list

View file

@ -19,7 +19,8 @@ module.exports = class GoalsView extends View
'surface:playback-ended': 'onSurfacePlaybackEnded'
events:
'click': 'toggleCollapse'
'mouseenter': -> @$el.css('top', -10)
'mouseleave': -> @updateTop()
toggleCollapse: (e) ->
@$el.toggleClass('expanded').toggleClass('collapsed')
@ -60,6 +61,14 @@ module.exports = class GoalsView extends View
render: ->
super()
@$el.addClass('secret').addClass('expanded')
afterRender: ->
super()
@updateTop()
updateTop: ->
@$el.css('top', 26 - @$el.outerHeight())
onSetLetterbox: (e) ->
@$el.toggle not e.on
@updateTop()