mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 22:42:41 +00:00
basic looks
This commit is contained in:
Víctor Losada Hernández
@@ -11,6 +11,7 @@ const SharePage = require('./pages/sharePage/sharePage.jsx');
|
||||
const NewPage = require('./pages/newPage/newPage.jsx');
|
||||
const ErrorPage = require('./pages/errorPage/errorPage.jsx');
|
||||
const PrintPage = require('./pages/printPage/printPage.jsx');
|
||||
const ArchivePage = require('./pages/archivePage/archivePage.jsx');
|
||||
const AccountPage = require('./pages/accountPage/accountPage.jsx');
|
||||
|
||||
const WithRoute = (props)=>{
|
||||
@@ -74,6 +75,7 @@ const Homebrew = createClass({
|
||||
<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
|
||||
<Route path='/print/:id' element={<WithRoute el={PrintPage} brew={this.props.brew} />} />
|
||||
<Route path='/print' element={<WithRoute el={PrintPage} />} />
|
||||
<Route path='/archive' element={<WithRoute el={ArchivePage}/>}/>
|
||||
<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
|
||||
<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
|
||||
<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} uiItems={this.props.brew.uiItems} />} />
|
||||
|
||||
133
client/homebrew/pages/archivePage/archivePage.jsx
Normal file
133
client/homebrew/pages/archivePage/archivePage.jsx
Normal file
@@ -0,0 +1,133 @@
|
||||
require('./archivePage.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const _ = require('lodash');
|
||||
const cx = require('classnames');
|
||||
const moment = require('moment');
|
||||
|
||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
const Navbar = require('../../navbar/navbar.jsx');
|
||||
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
const Account = require('../../navbar/account.navitem.jsx');
|
||||
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
|
||||
const HelpNavItem = require('../../navbar/help.navitem.jsx');
|
||||
|
||||
const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
|
||||
|
||||
const ArchivePage = createClass({
|
||||
displayName : 'ArchivePage',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
query : '',
|
||||
foundBrew : null,
|
||||
searching : false,
|
||||
error : null
|
||||
};
|
||||
},
|
||||
getInitialState : function() {
|
||||
return {
|
||||
uiItems : this.props.uiItems
|
||||
};
|
||||
},
|
||||
handleChange(e){
|
||||
this.setState({ query: e.target.value });
|
||||
},
|
||||
lookup(){
|
||||
this.setState({ searching: true, error: null });
|
||||
|
||||
request.get(`/admin/lookup/${this.state.query}`)
|
||||
.then((res)=>this.setState({ foundBrew: res.body }))
|
||||
.catch((err)=>this.setState({ error: err }))
|
||||
.finally(()=>this.setState({ searching: false }));
|
||||
},
|
||||
renderFoundBrew(){
|
||||
const brew = this.state.foundBrew;
|
||||
return <div className='foundBrew'>
|
||||
<dl>
|
||||
<dt>Title</dt>
|
||||
<dd>{brew.title}</dd>
|
||||
|
||||
<dt>Authors</dt>
|
||||
<dd>{brew.authors.join(', ')}</dd>
|
||||
|
||||
<dt>Edit Link</dt>
|
||||
<dd><a href={`/edit/${brew.editId}`} target='_blank' rel='noopener noreferrer'>/edit/{brew.editId}</a></dd>
|
||||
|
||||
<dt>Share Link</dt>
|
||||
<dd><a href={`/share/${brew.shareId}`} target='_blank' rel='noopener noreferrer'>/share/{brew.shareId}</a></dd>
|
||||
|
||||
<dt>Last Updated</dt>
|
||||
<dd>{Moment(brew.updatedAt).fromNow()}</dd>
|
||||
|
||||
<dt>Num of Views</dt>
|
||||
<dd>{brew.views}</dd>
|
||||
</dl>
|
||||
</div>;
|
||||
},
|
||||
|
||||
renderForm: function() {
|
||||
return <div className='brewLookup'>
|
||||
<h2>Brew Lookup</h2>
|
||||
<label>Title of the brew</label><input type='text' value={this.state.query} onChange={this.handleChange} placeholder='v3 Reference Document'/>
|
||||
{/* In the future, we should be able to filter the results by adding tags.
|
||||
<label>Tags</label><input type="text" value={this.state.query} placeholder='add a tag to filter'/>
|
||||
*/}
|
||||
<button onClick={this.lookup}>
|
||||
<i className={cx('fas', {
|
||||
'fa-search' : !this.state.searching,
|
||||
'fa-spin fa-spinner' : this.state.searching,
|
||||
})} />
|
||||
</button>
|
||||
|
||||
{this.state.error
|
||||
&& <div className='error'>{this.state.error.toString()}</div>
|
||||
}
|
||||
|
||||
{this.state.foundBrew
|
||||
? this.renderFoundBrew()
|
||||
: <div className='noBrew'>No brew found.</div>
|
||||
}
|
||||
</div>;
|
||||
},
|
||||
|
||||
renderResults : function() {
|
||||
|
||||
},
|
||||
|
||||
renderNavItems : function() {
|
||||
return <Navbar>
|
||||
<Nav.section>
|
||||
<NewBrew />
|
||||
<HelpNavItem />
|
||||
<RecentNavItem />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
</Navbar>;
|
||||
},
|
||||
|
||||
render : function() {
|
||||
return <div className='archivePage'>
|
||||
{this.renderNavItems()}
|
||||
|
||||
<div className='content'>
|
||||
<div className='welcome'>
|
||||
<h1>Welcome to the Archive</h1>
|
||||
</div>
|
||||
<div className='flexGroup'>
|
||||
<div className='form dataGroup'>
|
||||
{this.renderForm()}
|
||||
</div>
|
||||
<div className='resultsContainer dataGroup'>
|
||||
<div className='title'>
|
||||
<h2>Your results, my lordship</h2>
|
||||
{this.renderResults()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = ArchivePage;
|
||||
74
client/homebrew/pages/archivePage/archivePage.less
Normal file
74
client/homebrew/pages/archivePage/archivePage.less
Normal file
@@ -0,0 +1,74 @@
|
||||
|
||||
|
||||
.archivePage {
|
||||
height:100%;
|
||||
background-color: #2C3E50;
|
||||
.content {
|
||||
display:grid;
|
||||
grid-template-rows: 20vh 1fr;
|
||||
|
||||
.welcome {
|
||||
background: url('https://i.imgur.com/MJ4YHu7.jpg');
|
||||
background-size:100%;
|
||||
background-position:center;
|
||||
height:20vh;
|
||||
|
||||
h1 {
|
||||
font-size:40px;
|
||||
font-weight:900;
|
||||
color:white;
|
||||
filter: drop-shadow(0 0 5px black);
|
||||
}
|
||||
}
|
||||
|
||||
.flexGroup {
|
||||
height:100%;
|
||||
display:grid;
|
||||
grid-template-columns:1fr 2fr;
|
||||
|
||||
.dataGroup {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:white;
|
||||
|
||||
&.form .brewLookup {
|
||||
padding:100px;
|
||||
|
||||
h2 {
|
||||
font-size:20px;
|
||||
font-weight: 900;
|
||||
border-bottom:2px solid;
|
||||
margin-block: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right:10px;
|
||||
}
|
||||
input+button {
|
||||
margin-left:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.resultsContainer {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
border-left:2px solid;
|
||||
height:76.8vh;
|
||||
|
||||
.title {
|
||||
height:20%;
|
||||
background-color: #333;
|
||||
display:grid;
|
||||
place-items: center;
|
||||
|
||||
h2 {
|
||||
font-size:20px;
|
||||
color:white;
|
||||
font-weight:900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user