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

combo preview wip

Browse Source
This commit is contained in:
Mashy 2019-11-22 01:17:45 +10:00
parent 9cd656a99f
commit 843c1c6bbe
2 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,55 +32,64 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
margin-left: 1em;
margin: 0 0 0 1em;
grid-area: info; grid-area: info;
display: grid; display: grid;
grid-template-rows: 13em min-content; grid-template-rows: 1fr;
grid-template-columns: 20em 1fr;
grid-template-areas: grid-template-areas:
"item" "combos item";
"combos";
.combos { .combos {
margin-right: 1em;
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-area: combos;
align-content: center; grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
font-size: 1.25em;
}
.table-button { .combo-list {
display: grid; display: grid;
text-align: center; grid-template-rows: min-content min-content min-content;
align-content: center; grid-template-columns: 1fr 1fr;
border-bottom: 2px solid #222; grid-gap: 1em;
.table-button {
display: grid;
text-align: center;
align-content: center;
grid-template-areas: grid-template-areas:
"item" "item"
"ingr"; "ingr";
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: whitesmoke; color: whitesmoke;
background-color: @gray; background-color: @gray;
} }
.item { .item {
border-top: 2px solid #222; border-top: 2px solid #222;
border-bottom: 2px solid #222; border-bottom: 2px solid #222;
flex: 1; flex: 1;
grid-area: item; grid-area: item;
font-weight: bold; font-weight: bold;
}
div {
border-right: 2px solid #222;
svg {
vertical-align: middle;
} }
}
&:first-child {
div { div {
border-left: 2px solid #222; border-left: 2px solid #222;
border-right: 2px solid #222;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
} }
} }
} }

5
client/src/components/info.component.jsx
View File

@ -167,7 +167,10 @@ class InfoComponent extends preact.Component {
}); });
return ( return (
<div class="combos"> <div class="combos">
{comboTable} <div class="combo-header">COMBOS</div>
<div class="combo-list">
{comboTable}
</div>
</div> </div>
); );
}; };