random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev 2020-02-05 17:45:48 -05:00
parent df346596cf
commit fa66d082f8
22 changed files with 553 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/javascript/gabsocial/components/button/button.js
View File

@ -1,47 +1,92 @@
import classNames from 'classnames'; import classNames from 'classnames/bind'
import './button.scss';
export default class Button extends PureComponent { export default class Button extends PureComponent {
static propTypes = { static propTypes = {
text: PropTypes.node, text: PropTypes.node,
href: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
disabled: PropTypes.bool, disabled: PropTypes.bool,
block: PropTypes.bool, block: PropTypes.bool,
secondary: PropTypes.bool, secondary: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
}; className: PropTypes.string,
}
state = {
hovering: false,
}
handleOnMouseEnter = () => {
this.setState({
hovering: true,
})
}
handleOnMouseLeave = () => {
this.setState({
hovering: false,
})
}
handleClick = (e) => { handleClick = (e) => {
if (!this.props.disabled && this.props.onClick) { if (!this.props.disabled && this.props.onClick) {
this.props.onClick(e); this.props.onClick(e)
} }
} }
setRef = (c) => { setRef = (c) => {
this.node = c; this.node = c
} }
focus() { focus() {
this.node.focus(); this.node.focus()
} }
render () { render () {
const className = classNames('button', this.props.className, { const { secondary, block, className, disabled, text, children, href } = this.props
'button--secondary': this.props.secondary, const { hovering } = this.state
'button--block': this.props.block,
}); const cx = classNames.bind(styles)
const classes = cx(className, {
default: 1,
noUnderline: 1,
font: 1,
colorWhite: 1,
circle: 1,
cursorPointer: 1,
width100PC: 1,
textAlignCenter: 1,
paddingVertical10PX: 1,
paddingHorizontal15PX: 1,
backgroundColorBrand: !hovering,
backgroundColorBrandDark: hovering,
})
if (href) {
return (
<a
className={classes}
href={href}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
>
{text || children}
</a>
)
}
return ( return (
<button <button
className={className}
disabled={this.props.disabled}
onClick={this.handleClick}
ref={this.setRef} ref={this.setRef}
disabled={disabled}
onClick={this.handleClick}
className={classes}
onMouseEnter={() => this.handleOnMouseEnter()}
onMouseLeave={() => this.handleOnMouseLeave()}
> >
{this.props.text || this.props.children} {text || children}
</button> </button>
); );
} }

349
app/javascript/gabsocial/components/header.js
View File

@ -1,23 +1,23 @@
import { Link, NavLink } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl'
import classNames from 'classnames'; import classNames from 'classnames/bind'
import Avatar from './avatar'; import Avatar from './avatar'
import IconButton from './icon_button'; import Button from './button'
import Icon from './icon'; import Icon from './icon'
import DisplayName from './display_name'; import DisplayName from './display_name'
import { closeSidebar } from '../actions/sidebar'; import { closeSidebar } from '../actions/sidebar'
import { shortNumberFormat } from '../utils/numbers'; import { shortNumberFormat } from '../utils/numbers'
import { me } from '../initial_state'; import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'; import { makeGetAccount } from '../selectors'
import ProgressPanel from './progress_panel'; // import ProgressPanel from './progress_panel'
import GabLogo from './assets/gab_logo'; import GabLogo from './assets/gab_logo'
import { import {
GroupIcon, GroupIcon,
HomeIcon, HomeIcon,
NotificationsIcon, NotificationsIcon,
} from './assets/tabs_bar_icon'; } from './assets/tabs_bar_icon'
const messages = defineMessages({ const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' }, followers: { id: 'account.followers', defaultMessage: 'Followers' },
@ -41,19 +41,19 @@ const messages = defineMessages({
}) })
const mapStateToProps = state => { const mapStateToProps = state => {
const getAccount = makeGetAccount(); const getAccount = makeGetAccount()
return { return {
account: getAccount(state, me), account: getAccount(state, me),
sidebarOpen: state.get('sidebar').sidebarOpen, sidebarOpen: state.get('sidebar').sidebarOpen,
}; }
}; }
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
onClose() { onClose() {
dispatch(closeSidebar()); dispatch(closeSidebar())
}, },
}); })
export default @connect(mapStateToProps, mapDispatchToProps) export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
@ -64,50 +64,65 @@ class Header extends ImmutablePureComponent {
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
sidebarOpen: PropTypes.bool, sidebarOpen: PropTypes.bool,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; }
state = { state = {
moreOpen: false, moreOpen: false,
hoveringItemIndex: null,
} }
componentDidUpdate() { componentDidUpdate() {
if (!me) return; if (!me) return
if (this.props.sidebarOpen) { if (this.props.sidebarOpen) {
document.body.classList.add('with-modals--active'); document.body.classList.add('with-modals--active')
} else { } else {
document.body.classList.remove('with-modals--active'); document.body.classList.remove('with-modals--active')
} }
} }
toggleMore = () => { toggleMore = () => {
this.setState({ this.setState({
moreOpen: !this.state.moreOpen moreOpen: !this.state.moreOpen
}); })
}
onMouseEnterLinkFooterItem = (i) => {
this.setState({
hoveringItemIndex: i,
})
}
onMouseLeaveLinkFooterItem = () => {
this.setState({
hoveringItemIndex: null,
})
} }
handleSidebarClose = () => { handleSidebarClose = () => {
this.props.onClose(); this.props.onClose()
this.setState({ this.setState({
moreOpen: false, moreOpen: false,
}); })
} }
render() { render() {
const { sidebarOpen, intl, account } = this.props; const { sidebarOpen, intl, account } = this.props
const { moreOpen } = this.state; const { moreOpen, hoveringItemIndex } = this.state
if (!me || !account) return null; if (!me || !account) return null
const acct = account.get('acct'); const acct = account.get('acct')
const isPro = account.get('is_pro'); const isPro = account.get('is_pro')
const classes = classNames('sidebar-menu__root', { // const classes = classNames('sidebar-menu__root', {
'sidebar-menu__root--visible': sidebarOpen, // 'sidebar-menu__root--visible': sidebarOpen,
}); // })
const moreIcon = moreOpen ? 'minus' : 'plus'; const cx = classNames.bind(styles)
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' };
const moreIcon = moreOpen ? 'minus' : 'plus'
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
const sidebarItems = [ const sidebarItems = [
{ {
@ -145,13 +160,13 @@ class Header extends ImmutablePureComponent {
icon: <NotificationsIcon />, icon: <NotificationsIcon />,
to: '/', to: '/',
}, },
]; ]
return ( return (
<header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}> <header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}>
<div className={[styles.default, styles.width275PX].join(' ')}> <div className={[styles.default, styles.width250PX].join(' ')}>
<div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}> <div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}>
<div className={[styles.default, styles.height100PC, styles.width275PX, styles.paddingHorizontal20PX].join(' ')}> <div className={[styles.default, styles.height100PC, styles.width250PX, styles.paddingHorizontal20PX].join(' ')}>
<h1 className={[styles.default].join(' ')}> <h1 className={[styles.default].join(' ')}>
<NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHoizontal10PX].join(' ')}> <NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHoizontal10PX].join(' ')}>
<GabLogo /> <GabLogo />
@ -160,14 +175,45 @@ class Header extends ImmutablePureComponent {
<nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC].join(' ')}> <nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC].join(' ')}>
{ {
sidebarItems.map((sidebarItem, i) => { sidebarItems.map((sidebarItem, i) => {
const containerClasses = cx({
default: 1,
maxWidth100PC: 1,
flexRow: 1,
paddingVertical10PX: 1,
paddingHoizontal10PX: 1,
circle: 1,
alignItemsCenter: 1,
backgroundColorBrandLightOpaque: hoveringItemIndex === i,
})
const textClasses = cx({
default: 1,
fontWeightBold: 1,
fontSize19PX: 1,
text: 1,
colorBrand: hoveringItemIndex === i,
colorBlack: hoveringItemIndex !== i,
})
const iconClasses = cx({
fillColorBrand: hoveringItemIndex === i,
fillColorBlack: hoveringItemIndex !== i,
})
return ( return (
<NavLink to={sidebarItem.to} key={`header-nav-item-${i}`} className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}> <NavLink
<div className={[styles.default, styles.maxWidth100PC, styles.flexRow, styles.paddingVertical10PX, styles.paddingHoizontal10PX, styles.circle, styles.alignItemsCenter].join(' ')}> to={sidebarItem.to}
key={`header-nav-item-${i}`}
onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}
>
<div className={containerClasses}>
<div className={[styles.default]}> <div className={[styles.default]}>
{sidebarItem.icon} <NotificationsIcon className={iconClasses}/>
</div> </div>
<div className={[styles.default, styles.paddingHorizontal20PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}> <div className={[styles.default, styles.paddingHorizontal20PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
<span className={[styles.default, styles.fontWeightBold, styles.fontSize19PX, styles.text].join(' ')}> <span className={textClasses}>
{sidebarItem.name} {sidebarItem.name}
</span> </span>
</div> </div>
@ -177,128 +223,129 @@ class Header extends ImmutablePureComponent {
}) })
} }
</nav> </nav>
<Button className={[styles.paddingVertical15PX, styles.marginVertical5PX, styles.fontSize15PX, styles.fontWeightBold].join(' ')}>Gab</Button>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
) )
return ( // return (
<div className={classes}> // <div className={classes}>
<div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} /> // <div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
<div className='sidebar-menu'> // <div className='sidebar-menu'>
<div className='sidebar-menu-header'> // <div className='sidebar-menu-header'>
<span className='sidebar-menu-header__title'>Account Info</span> // <span className='sidebar-menu-header__title'>Account Info</span>
<IconButton title='close' onClick={this.handleSidebarClose} icon='close' className='sidebar-menu-header__btn' /> // <IconButton title='close' onClick={this.handleSidebarClose} icon='close' className='sidebar-menu-header__btn' />
</div> // </div>
<div className='sidebar-menu__content'> // <div className='sidebar-menu__content'>
<div className='sidebar-menu-profile'> // <div className='sidebar-menu-profile'>
<div className='sidebar-menu-profile__avatar'> // <div className='sidebar-menu-profile__avatar'>
<Link to={`/${acct}`} title={acct} onClick={this.handleSidebarClose}> // <Link to={`/${acct}`} title={acct} onClick={this.handleSidebarClose}>
<Avatar account={account} /> // <Avatar account={account} />
</Link> // </Link>
</div> // </div>
<div className='sidebar-menu-profile__name'> // <div className='sidebar-menu-profile__name'>
<DisplayName account={account} /> // <DisplayName account={account} />
</div> // </div>
<div className='sidebar-menu-profile__stats'> // <div className='sidebar-menu-profile__stats'>
<NavLink className='sidebar-menu-profile-stat' to={`/${acct}/followers`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('followers_count'))}> // <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/followers`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('followers_count'))}>
<strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('followers_count'))}</strong> // <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
<span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.followers)}</span> // <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.followers)}</span>
</NavLink> // </NavLink>
<NavLink className='sidebar-menu-profile-stat' to={`/${acct}/following`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('following_count'))}> // <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/following`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('following_count'))}>
<strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('following_count'))}</strong> // <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('following_count'))}</strong>
<span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.follows)}</span> // <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.follows)}</span>
</NavLink> // </NavLink>
</div> // </div>
</div> // </div>
<div className='sidebar-menu__section'> // <div className='sidebar-menu__section'>
<ProgressPanel /> // { /* <ProgressPanel /> */ }
</div> // </div>
<div className='sidebar-menu__section sidebar-menu__section--borderless'> // <div className='sidebar-menu__section sidebar-menu__section--borderless'>
<NavLink className='sidebar-menu-item' to={`/${acct}`} onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to={`/${acct}`} onClick={this.handleSidebarClose}>
<Icon id='user' fixedWidth /> // <Icon id='user' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>
</NavLink> // </NavLink>
{ // {
!isPro && // !isPro &&
<a className='sidebar-menu-item' href='https://pro.gab.com'> // <a className='sidebar-menu-item' href='https://pro.gab.com'>
<Icon id='arrow-up' fixedWidth /> // <Icon id='arrow-up' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.pro)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.pro)}</span>
</a> // </a>
} // }
<a className='sidebar-menu-item' href='https://shop.dissenter.com/category/donations'> // <a className='sidebar-menu-item' href='https://shop.dissenter.com/category/donations'>
<Icon id='heart' fixedWidth /> // <Icon id='heart' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
</a> // </a>
<a className='sidebar-menu-item' href='https://shop.dissenter.com'> // <a className='sidebar-menu-item' href='https://shop.dissenter.com'>
<Icon id='shopping-cart' fixedWidth /> // <Icon id='shopping-cart' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
</a> // </a>
<a className='sidebar-menu-item' href='https://trends.gab.com'> // <a className='sidebar-menu-item' href='https://trends.gab.com'>
<Icon id='signal' fixedWidth /> // <Icon id='signal' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span>
</a> // </a>
<NavLink className='sidebar-menu-item' to='/search' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/search' onClick={this.handleSidebarClose}>
<Icon id='search' fixedWidth /> // <Icon id='search' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span>
</NavLink> // </NavLink>
<a className='sidebar-menu-item' href='/settings/preferences'> // <a className='sidebar-menu-item' href='/settings/preferences'>
<Icon id='cog' fixedWidth /> // <Icon id='cog' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
</a> // </a>
</div> // </div>
<div className='sidebar-menu__section'> // <div className='sidebar-menu__section'>
<div className='sidebar-menu-item' onClick={this.toggleMore} role='button'> // <div className='sidebar-menu-item' onClick={this.toggleMore} role='button'>
<Icon id={moreIcon} fixedWidth /> // <Icon id={moreIcon} fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.more)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.more)}</span>
</div> // </div>
<div style={moreContainerStyle}> // <div style={moreContainerStyle}>
<NavLink className='sidebar-menu-item' to='/lists' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/lists' onClick={this.handleSidebarClose}>
<Icon id='list' fixedWidth /> // <Icon id='list' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.lists)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.lists)}</span>
</NavLink> // </NavLink>
<NavLink className='sidebar-menu-item' to='/follow_requests' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/follow_requests' onClick={this.handleSidebarClose}>
<Icon id='user-plus' fixedWidth /> // <Icon id='user-plus' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.follow_requests)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.follow_requests)}</span>
</NavLink> // </NavLink>
<NavLink className='sidebar-menu-item' to='/blocks' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/blocks' onClick={this.handleSidebarClose}>
<Icon id='ban' fixedWidth /> // <Icon id='ban' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.blocks)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.blocks)}</span>
</NavLink> // </NavLink>
<NavLink className='sidebar-menu-item' to='/domain_blocks' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/domain_blocks' onClick={this.handleSidebarClose}>
<Icon id='sitemap' fixedWidth /> // <Icon id='sitemap' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.domain_blocks)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.domain_blocks)}</span>
</NavLink> // </NavLink>
<NavLink className='sidebar-menu-item' to='/mutes' onClick={this.handleSidebarClose}> // <NavLink className='sidebar-menu-item' to='/mutes' onClick={this.handleSidebarClose}>
<Icon id='times-circle' fixedWidth /> // <Icon id='times-circle' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.mutes)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.mutes)}</span>
</NavLink> // </NavLink>
<a className='sidebar-menu-item' href='/filters'> // <a className='sidebar-menu-item' href='/filters'>
<Icon id='filter' fixedWidth /> // <Icon id='filter' fixedWidth />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
</a> // </a>
</div> // </div>
</div> // </div>
<div className='sidebar-menu__section'> // <div className='sidebar-menu__section'>
<a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'> // <a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span> // <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
</a> // </a>
</div> // </div>
</div> // </div>
</div> // </div>
</div> // </div>
); // )
} }
} }

