diff --git a/app/styles/play/level/tome/spell_palette.sass b/app/styles/play/level/tome/spell_palette.sass index 5b644a3b3..64755f641 100644 --- a/app/styles/play/level/tome/spell_palette.sass +++ b/app/styles/play/level/tome/spell_palette.sass @@ -71,7 +71,7 @@ .property-entry-item-group display: inline-block min-height: 38px - max-width: 212px + width: 212px @include flexbox() @include flex-wrap() @include flex-center() @@ -93,3 +93,8 @@ width: 174px width: -webkit-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 diff --git a/app/styles/play/level/tome/spell_palette_entry.sass b/app/styles/play/level/tome/spell_palette_entry.sass index b88b6bfb2..93640e9ef 100644 --- a/app/styles/play/level/tome/spell_palette_entry.sass +++ b/app/styles/play/level/tome/spell_palette_entry.sass @@ -24,6 +24,10 @@ &.pinned 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. //&.function // color: black diff --git a/app/views/play/level/tome/SpellPaletteView.coffee b/app/views/play/level/tome/SpellPaletteView.coffee index cd0629b7c..6a89679f1 100644 --- a/app/views/play/level/tome/SpellPaletteView.coffee +++ b/app/views/play/level/tome/SpellPaletteView.coffee @@ -51,10 +51,20 @@ module.exports = class SpellPaletteView extends CocoView @entryGroupElements = {} for group, entries of @entryGroups @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 - for entry in entries + if entries[0].options.item?.getPortraitURL + 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 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' @updateMaxHeight() unless application.isIPadApp