0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-20 03:12:44 +00:00

Adjust styling for unusual browser widths

This commit is contained in:
G.Ambatte
2023-03-15 13:46:30 +13:00
parent 1126481d53
commit bd4c24df46
2 changed files with 44 additions and 27 deletions

View File

@@ -47,16 +47,26 @@ const MetadataNav = createClass({
if(!this.state.showMetaWindow) return null; if(!this.state.showMetaWindow) return null;
return <div className='dropdown'> return <div className='dropdown'>
<div className='row'>
<h4>Description</h4> <h4>Description</h4>
<p>{this.props.brew.description || 'No description.'}</p> <p>{this.props.brew.description || 'No description.'}</p>
</div>
<div className='row'>
<h4>Authors</h4> <h4>Authors</h4>
<p>{this.getAuthors()}</p> <p>{this.getAuthors()}</p>
</div>
<div className='row'>
<h4>Tags</h4> <h4>Tags</h4>
<p>{this.getTags()}</p> <p>{this.getTags()}</p>
</div>
<div className='row'>
<h4>Systems</h4> <h4>Systems</h4>
<p>{this.getSystems()}</p> <p>{this.getSystems()}</p>
</div>
<div className='row'>
<h4>Last Updated</h4> <h4>Last Updated</h4>
<p>{Moment(this.props.brew.updatedAt).fromNow()}</p> <p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
</div>
</div>; </div>;
}, },

View File

@@ -187,6 +187,10 @@
align-content: baseline; align-content: baseline;
padding: 10px 10px 0px; padding: 10px 10px 0px;
border-radius: 5px; border-radius: 5px;
.row{
display : flex;
flex-flow : row wrap;
width : 100%;
h4{ h4{
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;
@@ -195,6 +199,7 @@
text-align : center; text-align : center;
border-top : 1px solid #888; border-top : 1px solid #888;
flex-basis : 20%; flex-basis : 20%;
flex-grow : 1;
} }
p{ p{
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
@@ -203,10 +208,12 @@
text-transform : initial; text-transform : initial;
padding : 5px 0; padding : 5px 0;
flex-basis : 80%; flex-basis : 80%;
flex-grow : 1;
border-top : 1px solid #888; border-top : 1px solid #888;
} }
} }
} }
}
.warning.navItem{ .warning.navItem{
position : relative; position : relative;
background-color : @orange; background-color : @orange;