32
app/javascript/gabsocial/components/icon/icon.js
View File

@ -6,18 +6,36 @@ export default class Icon extends PureComponent {
static propTypes = { static propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
className: PropTypes.string, className: PropTypes.string,
fixedWidth: PropTypes.bool, width: PropTypes.string,
height: PropTypes.string,
};
static defaultProps = {
width: '26px',
height: '26px',
}; };
render () { render () {
const { id, className, fixedWidth, ...other } = this.props; const { className, width, height } = this.props;
const classes = classNames('fa', `fa-${id}`, className, {
'fa-fw': fixedWidth,
});
return ( return (
<i role='img' alt={id} className={classes} {...other} /> <svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
x='0px'
y='0px'
width={width}
height={height}
viewBox='0 0 48 48'
xmlSpace='preserve'
>
<g>
<path d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
<path d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
<path d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
</g>
</svg>
); );
} }

40
app/javascript/gabsocial/components/link_footer.js
View File

@ -1,12 +1,12 @@
import moment from 'moment' import moment from 'moment'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import { import {
FormattedMessage,
defineMessages, defineMessages,
injectIntl, injectIntl,
} from 'react-intl' } from 'react-intl'
import { openModal } from '../actions/modal' import { openModal } from '../actions/modal'
import { import {
version,
repository, repository,
source_url, source_url,
me, me,
@ -23,7 +23,6 @@ const messages = defineMessages({
terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' }, terms: { id: 'getting_started.terms_of_sale', defaultMessage: 'Terms of Sale' },
privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' }, privacy: { id: 'getting_started.privacy', defaultMessage: 'Privacy Policy' },
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
notice: { id: 'getting_started.open_source_notice', defaultMessage: 'Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.' },
}) })
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
@ -61,7 +60,7 @@ class LinkFooter extends PureComponent {
const { onOpenHotkeys, intl } = this.props const { onOpenHotkeys, intl } = this.props
const { hoveringItemIndex } = this.state const { hoveringItemIndex } = this.state
const cx = classNames.bind(styles); const cx = classNames.bind(styles)
const currentYear = moment().format('YYYY') const currentYear = moment().format('YYYY')
@ -121,17 +120,33 @@ class LinkFooter extends PureComponent {
text: 1, text: 1,
marginVertical5PX: 1, marginVertical5PX: 1,
paddingRight15PX: 1, paddingRight15PX: 1,
cursorPointer: 1,
colorSubtle: i !== hoveringItemIndex, colorSubtle: i !== hoveringItemIndex,
noUnderline: i !== hoveringItemIndex, noUnderline: i !== hoveringItemIndex,
colorBlack: i === hoveringItemIndex, colorBlack: i === hoveringItemIndex,
underline: i === hoveringItemIndex, underline: i === hoveringItemIndex,
}) })
if (linkFooterItem.onClick) {
return (
<button
key={`link-footer-item-${i}`}
data-method={linkFooterItem.logout ? 'delete' : null}
onClick={linkFooterItem.onClick || null}
onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
className={classes}
>
{linkFooterItem.text}
</button>
)
}
return ( return (
<a <a
key={`link-footer-item-${i}`} key={`link-footer-item-${i}`}
href={linkFooterItem.to} href={linkFooterItem.to}
data-method={linkFooterItem.logout ? 'delete' : null} data-method={linkFooterItem.logout ? 'delete' : null}
onClick={linkFooterItem.onClick || null}
onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)} onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)} onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
className={classes} className={classes}
@ -141,19 +156,16 @@ class LinkFooter extends PureComponent {
) )
}) })
} }
<span className={[styles.default, styles.text, styles.fontSize13PX, styles.colorSubtle, styles.marginVertical5PX].join(' ')}>© {currentYear} Gab AI, Inc.</span>
</nav> </nav>
<p> <p className={[styles.default, styles.text, styles.fontSize13PX, styles.colorSubtle, styles.marginTop10PX].join(' ')}>
{intl.formatMessage(messages.invite, { <FormattedMessage
gitlab: ( id='getting_started.open_source_notice'
<span> defaultMessage='Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.'
<a href={source_url} rel='noopener' target='_blank'>{repository}</a> values={{ gitlab: <a href={source_url} className={[styles.inherit].join(' ')} rel='noopener' target='_blank'>{repository}</a> }}
(v{version}) />
</span>
)
})}
</p> </p>
<p>© {currentYear} Gab AI Inc.</p>
</div> </div>
) )
} }

