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

table layout wip

Browse Source
This commit is contained in:
Mashy 2019-11-12 16:42:33 +10:00
parent 01fa0c5137
commit 66263be25f
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,8 +36,19 @@
grid-area: info; grid-area: info;
font-size: 85%; font-size: 85%;
display: grid;
font-size: 85%;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"item"
"combos";
// flex-flow: column;
// white-space: pre-wrap;
flex-direction: column;
.info-item { .info-item {
margin: 0 0 1em 1em; flex: 1;
margin: 0 0 0 1em;
} }
} }
@ -59,13 +70,16 @@
} }
} }
.instance .info-item {
grid-area: item;
}
.instance .combos { .instance .combos {
grid-area: combos; margin: 0 0 1em 1em;
margin: 0 0 0 1em;
table {
tr {
svg {
height: 1em;
}
}
}
td.table-button { td.table-button {
padding:5px; padding:5px;
@ -75,9 +89,7 @@
color: whitesmoke; color: whitesmoke;
background-color: @gray-hover; background-color: @gray-hover;
} }
svg {
height: 1em;
}
} }
} }

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

@ -151,17 +151,18 @@ class InfoComponent extends preact.Component {
<table class="combos"> <table class="combos">
<tbody> <tbody>
{vboxCombos.map((c, i) => {vboxCombos.map((c, i) =>
<tr key={i}> <td><table>
<td class="table-button" <tr class="table-button"
onMouseOver={e => { onMouseOver={e => {
e.stopPropagation(); e.stopPropagation();
this.setState({ comboItem: c.item }); this.setState({ comboItem: c.item });
}} }}
onClick={() => setInfo(c.item)} onClick={() => setInfo(c.item)}
> {convertItem(c.item)} </td> > {convertItem(c.item)} </tr>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)} {c.components.map((u, j) => <tr key={j} >{convertItem(u)}</tr>)}
</tr> </table>
</td>
)} )}
</tbody> </tbody>
</table> </table>