Merge pull request #2733 from G-Ambatte/addMetadataToShare-#1679

Add Metadata Nav Item to SharePage

client/homebrew/navbar/metadata.navitem.jsx

@@ -0,0 +1,90 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const Moment = require('moment');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+
+const MetadataNav = createClass({
+	displayName     : 'MetadataNav',
+	getDefaultProps : function() {
+		return {
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			showMetaWindow : false
+		};
+	},
+
+	componentDidMount : function() {
+	},
+
+	toggleMetaWindow : function(){
+		this.setState((prevProps)=>({
+			showMetaWindow : !prevProps.showMetaWindow
+		}));
+	},
+
+	getAuthors : function(){
+		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
+		return <>
+			{this.props.brew.authors.map((author, idx, arr)=>{
+				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
+				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
+			})}
+		</>;
+	},
+
+	getTags : function(){
+		if(!this.props.brew.tags || this.props.brew.tags.length == 0) return 'No tags';
+		return <>
+			{this.props.brew.tags.map((tag, idx)=>{
+				return <span className='tag' key={idx}>{tag}</span>;
+			})}
+		</>;
+	},
+
+	getSystems : function(){
+		if(!this.props.brew.systems || this.props.brew.systems.length == 0) return 'No systems';
+		return this.props.brew.systems.join(', ');
+	},
+
+	renderMetaWindow : function(){
+		return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
+			<div className='row'>
+				<h4>Description</h4>
+				<p>{this.props.brew.description || 'No description.'}</p>
+			</div>
+			<div className='row'>
+				<h4>Authors</h4>
+				<p>{this.getAuthors()}</p>
+			</div>
+			<div className='row'>
+				<h4>Tags</h4>
+				<p>{this.getTags()}</p>
+			</div>
+			<div className='row'>
+				<h4>Systems</h4>
+				<p>{this.getSystems()}</p>
+			</div>
+			<div className='row'>
+				<h4>Updated</h4>
+				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+			</div>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
+			onClick={()=>this.toggleMetaWindow()}>
+			{this.props.children}
+			{this.renderMetaWindow()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = MetadataNav;

client/homebrew/navbar/navbar.less

@@ -28,7 +28,7 @@
 			width            : 250px;
 			margin           : 0;
 			padding          : 2px;
-			background-color : #444;
+			background-color : transparent;
 			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
@@ -49,11 +49,14 @@
 		}
 	}
 	.brewTitle.navItem{
+		height: 100%;
 		font-size      : 12px;
 		font-weight    : 800;
 		color          : white;
 		text-align     : center;
 		text-transform : initial;
+		flex-grow      : 1;
+		background-color: transparent;
 	}
 	.save-menu {
 		.dropdown {
@@ -163,6 +166,87 @@
 			}
 		}
 	}
+	.metadata.navItem {
+		position : relative;
+		padding: 0;
+		align-items: center;
+		display  : flex;
+		flex-grow: 1;
+		height: 100%;
+		i{
+			margin-right: 10px;
+		}
+		.window{
+			position         : absolute;
+			bottom           : 0;
+			width            : 440px;
+			left             : 50%;
+			max-height       : ~"calc(100vh - 28px)";
+			background-color : #333;
+			border           : 3px solid #444;
+			border-top       : unset;
+			border-radius    : 0 0 5px 5px;
+			box-shadow       : inset 0 7px 9px -7px #111;
+			display          : flex;
+			flex-flow        : row wrap;
+			justify-content  : flex-start;
+			align-content    : baseline;
+			padding          : 0px 10px 5px;
+			margin           : 0 auto;
+			z-index          : -1;
+			transition       : transform 0.4s, opacity 0.4s;
+			&.active{
+				transform: translateX(-50%) translateY(100%);
+				opacity: 1;
+			}
+			&.inactive{
+				transform: translateX(-50%) translateY(0%);
+				opacity: 0;
+			}
+			.row{
+				display   : flex;
+				flex-flow : row wrap;
+				width     : 100%;
+				h4{
+					display          : block;
+					box-sizing       : border-box;
+					padding          : 5px 0px;
+					color            : #bbb;
+					text-align       : center;
+					flex-basis       : 20%;
+					flex-grow        : 1;
+					min-width        : 76px;
+				}
+				p{
+					font-family      : 'Open Sans', sans-serif;
+					font-size        : 10px;
+					font-weight      : normal;
+					text-transform 	 : initial;
+					padding          : 5px 0;
+					flex-basis       : 80%;
+					flex-grow        : 1;
+					.tag{
+						border           : 2px solid grey;
+						padding          : 2px;
+						margin           : 2px 2px;
+						display          : inline-block;
+						border-radius    : 5px;
+						background-color : #444;
+					}
+					a.userPageLink{
+						text-decoration: none;
+						color: white;
+						&:hover{
+							text-decoration: underline;
+						}
+					}
+				}
+				&:nth-of-type(even){
+					background-color: #555;
+				}
+			}
+		}
+	}
 	.warning.navItem{
 		position         : relative;
 		background-color : @orange;

client/homebrew/pages/basePages/listPage/listPage.less

@@ -16,6 +16,7 @@
 }
 .listPage{
 	.content{
+		z-index : 1;
 		.page{
 			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
@@ -63,7 +64,7 @@
 		border-bottom         : 1px solid #666;
 		color              : white;
 		text-align         : center;
-		z-index            : 500;
+		z-index            : 1;
 		display            : flex;
 		justify-content    : center;
 		align-items        : baseline;

client/homebrew/pages/sharePage/sharePage.jsx

@@ -5,6 +5,7 @@ const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
+const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
@@ -50,8 +51,10 @@ const SharePage = createClass({
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
-				<Nav.section>
+				<Nav.section className='titleSection'>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					<MetadataNav brew={this.props.brew}>
+						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					</MetadataNav>
 				</Nav.section>
 
 				<Nav.section>

client/homebrew/pages/sharePage/sharePage.less

@@ -1,4 +1,8 @@
 .sharePage{
+	.navContent .navSection.titleSection {
+		flex-grow: 1;
+		justify-content: center;
+	}
 	.content{
 		overflow-y : hidden;
 	}

shared/naturalcrit/nav/nav.jsx

@@ -29,7 +29,7 @@ const Nav = {
 	section : createClass({
 		displayName : 'Nav.section',
 		render      : function(){
-			return <div className='navSection'>
+			return <div className={`navSection ${this.props.className ?? ''}`}>
 				{this.props.children}
 			</div>;
 		}

shared/naturalcrit/nav/nav.less

@@ -13,6 +13,7 @@ nav{
 		position			  : relative;
 		display         : flex;
 		justify-content : space-between;
+		z-index         : 2;
 	}
 	.navSection{
 		display     : flex;