14
app/javascript/gabsocial/components/page_layout.js
View File

@ -3,24 +3,24 @@ import Header from './header'
export default class PageLayout extends PureComponent { export default class PageLayout extends PureComponent {
static propTypes = { static propTypes = {
layout: PropTypes.object, layout: PropTypes.object,
}; }
render() { render() {
const { children, layout } = this.props; const { children, layout } = this.props
const right = layout.RIGHT || null; const right = layout.RIGHT || null
return ( return (
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.height100PC].join(' ')}> <div className={[styles.default, styles.flexRow, styles.width100PC].join(' ')}>
<Header /> <Header />
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.flexRow].join(' ')}> <main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.flexRow].join(' ')}>
<div className={[styles.default, styles.width990PX, styles.flexRow].join(' ')}> <div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
<div className={[styles.default, styles.width600PX, styles.z1].join(' ')}> <div className={[styles.default, styles.width660PX, styles.z1, styles.borderColorSubtle, styles.borderLeft1PX, styles.borderRight1PX].join(' ')}>
<div className={styles.default}> <div className={styles.default}>
{children} {children}
</div> </div>
</div> </div>
<div className={[styles.default, styles.width350PX].join(' ')}> <div className={[styles.default, styles.width325PX].join(' ')}>
<div className={styles.default}> <div className={styles.default}>
{right} {right}
</div> </div>

