Redesign the landing page, mount public timeline on it (#4122)
* Redesign the landing page, mount public timeline on it * Adjust the standalone mounted component to the lacking of router * Adjust auth layout pages to new design * Fix tests * Standalone public timeline polling every 5 seconds * Remove now obsolete translations * Add responsive design for new landing page * Address reviews * Add floating clouds behind frontpage form * Use access token from public page when available * Fix mentions and hashtags links, cursor on status content in standalone mode * Add footer link to source code * Fix errors on pages that don't embed the component, use classnames * Fix tests * Change anonymous autoPlayGif default to false * When gif autoplay is disabled, hover to play * Add option to hide the timeline preview * Slightly improve alt layout * Add elephant friend to new frontpage * Display "back to mastodon" in place of "login" when logged in on frontpage * Change polling time to 3smaster
parent
8784bd79d0
commit
e19eefe219
Binary file not shown.
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,39 @@ |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import configureStore from '../store/configureStore'; |
||||
import { hydrateStore } from '../actions/store'; |
||||
import { IntlProvider, addLocaleData } from 'react-intl'; |
||||
import { getLocale } from '../locales'; |
||||
import PublicTimeline from '../features/standalone/public_timeline'; |
||||
|
||||
const { localeData, messages } = getLocale(); |
||||
addLocaleData(localeData); |
||||
|
||||
const store = configureStore(); |
||||
const initialStateContainer = document.getElementById('initial-state'); |
||||
|
||||
if (initialStateContainer !== null) { |
||||
const initialState = JSON.parse(initialStateContainer.textContent); |
||||
store.dispatch(hydrateStore(initialState)); |
||||
} |
||||
|
||||
export default class TimelineContainer extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { locale } = this.props; |
||||
|
||||
return ( |
||||
<IntlProvider locale={locale} messages={messages}> |
||||
<Provider store={store}> |
||||
<PublicTimeline /> |
||||
</Provider> |
||||
</IntlProvider> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,76 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import PropTypes from 'prop-types'; |
||||
import StatusListContainer from '../../ui/containers/status_list_container'; |
||||
import { |
||||
refreshPublicTimeline, |
||||
expandPublicTimeline, |
||||
} from '../../../actions/timelines'; |
||||
import Column from '../../../components/column'; |
||||
import ColumnHeader from '../../../components/column_header'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
|
||||
const messages = defineMessages({ |
||||
title: { id: 'standalone.public_title', defaultMessage: 'A look inside...' }, |
||||
}); |
||||
|
||||
@connect() |
||||
@injectIntl |
||||
export default class PublicTimeline extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
dispatch: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleHeaderClick = () => { |
||||
this.column.scrollTop(); |
||||
} |
||||
|
||||
setRef = c => { |
||||
this.column = c; |
||||
} |
||||
|
||||
componentDidMount () { |
||||
const { dispatch } = this.props; |
||||
|
||||
dispatch(refreshPublicTimeline()); |
||||
|
||||
this.polling = setInterval(() => { |
||||
dispatch(refreshPublicTimeline()); |
||||
}, 3000); |
||||
} |
||||
|
||||
componentWillUnmount () { |
||||
if (typeof this.polling !== 'undefined') { |
||||
clearInterval(this.polling); |
||||
this.polling = null; |
||||
} |
||||
} |
||||
|
||||
handleLoadMore = () => { |
||||
this.props.dispatch(expandPublicTimeline()); |
||||
} |
||||
|
||||
render () { |
||||
const { intl } = this.props; |
||||
|
||||
return ( |
||||
<Column ref={this.setRef}> |
||||
<ColumnHeader |
||||
icon='globe' |
||||
title={intl.formatMessage(messages.title)} |
||||
onClick={this.handleHeaderClick} |
||||
/> |
||||
|
||||
<StatusListContainer |
||||
timelineId='public' |
||||
loadMore={this.handleLoadMore} |
||||
scrollKey='standalone_public_timeline' |
||||
trackScroll={false} |
||||
/> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
} |
File diff suppressed because one or more lines are too long
@ -0,0 +1,25 @@ |
||||
.features-list |
||||
.features-list__row |
||||
.text |
||||
%h6= t 'about.features.real_conversation_title' |
||||
= t 'about.features.real_conversation_body' |
||||
.visual |
||||
= fa_icon 'fw comments' |
||||
.features-list__row |
||||
.text |
||||
%h6= t 'about.features.not_a_product_title' |
||||
= t 'about.features.not_a_product_body' |
||||
.visual |
||||
= fa_icon 'fw users' |
||||
.features-list__row |
||||
.text |
||||
%h6= t 'about.features.within_reach_title' |
||||
= t 'about.features.within_reach_body' |
||||
.visual |
||||
= fa_icon 'fw mobile' |
||||
.features-list__row |
||||
.text |
||||
%h6= t 'about.features.humane_approach_title' |
||||
= t 'about.features.humane_approach_body' |
||||
.visual |
||||
= fa_icon 'fw leaf' |
Loading…
Reference in new issue