f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00
Code Wiki Activity

Add color mixins, help dropdown, and remove unused nav items

Browse Source
This commit is contained in:
Charlie Humphreys
2022-01-26 08:40:33 -06:00
parent 603cf2c0ab
commit 38c0527d35
12 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
client/homebrew/navbar/help.navitem.jsx Normal file
View File

@@ -0,0 +1,49 @@
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
const Nav = require('naturalcrit/nav/nav.jsx');
const Help = createClass({
getInitialState : function() {
return {
showDropdown : false
};
},
handleDropdown : function(show){
this.setState({
showDropdown : show
});
},
renderDropdown : function(){
return !this.state.showDropdown ? null : <div className='dropdown'>
<a href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
className='item red'
target='_blank'
rel='noopener noreferrer'>
<span className='title'>report issue <i className='fas fa-fw fa-bug'/></span>
</a>
<a href='/migrate'
className='item blue'
target='_blank'
rel='noopener noreferrer'>
<span className='title'>migrate <i className='fas fa-fw fa-route'/></span>
</a>
</div>;
},
render : function(){
return <Nav.item icon='fas fa-life-ring' color='grey' className='recent'
onMouseEnter={()=>this.handleDropdown(true)}
onMouseLeave={()=>this.handleDropdown(false)}>
Need Help?
{this.renderDropdown()}
</Nav.item>;
}
});
module.exports = Help;

13
client/homebrew/navbar/issue.navitem.jsx
View File

@@ -1,13 +0,0 @@
const React = require('react');
const createClass = require('create-react-class');
const Nav = require('naturalcrit/nav/nav.jsx');
module.exports = function(props){
return <Nav.item
newTab={true}
color='red'
icon='fas fa-bug'
href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
report issue
</Nav.item>;
};

13
client/homebrew/navbar/migrate.navitem.jsx
View File

@@ -1,13 +0,0 @@
const React = require('react');
const Nav = require('naturalcrit/nav/nav.jsx');
module.exports = function(props){
return <Nav.item
className='migrate'
newTab={false}
href='/migrate'
color='blue'
icon='fas fa-route'>
migrate
</Nav.item>;
};

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