130
app/javascript/gabsocial/components/panel/panel.scss
View File

@ -1,130 +0,0 @@
.panel {
display: flex;
border-radius: 10px;
flex-direction: column;
box-sizing: border-box;
background: $gab-background-container;
@include size(100%, auto);
body.theme-gabsocial-light & {
// @include light-theme-shadow();
background: $gab-background-container-light;
}
&:not(:last-of-type) {
margin-bottom: 10px;
}
&__content {
width: 100%;
padding-top: 8px;
}
&__list {
padding: 0 5px;
}
&__subtitle {
display: block;
padding: 0 15px;
color: $secondary-text-color;
}
&__form {
display: block;
padding: 15px;
&.button {
width: 100%;
}
}
.wtf-panel-list-item {
display: block;
padding-bottom: 10px;
&:not(:first-of-type) {
margin-top: 12px;
}
&:not(:last-of-type) {
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
&__content {
display: flex;
flex-direction: row;
min-height: 46px;
margin-left: 58px;
}
&__account-block {
display: flex;
position: relative;
align-items: baseline;
padding-right: 10px;
&__avatar {
background-color: red;
left: -58px;
position: absolute;
@include size(46px);
}
&__name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 6px;
&__name {
color: $primary-text-color;
margin-bottom: 2px;
max-height: 32px; //2 lines of text
overflow: hidden;
@include text-sizing(14px, 700, 16px);
}
&__username {
color: $lighter-text-color;
@include text-sizing(12px, 400, 14px);
}
}
}
&__follow-block {
margin-left: auto;
padding-top: 6px;
&__button {
display: flex;
}
&__icon {
color: $primary-text-color;
}
}
}
}
.panel-header {
display: flex;
align-items: baseline;
margin-bottom: 10px;
padding: 15px 15px 0 15px;
&__icon {
margin-right: 10px;
}
&__title {
flex: 1 1;
color: $primary-text-color;
@include text-sizing(16px, 700, 19px);
}
}

