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

Add animations

Browse Source
This commit is contained in:
G.Ambatte
2023-04-09 21:01:28 +12:00
parent ebc90c998a
commit b8e68f9a93
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,9 +48,7 @@ const MetadataNav = createClass({
}, },
renderMetaWindow : function(){ renderMetaWindow : function(){
if(!this.state.showMetaWindow) return null; return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
return <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>

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

@@ -177,15 +177,9 @@
i{ i{
margin-right: 10px; margin-right: 10px;
} }
// .windowWrapper{
// position: fixed;
// top: 18px;
// left: 0px;
// width: calc(100vw - 30px);
// z-index: -1;
.window{ .window{
position: absolute; position: absolute;
top: 100%; bottom: 0;
width: 80%; width: 80%;
left: 10%; left: 10%;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
@@ -197,6 +191,16 @@
padding: 0px 10px; padding: 0px 10px;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
margin: 0 auto; margin: 0 auto;
z-index: -1;
transition: transform 0.5s, opacity 0.5s;
&.active{
transform: translateY(100%);
opacity: 1;
}
&.inactive{
transform: translateY(0%);
opacity: 0;
}
.row{ .row{
display : flex; display : flex;
flex-flow : row wrap; flex-flow : row wrap;