@@ -1,3 +1,4 @@
@import 'naturalcrit/styles/colors.less';
@navbarHeight : 28px;
@keyframes pinkColoring {
//from {color: white;}
@@ -67,17 +68,17 @@
color: pink;
}
}
.migrate.navItem{
border-right : 1px solid #666;
}
.recent.navItem{
.recent.navItem,
.help.navItem{
position : relative;
.dropdown{
position : absolute;
top : 28px;
left : 0px;
z-index : 10000;
width : 100%;
position : absolute;
top : 28px;
left : 0px;
z-index : 10000;
width : 100%;
overflow : hidden auto;
max-height : ~"calc(100vh - 28px)";
h4{
display : block;
box-sizing : border-box;
@@ -91,6 +92,7 @@
&:nth-of-type(2){ background-color: darken(@purple, 30%); }
}
.item{
#backgroundColors;
.animate(background-color);
position : relative;
display : block;
@@ -104,11 +106,14 @@
background-color : @blue;
}
.title{
display : inline-block;
overflow : hidden;
width : 100%;
text-overflow : ellipsis;
white-space : nowrap;
i{
float: right;
}
}
.time{
position : absolute;

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

@@ -123,8 +123,8 @@ const RecentItems = createClass({
if(!this.state.showDropdown) return null;
const makeItems = (brews)=>{
return _.map(brews, (brew)=>{
return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
return _.map(brews, (brew, i)=>{
return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
<span className='title'>{brew.title || '[ no title ]'}</span>
<span className='time'>{Moment(brew.ts).fromNow()}</span>
</a>;

6
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -10,7 +10,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx');
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
const ReportIssue = require('../../navbar/issue.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx');
const PrintLink = require('../../navbar/print.navitem.jsx');
const Account = require('../../navbar/account.navitem.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -23,7 +23,6 @@ const Markdown = require('naturalcrit/markdown.js');
const googleDriveActive = require('../../googleDrive.png');
const googleDriveInactive = require('../../googleDriveMono.png');
const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
const SAVE_TIMEOUT = 3000;
@@ -434,8 +433,7 @@ const EditPage = createClass({
{this.renderGoogleDriveIcon()}
{this.renderSaveButton()}
<NewBrew />
<MigrateNavItem />
<ReportIssue />
<HelpNavItem/>
<Nav.dropdown>
<Nav.item color='teal' icon='fas fa-share-alt'>
share

6
client/homebrew/pages/errorPage/errorPage.jsx
View File

@@ -7,11 +7,10 @@ const cx = require('classnames');
const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx');
const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
const IssueNavItem = require('../../navbar/issue.navitem.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const HelpNavItem = require('../../navbar/help.navitem.jsx');
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
const ErrorPage = createClass({
getDefaultProps : function() {
@@ -34,8 +33,7 @@ const ErrorPage = createClass({
<Nav.section>
<PatreonNavItem />
<MigrateNavItem />
<IssueNavItem />
<HelpNavItem />
<RecentNavItem />
</Nav.section>
</Navbar>

6
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -9,8 +9,7 @@ const { Meta } = require('vitreum/headtags');
const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx');
const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
const IssueNavItem = require('../../navbar/issue.navitem.jsx');
const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const AccountNavItem = require('../../navbar/account.navitem.jsx');
@@ -59,8 +58,7 @@ const HomePage = createClass({
return <Navbar ver={this.props.ver}>
<Nav.section>
<NewBrewItem />
<MigrateNavItem />
<IssueNavItem />
<HelpNavItem />
<RecentNavItem />
<AccountNavItem />
</Nav.section>

6
client/homebrew/pages/newPage/newPage.jsx
View File

@@ -11,12 +11,11 @@ const Nav = require('naturalcrit/nav/nav.jsx');
const Navbar = require('../../navbar/navbar.jsx');
const AccountNavItem = require('../../navbar/account.navitem.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const IssueNavItem = require('../../navbar/issue.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx');
const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
const Editor = require('../../editor/editor.jsx');
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
const BREWKEY = 'homebrewery-new';
const STYLEKEY = 'homebrewery-new-style';
@@ -291,8 +290,7 @@ const NewPage = createClass({
<Nav.section>
{this.renderSaveButton()}
{this.renderLocalPrintButton()}
<MigrateNavItem />
<IssueNavItem />
<HelpNavItem />
<RecentNavItem />
<AccountNavItem />
</Nav.section>

4
client/homebrew/pages/userPage/userPage.jsx
View File

@@ -13,7 +13,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const Account = require('../../navbar/account.navitem.jsx');
const NewBrew = require('../../navbar/newbrew.navitem.jsx');
const BrewItem = require('./brewItem/brewItem.jsx');
const ReportIssue = require('../../navbar/issue.navitem.jsx');
const HelpNavItem = require('../../navbar/help.navitem.jsx');
// const brew = {
// title : 'SUPER Long title woah now',
@@ -163,7 +163,7 @@ const UserPage = createClass({
<Navbar>
<Nav.section>
<NewBrew />
<ReportIssue />
<HelpNavItem />
<RecentNavItem />
<Account />
</Nav.section>

22
shared/naturalcrit/nav/nav.less
View File

@@ -1,3 +1,4 @@
@import '../styles/colors';
@keyframes glideDropDown {
0% {transform : translate(0px, -100%);
opacity : 0;
@@ -49,6 +50,7 @@ nav{
}
}
.navItem{
#backgroundColors;
.animate(background-color);
padding : 8px 12px;
cursor : pointer;
@@ -62,26 +64,6 @@ nav{
margin-left : 5px;
font-size : 13px;
}
&.tealLight:hover{ background-color : @tealLight };
&.teal:hover{ background-color : @teal };
&.greenLight:hover{ background-color : @greenLight };
&.green:hover{ background-color : @green };
&.blueLight:hover{ background-color : @blueLight };
&.blue:hover{ background-color : @blue };
&.purpleLight:hover{ background-color : @purpleLight };
&.purple:hover{ background-color : @purple };
&.steelLight:hover{ background-color : @steelLight };
&.steel:hover{ background-color : @steel };
&.yellowLight:hover{ background-color : @yellowLight };
&.yellow:hover{ background-color : @yellow };
&.orangeLight:hover{ background-color : @orangeLight };
&.orange:hover{ background-color : @orange };
&.redLight:hover{ background-color : @redLight };
&.red:hover{ background-color : @red };
&.silverLight:hover{ background-color : @silverLight };
&.silver:hover{ background-color : @silver };
&.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey };
}
.navSection:last-child .navItem{
border-left : 1px solid #666;

25
shared/naturalcrit/styles/colors.less
View File

@@ -20,4 +20,27 @@
@silverLight : #ECF0F1;
@silver : #BDC3C7;
@greyLight : #95A5A6;
@grey : #7F8C8D;
@grey : #7F8C8D;
#backgroundColors {
&.tealLight:hover{ background-color : @tealLight };
&.teal:hover{ background-color : @teal };
&.greenLight:hover{ background-color : @greenLight };
&.green:hover{ background-color : @green };
&.blueLight:hover{ background-color : @blueLight };
&.blue:hover{ background-color : @blue };
&.purpleLight:hover{ background-color : @purpleLight };
&.purple:hover{ background-color : @purple };
&.steelLight:hover{ background-color : @steelLight };
&.steel:hover{ background-color : @steel };
&.yellowLight:hover{ background-color : @yellowLight };
&.yellow:hover{ background-color : @yellow };
&.orangeLight:hover{ background-color : @orangeLight };
&.orange:hover{ background-color : @orange };
&.redLight:hover{ background-color : @redLight };
&.red:hover{ background-color : @red };
&.silverLight:hover{ background-color : @silverLight };
&.silver:hover{ background-color : @silver };
&.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey };
}