diff --git a/WORKLOG.md b/WORKLOG.md index 6afe89fa..fc20200d 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -29,7 +29,13 @@ *$$$* -* balances table +buy supporter pack + account credited with features + char sets + emotes + + +* balances table (ingame currency) id account balance diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 4ac3402a..d1b666b5 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -70,13 +70,15 @@ /* VBOX */ .vbox { - align-items: flex-end; + align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: min-content min-content; + grid-template-rows: min-content min-content min-content; + grid-template-columns: 1fr min-content 1fr; grid-template-areas: - "vbox combiner" - "vbox inventory"; + "vbox varrow inventory" + "vbox . carrow" + "vbox . combiner"; } .vbox-box { @@ -85,14 +87,39 @@ .vbox-inventory { grid-area: inventory; - margin-left: 1em; } .vbox-combiner { - margin-left: 1em; grid-area: combiner; + display: flex; + flex-flow: column; + justify-content: flex-end; } +.vbox-combiner-arrow { + color: #444; + grid-area: carrow; + display: block; + text-align: center; + font-size: 2em; + vertical-align: center; +} + +.vbox-arrow, .vbox-arrow-mobile { + display: flex; + justify-content:center; + align-content:center; + flex-direction:column; + + margin: 1em 0.25em 0 0.25em; + grid-area: varrow; + font-size: 2em; + color: #444; +} + +.vbox-combiner button { + flex: 0; +} .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus { color: white; @@ -111,8 +138,6 @@ .vbox-hdr { display: flex; align-items: flex-end; - - flex: 1 0 100%; } .vbox-hdr h3 { @@ -125,6 +150,11 @@ animation: bits 1s ease-out; } +.arrow { + grid-area: arrow; + color: #444; +} + @keyframes action { 0% { color: palegoldenrod; @@ -415,3 +445,5 @@ /* Mobile Nav*/ .instance-nav { display: none; } + +.vbox-arrow-mobile { display: none } diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css index f406d515..5256c675 100644 --- a/client/assets/styles/instance.mobile.css +++ b/client/assets/styles/instance.mobile.css @@ -18,14 +18,32 @@ .vbox { grid-area: vbox; display: grid; - grid-template-rows: min-content min-content min-content; + grid-template-rows: min-content min-content min-content min-content min-content; grid-template-columns: 1fr; grid-template-areas: "vbox" + "varrow" "inventory" + "carrow" "combiner"; } + .vbox-arrow { + display: none; + } + + .vbox-inventory .vbox-hdr { + display: block; + } + + .vbox-arrow-mobile { + display: block; + grid-area: varrow; + width: 100%; + text-align: center; + margin: 0; + } + /* constructs toggled on */ .instance.constructs-visible .vbox { display: none; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e44b732a..f55a1429 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -292,39 +292,43 @@ function Vbox(args) {