add style to results component

This commit is contained in:
Sorrel Bri 2020-02-26 16:27:45 -08:00
parent 953c403f3b
commit c5b7e13029
3 changed files with 22 additions and 4 deletions

View file

@ -13,6 +13,12 @@ div.App {
padding: 0.5em 0; padding: 0.5em 0;
} }
h5 {
font-size: 1.1em;
padding: 0.1em 0;
font-weight: 800;
}
div.PhonoChangeApplier { div.PhonoChangeApplier {
display: grid; display: grid;
width: 100%; width: 100%;

View file

@ -27,7 +27,7 @@ const Output = props => {
<div className="Output" data-testid="Output"> <div className="Output" data-testid="Output">
<h3>Results of Run</h3> <h3>Results of Run</h3>
<div data-testid="Output-lexicon" className="Output_container"> <div data-testid="Output-lexicon" className="Output__container">
{results && results.length ? renderResults() : <></>} {results && results.length ? renderResults() : <></>}
</div> </div>
</div> </div>

View file

@ -1,6 +1,18 @@
div.Output-epoch { div.Output {
display: flex;
p.lexicon { div.Output__container {
display: flex; display: flex;
flex-flow: row wrap;
} }
div.Output-epoch {
display: flex;
flex-flow: column;
p.lexicon {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
}
}
} }