From 7761a85dfd46fce91fac52ff22e26bdd611c81f3 Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 6 Nov 2019 14:47:59 +1100 Subject: [PATCH] styles + rotate prompt --- client/assets/rotate.svg | 2593 +++++++++++++++++++++++ client/assets/styles/account.less | 2 +- client/assets/styles/controls.less | 14 + client/assets/styles/instance.less | 63 - client/assets/styles/menu.less | 13 + client/assets/styles/styles.less | 27 +- client/assets/styles/styles.mobile.less | 93 +- client/assets/styles/vbox.less | 64 +- client/src/components/mnml.jsx | 13 +- 9 files changed, 2802 insertions(+), 80 deletions(-) create mode 100644 client/assets/rotate.svg diff --git a/client/assets/rotate.svg b/client/assets/rotate.svg new file mode 100644 index 00000000..b48ee399 --- /dev/null +++ b/client/assets/rotate.svg @@ -0,0 +1,2593 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index adb879fe..ff102b69 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -4,7 +4,7 @@ grid-template-columns: 1fr 1fr 1fr 1fr; div { - padding-right: 2em; + padding-right: 1em; } button { diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 54bcb375..69e89c1b 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -96,6 +96,20 @@ aside { border-color: forestgreen; } } + + // all green + // &:enabled { + // background: forestgreen; + // color: black; + // border-color: forestgreen; + + // &:hover { + // color: forestgreen; + // border-color: forestgreen; + // background: 0; + // } + // } + } .team-page-ctrl { diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index b6fc4c3f..672fdc57 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -9,10 +9,6 @@ grid-template-areas: "vbox info" "constructs constructs"; - - hr { - grid-area: rule; - } } @media (max-width: 1920px) { @@ -88,65 +84,6 @@ border-right-width: 0; } -/* VBOX */ -.vbox { - align-content: space-between; - grid-area: vbox; - display: grid; - grid-template-rows: min-content min-content min-content; - grid-template-columns: 1fr min-content 1fr; - grid-template-areas: - "vbox varrow inventory" - "vbox varrow combiner"; -} - -.vbox-inventory { - grid-area: inventory; -} - -.vbox-combiner { - grid-area: combiner; - display: flex; - flex-flow: column; - justify-content: flex-end; -} - -.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: @gray-hint; -} - -.vbox-combiner button { - flex: 0; -} - - -.vbox-hdr { - display: flex; -} - -.vbox-hdr h3 { - flex: 1; -} - -.vbox-hdr .bits { - font-size: 2em; - line-height: 1em; - animation: bits 1s ease-out; -} - -.arrow { - grid-area: arrow; - color: @gray-hint; -} - @keyframes action { 0% { color: palegoldenrod; diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 5445b158..7282cc94 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -142,6 +142,19 @@ section { border-color: forestgreen; } } + + // // all green + // button.ready:enabled { + // background: forestgreen; + // color: black; + // border-color: forestgreen; + + // &:hover { + // color: forestgreen; + // border-color: forestgreen; + // background: 0; + // } + // } } } diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 86ea5d38..eef8c34f 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -316,4 +316,29 @@ li { width: 1px; height: 1px; padding: 0px; -} \ No newline at end of file +} + +#rotate { + display: none; + + z-index: 1000; + + position: fixed; + top: 0; + left: 0; + + width: 100vw; + height: 100vh; + background-image: url("./../rotate.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + + &.show { + display: flex; + } + + h1 { + flex: 1; + } +} diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 329b9f0f..c0e8798b 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -7,17 +7,14 @@ font-size: 8pt; padding: 0.25em; - .menu { - .logo { - display: none; - } - - .team { - height: 20em; - } - } - .instance { + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr; + + grid-template-areas: + "vbox" + "constructs"; + svg { stroke-width: 1.25em; } @@ -117,3 +114,79 @@ } } } + + +// portrait menu +@media (max-width: 600px) { + #mnml { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: + "main" + } + + section { + grid-template-columns: 1fr; + + .list { + grid-template-columns: 1fr 1fr; + + &.play { + grid-template-columns: 1fr; + } + } + + } + + .account { + grid-template-columns: 1fr; + + div { + padding: 0; + } + } + + .play-ctrl { + display: none; + } + + .menu { + height: auto; + display: block; + + .options { + display: grid; + grid-template-columns: repeat(2, 1fr); + + button:not(:last-child) { + border: 2px solid #222; + } + + button.logo { + grid-column-end: span 2; + border: none; + margin-right: 0; + margin-top: 0.5em; + background-position: center; + } + } + + .team { + grid-template-columns: 1fr; + + .construct { + height: 10em; + } + } + + .news { + padding: 0; + } + } + + section { + .list { + grid-template-columns: 1fr; + } + } +} \ No newline at end of file diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 95b77615..6b868716 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -22,10 +22,6 @@ grid-gap: 0.5em 1em; align-items: center; margin-bottom: 0.5em; - - button { - width: 100%; - } } .vbox-btn { @@ -73,6 +69,7 @@ button { height: 4em; margin: 0; + width: 100%; // text-transform: none; @@ -108,3 +105,62 @@ } } } + +/* VBOX */ +.vbox { + align-content: space-between; + grid-area: vbox; + display: grid; + grid-template-rows: min-content min-content min-content; + grid-template-columns: 1fr min-content 1fr; + grid-template-areas: + "vbox varrow inventory" + "vbox varrow combiner"; +} + +.vbox-inventory { + grid-area: inventory; +} + +.vbox-combiner { + grid-area: combiner; + display: flex; + flex-flow: column; + justify-content: flex-end; +} + +.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: @gray-hint; +} + +.vbox-combiner button { + flex: 0; +} + + +.vbox-hdr { + display: flex; +} + +.vbox-hdr h3 { + flex: 1; +} + +.vbox-hdr .bits { + font-size: 2em; + line-height: 1em; + animation: bits 1s ease-out; +} + +.arrow { + grid-area: arrow; + color: @gray-hint; +} diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index 17d3203f..6b168c68 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -7,15 +7,26 @@ const Controls = require('./controls'); const Footer = require('./footer'); const addState = connect( - state => ({ showNav: state.showNav }) + ({ game, instance }) => ({ game, instance }) ); function Mnml(args) { + const { + game, + instance, + } = args; + + const rotateClass = (game || instance) && window.innerWidth < window.innerHeight + ? 'show' + : ''; + return (
); }