diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 5de6c027..b7d85b63 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -163,12 +163,11 @@ .construct-list { grid-area: constructs; - - display: grid; - grid-template-columns: 1fr 1fr 1fr; + display: flex; } -.instance-construct, .instance-construct-active { +.instance-construct { + flex: 1; display: grid; grid-template-rows: min-content min-content min-content 1fr min-content; grid-template-areas: @@ -178,13 +177,12 @@ "avatar " "stats "; - /*margin: 0 2em;*/ padding: 0.5em; border: 2px solid #222; border-left-width: 0; } -.instance-construct:first-child, .instance-construct-active:first-child { +.instance-construct:first-child { margin-left: 0; border-left-width: 1px; } diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css index be7a2878..bee7e2fb 100644 --- a/client/assets/styles/instance.mobile.css +++ b/client/assets/styles/instance.mobile.css @@ -2,7 +2,7 @@ .instance { display: grid; grid-template-columns: 1fr; - grid-template-rows: min-content, 1fr; + grid-template-rows: min-content 1fr; grid-template-areas: "vbox" "constructs"; @@ -41,15 +41,12 @@ } .instance.constructs-visible .construct-list { - grid-area: constructs; - display: grid; - justify-content: center; - - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; + display: flex; + flex-flow: row; + align-content: flex-end; + height: 100%; } - .vbox-inventory { margin-left: 0; } @@ -58,49 +55,12 @@ margin-left: 0; } - .construct-list .skills { - flex-flow: row; - align-items: stretch; - } - .equip { border: none; } .instance-construct { - grid-row: 2; - display: grid; - grid-template-rows: min-content 1fr; - grid-template-areas: - "name " - "avatar "; - padding: 0.5em; - border: none; - transition-property: all; - transition-duration: 0.5s; - transition-delay: 0; - transition-timing-function: ease; - } - - .instance-construct .skills { - display: none; - } - - .instance-construct .specs { - display: none; - } - - .instance-construct .stats { - display: none; - } - - .instance-construct-active .avatar { - min-height: 150px; - } - - .instance-construct-active { - grid-row: 1; - grid-column: 1 / 3; + flex: 1; display: grid; grid-template-rows: min-content min-content min-content 1fr min-content; grid-template-areas: @@ -110,24 +70,37 @@ "avatar " "stats "; - padding: 0.5em; - border: none; + border-top: 1px solid #222; + transition-property: all; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; } - .instance-construct-active .specs { + .instance-construct:not(:last-child) { + border-right: 1px solid #222; + } + + .instance-construct .specs { margin: 0; } - .instance-construct-active img { - width: 55px; + .construct-list .stats { + flex-flow: row wrap; } - .instance-construct:last-child { - border-left: 1px solid #222; + .construct-list .stats figcaption { + font-size: 75%; + } + + .instance-construct .stats figure.speed { + order: -1; + flex: 1 0 100%; + } + + .instance-construct .stats figure { + flex: 1 0 33%; } .instance-nav { diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index 3c04b736..255fb4a6 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -521,7 +521,6 @@ main .top button { } .timer { - flex: 1 0 100%; background: whitesmoke; transition-property: all; transition-duration: 0.5s; diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index e25aa296..7662411d 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -199,11 +199,8 @@ function Construct(props) { ; }); - const activeId = activeConstruct ? activeConstruct.id : false; - const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct'; - return ( -
+

{construct.name}

hoverInfo(e, 'constructSkills')} >