f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 14:52:38 +00:00
Code Wiki Activity

Move metadata window to be independent of title

Browse Source
This commit is contained in:
G.Ambatte
2023-03-19 18:42:31 +13:00
parent 807ab2a538
commit db5469699e
2 changed files with 66 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/homebrew/navbar/metadata.navitem.jsx
View File

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

81
client/homebrew/navbar/navbar.less
View File

@@ -173,43 +173,50 @@
i{ i{
margin-right: 10px; margin-right: 10px;
} }
.dropdown{ .windowWrapper{
position : absolute; position: fixed;
top : 18px; top: 18px;
left : 0px; left: 0px;
z-index : -1; width: calc(100vw - 30px);
width : 100%; z-index: -1;
max-height : ~"calc(100vh - 28px)"; .window{
background-color : #333; max-width : 764px;
display: flex; width : 80%;
flex-flow: row wrap; min-width : 380px;
justify-content: flex-start; max-height : ~"calc(100vh - 28px)";
align-content: baseline; background-color : #333;
padding: 10px 10px 0px; display: flex;
border-radius: 5px; flex-flow: row wrap;
.row{ justify-content: flex-start;
display : flex; align-content: baseline;
flex-flow : row wrap; padding: 10px 10px 0px;
width : 100%; border-radius: 5px;
h4{ margin: 0 auto;
display : block; .row{
box-sizing : border-box; display : flex;
padding : 5px 0px; flex-flow : row wrap;
color : #bbb; width : 100%;
text-align : center; h4{
border-top : 1px solid #888; display : block;
flex-basis : 20%; box-sizing : border-box;
flex-grow : 1; padding : 5px 0px;
} color : #bbb;
p{ text-align : center;
font-family : 'Open Sans', sans-serif; border-top : 1px solid #888;
font-size : 10px; flex-basis : 20%;
font-weight : normal; flex-grow : 1;
text-transform : initial; min-width : 76px;
padding : 5px 0; }
flex-basis : 80%; p{
flex-grow : 1; font-family : 'Open Sans', sans-serif;
border-top : 1px solid #888; font-size : 10px;
font-weight : normal;
text-transform : initial;
padding : 5px 0;
flex-basis : 80%;
flex-grow : 1;
border-top : 1px solid #888;
}
} }
} }
} }