craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Redesign the crafting page

Browse Source 
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
This commit is contained in:
Andrew Miner
2015-04-20 09:17:58 -07:00
parent daaeb523d9
commit 5b014c9921
61 changed files with 855 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/classes.scss
+12
View File
@@ -101,12 +101,20 @@ All rights reserved.
font-family: $font-family-header;
font-size: $font-size-large;
margin-bottom: 0.5em;
&:first-child {
margin-top: 0;
}
}
h3 {
font-family: $font-family-header;
font-size: $font-size-normal;
margin: 2em 0 0 0.5em;
&:first-child {
margin-top: 0;
}
}
.entry {
@@ -118,6 +126,10 @@ All rights reserved.
background: white;
padding: 1em;
}
&:first-child {
margin-top: 0;
}
}
.slideable {
src/scss/templates/craft_page.scss
+35 -11
View File
@@ -7,20 +7,44 @@ All rights reserved.
.view__craft_page {
& > div {
display: inline-block;
margin-top: 2em;
padding: 0 2em;
position: relative;
vertical-align: top;
.want.section {
.view__inventory {
position: relative; width: 100%;
}
}
.view__inventory { width: 50%; height: 30em; }
.tools.section {
.options {
margin-top: 4em;
}
}
.view__crafting_table { width: 50%; height: 30em; }
.ingredients.section {
.need {
margin-top: 4em;
}
}
.want label {
position: absolute; top: 50%; left: 0.5em;
@include transform(translateY(-50%));
.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;
}
}
}
}
src/scss/templates/index.scss
+1
View File
@@ -27,5 +27,6 @@ All rights reserved.
@import 'mod_selector';
@import 'stack';
@import 'slot';
@import 'step';
@import 'tutorial';
@import 'video';
src/scss/templates/inventory.scss
+54 -74
View File
@@ -6,92 +6,72 @@ All rights reserved.
*/
.view__inventory {
min-height: 14em;
width: 100%;
.edit td {
padding-top: 1em;
}
.item_container {
position: relative; width: 100%;
.panel {
position: absolute; top: 3.6em; right: 2em; bottom: 0; left: 2em;
background: $color-background-panel;
text-align: right;
}
.view__stack > div {
height: 4.2em;
padding: 0 1em 0.5em 0;
vertical-align: middle;
.scrollbox {
position: absolute; top: 0em; right: 0em; bottom: 3em; left: 0em;
padding: 0.5em 1em;
overflow: auto;
}
.toolbar {
position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em;
background: $color-background-toolbar;
border-top: 1px solid $color-gray-light;
}
.view__item_selector {
height: 2.5em; width: 80%;
background: $color-gray-faint;
margin: 0 auto;
transition: background $animate-normal;
&:hover {
background: $color-background-panel;
&:last-child {
padding: 0 0 0.5em 0;
}
}
}
button[name="clear"] {
position: absolute; bottom: 0.5em; right: 0.5em;
}
input {
border: 1px solid $color-gray-light;
}
button:disabled {
background: white;
color: $color-gray-light;
}
table {
width: 100%;
}
td {
height: 2.4em;
vertical-align: middle;
}
td.icon {
width: 4.8em;
padding: 0 1em;
img {
width: 100%; height: auto;
max-height: 4.8em;
.icon {
img {
height: 3.6em; width: 3.6em;
}
}
}
td.name {
text-align: left;
padding-right: 1em;
input {
.name {
width: 100%;
border: 0;
border-bottom: 1px dashed $color-gray-light;
outline: 0;
}
&:focus {
border: 1px solid $color-gray-light;
.action {
white-space: nowrap;
button:first-child {
margin-right: 0.5em;
}
}
}
td.action {
width: 4em;
.view__item_selector {
position: relative; width: 80%;
margin: 1em auto;
}
&.large {
.item_container {
.view__stack > div {
height: 5em;
}
.quantity {
.bubble {
border-radius: 3em;
input {
font-size: $font-size-large;
}
}
}
.icon {
img {
height: 4.8em; width: 4.8em;
}
}
.name {
a {
font-size: $font-size-large;
font-weight: bold;
}
}
}
}
}
src/scss/templates/item_selector.scss
+20 -8
View File
@@ -6,30 +6,42 @@ All rights reserved.
*/
.view__item_selector {
background: $color-background-panel;
position: relative; min-height: $font-size-normal * 2; min-width: 20em;
border: 0.1em solid $color-gray-medium;
border-radius: 1.5em;
cursor: pointer;
padding: 0 0.75em;
p {
position: relative; top: 50%; width: 100%;
@include transform(translateY(-50%));
&.search {
background: $color-background-panel;
&.placeholder {
p {
color: $color-gray-medium;
font-family: $font-family-input;
font-size: $font-size-normal;
}
}
&.button {
background: $color-gray-faint;
&:hover {
background: $color-background-panel;
}
&.button-label {
p {
color: $color-active;
font-family: $font-family-normal;
font-size: $font-size-normal;
font-weight: bold;
text-align: center;
}
}
p {
position: absolute; top: 50%; width: 100%;
@include transform(translateY(-50%));
font-size: $font-size-normal;
}
}
.view__item_selector_popup {
src/scss/templates/minimal_recipe.scss
+8 -7
View File
@@ -44,13 +44,6 @@ All rights reserved.
@include transform(translate(-50%, -50%));
}
.multiplier {
position: absolute; bottom: -2.0em; left: 0; right: 0; height: 1.5em;
font-family: $font-family-header;
font-size: $font-size-large;
text-align: center;
}
.quantity {
position: absolute; right: 0.1em; bottom: 0;
color: white;
@@ -59,4 +52,12 @@ All rights reserved.
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
}
.multiplier {
position: absolute; top: 50%; right: 0; width: 2.7em;
@include transform(translateY(-50%) translateY(2.5em));
font-family: $font-family-header;
font-size: $font-size-large;
text-align: center;
}
}
src/scss/templates/mod_page.scss
+4
View File
@@ -29,6 +29,10 @@ All rights reserved.
font-size: $font-size-large;
}
}
.itemGroups {
margin-top: 2em;
}
}
.view__item {
src/scss/templates/stack.scss
+110 -53
View File
@@ -7,38 +7,36 @@ All rights reserved.
.view__stack {
font-family: $font-family-normal;
display: table-row;
td {
padding: 0.2em 0;
& > div {
display: table-cell;
vertical-align: middle;
}
td.quantity {
position: relative;
width: 5em;
input {
position: absolute; top: 50%; height: $font-size-small; width: 100%;
@include transform(translateY(-50%));
border-radius: 0.75em;
.quantity {
.bubble {
border: 0.1em solid $color-gray-light;
border-radius: 1.5em;
background: $color-ice;
color: $color-background-panel;
font-family: $font-family-normal;
font-size: $font-size-normal;
font-weight: bold;
text-align: center;
&.editable {
&:focus {
background: $color-background-panel;
color: $color-text;
font-family: $font-family-input;
font-weight: normal;
outline: none;
}
input {
width: 3em;
background: none;
border: none;
color: $color-background-panel;
font-family: $font-family-normal;
font-size: $font-size-normal;
font-weight: bold;
line-height: $font-size-normal;
outline: none;
text-align: center;
}
&:hover {
background: $color-background-panel;
&.editable:hover, &.editing {
background: $color-background-panel;
input {
color: $color-text;
font-family: $font-family-input;
font-weight: normal;
@@ -47,10 +45,7 @@ All rights reserved.
}
}
td.icon {
width: 4.6em;
padding: 0.2em 0.5em;
.icon {
img {
width: 100%; height: auto;
max-height: 4.8em;
@@ -58,37 +53,99 @@ All rights reserved.
}
}
td.name a {
color: $color-text;
display: inline;
font-size: $font-size-normal;
text-decoration: none;
.name {
a {
color: $color-text;
font-size: $font-size-normal;
text-decoration: none;
&:hover {
color: $color-active-hover;
text-decoration: underline;
&:hover {
color: $color-active-hover;
text-decoration: underline;
}
}
}
td.action {
.action {
text-align: right;
}
button.remove {
opacity: 0;
position: relative; width: 1.8em; height: 1.8em;
background: url('/images/remove.png') no-repeat center;
border: 0;
outline: none;
button {
position: relative; width: 3.0em; height: 3.0em;
display: inline-block;
&:hover {
background: url('/images/remove-hover.png') no-repeat center;
}
}
border: 0;
font-size: $font-size-small;
margin: 0;
outline: none;
padding: 0;
&:hover {
button.remove {
opacity: 1;
&.check {
background: url('/images/check.png') no-repeat center;
&:active {
background: url('/images/check_active.png') no-repeat center;
}
&:disabled {
background: url('/images/check_disabled.png') no-repeat center !important;
cursor: inherit;
}
&:hover {
background: url('/images/check_hover.png') no-repeat center;
}
}
&.down {
background: url('/images/down.png') no-repeat center;
&:active {
background: url('/images/down_active.png') no-repeat center;
}
&:disabled {
background: url('/images/down_disabled.png') no-repeat center !important;
cursor: inherit;
}
&:hover {
background: url('/images/down_hover.png') no-repeat center;
}
}
&.remove {
background: url('/images/remove.png') no-repeat center;
&:active {
background: url('/images/remove_active.png') no-repeat center;
}
&:disabled {
background: url('/images/remove_disabled.png') no-repeat center !important;
cursor: inherit;
}
&:hover {
background: url('/images/remove_hover.png') no-repeat center;
}
}
&.up {
background: url('/images/up.png') no-repeat center;
&:active {
background: url('/images/up_active.png') no-repeat center;
}
&:disabled {
background: url('/images/up_disabled.png') no-repeat center !important;
cursor: inherit;
}
&:hover {
background: url('/images/up_hover.png') no-repeat center;
}
}
}
}
}
src/scss/templates/step.scss
+47
View File
@@ -0,0 +1,47 @@
/*
Crafting Page - step.scss
Copyright (C) 2015 by Redwood Labs
All rights reserved.
*/
.view__step {
position: relative; min-height: 24em;
border-top: 0.1em solid $color-gray-medium;
padding: 1em 0;
&:first-child {
border-top: 0;
}
.view__inventory {
margin: 1em 0 0 3em;
}
.view__minimal_recipe {
position: absolute; top: 2em; right: 4.8em;
}
button.complete {
position: absolute; top: 1em; right: 0; height: 3em; width: 3em;
background: url("/images/check.png") no-repeat center;
border: 0;
font-size: $font-size-small;
outline: none;
&:active {
background: url('/images/check_active.png') no-repeat center;
}
&:disabled {
background: url('/images/check_disabled.png') no-repeat center !important;
cursor: inherit;
}
&:hover {
background: url('/images/check_hover.png') no-repeat center;
}
}
}