36
app/javascript/gabsocial/components/panel/panel_layout.js
View File

@ -1,26 +1,34 @@
import './panel.scss'; import classNames from 'classnames/bind'
import Icon from '../icon'
export default class PanelLayout extends PureComponent { export default class PanelLayout extends PureComponent {
static propTypes = { static propTypes = {
title: PropTypes.string, title: PropTypes.string,
subtitle: PropTypes.string,
icon: PropTypes.string, icon: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
}; hasBackground: PropTypes.boolean,
}
render() { render() {
const {title, icon, children} = this.props; const { title, subtitle, icon, hasBackground, children } = this.props
return ( return (
<div className='panel'> <aside className={[styles.default, styles.backgroundSubtle, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX].join(' ')}>
<div className='panel-header'> {
{icon && <Icon id={icon} className='panel-header__icon' />} (title || subtitle) &&
<span className='panel-header__title'>{title}</span> <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderBottom1PX].join(' ')}>
</div> <div className={[styles.default, styles.flexRow, styles.alignItemsCenter].join(' ')}>
<div className='panel__content'> {icon && <Icon id={icon} height='16px' width='16px' className={[styles.default, styles.marginRight10PX].join(' ')} />}
<span className={[styles.default, styles.text, styles.fontWeightExtraBold, styles.colorBlack, styles.fontSize19PX].join(' ')}>{title}</span>
</div>
{subtitle && <span className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.marginTop5PX].join(' ')}>{subtitle}</span>}
</div>
}
<div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
{children} {children}
</div> </div>
</div> </aside>
); )
}; }
}
};

20
app/javascript/gabsocial/components/panel/progress_panel.js Normal file
View File

@ -0,0 +1,20 @@
import { me, monthlyExpensesComplete } from '../../initial_state'
import PanelLayout from './panel_layout';
import ProgressBar from '../progress_bar'
export default class ProgressPanel extends PureComponent {
render() {
if (!monthlyExpensesComplete || !me) return null
return (
<PanelLayout
title="Gab's Operational Expenses"
subtitle="We are 100% funded by you"
icon="comments"
hasBackground
>
<ProgressBar progress={monthlyExpensesComplete}/>
</PanelLayout>
)
}
}

85
app/javascript/gabsocial/components/panel/promo_panel.js Normal file
View File

