Unverified Commit c22f4039 authored by Iain Maitland's avatar Iain Maitland Committed by GitHub
Browse files

Merge pull request #2591 from steemit/im/2391/logotype-in-header-and-new-header

logo-type in header, move sort order dropdown, refs #2391
parents d20c5488 3d6f927f
// breakpoints
$S: 20em; // 320px / 16
$M: 47.5em; // 760px / 16
$L: 75em; // 1200px / 16
$XL: 100em; // 1600px / 16
$FM: 40em; // Conform to foundation 'medium' css breakpoint
$M: 47.5em; // 760px / 16
$FL: 64em; // Conform to foundation 'large' css breakpoint
$L: 75em; // 1200px / 16
$XL: 100em; // 1600px / 16
// media queries
......@@ -11,15 +14,48 @@ $XL: 100em; // 1600px / 16
@if $canvas == S {
@media only screen and (min-width: $S) { @content; }
}
@if $canvas == FM {
@media only screen and (min-width: $FM) { @content; }
}
@else if $canvas == M {
@media only screen and (min-width: $M) { @content; }
}
@else if $canvas == FL {
@media only screen and (min-width: $FL) { @content; }
}
@else if $canvas == L {
@media only screen and (min-width: $L) { @content; }
}
@else if $canvas == XL {
@media only screen and (min-width: $XL) { @content; }
@media only screen and (min-width: $XL) { @content; }
}
}
// Foundation-like Classes
.show-for-mq-large {
display: none;
@include MQ(L) {
display: inline;
}
}
.hide-for-mq-large {
display: inline;
@include MQ(L) {
display: none;
}
}
.hide-for-mq-medium {
display: inline;
@include MQ(M) {
display: none;
}
}
.show-for-mq-medium {
display: none;
@include MQ(M) {
display: inline;
}
}
\ No newline at end of file
......@@ -5,7 +5,7 @@ $themes: (
colorAccentReverse: $color-blue-original-light,
colorWhite: $color-white,
backgroundColor: $color-background-off-white,
backgroundColorEmphasis: $color-background-almost-white,
backgroundColorEmphasis: $color-background-almost-white,
backgroundColorOpaque: $color-background-off-white,
backgroundTransparent: transparent,
moduleBackgroundColor: $color-white,
......@@ -223,7 +223,6 @@ $themes: (
text-transform: capitalize;
border-radius: 0;
text-decoration: none;
text-transform: capitalize;
@include font-size(18px);
@include themify($themes) {
background-color: themed('buttonBackground');
......
......@@ -118,4 +118,4 @@ tbody tr:nth-child(even) {
@extend .e-btn--black;
min-width: 100px;
}
}
}
\ No newline at end of file
......@@ -3,26 +3,23 @@ import { connect } from 'react-redux';
import AppPropTypes from 'app/utils/AppPropTypes';
import Header from 'app/components/modules/Header';
import * as userActions from 'app/redux/UserReducer';
import TopRightMenu from 'app/components/modules/TopRightMenu';
import { browserHistory } from 'react-router';
import classNames from 'classnames';
import SidePanel from 'app/components/modules/SidePanel';
import ConnectedSidePanel from 'app/components/modules/ConnectedSidePanel';
import CloseButton from 'react-foundation-components/lib/global/close-button';
import Dialogs from 'app/components/modules/Dialogs';
import Modals from 'app/components/modules/Modals';
import Icon from 'app/components/elements/Icon';
import WelcomePanel from 'app/components/elements/WelcomePanel';
import MiniHeader from 'app/components/modules/MiniHeader';
import tt from 'counterpart';
import PageViewsCounter from 'app/components/elements/PageViewsCounter';
import { serverApiRecordEvent } from 'app/utils/ServerApiClient';
import { APP_NAME, VESTING_TOKEN, LIQUID_TOKEN } from 'app/client_config';
import { key_utils } from '@steemit/steem-js/lib/auth/ecc';
import resolveRoute from 'app/ResolveRoute';
import { VIEW_MODE_WHISTLE } from 'shared/constants';
const pageRequiresEntropy = path => {
const { page } = resolveRoute(path);
const entropyPages = [
'ChangePassword',
'RecoverAccountStep1',
......@@ -37,19 +34,12 @@ const pageRequiresEntropy = path => {
class App extends React.Component {
constructor(props) {
super(props);
// TODO: put both of these and associated toggles into Redux Store.
this.state = {
open: null,
showCallout: true,
showBanner: true,
expandCallout: false,
};
this.toggleOffCanvasMenu = this.toggleOffCanvasMenu.bind(this);
this.signUp = this.signUp.bind(this);
this.learnMore = this.learnMore.bind(this);
this.setShowBannerFalse = this.setShowBannerFalse.bind(this);
this.listenerActive = null;
this.onEntropyEvent = this.onEntropyEvent.bind(this);
// this.shouldComponentUpdate = shouldComponentUpdate(this, 'App')
}
componentWillMount() {
......@@ -58,20 +48,19 @@ class App extends React.Component {
}
componentDidMount() {
// setTimeout(() => this.setState({showCallout: false}), 15000);
if (pageRequiresEntropy(this.props.location.pathname)) {
if (pageRequiresEntropy(this.props.pathname)) {
this._addEntropyCollector();
}
}
componentWillReceiveProps(np) {
/* Add listener if the next page requires entropy and the current page didn't */
// Add listener if the next page requires entropy and the current page didn't
if (
pageRequiresEntropy(np.location.pathname) &&
!pageRequiresEntropy(this.props.location.pathname)
pageRequiresEntropy(np.pathname) &&
!pageRequiresEntropy(this.props.pathname)
) {
this._addEntropyCollector();
} else if (!pageRequiresEntropy(np.location.pathname)) {
} else if (!pageRequiresEntropy(np.pathname)) {
// Remove if next page does not require entropy
this._removeEntropyCollector();
}
......@@ -99,76 +88,57 @@ class App extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
const p = this.props;
const { pathname, new_visitor, flash, nightmodeEnabled } = this.props;
const n = nextProps;
return (
p.location.pathname !== n.location.pathname ||
p.new_visitor !== n.new_visitor ||
p.flash !== n.flash ||
this.state.open !== nextState.open ||
pathname !== n.pathname ||
new_visitor !== n.new_visitor ||
flash !== n.flash ||
this.state.showBanner !== nextState.showBanner ||
this.state.showCallout !== nextState.showCallout ||
p.nightmodeEnabled !== n.nightmodeEnabled
nightmodeEnabled !== n.nightmodeEnabled
);
}
toggleOffCanvasMenu(e) {
e.preventDefault();
// this.setState({open: this.state.open ? null : 'left'});
this.refs.side_panel.show();
}
navigate = e => {
const a =
e.target.nodeName.toLowerCase() === 'a'
? e.target
: e.target.parentNode;
// this.setState({open: null});
if (a.host !== window.location.host) return;
e.preventDefault();
browserHistory.push(a.pathname + a.search + a.hash);
};
setShowBannerFalse() {
setShowBannerFalse = () => {
this.setState({ showBanner: false });
}
};
onEntropyEvent(e) {
onEntropyEvent = e => {
if (e.type === 'mousemove')
key_utils.addEntropy(e.pageX, e.pageY, e.screenX, e.screenY);
else console.log('onEntropyEvent Unknown', e.type, e);
}
};
signUp() {
signUp = () => {
serverApiRecordEvent('Sign up', 'Hero banner');
}
};
learnMore() {
learnMore = () => {
serverApiRecordEvent('Learn more', 'Hero banner');
}
};
render() {
const {
location,
params,
children,
flash,
new_visitor,
openBlocktrades,
openGopax,
signup_bonus,
username,
nightmodeEnabled,
viewMode,
pathname,
category,
order,
} = this.props;
const miniHeader =
location.pathname === '/create_account' ||
location.pathname === '/pick_account';
pathname === '/create_account' || pathname === '/pick_account';
const whistleView = viewMode === VIEW_MODE_WHISTLE;
const headerHidden = whistleView;
const params_keys = Object.keys(params);
const ip =
location.pathname === '/' ||
pathname === '/' ||
(params_keys.length === 2 &&
params_keys[0] === 'order' &&
params_keys[1] === 'category');
......@@ -263,165 +233,18 @@ class App extends React.Component {
})}
ref="App_root"
>
<SidePanel ref="side_panel" alignment="right">
<TopRightMenu vertical navigate={this.navigate} />
<ul className="vertical menu">
<li>
<a href="/welcome" onClick={this.navigate}>
{tt('navigation.welcome')}
</a>
</li>
<li>
<a href="/faq.html" onClick={this.navigate}>
{tt('navigation.faq')}
</a>
</li>
<li>
<a href="/tags" onClick={this.navigate}>
{tt('navigation.explore')}
</a>
</li>
<li>
<a href="/market" onClick={this.navigate}>
{tt('navigation.currency_market')}
</a>
</li>
<li>
<a
href="/recover_account_step_1"
onClick={this.navigate}
>
{tt('navigation.stolen_account_recovery')}
</a>
</li>
<li>
<a href="/change_password" onClick={this.navigate}>
{tt('navigation.change_account_password')}
</a>
</li>
<li className="last">
<a href="/~witnesses" onClick={this.navigate}>
{tt('navigation.vote_for_witnesses')}
</a>
</li>
</ul>
<ul className="vertical menu">
<li>
<a className="menu-section">
{tt('navigation.third_party_exchanges')}
</a>
</li>
<li>
<a onClick={() => openBlocktrades(username)}>
Blocktrades <Icon name="extlink" />
</a>
</li>
<li className="last">
<a onClick={() => openGopax()}>
GOPAX <Icon name="extlink" />
</a>
</li>
</ul>
<ul className="vertical menu">
<li>
<a
href="https://thesteemitshop.com/"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.shop')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a
href="https://steemit.chat/home"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.chat')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a
href="http://steemtools.com/"
onClick={this.navigate}
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.app_center')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li className="last">
<a
href="https://developers.steem.io/"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.api_docs')}&nbsp;<Icon name="extlink" />
</a>
</li>
</ul>
<ul className="vertical menu">
<li>
<a
href="https://steem.io/steem-bluepaper.pdf"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.bluepaper')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a
href="https://smt.steem.io/"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.smt_whitepaper')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a
href="https://steem.io/SteemWhitePaper.pdf"
target="_blank"
rel="noopener noreferrer"
>
{tt('navigation.whitepaper')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a href="https://steem.io" onClick={this.navigate}>
{tt('navigation.about')}&nbsp;<Icon name="extlink" />
</a>
</li>
<li>
<a
href="/privacy.html"
onClick={this.navigate}
rel="nofollow"
>
{tt('navigation.privacy_policy')}
</a>
</li>
<li className="last">
<a
href="/tos.html"
onClick={this.navigate}
rel="nofollow"
>
{tt('navigation.terms_of_service')}
</a>
</li>
</ul>
</SidePanel>
<ConnectedSidePanel alignment="right" />
{headerHidden ? null : miniHeader ? (
<MiniHeader />
) : (
<Header
toggleOffCanvasMenu={this.toggleOffCanvasMenu}
menuOpen={this.state.open}
pathname={pathname}
category={category}
order={order}
/>
)}
<div className="App__content">
{process.env.BROWSER &&
ip &&
......@@ -445,49 +268,40 @@ class App extends React.Component {
App.propTypes = {
error: React.PropTypes.string,
children: AppPropTypes.Children,
location: React.PropTypes.object,
signup_bonus: React.PropTypes.string,
pathname: React.PropTypes.string,
category: React.PropTypes.string,
order: React.PropTypes.string,
loginUser: React.PropTypes.func.isRequired,
depositSteem: React.PropTypes.func.isRequired,
username: React.PropTypes.string,
};
export default connect(
state => {
(state, ownProps) => {
const current_user = state.user.get('current');
const account_user = state.global.get('accounts');
const current_account_name = current_user
? current_user.get('username')
: state.offchain.get('account');
return {
viewMode: state.app.get('viewMode'),
error: state.app.get('error'),
flash: state.offchain.get('flash'),
signup_bonus: state.offchain.get('signup_bonus'),
new_visitor:
!state.user.get('current') &&
!state.offchain.get('user') &&
!state.offchain.get('account') &&
state.offchain.get('new_visit'),
username:
state.user.getIn(['current', 'username']) ||
state.offchain.get('account') ||
'',
nightmodeEnabled: state.app.getIn([
'user_preferences',
'nightmode',
]),
pathname: ownProps.location.pathname,
order: ownProps.params.order,
category: ownProps.params.category,
};
},
dispatch => ({
loginUser: () => dispatch(userActions.usernamePasswordLogin({})),
openBlocktrades: username => {
const new_window = window.open();
new_window.opener = null;
new_window.location =
'https://blocktrades.us/?input_coin_type=eth&output_coin_type=steem&receive_address=' +
username;
},
openGopax: () => {
const new_window = window.open();
new_window.opener = null;
new_window.location =
'https://www.gopax.co.kr/exchange?market=STEEM/KRW';
},
})
)(App);
......@@ -7,7 +7,7 @@
margin-top: 1rem;
@media print, screen and (min-width: 52.5em) {
margin-top: 2.5rem;
margin-top: 2.1rem;
}
// /* Small only */
......
......@@ -33,18 +33,22 @@
@import "./elements/UserNames";
@import "./elements/UserKeys";
@import "./elements/QrKeyView";
@import "./elements/SortOrder/styles";
@import "./elements/SearchInput/styles";
@import "./elements/IconButton/styles";
@import "./elements/NativeSelect/styles";
@import "./elements/SteemLogo/styles";
// modules
@import "./modules/Header";
@import "./modules/Header/styles";
@import "./modules/SignUp";
@import "./modules/LoginForm";
@import "./modules/MiniHeader";
@import "./modules/SidePanel";
@import "./modules/SidePanel/styles";
@import "./modules/Settings";
@import "./modules/BottomPanel";
@import "./modules/UserWallet";
@import "./modules/Powerdown";
@import "./modules/TopRightMenu";
@import "./modules/ConfirmTransactionForm";
@import "./modules/Transfer";
......
......@@ -116,7 +116,6 @@ class PostsList extends React.Component {
if (loadMore && posts && posts.size)
loadMore(posts.last(), category);
}
// Detect if we're in mobile mode (renders larger preview imgs)
const mq = window.matchMedia('screen and (max-width: 39.9375em)');
if (mq.matches) {
......
......@@ -2,11 +2,10 @@
display: none;
.active > a {
background: none;
font-weight: 600;
font-weight: bold;
@include themify($themes) {
color: themed('textColorAccent');
}
}
li > a:hover {
// color: $black;
......@@ -28,17 +27,20 @@
@media screen and (min-width: 52.5em) {
ul.HorizontalMenu.menu {
display: flex;
padding-left: 0.5em;
li > a {
padding-right: 0.5em;
line-height: 1.5rem;
display: flex;
text-transform: lowercase;
padding-left: 0.5em;
padding-right: 0.5em;
padding-right: 0.5em;
}
.active {
font-weight: bold;
}
}
}
@media print, screen and (min-width: 52.5em) {
.menu-hide-for-large {
display: none !important;
......
import React from 'react';
import { storiesOf } from '@storybook/react';
import IconButton from './index';
import { Center } from '../Tooltip.story';
storiesOf('Elements', module).add('IconButton', () => (
<Center>
<IconButton icon="pencil" />
<IconButton icon="magnifyingGlass" />
</Center>
));
import React from 'react';
import PropTypes from 'prop-types';
const IconButton = ({ icon }) => {
const icons = {
pencil: (
<path