ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styles + rotate prompt

Browse Source
This commit is contained in:
ntr 2019-11-06 14:47:59 +11:00
parent 73220211bb
commit 7761a85dfd
9 changed files with 2802 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2593
client/assets/rotate.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

2
client/assets/styles/account.less
View File

@ -4,7 +4,7 @@
grid-template-columns: 1fr 1fr 1fr 1fr;
div {
padding-right: 2em;
padding-right: 1em;
}
button {

14
client/assets/styles/controls.less
View File

@ -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 {

63
client/assets/styles/instance.less
View File

@ -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;

13
client/assets/styles/menu.less
View File

@ -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;
// }
// }
}
}

27
client/assets/styles/styles.less
View File

@ -316,4 +316,29 @@ li {
width: 1px;
height: 1px;
padding: 0px;
}
}
#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;
}
}

93
client/assets/styles/styles.mobile.less
View File

@ -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;
}
}
}

64
client/assets/styles/vbox.less
View File

@ -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;
}

13
client/src/components/mnml.jsx
View File

@ -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 (
<div id="mnml">
<Main />
<Controls />
<Footer />
<div id="rotate" class={rotateClass} >
</div>
</div>
);
}