@ -0,0 +1,85 @@
import { injectIntl, defineMessages } from 'react-intl'
import classNames from 'classnames/bind'
import { me } from '../../initial_state';
import Icon from '../icon'
import PanelLayout from './panel_layout'
const messages = defineMessages({
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
})
const mapStateToProps = state => {
return {
isPro: state.getIn(['accounts', me, 'is_pro']),
};
};
export default
@injectIntl
@connect(mapStateToProps)
class PromoPanel extends PureComponent {
static propTypes = {
isPro: PropTypes.bool,
intl: PropTypes.object.isRequired,
}
render() {
const { isPro, intl } = this.props
const cx = classNames.bind(styles)
const items = [
{
text: intl.formatMessage(messages.pro),
href: 'https://pro.gab.com',
icon: 'arrow-up',
conditions: isPro,
highlighted: true,
},
{
text: intl.formatMessage(messages.donation),
href: 'https://shop.dissenter.com/category/donations',
icon: 'heart',
},
{
text: intl.formatMessage(messages.store),
href: 'https://shop.dissenter.com',
icon: 'shopping-cart',
},
{
text: intl.formatMessage(messages.apps),
href: 'https://apps.gab.com',
icon: 'th',
}
]
return (
<PanelLayout>
{
items.map((item, i) => {
if (item.conditions === false) return null
const classes = cx({
default: true,
borderColorSubtle: i !== items.length - 1,
borderBottom1PX: i !== items.length - 1,
})
return (
<div key={`promo-panel-item-${i}`} className={classes}>
<a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
<Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
{item.text}
</a>
</div>
)
})
}
</PanelLayout>
)
}
}

26
app/javascript/gabsocial/components/panel/sign_up_panel.js
View File

