Progress
This commit is contained in:
mgabdev
parent
960c43d24c
commit
1cd851e02e
@ -3,7 +3,7 @@
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
width: 350px;
|
||||
// width: 350px;
|
||||
flex: 1 1 100%;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ export default class ColumnSettingsHeading extends PureComponent {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { heading } = this.props;
|
||||
const { heading, id } = this.props;
|
||||
|
||||
return (
|
||||
<span id={id} className='column-settings-heading'>{heading}</span>
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
import './columns_area.scss';
|
||||
|
||||
export default class ColumnsArea extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
layout: PropTypes.object,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const layout = this.props.layout || {LEFT:null,RIGHT:null};
|
||||
|
||||
console.log("layout:", layout);
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
<div className='page__columns'>
|
||||
<div className='columns-area__panels'>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
{layout.LEFT}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<div className='columns-area columns-area--mobile'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
{layout.RIGHT}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,181 +0,0 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
z-index: 105;
|
||||
|
||||
@include size(100%, auto);
|
||||
|
||||
@media (min-width:895px) {
|
||||
top: -290px;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
&__columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
|
||||
@include flex(center, stretch, row);
|
||||
|
||||
&__panels {
|
||||
@include size(100%);
|
||||
@include flex(center);
|
||||
|
||||
&__pane {
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
padding-top: 15px;
|
||||
|
||||
@include flex(flex-end);
|
||||
|
||||
&--start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
pointer-events: auto;
|
||||
|
||||
@include size(265px, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 0 20px;
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 895px) {
|
||||
margin: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
|
||||
>div {
|
||||
.column,
|
||||
.drawer {
|
||||
@include horizontal-padding(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
@include margin-center;
|
||||
|
||||
.column,
|
||||
.drawer {
|
||||
padding: 0;
|
||||
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
.search__input {
|
||||
padding: 15px 30px 15px 15px;
|
||||
|
||||
@include text-sizing(16px, 400, 18px);
|
||||
}
|
||||
|
||||
.search__icon .fa {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 630px) {
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.media-gallery,
|
||||
.video-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__bar {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.navigation-bar,
|
||||
.compose-form {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.account {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
&__message {
|
||||
margin-left: 48px + 15px * 2;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&__favourite-icon-wrapper {
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.account {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
@include horizontal-margin(17px, 15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
.columns-area__panels__pane--left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1180px) {
|
||||
.columns-area__panels__pane--right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile .column {
|
||||
// @include gab-container-standards();
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export { default } from './columns_area';
|
||||
@ -6,10 +6,11 @@
|
||||
|
||||
&__html {
|
||||
font-weight: 600;
|
||||
padding-right: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&__account {
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
const GroupIcon = ({
|
||||
className = 'header-nav__item__icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
|
||||
<path className='header-nav__item__icon__path' d="M 10 28 C 10 27 10 26 10 25 L 6 25 C 3 25 0 28 0 32 L 0 40 C 0 42 1 44 4 44 L 10 44 C 10 43 10 43 10 42 Z M 10 28"/>
|
||||
<path className='header-nav__item__icon__path' d="M 28 22 L 19 22 C 15 22 12 25 12 28 L 12 42 C 12 43 13 44 14 44 L 33 44 C 34 44 35 43 35 42 L 35 28 C 35 25 32 22 28 22 Z M 28 22"/>
|
||||
<circle className='header-nav__item__icon__path' cx="8" cy="15" r="6"/>
|
||||
<circle className='header-nav__item__icon__path' cx="24" cy="11" r="9"/>
|
||||
<circle className='header-nav__item__icon__path' cx="40" cy="15" r="6"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GroupIcon
|
||||
@ -0,0 +1,24 @@
|
||||
const HomeIcon = ({
|
||||
className = 'header-nav__item__icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default HomeIcon
|
||||
@ -0,0 +1,26 @@
|
||||
const NotificationsIcon = ({
|
||||
className = 'header-nav__item__icon',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
|
||||
<path className='header-nav__item__icon__path header-nav__item__icon__path--fill' 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 className='header-nav__item__icon__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>
|
||||
)
|
||||
|
||||
export default NotificationsIcon
|
||||
@ -12,8 +12,14 @@ import { shortNumberFormat } from '../../utils/numbers';
|
||||
import { me } from '../../initial_state';
|
||||
import { makeGetAccount } from '../../selectors';
|
||||
import ProgressPanel from '../progress_panel';
|
||||
import GabLogo from './assets/gab_logo';
|
||||
import {
|
||||
GroupIcon,
|
||||
HomeIcon,
|
||||
NotificationsIcon,
|
||||
} from './assets/tabs_bar_icon';
|
||||
|
||||
import './sidebar_menu.scss';
|
||||
console.log("header global - styles:", styles);
|
||||
|
||||
const messages = defineMessages({
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
@ -53,7 +59,7 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class SidebarMenu extends ImmutablePureComponent {
|
||||
class Header extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
@ -105,6 +111,83 @@ class SidebarMenu extends ImmutablePureComponent {
|
||||
const moreIcon = moreOpen ? 'minus' : 'plus';
|
||||
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' };
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
name: 'Home',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Notifications',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Groups',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Lists',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Chat',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Trends',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
name: 'Profile',
|
||||
icon: <NotificationsIcon />,
|
||||
to: '/',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<header role='banner' className={[styles.header].join(' ')}>
|
||||
<div className='header__container'>
|
||||
<div className='header-scrollarea'>
|
||||
<div className='header-scrollarea__container'>
|
||||
<h1 className='header__heading'>
|
||||
<a className='header__heading__btn'>
|
||||
<GabLogo />
|
||||
</a>
|
||||
</h1>
|
||||
<nav className='header-nav'>
|
||||
|
||||
{
|
||||
sidebarItems.map((sidebarItem, i) => {
|
||||
return (
|
||||
<NavLink to={sidebarItem.to} className='header-nav__item' key={`header-nav__item-${i}`}>
|
||||
<div className='header-nav__item__block'>
|
||||
{sidebarItem.icon}
|
||||
<span className='header-nav__item__title'>{sidebarItem.name}</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<a className='header-nav__item'>
|
||||
<div className='header-nav__item__block'>
|
||||
<NotificationsIcon />
|
||||
<span className='header-nav__item__title'>More</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
|
||||
285
app/javascript/gabsocial/components/header/header.scss
Normal file
285
app/javascript/gabsocial/components/header/header.scss
Normal file
@ -0,0 +1,285 @@
|
||||
.header {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
z-index: 3;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-scrollarea {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 275px;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
height: 54px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
@include vertical-padding(4px);
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 27px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@include size(26px);
|
||||
|
||||
&__path {
|
||||
stroke: #fff;
|
||||
fill: none;
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
|
||||
&--fill {
|
||||
stroke: none !important;
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
overflow-wrap: break-word;
|
||||
font-size: 19px;
|
||||
color: #fff;
|
||||
|
||||
@include horizontal-margin(15px);
|
||||
}
|
||||
|
||||
&:hover & {
|
||||
&__block {
|
||||
background-color: rgba($gab-brand-default, 0.25);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $gab-brand-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .sidebar-menu {
|
||||
// display: flex;
|
||||
// position: fixed;
|
||||
// flex-direction: column;
|
||||
// width: 275px;
|
||||
// height: 100vh;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background: $gab-background-container;
|
||||
// transform: translateX(-275px);
|
||||
// transition: all 0.15s linear;
|
||||
// z-index: 10001;
|
||||
|
||||
// body.theme-gabsocial-light & {
|
||||
// background: $gab-background-container-light;
|
||||
// }
|
||||
|
||||
// &__root {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// &__wrapper {
|
||||
// display: block;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// z-index: 10000;
|
||||
// background-color: transparent;
|
||||
// transition: background-color 0.2s linear;
|
||||
// transition-delay: 0.1s;
|
||||
// }
|
||||
|
||||
// &__content {
|
||||
// display: flex;
|
||||
// flex: 1 1;
|
||||
// flex-direction: column;
|
||||
// padding-bottom: 40px;
|
||||
// overflow: hidden;
|
||||
// overflow-y: scroll;
|
||||
// -webkit-overflow-scrolling: touch;
|
||||
// }
|
||||
|
||||
// &__section {
|
||||
// display: block;
|
||||
// margin: 4px 0;
|
||||
// border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
|
||||
// &--borderless {
|
||||
// margin: 0;
|
||||
// border-top: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (max-width: 400px) {
|
||||
// width: 90vw;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .sidebar-menu__root--visible {
|
||||
// display: block;
|
||||
|
||||
// .sidebar-menu {
|
||||
// transform: translateX(0);
|
||||
// }
|
||||
|
||||
// .sidebar-menu__wrapper {
|
||||
// background-color: rgba(0,0,0,0.3);
|
||||
// }
|
||||
// }
|
||||
|
||||
// .sidebar-menu-header {
|
||||
// display: flex;
|
||||
// height: 46px;
|
||||
// padding: 12px 14px;
|
||||
// border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
// box-sizing: border-box;
|
||||
// align-items: center;
|
||||
|
||||
// &__title {
|
||||
// display: block;
|
||||
// font-size: 18px;
|
||||
// font-weight: 600;
|
||||
// color: $primary-text-color;
|
||||
// }
|
||||
|
||||
// &__btn {
|
||||
// margin-left: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .sidebar-menu-profile {
|
||||
// display: block;
|
||||
// padding: 14px 18px;
|
||||
|
||||
// &__avatar {
|
||||
// display: block;
|
||||
// width: 56px;
|
||||
// height: 56px;
|
||||
// }
|
||||
|
||||
// &__name {
|
||||
// display: block;
|
||||
// margin-top: 10px;
|
||||
|
||||
// .display-name__account {
|
||||
// display: block;
|
||||
// margin-top: 2px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &__stats {
|
||||
// display: flex;
|
||||
// margin-top: 12px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .sidebar-menu-profile-stat {
|
||||
// display: flex;
|
||||
// font-size: 14px;
|
||||
// text-decoration: none;
|
||||
|
||||
// &:not(:first-of-type) {
|
||||
// margin-left: 18px;
|
||||
// }
|
||||
|
||||
// &__value {
|
||||
// display: flex;
|
||||
// margin-right: 3px;
|
||||
// font-weight: 700;
|
||||
// color: $primary-text-color;
|
||||
// }
|
||||
|
||||
// &__label {
|
||||
// display: flex;
|
||||
// color: $primary-text-color;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .sidebar-menu-item {
|
||||
// display: flex;
|
||||
// padding: 16px 18px;
|
||||
// cursor: pointer;
|
||||
// text-decoration: none;
|
||||
// color: $primary-text-color;
|
||||
// font-size: 15px;
|
||||
// font-weight: 400;
|
||||
// height: 50px;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// &:hover {
|
||||
// background-color: rgba($gab-brand-default, 0.1);
|
||||
|
||||
// .fa {
|
||||
// color: $primary-text-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .fa {
|
||||
// margin-right: 10px;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// &__title {
|
||||
// color: $primary-text-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
1
app/javascript/gabsocial/components/header/index.js
Normal file
1
app/javascript/gabsocial/components/header/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './header';
|
||||
@ -44,10 +44,10 @@ export default class IconButton extends PureComponent {
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
fontSize: `${this.props.size}px`,
|
||||
width: `${this.props.size * 1.28571429}px`,
|
||||
height: `${this.props.size * 1.28571429}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
// fontSize: `${this.props.size}px`,
|
||||
// width: `${this.props.size * 1.28571429}px`,
|
||||
// height: `${this.props.size * 1.28571429}px`,
|
||||
// lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&.standalone {
|
||||
@ -49,7 +48,6 @@
|
||||
box-sizing: border-box;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
|
||||
1
app/javascript/gabsocial/components/page_layout/index.js
Normal file
1
app/javascript/gabsocial/components/page_layout/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './page_layout';
|
||||
@ -0,0 +1,36 @@
|
||||
import Header from '../header'
|
||||
|
||||
console.log("in the page_layout - styles:", styles);
|
||||
|
||||
export default class PageLayout extends PureComponent {
|
||||
static propTypes = {
|
||||
layout: PropTypes.object,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, layout } = this.props;
|
||||
|
||||
const right = layout.RIGHT || null;
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
{/*<Header />*/}
|
||||
<main className='main' role='main'>
|
||||
<div className='main__container'>
|
||||
<div className='main-contents'>
|
||||
<div className='main-contents__inner'>
|
||||
{ /* children */ }
|
||||
</div>
|
||||
</div>
|
||||
<div className='main-sidebar'>
|
||||
<div className='main-sidebar__inner'>
|
||||
{ /* right */ }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
z-index: 105;
|
||||
|
||||
@include size(100%, auto);
|
||||
|
||||
@media (min-width:895px) {
|
||||
top: -290px;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
align-items: flex-start;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
width: 990px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-contents {
|
||||
display: flex;
|
||||
max-width: 600px;
|
||||
z-index: 1;
|
||||
|
||||
&__inner {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
display: flex;
|
||||
width: 350px;
|
||||
|
||||
&__inner {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
|
||||
const messages = defineMessages({
|
||||
just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
|
||||
|
||||
@ -1 +0,0 @@
|
||||
export { default } from './sidebar_menu';
|
||||
@ -1,174 +0,0 @@
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
width: 275px;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $gab-background-container;
|
||||
transform: translateX(-275px);
|
||||
transition: all 0.15s linear;
|
||||
z-index: 10001;
|
||||
|
||||
body.theme-gabsocial-light & {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
&__root {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s linear;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
padding-bottom: 40px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__section {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
|
||||
&--borderless {
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu__root--visible {
|
||||
display: block;
|
||||
|
||||
.sidebar-menu {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-menu__wrapper {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-header {
|
||||
display: flex;
|
||||
height: 46px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-profile {
|
||||
display: block;
|
||||
padding: 14px 18px;
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
|
||||
.display-name__account {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-profile-stat {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-item {
|
||||
display: flex;
|
||||
padding: 16px 18px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($gab-brand-default, 0.1);
|
||||
|
||||
.fa {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&__title {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -403,7 +403,7 @@ class Status extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
if (account === undefined || account === null) {
|
||||
statusAvatar = <Avatar account={status.get('account')} size={48} />;
|
||||
statusAvatar = <Avatar account={status.get('account')} size={42} />;
|
||||
} else {
|
||||
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
|
||||
}
|
||||
@ -448,21 +448,24 @@ class Status extends ImmutablePureComponent {
|
||||
})}
|
||||
data-id={status.get('id')}
|
||||
>
|
||||
<div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
|
||||
<div className='status__info'>
|
||||
<div className='status__info__actions'>
|
||||
<NavLink className='status__display-name' to={`/${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
|
||||
<div className='status__avatar'>{statusAvatar}</div>
|
||||
<DisplayName account={status.get('account')} />
|
||||
</NavLink>
|
||||
<Icon id='ellipsis-h' className='status__info__actions__icon'/>
|
||||
</div>
|
||||
<div className='status__info__attributes'>
|
||||
<NavLink to={statusUrl} className='status__relative-time'>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to={`/${status.getIn(['account', 'acct'])}`}
|
||||
title={status.getIn(['account', 'acct'])}
|
||||
className='status__display-name'
|
||||
>
|
||||
<div className='status__avatar'>{statusAvatar}</div>
|
||||
|
||||
<DisplayName account={status.get('account')} />
|
||||
</NavLink>
|
||||
<span className='status__info__dot-seperator'>•</span>
|
||||
{ /* <Icon id='globe' className='status__info__attributes__item'/> */ }
|
||||
<span className='status__info__attributes__item status__info__attributes__item--link'>Memes Group</span>
|
||||
<span className='status__info__dot-seperator'>•</span>
|
||||
<span className='status__info__attributes__item'>Edited</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{((!group && status.get('group')) || status.get('revised_at') !== null) && (
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.status {
|
||||
padding: 8px 10px 8px 68px;
|
||||
position: relative;
|
||||
min-height: 54px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
cursor: default;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #171717;
|
||||
|
||||
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||||
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
|
||||
@ -88,7 +88,7 @@
|
||||
|
||||
@media screen and (min-width:630px) {
|
||||
.status {
|
||||
padding: 15px 15px 15px 78px;
|
||||
padding: 12px 15px 15px 78px;
|
||||
min-height: 50px;
|
||||
|
||||
&__avatar {
|
||||
@ -136,24 +136,57 @@
|
||||
|
||||
.status__relative-time {
|
||||
color: $dark-text-color;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
.status__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
padding: 10px 10px 8px 62px;
|
||||
|
||||
&__dot-seperator {
|
||||
font-size: 15px;
|
||||
color: $dark-text-color;
|
||||
|
||||
@include horizontal-margin(5px);
|
||||
}
|
||||
|
||||
.status__info {
|
||||
font-size: 15px;
|
||||
z-index: 4;
|
||||
&__attributes {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
align-items: center;
|
||||
|
||||
&__item {
|
||||
font-size: 12px;
|
||||
color: $dark-text-color;
|
||||
|
||||
&--link {
|
||||
cursor: pointer;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
|
||||
&__icon {
|
||||
margin-left: auto;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.status__prepend {
|
||||
margin-left: 68px;
|
||||
@ -181,18 +214,11 @@
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
@include size(48px);
|
||||
overflow: hidden;
|
||||
@include circle(42px);
|
||||
@include abs-position(10px, auto, auto, 10px);
|
||||
}
|
||||
|
||||
.status__expand {
|
||||
cursor: pointer;
|
||||
|
||||
@include size(68px, 100%);
|
||||
@include abs-position(0, auto, auto, 0);
|
||||
}
|
||||
|
||||
|
||||
.media-spoiler-video {
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
|
||||
@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { me, isStaff } from '../../initial_state';
|
||||
import DropdownMenuContainer from '../../containers/dropdown_menu_container';
|
||||
import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
|
||||
import IconButton from '../icon_button';
|
||||
|
||||
import './status_action_bar.scss';
|
||||
@ -265,16 +266,33 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
|
||||
return (
|
||||
<div className='status-action-bar'>
|
||||
<div className='status-action-bar__items'>
|
||||
<div className='status-action-bar-item'>
|
||||
<IconButton
|
||||
className='status-action-bar-item__btn star-icon'
|
||||
animate
|
||||
active={status.get('favourited')}
|
||||
pressed={status.get('favourited')}
|
||||
title={formatMessage(messages.favourite)}
|
||||
icon='star'
|
||||
onClick={this.handleFavouriteClick}
|
||||
text='Like'
|
||||
/>
|
||||
{ /* favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span> */ }
|
||||
</div>
|
||||
|
||||
<div className='status-action-bar-item'>
|
||||
<IconButton
|
||||
className='status-action-bar-item__btn'
|
||||
title={replyTitle}
|
||||
icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
|
||||
onClick={this.handleReplyClick}
|
||||
text='Comment'
|
||||
/>
|
||||
{
|
||||
{ /*
|
||||
replyCount !== 0 &&
|
||||
<Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='status-action-bar-item__link'>{replyCount}</Link>
|
||||
*/
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -287,19 +305,16 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
title={reblogTitle}
|
||||
icon={reblogIcon}
|
||||
onClick={this.handleReblogClick}
|
||||
text='Share'
|
||||
/>
|
||||
{reblogCount !== 0 && <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='status-action-bar-item__link'>{reblogCount}</Link>}
|
||||
{ /* reblogCount !== 0 && <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='status-action-bar-item__link'>{reblogCount}</Link> */ }
|
||||
</div>
|
||||
|
||||
<div className='status__action-bar__counter'>
|
||||
{/*<div className='status__action-bar__counter'>
|
||||
<IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? formatMessage(messages.cannot_quote) : formatMessage(messages.quote)} icon='quote-left' onClick={this.handleQuoteClick} />
|
||||
</div>
|
||||
<div className='status__action-bar__counter'>
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
{favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
|
||||
</div>
|
||||
</div>*/}
|
||||
|
||||
<div className='status-action-bar__dropdown'>
|
||||
{/*<div className='status-action-bar__dropdown'>
|
||||
<DropdownMenuContainer
|
||||
status={status}
|
||||
items={menu}
|
||||
@ -308,6 +323,10 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||
direction='right'
|
||||
title={formatMessage(messages.more)}
|
||||
/>
|
||||
</div>*/}
|
||||
</div>
|
||||
<div className='status-action-bar__comment'>
|
||||
{/*<ComposeFormContainer shouldCondense statusId={status.get('id')} />*/}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,21 +1,51 @@
|
||||
.status-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
z-index: 4;
|
||||
|
||||
@include horizontal-padding(10px);
|
||||
|
||||
&__dropdown {
|
||||
@include size(23px);
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #161616;
|
||||
|
||||
@include size(100%, 42px);
|
||||
}
|
||||
|
||||
&__comment {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.status-action-bar-item {
|
||||
display: inline-flex;
|
||||
margin-right: 22px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
width: 33%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__btn {
|
||||
border-radius: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
@include size(100%);
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
|
||||
@ -167,7 +167,6 @@ export default class StatusContent extends ImmutablePureComponent {
|
||||
const readMoreButton = (
|
||||
<button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
|
||||
<FormattedMessage id='status.read_more' defaultMessage='Read more' />
|
||||
<Icon id='angle-right' fixedWidth />
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
color: $primary-text-color;
|
||||
|
||||
@include text-overflow(normal, break-word);
|
||||
@include text-sizing(15px, 400, 20px);
|
||||
@include text-sizing(14px, 400, 20px);
|
||||
@include horizontal-padding(10px);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
@ -102,6 +103,7 @@
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 8px 0 0 0;
|
||||
margin-left: 10px;
|
||||
|
||||
@include text-sizing(15px, 400, 20px);
|
||||
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
const GroupIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '18px',
|
||||
height = '18px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 29.011719 10.753906 C 31.234375 12.148438 32.792969 14.503906 33.078125 17.242188 C 33.984375 17.667969 34.992188 17.910156 36.058594 17.910156 C 39.953125 17.910156 43.109375 14.753906 43.109375 10.859375 C 43.109375 6.964844 39.953125 3.808594 36.058594 3.808594 C 32.199219 3.808594 29.070312 6.910156 29.011719 10.753906 Z M 24.394531 25.191406 C 28.289062 25.191406 31.445312 22.03125 31.445312 18.140625 C 31.445312 14.246094 28.289062 11.089844 24.394531 11.089844 C 20.5 11.089844 17.339844 14.246094 17.339844 18.140625 C 17.339844 22.035156 20.5 25.191406 24.394531 25.191406 Z M 27.382812 25.671875 L 21.402344 25.671875 C 16.421875 25.671875 12.375 29.722656 12.375 34.699219 L 12.375 42.015625 L 12.390625 42.132812 L 12.894531 42.289062 C 17.648438 43.773438 21.773438 44.269531 25.171875 44.269531 C 31.804688 44.269531 35.652344 42.375 35.890625 42.257812 L 36.359375 42.019531 L 36.410156 42.019531 L 36.410156 34.699219 C 36.414062 29.722656 32.363281 25.671875 27.382812 25.671875 Z M 39.050781 18.390625 L 33.113281 18.390625 C 33.050781 20.765625 32.035156 22.90625 30.429688 24.445312 C 34.855469 25.761719 38.09375 29.863281 38.09375 34.710938 L 38.09375 36.964844 C 43.957031 36.75 47.335938 35.089844 47.554688 34.976562 L 48.027344 34.738281 L 48.078125 34.738281 L 48.078125 27.417969 C 48.078125 22.441406 44.027344 18.390625 39.050781 18.390625 Z M 12.019531 17.910156 C 13.402344 17.910156 14.683594 17.507812 15.769531 16.824219 C 16.117188 14.570312 17.324219 12.597656 19.050781 11.257812 C 19.058594 11.125 19.070312 10.996094 19.070312 10.863281 C 19.070312 6.96875 15.914062 3.8125 12.019531 3.8125 C 8.125 3.8125 4.96875 6.96875 4.96875 10.863281 C 4.96875 14.753906 8.125 17.910156 12.019531 17.910156 Z M 18.351562 24.445312 C 16.757812 22.914062 15.746094 20.785156 15.671875 18.425781 C 15.453125 18.410156 15.234375 18.390625 15.011719 18.390625 L 9.027344 18.390625 C 4.050781 18.390625 0 22.441406 0 27.417969 L 0 34.738281 L 0.0195312 34.851562 L 0.523438 35.007812 C 4.332031 36.199219 7.734375 36.746094 10.691406 36.921875 L 10.691406 34.710938 C 10.691406 29.863281 13.925781 25.761719 18.351562 24.445312 Z M 18.351562 24.445312' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GroupIcon
|
||||
@ -1,24 +0,0 @@
|
||||
const HomeIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default HomeIcon
|
||||
@ -1,26 +0,0 @@
|
||||
const NotificationsIcon = ({
|
||||
className = 'tabs-bar-icon',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 48 48'
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className='tabs-bar-icon__path' d='M 17.363281 43.667969 C 18.488281 46.21875 21.039062 48 24 48 C 26.960938 48 29.511719 46.21875 30.636719 43.667969 Z M 17.363281 43.667969' />
|
||||
<path className='tabs-bar-icon__path' d='M 24 4.585938 C 25.953125 4.585938 27.828125 4.929688 29.570312 5.5625 L 29.570312 5.347656 C 29.570312 2.398438 27.171875 0 24.222656 0 L 23.777344 0 C 20.828125 0 18.429688 2.398438 18.429688 5.347656 L 18.429688 5.558594 C 20.171875 4.929688 22.046875 4.585938 24 4.585938 Z M 24 4.585938' />
|
||||
<path className='tabs-bar-icon__path' d='M 41.574219 40.851562 L 6.425781 40.851562 C 5.757812 40.851562 5.148438 40.402344 5.011719 39.753906 C 4.875 39.109375 5.167969 38.472656 5.761719 38.199219 C 5.90625 38.105469 6.96875 37.363281 8.035156 35.113281 C 9.988281 30.980469 10.398438 25.160156 10.398438 21.003906 C 10.398438 13.503906 16.5 7.402344 24 7.402344 C 31.480469 7.402344 37.570312 13.472656 37.597656 20.949219 C 37.597656 20.964844 37.601562 20.984375 37.601562 21.003906 C 37.601562 25.160156 38.011719 30.980469 39.964844 35.113281 C 41.03125 37.363281 42.09375 38.105469 42.238281 38.199219 C 42.832031 38.472656 43.125 39.109375 42.988281 39.753906 C 42.851562 40.402344 42.242188 40.851562 41.574219 40.851562 Z M 42.253906 38.207031 Z M 42.253906 38.207031' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default NotificationsIcon
|
||||
@ -1 +0,0 @@
|
||||
export { default } from './tabs_bar';
|
||||
@ -1,122 +0,0 @@
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { NavLink, withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { me } from '../../initial_state';
|
||||
import SearchContainer from '../../features/compose/containers/search_container';
|
||||
import ActionBar from '../../features/compose/components/action_bar';
|
||||
import Avatar from '../avatar';
|
||||
import NotificationsCounter from '../notification_counter';
|
||||
import GabLogo from './assets/gab_logo/gab_logo';
|
||||
import {
|
||||
GroupIcon,
|
||||
HomeIcon,
|
||||
NotificationsIcon,
|
||||
SearchIcon,
|
||||
} from './assets/tabs_bar_icon';
|
||||
|
||||
import './tabs_bar.scss';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
account: state.getIn(['accounts', me]),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenCompose() {
|
||||
dispatch(openModal('COMPOSE'));
|
||||
},
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@withRouter
|
||||
class TabsBar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
onOpenCompose: PropTypes.func.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, onOpenCompose } = this.props;
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<a className='tabs-bar-item--logo' href='/#' data-preview-title-id='column.home'>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
<GabLogo />
|
||||
</a>
|
||||
<a className='tabs-bar-item home' href='/home' data-preview-title-id='column.home' >
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</a>
|
||||
<NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className='tabs-bar__split tabs-bar__split--right'>
|
||||
<div className='tabs-bar__search-container'>
|
||||
<SearchContainer openInRoute />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<a className='tabs-bar__button button' href='/auth/sign_in'>
|
||||
<FormattedMessage id='account.login' defaultMessage='Log In' />
|
||||
</a>
|
||||
<a className='tabs-bar__button button button-alternative-2' href='/auth/sign_up'>
|
||||
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<NavLink className='tabs-bar-item--logo' to='/home#' data-preview-title-id='column.home'>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
<GabLogo />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item home' to='/home' data-preview-title-id='column.home' >
|
||||
<HomeIcon />
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item notifications' to='/notifications' data-preview-title-id='column.notifications' >
|
||||
<NotificationsIcon />
|
||||
<NotificationsCounter />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item groups' to='/groups' data-preview-title-id='column.groups' >
|
||||
<GroupIcon />
|
||||
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<SearchIcon />
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className='tabs-bar__split tabs-bar__split--right'>
|
||||
<div className='tabs-bar__search-container'>
|
||||
<SearchContainer openInRoute />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='tabs-bar__profile'>
|
||||
<Avatar account={account} />
|
||||
<ActionBar account={account} size={34} />
|
||||
</div>
|
||||
<button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'>Gab</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
height: 50px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0 15px;
|
||||
|
||||
@include margin-center;
|
||||
|
||||
// NOTE - might need to adjust this based on column sizing
|
||||
@media screen and (max-width: $nav-breakpoint-4) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__split {
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
||||
&--left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&--right {
|
||||
margin-left: auto;
|
||||
padding-top: 8px;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search-container {
|
||||
display: block;
|
||||
width: 251px;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__profile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 20px;
|
||||
|
||||
@include size(34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
margin: 0;
|
||||
|
||||
@include size(42px);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
background-size: 34px 34px;
|
||||
|
||||
@include size(34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
background-size: 42px 42px;
|
||||
|
||||
@include size(42px);
|
||||
}
|
||||
}
|
||||
|
||||
.compose__action-bar {
|
||||
display: block;
|
||||
|
||||
@include abs-position(0, 0, 0, -5px);
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button-compose {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
border-radius: 17px;
|
||||
|
||||
@include size(70px, 34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($gab-brand-default, 5%);
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-left: 12px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 630px) and (max-height: 400px) {
|
||||
will-change: margin-top;
|
||||
transition: margin-top 400ms 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 25px 0 0;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding-top: 14px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
margin: 0;
|
||||
padding-top: 12px !important;
|
||||
|
||||
@include size(46px, 50px);
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $gab-brand-default;
|
||||
}
|
||||
|
||||
&>span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.optional {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $gab-text-highlight;
|
||||
|
||||
.tabs-bar-icon__path {
|
||||
fill: $gab-text-highlight;
|
||||
}
|
||||
}
|
||||
|
||||
&--logo {
|
||||
display: block;
|
||||
margin-right: 35px;
|
||||
padding-top: 10px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include size(50px);
|
||||
|
||||
@media (min-width: $nav-breakpoint-4) and (max-width: $nav-breakpoint-1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar-icon {
|
||||
margin-right: 6px;
|
||||
|
||||
&__path {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
.verified-icon {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 1px;
|
||||
margin-top: 1px;
|
||||
margin-left: 4px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export { default } from './upload_form';
|
||||
@ -203,9 +203,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
||||
|
||||
{media}
|
||||
|
||||
{status.get('quote') && <StatusQuote
|
||||
{ /* status.get('quote') && <StatusQuote
|
||||
id={status.get('quote')}
|
||||
/>}
|
||||
/> */ }
|
||||
|
||||
<div className='detailed-status__meta'>
|
||||
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
|
||||
|
||||
@ -20,12 +20,10 @@ import NotificationsContainer from '../../containers/notifications_container';
|
||||
import LoadingBarContainer from '../../containers/loading_bar_container';
|
||||
import ModalContainer from '../../containers/modal_container';
|
||||
import UploadArea from '../../components/upload_area';
|
||||
import TabsBar from '../../components/tabs_bar';
|
||||
import FooterBar from '../../components/footer_bar';
|
||||
// import TrendsPanel from './components/trends_panel';
|
||||
import { WhoToFollowPanel } from '../../components/panel';
|
||||
import LinkFooter from '../../components/link_footer';
|
||||
import SidebarMenu from '../../components/sidebar_menu';
|
||||
import ProfilePage from '../../pages/profile_page';
|
||||
// import GroupsPage from 'gabsocial/pages/groups_page';
|
||||
import GroupPage from '../../pages/group_page';
|
||||
@ -534,19 +532,19 @@ class UI extends PureComponent {
|
||||
return (
|
||||
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
|
||||
<div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
|
||||
<TabsBar />
|
||||
<SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
|
||||
{children}
|
||||
</SwitchingColumnsArea>
|
||||
<FooterBar />
|
||||
{ /* <FooterBar /> */ }
|
||||
|
||||
{me && floatingActionButton}
|
||||
{ /* me && floatingActionButton */ }
|
||||
|
||||
{ /*
|
||||
<NotificationsContainer />
|
||||
<LoadingBarContainer className='loading-bar' />
|
||||
<ModalContainer />
|
||||
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
|
||||
{me && <SidebarMenu />}
|
||||
*/ }
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Route } from 'react-router-dom';
|
||||
import ColumnsArea from '../../../components/columns_area';
|
||||
import PageLayout from '../../../components/page_layout';
|
||||
import BundleColumnError from '../../../components/bundle_column_error';
|
||||
import Bundle from './bundle';
|
||||
import { me } from '../../../initial_state';
|
||||
@ -42,11 +42,11 @@ export default class WrappedRoute extends Component {
|
||||
<Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
|
||||
{Component =>
|
||||
(
|
||||
<ColumnsArea layout={layout}>
|
||||
<PageLayout layout={layout}>
|
||||
<Component params={match.params} {...componentParams}>
|
||||
{content}
|
||||
</Component>
|
||||
</ColumnsArea>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
</Bundle>
|
||||
|
||||
@ -5,7 +5,7 @@ import { fetchGroup } from '../actions/groups';
|
||||
import HeaderContainer from '../features/groups/timeline/containers/header_container';
|
||||
import GroupPanel from '../features/groups/timeline/components/panel';
|
||||
import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
import PageLayout from '../components/page_layout';
|
||||
import { WhoToFollowPanel } from '../components/panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import PromoPanel from '../components/promo_panel';
|
||||
@ -35,7 +35,7 @@ class GroupPage extends ImmutablePureComponent {
|
||||
const top = group ? <HeaderContainer groupId={group.get('id')} /> : null;
|
||||
|
||||
return (
|
||||
<ColumnsArea
|
||||
<PageLayout
|
||||
layout={{
|
||||
TOP: top,
|
||||
RIGHT: (
|
||||
@ -58,7 +58,7 @@ class GroupPage extends ImmutablePureComponent {
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ColumnsArea>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@ import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import PromoPanel from '../components/promo_panel';
|
||||
import UserPanel from '../components/user_panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
import PageLayout from '../components/page_layout';
|
||||
import TimelineComposeBlock from '../components/timeline_compose_block';
|
||||
|
||||
export default class HomePage extends PureComponent {
|
||||
@ -11,26 +11,20 @@ export default class HomePage extends PureComponent {
|
||||
const {children} = this.props;
|
||||
|
||||
return (
|
||||
<ColumnsArea
|
||||
<PageLayout
|
||||
layout={{
|
||||
TOP: null,
|
||||
RIGHT: (
|
||||
<Fragment>
|
||||
<GroupSidebarPanel />
|
||||
</Fragment>
|
||||
),
|
||||
LEFT: (
|
||||
<Fragment>
|
||||
<UserPanel />
|
||||
<PromoPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
)
|
||||
),
|
||||
}}
|
||||
>
|
||||
<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />
|
||||
{children}
|
||||
</ColumnsArea>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@ import HeaderContainer from '../features/account_timeline/containers/header_cont
|
||||
import ProfileInfoPanel from '../features/account_timeline/components/profile_info_panel/profile_info_panel';
|
||||
import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
import PageLayout from '../components/page_layout';
|
||||
|
||||
const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
|
||||
const accounts = state.getIn(['accounts']);
|
||||
@ -48,7 +48,7 @@ class ProfilePage extends ImmutablePureComponent {
|
||||
const { accountId, account, accountUsername } = this.props;
|
||||
|
||||
return (
|
||||
<ColumnsArea
|
||||
<PageLayout
|
||||
layout={{
|
||||
TOP: <HeaderContainer accountId={accountId} username={accountUsername} />,
|
||||
RIGHT: (
|
||||
@ -62,7 +62,7 @@ class ProfilePage extends ImmutablePureComponent {
|
||||
}}
|
||||
>
|
||||
{this.props.children}
|
||||
</ColumnsArea>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { Fragment } from 'react';
|
||||
import Header from '../features/search/components/header';
|
||||
import LinkFooter from '../components/link_footer';
|
||||
import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
|
||||
import ColumnsArea from '../components/columns_area';
|
||||
import PageLayout from '../components/page_layout';
|
||||
|
||||
export default class SearchPage extends PureComponent {
|
||||
|
||||
@ -12,7 +12,7 @@ export default class SearchPage extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ColumnsArea
|
||||
<PageLayout
|
||||
layout={{
|
||||
TOP: <Header/>,
|
||||
RIGHT: (
|
||||
@ -25,7 +25,7 @@ export default class SearchPage extends PureComponent {
|
||||
}}
|
||||
>
|
||||
{this.props.children}
|
||||
</ColumnsArea>
|
||||
</PageLayout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
||||
184
app/javascript/styles/global.css
Normal file
184
app/javascript/styles/global.css
Normal file
@ -0,0 +1,184 @@
|
||||
html,body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
-ms-overflow-style:scrollbar;
|
||||
overflow-y:scroll;
|
||||
overscroll-behavior-y:none;
|
||||
}
|
||||
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.default {
|
||||
align-items: stretch;
|
||||
border: 0 solid black;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-top: 0px;
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.color-black {
|
||||
color: rgba(0, 0, 0, 1.00);
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.inherit {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.r-13awgt0 {
|
||||
-ms-flex-negative: 1;
|
||||
-ms-flex-positive: 1;
|
||||
-ms-flex-preferred-size: 0%;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-basis: 0%;
|
||||
-webkit-flex-grow: 1;
|
||||
-webkit-flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.r-4qtqp9 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.r-ywje51 {
|
||||
margin-bottom: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.r-hvic4v {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.r-1adg3ll {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.r-12vffkv>* {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.r-12vffkv {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.r-14lw9ot {
|
||||
background-color: rgba(255, 255, 255, 1.00);
|
||||
}
|
||||
|
||||
.r-1p0dtai {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.r-1d2f490 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.r-1xcajam {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.r-zchlnj {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.r-ipm5af {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.r-yyyyoo {
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.r-1xvli5t {
|
||||
height: 1.25em;
|
||||
}
|
||||
|
||||
.r-dnmrzs {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.r-bnwqim {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.r-1plcrui {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.r-lrvibr {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.color-brand {
|
||||
color: rgba(29, 161, 242, 1.00);
|
||||
}
|
||||
|
||||
.height-72-px {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.width-72-px {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.top-60-pc {
|
||||
top: 60%;
|
||||
}
|
||||
|
||||
.line-height-2 {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
@ -41,6 +41,3 @@
|
||||
|
||||
%body{ class: body_classes }
|
||||
= content_for?(:content) ? yield(:content) : yield
|
||||
|
||||
%div{ style: 'display: none'}
|
||||
= render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg')
|
||||
|
||||
@ -18,7 +18,7 @@ module.exports = {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
importLoaders: 2,
|
||||
// modules: true,
|
||||
modules: true,
|
||||
// localIdentName: '[name]',
|
||||
},
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@ const extname = require('path-complete-extname');
|
||||
const { env, settings, themes, output } = require('./configuration');
|
||||
const rules = require('./rules');
|
||||
const localePackPaths = [
|
||||
'/Users/m3/Documents/dev/gab-social-2/tmp/packs/locale_en.js',
|
||||
'/Users/m3/Documents/dev/gab-social/tmp/packs/locale_en.js',
|
||||
];
|
||||
//require('./generateLocalePacks');
|
||||
|
||||
@ -77,6 +77,7 @@ module.exports = {
|
||||
PureComponent: ['react', 'PureComponent'],
|
||||
connect: ['react-redux', 'connect'],
|
||||
PropTypes: 'prop-types',
|
||||
styles: '/Users/m3/Documents/dev/gab-social/app/javascript/styles/global.css',
|
||||
}),
|
||||
new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user