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

Move Metadata window to title

Browse Source
This commit is contained in:
G.Ambatte
2023-04-09 13:33:53 +12:00
parent c5bd41acbf
commit aa0cc1ebf6
2 changed files with 71 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,28 +50,26 @@ const MetadataNav = createClass({
renderMetaWindow : function(){ renderMetaWindow : function(){
if(!this.state.showMetaWindow) return null; if(!this.state.showMetaWindow) return null;
return <div className='windowWrapper'> return <div className='window'>
<div className='window'> <div className='row'>
<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> <div className='row'>
<div className='row'> <h4>Authors</h4>
<h4>Authors</h4> <p>{this.getAuthors()}</p>
<p>{this.getAuthors()}</p> </div>
</div> <div className='row'>
<div className='row'> <h4>Tags</h4>
<h4>Tags</h4> <p>{this.getTags()}</p>
<p>{this.getTags()}</p> </div>
</div> <div className='row'>
<div className='row'> <h4>Systems</h4>
<h4>Systems</h4> <p>{this.getSystems()}</p>
<p>{this.getSystems()}</p> </div>
</div> <div className='row'>
<div className='row'> <h4>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>
</div>; </div>;
}, },

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

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