This introduces the new crafting page design featuring a new vertical layout and list display of all crafting steps. It also makes it easy to move items between the have/need sections and even from each step into your inventory (causing a new crafting plan to be created which doesn't plan on making that item). * Convert the `BaseController.hide` and `show` methods to be much more robust in the use of CSS transitions (using a timer in case a transition doesn't actually fire). * Change `hide`/`show` to use events for communicating animation state instead of callbacks * Convert several controllers to fire events for communication with parent controllers instead of accepting functions. * Rewrite the `CraftPageController`, `CraftPage` model and related Jade/SCSS files to implement the new design. * Alter the `InventoryController` and `StackController` to allow a variety of action buttons, and for the events from those action buttons to bubble up to parent controllers * Add the `StepController` and its related model, template, and style sheet as part of the new craft page. * Tweak the `ItemSelectorController` and related files to allow for a variety of styles for the launcher button
51 lines
929 B
SCSS
51 lines
929 B
SCSS
/*
|
|
Crafting Guide - craft_page.scss
|
|
|
|
Copyright (c) 2014-2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
.view__craft_page {
|
|
|
|
.want.section {
|
|
.view__inventory {
|
|
position: relative; width: 100%;
|
|
}
|
|
}
|
|
|
|
.tools.section {
|
|
.options {
|
|
margin-top: 4em;
|
|
}
|
|
}
|
|
|
|
.ingredients.section {
|
|
.need {
|
|
margin-top: 4em;
|
|
}
|
|
}
|
|
|
|
.instructions.section {
|
|
p {
|
|
font-size: $font-size-large;
|
|
margin-top: 1em;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
margin: 2em 3em 0 3em;
|
|
|
|
li {
|
|
font-family: $font-family-normal;
|
|
font-size: $font-size-large;
|
|
line-height: $font-size-normal + 0.15em;
|
|
list-style: decimal;
|
|
margin: 0.66em 0 0 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|