@ -1,12 +1,13 @@
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl'
import { me } from '../../initial_state'; import { me } from '../../initial_state'
import PanelLayout from './panel_layout'; import Button from '../button'
import PanelLayout from './panel_layout'
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'signup_panel.title', defaultMessage: 'New to Gab?' }, title: { id: 'signup_panel.title', defaultMessage: 'New to Gab?' },
subtitle: { id: 'signup_panel.subtitle', defaultMessage: 'Sign up now to speak freely.' }, subtitle: { id: 'signup_panel.subtitle', defaultMessage: 'Sign up now to speak freely.' },
register: { id: 'account.register', defaultMessage: 'Sign up?' }, register: { id: 'account.register', defaultMessage: 'Sign up' },
}); })
export default @injectIntl export default @injectIntl
class SignUpPanel extends PureComponent { class SignUpPanel extends PureComponent {
@ -15,16 +16,17 @@ class SignUpPanel extends PureComponent {
} }
render() { render() {
if (me) return null; // : TESTING :
if (!me) return null
const { intl } = this.props; const { intl } = this.props
return ( return (
<PanelLayout title={intl.formatMessage(messages.title)}> <PanelLayout
<span className='panel__subtitle'>{intl.formatMessage(messages.subtitle)}</span> title={intl.formatMessage(messages.title)}
<div className='panel__form'> subtitle={intl.formatMessage(messages.subtitle)}
<a className='button' href="/auth/sign_up">{intl.formateMessage(messages.register)}</a> >
</div> <Button href="/auth/sign_up">{intl.formatMessage(messages.register)}</Button>
</PanelLayout> </PanelLayout>
) )
} }

18
app/javascript/gabsocial/components/permalink/permalink.js
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'; import classNames from 'classnames';
export default class Permalink extends PureComponent { export default class Permalink extends PureComponent {
@ -9,30 +9,26 @@ export default class Permalink extends PureComponent {
static propTypes = { static propTypes = {
className: PropTypes.string, className: PropTypes.string,
href: PropTypes.string.isRequired, href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node, children: PropTypes.node,
onInterceptClick: PropTypes.func, blank: PropTypes.boolean,
button: PropTypes.boolean,
}; };
handleClick = e => { handleClick = e => {
if (this.props.onInterceptClick && this.props.onInterceptClick()) {
e.preventDefault();
return;
}
if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) { if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault(); e.preventDefault();
this.context.router.history.push(this.props.to); this.context.router.history.push(this.props.href);
} }
} }
render () { render () {
const { href, children, className, onInterceptClick, ...other } = this.props; const { href, children, className, blank, ...other } = this.props;
const classes = classNames('permalink', className); const classes = classNames('permalink', className);
const target = blank ? '_blank' : null;
return ( return (
<a target='_blank' href={href} onClick={this.handleClick} className={classes} {...other}> <a target={target} href={href} onClick={this.handleClick} className={classes} {...other}>
{children} {children}
</a> </a>
); );

1
app/javascript/gabsocial/components/progress_bar/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './progress_bar';

21
app/javascript/gabsocial/components/progress_bar/progress_bar.js Normal file
View File

@ -0,0 +1,21 @@
export default class ProgressBar extends PureComponent {
static propTypes = {
progress: PropTypes.number,
}
render() {
const { progress } = this.props
const completed = Math.min(parseFloat(progress), 100)
const style = {
width: `${completed}%`,
}
return (
<a href='https://shop.dissenter.com/category/donations' className={[styles.default, styles.backgroundPanel, styles.noUnderline, styles.circle, styles.overflowHidden, styles.height22PX, styles.cursorPointer].join(' ')}>
<div className={[styles.default, styles.backgroundColorBrandDark, styles.circle, styles.height22PX].join(' ')} style={style} />
<span className={[styles.default, styles.text, styles.width100PC, styles.textAlignCenter, styles.colorWhite, styles.fontSize13PX, styles.positionAbsolute, styles.fontWeightBold, styles.displayFlex, styles.height100PC, styles.justifyContentCenter].join(' ')}>{completed}% covered this month</span>
</a>
)
}
}

1
app/javascript/gabsocial/components/progress_panel/index.js
View File

@ -1 +0,0 @@
export { default } from './progress_panel';

28
app/javascript/gabsocial/components/progress_panel/progress_panel.js
View File

@ -1,28 +0,0 @@
import { monthlyExpensesComplete } from '../../initial_state';
export default class ProgressPanel extends PureComponent {
render() {
if (!monthlyExpensesComplete) return null;
const completed = Math.min(monthlyExpensesComplete, 100);
const style = {
width: `${completed}%`,
};
return (
<div className='wtf-panel progress-panel'>
<div className='wtf-panel-header progress-panel-header'>
<div className='wtf-panel-header__label'>Gab's Operational Expenses</div>
</div>
<div className='wtf-panel__content progress-panel__content'>
<span className='progress-panel__text'>We are 100% funded by you.</span>
<div className='progress-panel__bar-container'>
<a className='progress-panel__bar' style={style} href='https://shop.dissenter.com/category/donations'>
<span className='progress-panel__bar__text'>{completed}% covered this month</span>
</a>
</div>
</div>
</div>
)
}
}

1
app/javascript/gabsocial/components/promo_panel/index.js
View File

@ -1 +0,0 @@
export { default } from './promo_panel';

43
app/javascript/gabsocial/components/promo_panel/promo_panel.js
View File

@ -1,43 +0,0 @@
import { FormattedMessage } from 'react-intl';
import Icon from '../icon';
import './promo_panel.scss';
export default class PromoPanel extends PureComponent {
render() {
return (
<div className='promo-panel'>
<div className='promo-panel__container'>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='https://invest.gab.com'>
<Icon id='check-circle' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.invest_heading' defaultMessage='Invest in Gab' />
</a>
<p className='promo-panel-item__message'>
<FormattedMessage
id='promo.invest_message'
defaultMessage='Learn more about investing in Gab and our vision for the future.'
/>
</p>
</div>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn button button-alternative-2' href='/invites'>
<Icon id='envelope' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.invite_heading' defaultMessage='Invite Friends' />
</a>
<p className='promo-panel-item__message promo-panel-item__message--dark'>
<FormattedMessage
id='promo.invite_message'
defaultMessage='Invite others to be a member of Gab.'
/>
</p>
</div>
</div>
</div>
);
}
}

29
app/javascript/gabsocial/components/promo_panel/promo_panel.scss
View File

@ -1,29 +0,0 @@
.promo-panel {
margin-top: 10px;
padding: 10px 10px 20px 10px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
}
.promo-panel-item {
display: block;
&:not(:first-of-type) {
margin-top: 20px;
}
&__icon {
margin-right: 12px;
}
&__message {
display: block;
margin-top: 6px;
color: $primary-text-color;
@include text-sizing(14px, 400, 16px);
&--dark {
color: $ui-secondary-color;
}
}
}

19
app/javascript/gabsocial/pages/home_page.js
View File

@ -1,7 +1,11 @@
import { Fragment } from 'react'; import { Fragment } from 'react';
// import GroupSidebarPanel from '../features/groups/sidebar_panel'; import GroupSidebarPanel from '../features/groups/sidebar_panel';
import LinkFooter from '../components/link_footer'; import LinkFooter from '../components/link_footer';
// import PromoPanel from '../components/promo_panel'; import PromoPanel from '../components/panel/promo_panel';
import SignUpPanel from '../components/panel/sign_up_panel';
import WhoToFollowPanel from '../components/panel/who_to_follow_panel';
import TrendsPanel from '../components/panel/trends_panel';
import ProgressPanel from '../components/panel/progress_panel';
// import UserPanel from '../components/user_panel'; // import UserPanel from '../components/user_panel';
import PageLayout from '../components/page_layout'; import PageLayout from '../components/page_layout';
// import TimelineComposeBlock from '../components/timeline_compose_block'; // import TimelineComposeBlock from '../components/timeline_compose_block';
@ -15,15 +19,20 @@ export default class HomePage extends PureComponent {
layout={{ layout={{
RIGHT: ( RIGHT: (
<Fragment> <Fragment>
{/*<GroupSidebarPanel />*/} { /* <SearchInput /> */ }
{/*<PromoPanel />*/} { /* <GroupSidebarPanel /> */ }
<PromoPanel />
<SignUpPanel />
{ /* <WhoToFollowPanel /> */ }
{ /* <TrendsPanel /> */ }
<ProgressPanel />
<LinkFooter /> <LinkFooter />
</Fragment> </Fragment>
), ),
}} }}
> >
{/*<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />*/} {/*<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />*/}
{/*children*/} { /* children */ }
</PageLayout> </PageLayout>
) )
} }

59
app/javascript/styles/global.css
View File

@ -30,6 +30,10 @@ body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
} }
.font {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}
.wrap { .wrap {
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
@ -77,12 +81,19 @@ body {
} }
.circle { border-radius: 9999px; } .circle { border-radius: 9999px; }
.radiusSmall { border-radius: 4px; }
.borderColorSubtle { border-color: #e4e4e4; }
.borderRight1PX { border-right-width: 1px; }
.borderBottom1PX { border-bottom-width: 1px; }
.borderLeft1PX { border-left-width: 1px; }
.marginAuto { margin: auto; } .marginAuto { margin: auto; }
.displayNone { display: none; } .displayNone { display: none; }
.displayBlock { display: block; } .displayBlock { display: block; }
.displayInline { display: inline; } .displayInline { display: inline; }
.displayFlex { display: flex !important; }
.displayInlineBlock { display: inline-block; } .displayInlineBlock { display: inline-block; }
.cursorPointer { cursor: pointer } .cursorPointer { cursor: pointer }
@ -90,10 +101,18 @@ body {
.pointerEventsAuto > * { pointer-events: auto;} .pointerEventsAuto > * { pointer-events: auto;}
.pointerEventsNone { pointer-events: none !important; } .pointerEventsNone { pointer-events: none !important; }
.backgroundPanel { background-color: #aaa; }
.backgroundSubtle { background-color: #F5F8FA; }
.backgroundWhite { background-color: #fff; } .backgroundWhite { background-color: #fff; }
.backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
.backgroundColorBrandLight { background-color: #36e991; }
.backgroundColorBrand { background-color: #21cf7a; }
.backgroundColorBrandDark { background-color: #38A16B; }
.colorBlack { color: #000; } .colorBlack { color: #000; }
.colorWhite { color: #fff; }
.colorSubtle { color: #666; } .colorSubtle { color: #666; }
.colorBrand { color: rgb(29, 161, 242); } .colorBrand { color: #21cf7a }
.fillColorBlack { fill: #000; }
.fillColorBrand { fill: #21cf7a; } .fillColorBrand { fill: #21cf7a; }
.bottom0 { bottom: 0; } .bottom0 { bottom: 0; }
@ -110,14 +129,16 @@ body {
.noSelect { user-select: none; } .noSelect { user-select: none; }
.height100VH { height: 100vh; }
.height100PC { height: 100%; } .height100PC { height: 100%; }
.height50PX { height: 50px; } .height50PX { height: 50px; }
.height72PX { height: 72px; } .height72PX { height: 72px; }
.height22PX { height: 22px; }
.width990PX { width: 990px; } .width1015PX { width: 1015px; }
.width600PX { width: 600px; } .width660PX { width: 660px; }
.width350PX { width: 350px; } .width325PX { width: 325px; }
.width275PX { width: 275px; } .width250PX { width: 250px; }
.width100PC { width: 100%; } .width100PC { width: 100%; }
.width72PX { width: 72px; } .width72PX { width: 72px; }
.maxWidth100PC { max-width: 100%; } .maxWidth100PC { max-width: 100%; }
@ -128,10 +149,12 @@ body {
.textAlignCenter { text-align: center; } .textAlignCenter { text-align: center; }
.fontSize19PX { font-size: 19px; } .fontSize19PX { font-size: 19px; }
.fontSize15PX { font-size: 15px; }
.fontSize13PX { font-size: 13px; } .fontSize13PX { font-size: 13px; }
.fontWeightNormal { font-weight: 400; } .fontWeightNormal { font-weight: 400; }
.fontWeightBold { font-weight: 600; } .fontWeightBold { font-weight: 600; }
.fontWeightExtraBold { font-weight: 800; }
.noUnderline { text-decoration: none; } .noUnderline { text-decoration: none; }
.underline { text-decoration: underline; } .underline { text-decoration: underline; }
@ -140,16 +163,38 @@ body {
.z2 { z-index: 2; } .z2 { z-index: 2; }
.z3 { z-index: 3; } .z3 { z-index: 3; }
.marginRight10PX { margin-right: 10px; }
.marginVertical5PX { .marginVertical5PX {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.marginVertical10PX {
margin-top: 10px;
margin-bottom: 10px;
}
.marginBottom15PX { margin-bottom: 15px; }
.marginTop10PX { margin-top: 10px; }
.marginTop5PX { margin-top: 5px; }
.paddingHorizontal15PX {
padding-left: 15px;
padding-right: 15px;
}
.paddingRight15PX { padding-right: 15px; }
.paddingVertical10PX { .paddingVertical10PX {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.paddingVertical15PX {
padding-top: 15px;
padding-bottom: 15px;
}
.paddingHoizontal10PX { .paddingHoizontal10PX {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -159,7 +204,3 @@ body {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.paddingRight15PX {
padding-right: 15px;
}

2
app/views/about/show.html.haml
View File

@ -10,7 +10,7 @@
.landing-columns--left .landing-columns--left
.landing__brand .landing__brand
= link_to root_url, class: 'brand' do = link_to root_url, class: 'brand' do
= image_pack_tag 'gab_logo.svg', alt: 'Gab Social' -# = image_pack_tag 'gab_logo.svg', alt: 'Gab Social'
%span.brand__tagline=t 'about.tagline' %span.brand__tagline=t 'about.tagline'
.landing-columns--right .landing-columns--right

2
app/views/layouts/public.html.haml
View File

@ -9,7 +9,7 @@
.header-container .header-container
.nav-left .nav-left
= link_to root_url, class: 'brand' do = link_to root_url, class: 'brand' do
= image_pack_tag 'gab_logo.svg', alt: 'Gab Social' -# = image_pack_tag 'gab_logo.svg', alt: 'Gab Social'
= link_to t('home'), root_url, class: 'nav-link optional' = link_to t('home'), root_url, class: 'nav-link optional'
= link_to t('about.about_this'), about_path, class: 'nav-link' = link_to t('about.about_this'), about_path, class: 'nav-link'
= link_to 'Apps', 'https://apps.gab.com', class: 'nav-link' = link_to 'Apps', 'https://apps.gab.com', class: 'nav-link'