codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes to spell palette doc hovering and ensuring at least two column layout.

Browse source
This commit is contained in:
Nick Winter 2014-11-19 18:36:09 -08:00
parent afff1056cb
commit 8280347752
3 changed files with 22 additions and 3 deletions
app
styles/play/level/tome
spell_palette.sassspell_palette_entry.sass
views/play/level/tome
SpellPaletteView.coffee

7
app/styles/play/level/tome/spell_palette.sass
View file

@ -71,7 +71,7 @@
.property-entry-item-group .property-entry-item-group
display: inline-block display: inline-block
min-height: 38px min-height: 38px
max-width: 212px width: 212px
@include flexbox() @include flexbox()
@include flex-wrap() @include flex-wrap()
@include flex-center() @include flex-center()
@ -93,3 +93,8 @@
width: 174px width: 174px
width: -webkit-calc(100% - 38px) width: -webkit-calc(100% - 38px)
width: calc(100% - 38px) width: calc(100% - 38px)
@media only screen and (max-width: 1100px)
#spell-palette-view
// Make sure we have enough room for at least two columns
padding-left: 12px

4
app/styles/play/level/tome/spell_palette_entry.sass
View file

@ -24,6 +24,10 @@
&.pinned &.pinned
background-color: darken(#FFFFFF, 25%) background-color: darken(#FFFFFF, 25%)
&.single-entry
height: 38px
line-height: 38px
// Originally pulled these colors from the most relevant textmate-theme classes, but then fudged them a lot. // Originally pulled these colors from the most relevant textmate-theme classes, but then fudged them a lot.
//&.function //&.function
// color: black // color: black

14
app/views/play/level/tome/SpellPaletteView.coffee
View file

@ -51,10 +51,20 @@ module.exports = class SpellPaletteView extends CocoView
@entryGroupElements = {} @entryGroupElements = {}
for group, entries of @entryGroups for group, entries of @entryGroups
@entryGroupElements[group] = itemGroup = $('<div class="property-entry-item-group"></div>').appendTo @$el.find('.properties') @entryGroupElements[group] = itemGroup = $('<div class="property-entry-item-group"></div>').appendTo @$el.find('.properties')
itemGroup.append $('<img class="item-image" draggable=false></img>').attr('src', entries[0].options.item.getPortraitURL()).css('top', Math.max(0, 19 * (entries.length - 2) / 2) + 2) if entries[0].options.item?.getPortraitURL if entries[0].options.item?.getPortraitURL
for entry in entries itemImage = $('<img class="item-image" draggable=false></img>').attr('src', entries[0].options.item.getPortraitURL()).css('top', Math.max(0, 19 * (entries.length - 2) / 2) + 2)
itemGroup.append itemImage
firstEntry = entries[0]
do (firstEntry) ->
itemImage.on "mouseenter", (e) -> firstEntry.onMouseEnter e
itemImage.on "mouseleave", (e) -> firstEntry.onMouseLeave e
for entry, entryIndex in entries
itemGroup.append entry.el itemGroup.append entry.el
entry.render() # Render after appending so that we can access parent container for popover entry.render() # Render after appending so that we can access parent container for popover
if entries.length is 1
entry.$el.addClass 'single-entry'
if entryIndex is 0
entry.$el.addClass 'first-entry'
@$el.addClass 'hero' @$el.addClass 'hero'
@updateMaxHeight() unless application.isIPadApp @updateMaxHeight() unless application.isIPadApp