From f129bddc05bc1eedfe21fbd5230ec4614c258e28 Mon Sep 17 00:00:00 2001 From: Andrew Brehaut Date: Sun, 23 Oct 2016 13:20:22 +1300 Subject: [PATCH] Results styling and interaction improved --- src/less/results.less | 251 ++++++++++++++++++++++++++++++++++++++ src/less/style.less | 229 +--------------------------------- src/ts/app/ui/results.tsx | 11 +- 3 files changed, 260 insertions(+), 231 deletions(-) create mode 100644 src/less/results.less diff --git a/src/less/results.less b/src/less/results.less new file mode 100644 index 0000000..b8fb510 --- /dev/null +++ b/src/less/results.less @@ -0,0 +1,251 @@ + +.C.results { + .button, + .button:active { + border: 1px solid rgba(70, 27, 14, 0.2); + background: #097E6C; + color: white; + border-radius: 3px; + cursor: pointer; + display: inline-block; + padding: 1em; + margin-bottom: 2em; + + @media screen and (min-width:640px) { + margin-left: 10px; + } + } + + .button:hover { + background: rgba(70, 27, 14, 0.05); + color: #461B0E; + } + + .button.generate { + margin-top: 1em; + } + + > section { + @media screen and (min-width:640px) { + padding: 0 10px; + } + } + + > section { + > header > h1 { + font-size: 1.1em; + font-weight: normal; + } + } +} + + + + +.C.encounters { + .results-summary { + margin-bottom: 2em; + padding-left: 10px; + + h1 { + font-size: 1.2em; + font-weight: normal; + } + + p { + font-size: 1em; + margin: 0; + } + } + + > ul { + .clearfix(); + list-style: none; + padding-left: 0; + + &.outofdate { + opacity: 0.5; + } + } + + +} + + +.C.encounter { + .encounter-common() { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + } + + &.-single { + .clearfix(); + .encounter-common(); + } + + &.-multiple { + .stereotype { + .clearfix(); + .encounter-common(); + } + + > em { + display: block; + padding: 0.5em; + + &:before { + font-style: normal; + font-size: 0.65em; + margin-right: 0.5em; + content: '▼'; + display: inline-block; + transform-origin: center; + text-align: center; + width: 1em; + height: 1em; + transition: transform 0.2s ease-out; + opacity: 0.5; + } + + &:hover:before { + opacity: 0.7; + } + } + + > .variants { + padding-left: 1.5em; + list-style: none; + display: none; + + > li { + .encounter-common(); + .clearfix(); + margin: 0.25em 0; + } + } + + &.-open { + > em:before { + transform: rotate(180deg); + } + + > .variants { + display: block; + } + } + } + + & + .encounter { + margin-top: 2em; + } +} + + + +.C.allocation { + display: block; + background: #fafafa; + border: 1px solid rgba(70, 27, 14, 0.2); + height: 3em; + position: relative; + margin-top: -1px; + padding: 0.25em 0.5em; + width: 100%; + + &:after { + position: absolute; + top: 0em; + line-height: 1em; + content: ' '; + text-align: center; + } + + &.large:after { + + } + + &.huge:after { + + } + + &:first-child { + border-radius: 5px 5px 0 0; + } + + &:last-child { + border-radius: 0 0 5px 5px; + } + + &:first-child:last-child { + border-radius: 5px; + } + + &.-abbreviated { + height: 1.75em; + } + + em { + font-style: normal; + } + + .number { + float: right; + font-weight: bold; + margin-left: 0.5em; + font-size: 1.2em; + margin-top:-0.15em; + text-align: right; + min-width: 2.5em; + + &:before { + content: '×'; + } + } + + .kind { + display: block; + font-size: 0.8em; + margin-bottom: 0.25em; + font-style: italic; + color: #333; + } + + .kind .level { + opacity: 0.9; + padding-left: 0.5em; + } + + .kind .book { + float: right; + margin-left: 2em; + font-style: normal; + opacity: 0.5; + } + + .kind .level:before { + content: 'lvl '; + } +} + + +@media screen and (min-width:640px) { + .C.allocation { + width: auto; + margin-bottom: 2px; + margin-right: -1px; + + &:first-child { + border-radius: 5px 0 0 5px; + } + + &:last-child { + border-radius: 0 5px 5px 0; + } + + &:first-child:last-child { + border-radius: 5px; + } + } +} \ No newline at end of file diff --git a/src/less/style.less b/src/less/style.less index 4388eb1..ce01391 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -2,6 +2,8 @@ @import "input-range.less"; @import "paginator.less"; @import "global.less"; +@import "results.less"; + @font-face { font-family: 'alegreya'; @@ -350,213 +352,6 @@ div.filters { /* results */ -section.results { - .button, - .button:active { - border: 1px solid rgba(70, 27, 14, 0.2); - background: #097E6C; - color: white; - border-radius: 3px; - cursor: pointer; - display: inline-block; - padding: 1em; - margin-bottom: 2em; - - @media screen and (min-width:640px) { - margin-left: 10px; - } - } - - .button:hover { - background: rgba(70, 27, 14, 0.05); - color: #461B0E; - } - - .button.generate { - margin-top: 1em; - } - - > section { - @media screen and (min-width:640px) { - padding: 0 10px; - } - } - - > section { - > header > h1 { - font-size: 1.1em; - font-weight: normal; - } - } -} - - - - -.C.encounters { - - - .results-summary { - margin-bottom: 2em; - padding-left: 10px; - - h1 { - font-size: 1.2em; - font-weight: normal; - } - - p { - font-size: 1em; - margin: 0; - } - } - - > ul { - .clearfix(); - list-style: none; - padding-left: 0; - - &.outofdate { - opacity: 0.5; - } - } - - -} - - -.C.encounter { - .encounter-common() { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - } - - &.-single { - .clearfix(); - .encounter-common(); - } - - &.-multiple { - .stereotype { - .clearfix(); - .encounter-common(); - - cursor: pointer; - } - - > em { - display: block; - padding: 0.5em; - } - - > .variants { - padding-left: 0; - list-style: none; - display: none; - - > li { - .clearfix(); - } - } - - &.-open > .variants { - display: block; - } - } - - & + .encounter { - margin-top: 2em; - } -} - - - -.C.allocation { - display: block; - background: #fafafa; - border: 1px solid rgba(70, 27, 14, 0.2); - height: 3em; - position: relative; - margin-top: -1px; - padding: 0.25em 0.5em; - - - &:after { - position: absolute; - top: 0em; - line-height: 1em; - content: ' '; - text-align: center; - } - - &.large:after { - - } - - &.huge:after { - - } - - &:first-child { - border-radius: 5px 5px 0 0; - } - - &:last-child { - border-radius: 0 0 5px 5px; - } - - &:first-child:last-child { - border-radius: 5px; - } - - &.-abbreviated { - height: 2em; - } - - em { - font-style: normal; - } - - .number { - float: right; - font-weight: bold; - margin-left: 0.5em; - font-size: 1.2em; - margin-top:-0.15em; - text-align: right; - min-width: 2.5em; - - &:before { - content: '×'; - } - } - - .kind { - display: block; - font-size: 0.8em; - margin-bottom: 0.25em; - font-style: italic; - color: #333; - } - - .kind .level { - opacity: 0.9; - padding-left: 0.5em; - } - - .kind .book { - float: right; - margin-left: 2em; - font-style: normal; - opacity: 0.5; - } - - .kind .level:before { - content: 'lvl '; - } -} @media screen and (min-width:640px) { @@ -567,26 +362,6 @@ section.results { section > header > .blurb > p { opacity: 0.8; } - - - - .C.allocation { - display: inline-block; - margin-bottom: 2px; - margin-right: -1px; - - &:first-child { - border-radius: 5px 0 0 5px; - } - - &:last-child { - border-radius: 0 5px 5px 0; - } - - &:first-child:last-child { - border-radius: 5px; - } - } } @media screen and (min-width:740px) { diff --git a/src/ts/app/ui/results.tsx b/src/ts/app/ui/results.tsx index 25c142c..0dd3a57 100644 --- a/src/ts/app/ui/results.tsx +++ b/src/ts/app/ui/results.tsx @@ -55,12 +55,15 @@ module manticore.ui.results { return (
  • -
    this.setState({open: !this.state.open}) }> +
    { encounters[0].map(alloc => ) }
    - {template(_("[{n} variations.]"), {n: encounters.length - 1})} + + {this.setState({open: !this.state.open}); e.preventDefault(); } }> + {template(_("[{n} variations.]"), {n: encounters.length - 1})} + +
      { encounters.slice(1).map(enc => @@ -108,7 +111,7 @@ module manticore.ui.results { const party = this.props.party || { level: 0, size: 0 }; return ( -
      +

      { _("Encounters") }

      { _("[results summary]") }