From d799921c75e7bfb83504bb79dcc1c269c91d168c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 18 Jan 2018 19:17:25 +0100 Subject: Replace tutorial modal with welcome e-mail (#6273) * Remove onboarding modal * Welcome e-mail * Send welcome e-mail after confirmation * Remove obsolete translations --- app/javascript/images/icon_done.svg | 4 + app/javascript/mastodon/actions/onboarding.js | 14 - app/javascript/mastodon/containers/mastodon.js | 3 - .../mastodon/features/ui/components/modal_root.js | 2 - .../features/ui/components/onboarding_modal.js | 318 --------------------- .../mastodon/features/ui/util/async-components.js | 4 - app/javascript/styles/mailer.scss | 44 +++ app/javascript/styles/mastodon/components.scss | 254 ---------------- 8 files changed, 48 insertions(+), 595 deletions(-) create mode 100644 app/javascript/images/icon_done.svg delete mode 100644 app/javascript/mastodon/actions/onboarding.js delete mode 100644 app/javascript/mastodon/features/ui/components/onboarding_modal.js (limited to 'app/javascript') diff --git a/app/javascript/images/icon_done.svg b/app/javascript/images/icon_done.svg new file mode 100644 index 000000000..446af14d9 --- /dev/null +++ b/app/javascript/images/icon_done.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/javascript/mastodon/actions/onboarding.js b/app/javascript/mastodon/actions/onboarding.js deleted file mode 100644 index a161c50ef..000000000 --- a/app/javascript/mastodon/actions/onboarding.js +++ /dev/null @@ -1,14 +0,0 @@ -import { openModal } from './modal'; -import { changeSetting, saveSettings } from './settings'; - -export function showOnboardingOnce() { - return (dispatch, getState) => { - const alreadySeen = getState().getIn(['settings', 'onboarded']); - - if (!alreadySeen) { - dispatch(openModal('ONBOARDING')); - dispatch(changeSetting(['onboarded'], true)); - dispatch(saveSettings()); - } - }; -}; diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index d1710445b..8ae3b727a 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -2,7 +2,6 @@ import React from 'react'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import configureStore from '../store/configureStore'; -import { showOnboardingOnce } from '../actions/onboarding'; import { BrowserRouter, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; import UI from '../features/ui'; @@ -40,8 +39,6 @@ export default class Mastodon extends React.PureComponent { const handlerUrl = window.location.protocol + '//' + window.location.host + '/intent?uri=%s'; window.setTimeout(() => navigator.registerProtocolHandler('web+mastodon', handlerUrl, 'Mastodon'), 5 * 60 * 1000); } - - store.dispatch(showOnboardingOnce()); } componentWillUnmount () { diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 5839ba40a..dbfb46ee7 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -9,7 +9,6 @@ import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import ConfirmationModal from './confirmation_modal'; import { - OnboardingModal, MuteModal, ReportModal, EmbedModal, @@ -18,7 +17,6 @@ import { const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), - 'ONBOARDING': OnboardingModal, 'VIDEO': () => Promise.resolve({ default: VideoModal }), 'BOOST': () => Promise.resolve({ default: BoostModal }), 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js deleted file mode 100644 index 54673e223..000000000 --- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js +++ /dev/null @@ -1,318 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import ReactSwipeableViews from 'react-swipeable-views'; -import classNames from 'classnames'; -import Permalink from '../../../components/permalink'; -import ComposeForm from '../../compose/components/compose_form'; -import Search from '../../compose/components/search'; -import NavigationBar from '../../compose/components/navigation_bar'; -import ColumnHeader from './column_header'; -import { List as ImmutableList } from 'immutable'; -import { me } from '../../../initial_state'; - -const noop = () => { }; - -const messages = defineMessages({ - home_title: { id: 'column.home', defaultMessage: 'Home' }, - notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, - local_title: { id: 'column.community', defaultMessage: 'Local timeline' }, - federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' }, -}); - -const PageOne = ({ acct, domain }) => ( -
-
-
-
- -
-

-

-

@{acct}@{domain} }} />

-
-
-); - -PageOne.propTypes = { - acct: PropTypes.string.isRequired, - domain: PropTypes.string.isRequired, -}; - -const PageTwo = ({ myAccount }) => ( -
-
-
- -
- -
- -

-
-); - -PageTwo.propTypes = { - myAccount: ImmutablePropTypes.map.isRequired, -}; - -const PageThree = ({ myAccount }) => ( -
-
- - -
- -
-
- -

#illustration, introductions: #introductions }} />

-

-
-); - -PageThree.propTypes = { - myAccount: ImmutablePropTypes.map.isRequired, -}; - -const PageFour = ({ domain, intl }) => ( -
-
-
-
-
-

-
- -
-
-

-
-
- -
-
-
-
- -
-
-
-
- -

-
-
-); - -PageFour.propTypes = { - domain: PropTypes.string.isRequired, - intl: PropTypes.object.isRequired, -}; - -const PageSix = ({ admin, domain }) => { - let adminSection = ''; - - if (admin) { - adminSection = ( -

- @{admin.get('acct')} }} /> -
- }} /> -

- ); - } - - return ( -
-

- {adminSection} -

GitHub }} />

-

}} />

-

-
- ); -}; - -PageSix.propTypes = { - admin: ImmutablePropTypes.map, - domain: PropTypes.string.isRequired, -}; - -const mapStateToProps = state => ({ - myAccount: state.getIn(['accounts', me]), - admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), - domain: state.getIn(['meta', 'domain']), -}); - -@connect(mapStateToProps) -@injectIntl -export default class OnboardingModal extends React.PureComponent { - - static propTypes = { - onClose: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - myAccount: ImmutablePropTypes.map.isRequired, - domain: PropTypes.string.isRequired, - admin: ImmutablePropTypes.map, - }; - - state = { - currentIndex: 0, - }; - - componentWillMount() { - const { myAccount, admin, domain, intl } = this.props; - this.pages = [ - , - , - , - , - , - ]; - }; - - componentDidMount() { - window.addEventListener('keyup', this.handleKeyUp); - } - - componentWillUnmount() { - window.addEventListener('keyup', this.handleKeyUp); - } - - handleSkip = (e) => { - e.preventDefault(); - this.props.onClose(); - } - - handleDot = (e) => { - const i = Number(e.currentTarget.getAttribute('data-index')); - e.preventDefault(); - this.setState({ currentIndex: i }); - } - - handlePrev = () => { - this.setState(({ currentIndex }) => ({ - currentIndex: Math.max(0, currentIndex - 1), - })); - } - - handleNext = () => { - const { pages } = this; - this.setState(({ currentIndex }) => ({ - currentIndex: Math.min(currentIndex + 1, pages.length - 1), - })); - } - - handleSwipe = (index) => { - this.setState({ currentIndex: index }); - } - - handleKeyUp = ({ key }) => { - switch (key) { - case 'ArrowLeft': - this.handlePrev(); - break; - case 'ArrowRight': - this.handleNext(); - break; - } - } - - handleClose = () => { - this.props.onClose(); - } - - render () { - const { pages } = this; - const { currentIndex } = this.state; - const hasMore = currentIndex < pages.length - 1; - - const nextOrDoneBtn = hasMore ? ( - - ) : ( - - ); - - return ( -
- - {pages.map((page, i) => { - const className = classNames('onboarding-modal__page__wrapper', { - 'onboarding-modal__page__wrapper--active': i === currentIndex, - }); - return ( -
{page}
- ); - })} - - -
-
- -
- -
- {pages.map((_, i) => { - const className = classNames('onboarding-modal__dot', { - active: i === currentIndex, - }); - return ( -
- ); - })} -
- -
- {nextOrDoneBtn} -
-
-
- ); - } - -} diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index d6586680b..a03c4cefd 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -94,10 +94,6 @@ export function Mutes () { return import(/* webpackChunkName: "features/mutes" */'../../mutes'); } -export function OnboardingModal () { - return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal'); -} - export function MuteModal () { return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal'); } diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index e6422b2ea..b3bcc9209 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -228,6 +228,13 @@ h3 { line-height: 25px; } +h5 { + font-size: 16px; + line-height: 21px; + font-weight: 700; + color: lighten($ui-base-color, 34%); +} + .input { td { background: darken($ui-base-color, 8%); @@ -356,6 +363,19 @@ h3 { font-weight: 500 !important; } } + + &.button-small { + td { + border-radius: 4px; + font-size: 14px; + padding: 8px 16px; + + a { + padding: 5px 16px !important; + line-height: 26px !important; + } + } + } } .button-default { @@ -379,6 +399,14 @@ h3 { padding-right: 16px; } +.padded-bottom { + padding-bottom: 32px; +} + +.margin-bottom { + margin-bottom: 20px; +} + .hero-icon { width: 64px; @@ -463,6 +491,22 @@ h3 { border-top: 1px solid lighten($ui-base-color, 8%); } +ul { + padding-left: 15px; + margin-top: 0; + margin-bottom: 0; + padding-top: 16px; + + li { + margin-bottom: 16px; + color: lighten($ui-base-color, 26%); + + span { + color: $ui-primary-color; + } + } +} + @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { body { min-height: 1024px !important; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6fbecee7c..63ee06d8e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3303,7 +3303,6 @@ z-index: 100; } -.onboarding-modal, .error-modal, .embed-modal { background: $ui-secondary-color; @@ -3314,26 +3313,6 @@ flex-direction: column; } -.onboarding-modal__pager { - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; - - .react-swipeable-view-container > div { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - user-select: text; - } -} - .error-modal__body { height: 80vh; width: 80vw; @@ -3367,23 +3346,6 @@ text-align: center; } -@media screen and (max-width: 550px) { - .onboarding-modal { - width: 100%; - height: 100%; - border-radius: 0; - } - - .onboarding-modal__pager { - width: 100%; - height: auto; - max-width: none; - max-height: none; - flex: 1 1 auto; - } -} - -.onboarding-modal__paginator, .error-modal__footer { flex: 0 0 auto; background: darken($ui-secondary-color, 8%); @@ -3394,7 +3356,6 @@ min-width: 33px; } - .onboarding-modal__nav, .error-modal__nav { color: darken($ui-secondary-color, 34%); background-color: transparent; @@ -3410,11 +3371,6 @@ &:active { color: darken($ui-secondary-color, 38%); } - - &.onboarding-modal__done, - &.onboarding-modal__next { - color: $ui-highlight-color; - } } } @@ -3422,216 +3378,6 @@ justify-content: center; } -.onboarding-modal__dots { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; -} - -.onboarding-modal__dot { - width: 14px; - height: 14px; - border-radius: 14px; - background: darken($ui-secondary-color, 16%); - margin: 0 3px; - cursor: pointer; - - &:hover { - background: darken($ui-secondary-color, 18%); - } - - &.active { - cursor: default; - background: darken($ui-secondary-color, 24%); - } -} - -.onboarding-modal__page__wrapper { - pointer-events: none; - - &.onboarding-modal__page__wrapper--active { - pointer-events: auto; - } -} - -.onboarding-modal__page { - cursor: default; - line-height: 21px; - - h1 { - font-size: 18px; - font-weight: 500; - color: $ui-base-color; - margin-bottom: 20px; - } - - a { - color: $ui-highlight-color; - - &:hover, - &:focus, - &:active { - color: lighten($ui-highlight-color, 4%); - } - } - - p { - font-size: 16px; - color: lighten($ui-base-color, 8%); - margin-top: 10px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { - font-weight: 500; - background: $ui-base-color; - color: $ui-secondary-color; - border-radius: 4px; - font-size: 14px; - padding: 3px 6px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.onboarding-modal__page-one { - display: flex; - align-items: center; -} - -.onboarding-modal__page-one__elephant-friend { - background: url('../images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; -} - -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; - } - - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; - } -} - -.onboarding-modal__page-two, -.onboarding-modal__page-three, -.onboarding-modal__page-four, -.onboarding-modal__page-five { - p { - text-align: left; - } - - .figure { - background: darken($ui-base-color, 8%); - color: $ui-secondary-color; - margin-bottom: 20px; - border-radius: 4px; - padding: 10px; - text-align: center; - font-size: 14px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); - - .onboarding-modal__image { - border-radius: 4px; - margin-bottom: 10px; - } - - &.non-interactive { - pointer-events: none; - text-align: left; - } - } -} - -.onboarding-modal__page-four__columns { - .row { - display: flex; - margin-bottom: 20px; - - & > div { - flex: 1 1 0; - margin: 0 10px; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - p { - text-align: center; - } - } - - &:last-child { - margin-bottom: 0; - } - } - - .column-header { - color: $primary-text-color; - } -} - -@media screen and (max-width: 320px) and (max-height: 600px) { - .onboarding-modal__page p { - font-size: 14px; - line-height: 20px; - } - - .onboarding-modal__page-two .figure, - .onboarding-modal__page-three .figure, - .onboarding-modal__page-four .figure, - .onboarding-modal__page-five .figure { - font-size: 12px; - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .row { - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .column-header { - padding: 5px; - font-size: 12px; - } -} - -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - -.onboard-sliders { - display: inline-block; - max-width: 30px; - max-height: auto; - margin-left: 10px; -} - .boost-modal, .confirmation-modal, .report-modal, -- cgit From 540b3f37ae904c135809ef2a65f2700ca361de77 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 19 Jan 2018 15:25:27 +0100 Subject: Replace drawer elephant graphic with a vector image (#6286) * Replace drawer elephant graphic with a vector image * Replace wave graphic with SVG * Remove unused elephant graphic --- app/javascript/images/elephant-friend-1.png | Bin 144967 -> 0 bytes app/javascript/images/elephant_ui_plane.svg | 1 + app/javascript/images/mastodon-ui.png | Bin 32449 -> 0 bytes app/javascript/images/wave-compose-standalone.png | Bin 5921 -> 0 bytes app/javascript/images/wave-drawer.png | Bin 3269 -> 0 bytes app/javascript/images/wave-modal.png | Bin 5200 -> 0 bytes app/javascript/styles/application.scss | 3 ++- app/javascript/styles/mastodon/components.scss | 7 ++----- app/javascript/styles/mastodon/modal.scss | 4 ++-- 9 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 app/javascript/images/elephant-friend-1.png create mode 100644 app/javascript/images/elephant_ui_plane.svg delete mode 100644 app/javascript/images/mastodon-ui.png delete mode 100644 app/javascript/images/wave-compose-standalone.png delete mode 100644 app/javascript/images/wave-drawer.png delete mode 100644 app/javascript/images/wave-modal.png (limited to 'app/javascript') diff --git a/app/javascript/images/elephant-friend-1.png b/app/javascript/images/elephant-friend-1.png deleted file mode 100644 index 2b2383330..000000000 Binary files a/app/javascript/images/elephant-friend-1.png and /dev/null differ diff --git a/app/javascript/images/elephant_ui_plane.svg b/app/javascript/images/elephant_ui_plane.svg new file mode 100644 index 000000000..a2624d170 --- /dev/null +++ b/app/javascript/images/elephant_ui_plane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/images/mastodon-ui.png b/app/javascript/images/mastodon-ui.png deleted file mode 100644 index a1fb642a0..000000000 Binary files a/app/javascript/images/mastodon-ui.png and /dev/null differ diff --git a/app/javascript/images/wave-compose-standalone.png b/app/javascript/images/wave-compose-standalone.png deleted file mode 100644 index 287ee639b..000000000 Binary files a/app/javascript/images/wave-compose-standalone.png and /dev/null differ diff --git a/app/javascript/images/wave-drawer.png b/app/javascript/images/wave-drawer.png deleted file mode 100644 index ca9f9e1d8..000000000 Binary files a/app/javascript/images/wave-drawer.png and /dev/null differ diff --git a/app/javascript/images/wave-modal.png b/app/javascript/images/wave-modal.png deleted file mode 100644 index 88818a6d7..000000000 Binary files a/app/javascript/images/wave-modal.png and /dev/null differ diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index fd6665f65..300040173 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -6,7 +6,6 @@ @import 'mastodon/reset'; @import 'mastodon/basics'; -@import 'mastodon/modal'; @import 'mastodon/containers'; @import 'mastodon/lists'; @import 'mastodon/footer'; @@ -15,7 +14,9 @@ @import 'mastodon/forms'; @import 'mastodon/accounts'; @import 'mastodon/stream_entries'; +@import 'mastodon/boost'; @import 'mastodon/components'; +@import 'mastodon/modal'; @import 'mastodon/emoji_picker'; @import 'mastodon/about'; @import 'mastodon/tables'; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 63ee06d8e..c0a32ed05 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1762,7 +1762,7 @@ position: absolute; top: 0; left: 0; - background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; box-sizing: border-box; padding: 0; display: flex; @@ -1777,7 +1777,7 @@ } > .mastodon { - background: url('../images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain; flex: 1; } } @@ -2154,10 +2154,7 @@ } } -@import 'boost'; - .no-reduce-motion button.icon-button i.fa-retweet { - background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 310dcb924..f9fad732e 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -1,5 +1,5 @@ .modal-layout { - background: $ui-base-color url('../images/wave-modal.png') repeat-x bottom fixed; + background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -15,6 +15,6 @@ > * { flex: 1; max-height: 235px; - background: url('../images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain; } } -- cgit From 0b888acfd4ffddd29f25c878373e9b9f5ec6c0ab Mon Sep 17 00:00:00 2001 From: ThibG Date: Fri, 19 Jan 2018 21:48:00 +0100 Subject: Do not throw away statuses obtained via websocket when API request finishes (#6302) --- app/javascript/mastodon/reducers/timelines.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 7b7b5470f..9a10bcc59 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -40,7 +40,7 @@ const normalizeTimeline = (state, timeline, statuses, next, isPartial) => { mMap.set('loaded', true); mMap.set('isLoading', false); if (!hadNext) mMap.set('next', next); - mMap.set('items', wasLoaded ? ids.concat(oldIds) : ids); + mMap.set('items', wasLoaded ? ids.concat(oldIds) : oldIds.concat(ids)); mMap.set('isPartial', isPartial); })); }; -- cgit From 872a0d5bd801c998d911f7da582a60d2f714a710 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 20 Jan 2018 01:32:21 +0100 Subject: Improve HTML e-mails based on Litmus tests (#6301) * Use PNG images in HTML e-mails * Make webpack use URLs with host so fonts load inside HTML e-mails Convert this back to a relative URL in the premailer CSS loader since local requests are quicker * Improve responsive design * Add missing PNG icon --- app/javascript/images/mailer/icon_cached.png | Bin 0 -> 754 bytes app/javascript/images/mailer/icon_done.png | Bin 0 -> 279 bytes app/javascript/images/mailer/icon_email.png | Bin 0 -> 520 bytes app/javascript/images/mailer/icon_grade.png | Bin 0 -> 541 bytes app/javascript/images/mailer/icon_lock_open.png | Bin 0 -> 550 bytes app/javascript/images/mailer/icon_person_add.png | Bin 0 -> 512 bytes app/javascript/images/mailer/icon_reply.png | Bin 0 -> 391 bytes app/javascript/images/mailer/logo_full.png | Bin 0 -> 3052 bytes app/javascript/images/mailer/logo_transparent.png | Bin 0 -> 627 bytes app/javascript/styles/mailer.scss | 34 ++++++++++++++++++++- app/views/layouts/mailer.html.haml | 9 ++---- app/views/notification_mailer/favourite.html.haml | 2 +- app/views/notification_mailer/follow.html.haml | 2 +- .../notification_mailer/follow_request.html.haml | 2 +- app/views/notification_mailer/mention.html.haml | 2 +- app/views/notification_mailer/reblog.html.haml | 2 +- .../confirmation_instructions.html.haml | 2 +- app/views/user_mailer/email_changed.html.haml | 2 +- app/views/user_mailer/password_change.html.haml | 2 +- .../reconfirmation_instructions.html.haml | 2 +- .../reset_password_instructions.html.haml | 2 +- app/views/user_mailer/welcome.html.haml | 12 ++++---- config/webpack/configuration.js | 2 +- lib/mastodon/premailer_webpack_strategy.rb | 3 ++ 24 files changed, 56 insertions(+), 24 deletions(-) create mode 100644 app/javascript/images/mailer/icon_cached.png create mode 100644 app/javascript/images/mailer/icon_done.png create mode 100644 app/javascript/images/mailer/icon_email.png create mode 100644 app/javascript/images/mailer/icon_grade.png create mode 100644 app/javascript/images/mailer/icon_lock_open.png create mode 100644 app/javascript/images/mailer/icon_person_add.png create mode 100644 app/javascript/images/mailer/icon_reply.png create mode 100644 app/javascript/images/mailer/logo_full.png create mode 100644 app/javascript/images/mailer/logo_transparent.png (limited to 'app/javascript') diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png new file mode 100644 index 000000000..e62c064c8 Binary files /dev/null and b/app/javascript/images/mailer/icon_cached.png differ diff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png new file mode 100644 index 000000000..0d2ef0cb8 Binary files /dev/null and b/app/javascript/images/mailer/icon_done.png differ diff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png new file mode 100644 index 000000000..aae9d2bb9 Binary files /dev/null and b/app/javascript/images/mailer/icon_email.png differ diff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png new file mode 100644 index 000000000..895b57d0a Binary files /dev/null and b/app/javascript/images/mailer/icon_grade.png differ diff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png new file mode 100644 index 000000000..9f62eadc2 Binary files /dev/null and b/app/javascript/images/mailer/icon_lock_open.png differ diff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png new file mode 100644 index 000000000..3453060ae Binary files /dev/null and b/app/javascript/images/mailer/icon_person_add.png differ diff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png new file mode 100644 index 000000000..8bce4955c Binary files /dev/null and b/app/javascript/images/mailer/icon_reply.png differ diff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png new file mode 100644 index 000000000..1c4f33287 Binary files /dev/null and b/app/javascript/images/mailer/logo_full.png differ diff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png new file mode 100644 index 000000000..8fda4f67f Binary files /dev/null and b/app/javascript/images/mailer/logo_transparent.png differ diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index b3bcc9209..dbe070f9a 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -17,7 +17,7 @@ body { -ms-text-size-adjust: 100%; } -.email_body { +.email-body { td, div, a, @@ -235,6 +235,12 @@ h5 { color: lighten($ui-base-color, 34%); } +.input-cell { + h5 { + margin-top: 4px; + } +} + .input { td { background: darken($ui-base-color, 8%); @@ -512,3 +518,29 @@ ul { min-height: 1024px !important; } } + +@media (max-width: 697px) { + .email-container, + .col-1, + .col-2, + .col-3, + .col-4, + .col-5, + .col-6 { + width: 100% !important; + max-width: none !important; + } + + .email-start { + padding-top: 16px !important; + } + + .email-end { + padding-bottom: 16px !important; + } + + .padded { + padding-left: 0 !important; + padding-right: 0 !important; + } +} diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml index e41b91069..6687546fb 100644 --- a/app/views/layouts/mailer.html.haml +++ b/app/views/layouts/mailer.html.haml @@ -24,7 +24,7 @@ %tr %td.column-cell = link_to root_url do - = image_tag full_pack_url('logo_full.svg'), alt: 'Mastodon', height: 34, class: 'logo' + = image_tag full_pack_url('logo_full.png'), alt: 'Mastodon', height: 34, class: 'logo' = yield @@ -41,15 +41,12 @@ %tr %td.blank-cell.footer .email-row - .col-4 + .col-6 %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %td.column-cell %p= t 'about.hosted_on', domain: site_hostname %p= link_to t('application_mailer.notification_preferences'), settings_notifications_url - .col-2 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody %td.column-cell.text-right = link_to root_url do - = image_tag full_pack_url('logo_transparent.svg'), alt: 'Mastodon', height: 24 + = image_tag full_pack_url('logo_transparent.png'), alt: 'Mastodon', height: 24 diff --git a/app/views/notification_mailer/favourite.html.haml b/app/views/notification_mailer/favourite.html.haml index f26b08b18..7d1b494d0 100644 --- a/app/views/notification_mailer/favourite.html.haml +++ b/app/views/notification_mailer/favourite.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_grade.svg'), alt:'' + = image_tag full_pack_url('icon_grade.png'), alt:'' %h1= t 'notification_mailer.favourite.title' %p.lead= t('notification_mailer.favourite.body', name: @account.acct) diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml index 1290e2bc4..31a2b7445 100644 --- a/app/views/notification_mailer/follow.html.haml +++ b/app/views/notification_mailer/follow.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_person_add.svg'), alt: '' + = image_tag full_pack_url('icon_person_add.png'), alt: '' %h1= t 'notification_mailer.follow.title' %p.lead= t('notification_mailer.follow.body', name: @account.acct) diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml index 41efeafaf..44f1911c4 100644 --- a/app/views/notification_mailer/follow_request.html.haml +++ b/app/views/notification_mailer/follow_request.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_person_add.svg'), alt: '' + = image_tag full_pack_url('icon_person_add.png'), alt: '' %h1= t 'notification_mailer.follow_request.title' %p.lead= t('notification_mailer.follow_request.body', name: @account.acct) diff --git a/app/views/notification_mailer/mention.html.haml b/app/views/notification_mailer/mention.html.haml index 619c580ce..479fed41c 100644 --- a/app/views/notification_mailer/mention.html.haml +++ b/app/views/notification_mailer/mention.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_reply.svg'), alt: '' + = image_tag full_pack_url('icon_reply.png'), alt: '' %h1= t 'notification_mailer.mention.title' %p.lead= t('notification_mailer.mention.body', name: @status.account.acct) diff --git a/app/views/notification_mailer/reblog.html.haml b/app/views/notification_mailer/reblog.html.haml index 61c6ee6be..85b202cf9 100644 --- a/app/views/notification_mailer/reblog.html.haml +++ b/app/views/notification_mailer/reblog.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_cached.svg'), alt: '' + = image_tag full_pack_url('icon_cached.png'), alt: '' %h1= t 'notification_mailer.reblog.title' %p.lead= t('notification_mailer.reblog.body', name: @account.acct) diff --git a/app/views/user_mailer/confirmation_instructions.html.haml b/app/views/user_mailer/confirmation_instructions.html.haml index 0f999bcbc..1f088a16f 100644 --- a/app/views/user_mailer/confirmation_instructions.html.haml +++ b/app/views/user_mailer/confirmation_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.confirmation_instructions.title' diff --git a/app/views/user_mailer/email_changed.html.haml b/app/views/user_mailer/email_changed.html.haml index 45dc06650..7e82f23e4 100644 --- a/app/views/user_mailer/email_changed.html.haml +++ b/app/views/user_mailer/email_changed.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.email_changed.title' %p.lead= t 'devise.mailer.email_changed.explanation' diff --git a/app/views/user_mailer/password_change.html.haml b/app/views/user_mailer/password_change.html.haml index 2e9377dff..26314a217 100644 --- a/app/views/user_mailer/password_change.html.haml +++ b/app/views/user_mailer/password_change.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_lock_open.svg'), alt: '' + = image_tag full_pack_url('icon_lock_open.png'), alt: '' %h1= t 'devise.mailer.password_change.title' %p.lead= t 'devise.mailer.password_change.explanation' diff --git a/app/views/user_mailer/reconfirmation_instructions.html.haml b/app/views/user_mailer/reconfirmation_instructions.html.haml index 3ae226093..e3be8e295 100644 --- a/app/views/user_mailer/reconfirmation_instructions.html.haml +++ b/app/views/user_mailer/reconfirmation_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_email.svg'), alt: '' + = image_tag full_pack_url('icon_email.png'), alt: '' %h1= t 'devise.mailer.reconfirmation_instructions.title' %p.lead= t 'devise.mailer.reconfirmation_instructions.explanation' diff --git a/app/views/user_mailer/reset_password_instructions.html.haml b/app/views/user_mailer/reset_password_instructions.html.haml index c0e6775d4..5d9ce6a75 100644 --- a/app/views/user_mailer/reset_password_instructions.html.haml +++ b/app/views/user_mailer/reset_password_instructions.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_lock_open.svg'), alt: '' + = image_tag full_pack_url('icon_lock_open.png'), alt: '' %h1= t 'devise.mailer.reset_password_instructions.title' %p.lead= t 'devise.mailer.reset_password_instructions.explanation' diff --git a/app/views/user_mailer/welcome.html.haml b/app/views/user_mailer/welcome.html.haml index 0823efa1a..d734da67d 100644 --- a/app/views/user_mailer/welcome.html.haml +++ b/app/views/user_mailer/welcome.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('icon_done.svg'), alt: '' + = image_tag full_pack_url('icon_done.png'), alt: '' %h1= t 'user_mailer.welcome.title', name: @resource.account.username %p.lead= t 'user_mailer.welcome.explanation' @@ -30,7 +30,7 @@ %table.content-section{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.content-cell + %td.content-cell.content-start .email-row .col-3 %table.column{ cellspacing: 0, cellpadding: 0 } @@ -46,7 +46,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell.content-start + %td.column-cell %p= t 'user_mailer.welcome.full_handle_hint', instance: @instance %table.email-table{ cellspacing: 0, cellpadding: 0 } @@ -69,7 +69,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr @@ -89,7 +89,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr @@ -109,7 +109,7 @@ %table.column{ cellspacing: 0, cellpadding: 0 } %tbody %tr - %td.column-cell + %td.column-cell.padded %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } %tbody %tr diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js index 822329490..26747e76b 100644 --- a/config/webpack/configuration.js +++ b/config/webpack/configuration.js @@ -27,7 +27,7 @@ function formatPublicPath(host = '', path = '') { const output = { path: resolve('public', settings.public_output_path), - publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path), + publicPath: formatPublicPath(env.ASSET_HOST || env.LOCAL_DOMAIN, settings.public_output_path), }; module.exports = { diff --git a/lib/mastodon/premailer_webpack_strategy.rb b/lib/mastodon/premailer_webpack_strategy.rb index 4ea3ce80c..84d83cc66 100644 --- a/lib/mastodon/premailer_webpack_strategy.rb +++ b/lib/mastodon/premailer_webpack_strategy.rb @@ -2,6 +2,9 @@ module PremailerWebpackStrategy def load(url) + public_path_host = ENV['ASSET_HOST'] || ENV['LOCAL_DOMAIN'] + url = url.gsub(/\A\/\/#{public_path_host}/, '') + if Webpacker.dev_server.running? url = File.join("#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}", url) HTTP.get(url).to_s -- cgit From 79b34a0fa2e993967f22892b857dcf601c07bd88 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 20 Jan 2018 01:32:37 +0100 Subject: Restore onboarding modal (#6303) * Restore onboarding modal Revert 5ba8b3a396895ecec083c5258aaf9084d584a7c4 * Change greeting elephant graphic, fix up some design issues * Fix wrong link color in onboarding modal --- app/javascript/images/elephant_ui_greeting.svg | 1 + app/javascript/mastodon/actions/onboarding.js | 14 + app/javascript/mastodon/containers/mastodon.js | 3 + .../mastodon/features/ui/components/modal_root.js | 2 + .../features/ui/components/onboarding_modal.js | 324 ++++++++++++++++++++ .../mastodon/features/ui/util/async-components.js | 4 + app/javascript/mastodon/locales/en.json | 2 +- app/javascript/styles/mastodon/components.scss | 333 ++++++++++++++++++++- 8 files changed, 679 insertions(+), 4 deletions(-) create mode 100644 app/javascript/images/elephant_ui_greeting.svg create mode 100644 app/javascript/mastodon/actions/onboarding.js create mode 100644 app/javascript/mastodon/features/ui/components/onboarding_modal.js (limited to 'app/javascript') diff --git a/app/javascript/images/elephant_ui_greeting.svg b/app/javascript/images/elephant_ui_greeting.svg new file mode 100644 index 000000000..f3eb4b142 --- /dev/null +++ b/app/javascript/images/elephant_ui_greeting.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/mastodon/actions/onboarding.js b/app/javascript/mastodon/actions/onboarding.js new file mode 100644 index 000000000..a161c50ef --- /dev/null +++ b/app/javascript/mastodon/actions/onboarding.js @@ -0,0 +1,14 @@ +import { openModal } from './modal'; +import { changeSetting, saveSettings } from './settings'; + +export function showOnboardingOnce() { + return (dispatch, getState) => { + const alreadySeen = getState().getIn(['settings', 'onboarded']); + + if (!alreadySeen) { + dispatch(openModal('ONBOARDING')); + dispatch(changeSetting(['onboarded'], true)); + dispatch(saveSettings()); + } + }; +}; diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 8ae3b727a..d1710445b 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -2,6 +2,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import PropTypes from 'prop-types'; import configureStore from '../store/configureStore'; +import { showOnboardingOnce } from '../actions/onboarding'; import { BrowserRouter, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; import UI from '../features/ui'; @@ -39,6 +40,8 @@ export default class Mastodon extends React.PureComponent { const handlerUrl = window.location.protocol + '//' + window.location.host + '/intent?uri=%s'; window.setTimeout(() => navigator.registerProtocolHandler('web+mastodon', handlerUrl, 'Mastodon'), 5 * 60 * 1000); } + + store.dispatch(showOnboardingOnce()); } componentWillUnmount () { diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index dbfb46ee7..5839ba40a 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -9,6 +9,7 @@ import VideoModal from './video_modal'; import BoostModal from './boost_modal'; import ConfirmationModal from './confirmation_modal'; import { + OnboardingModal, MuteModal, ReportModal, EmbedModal, @@ -17,6 +18,7 @@ import { const MODAL_COMPONENTS = { 'MEDIA': () => Promise.resolve({ default: MediaModal }), + 'ONBOARDING': OnboardingModal, 'VIDEO': () => Promise.resolve({ default: VideoModal }), 'BOOST': () => Promise.resolve({ default: BoostModal }), 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js new file mode 100644 index 000000000..9b713cf9e --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js @@ -0,0 +1,324 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import ReactSwipeableViews from 'react-swipeable-views'; +import classNames from 'classnames'; +import Permalink from '../../../components/permalink'; +import ComposeForm from '../../compose/components/compose_form'; +import Search from '../../compose/components/search'; +import NavigationBar from '../../compose/components/navigation_bar'; +import ColumnHeader from './column_header'; +import { List as ImmutableList } from 'immutable'; +import { me } from '../../../initial_state'; + +const noop = () => { }; + +const messages = defineMessages({ + home_title: { id: 'column.home', defaultMessage: 'Home' }, + notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, + local_title: { id: 'column.community', defaultMessage: 'Local timeline' }, + federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' }, +}); + +const PageOne = ({ acct, domain }) => ( +
+
+

+

+
+ +
+
+
+ +
+ +
+ @{acct}@{domain} +
+
+ +

+
+
+); + +PageOne.propTypes = { + acct: PropTypes.string.isRequired, + domain: PropTypes.string.isRequired, +}; + +const PageTwo = ({ myAccount }) => ( +
+
+
+ + + +
+
+ +

+
+); + +PageTwo.propTypes = { + myAccount: ImmutablePropTypes.map.isRequired, +}; + +const PageThree = ({ myAccount }) => ( +
+
+ + +
+ +
+
+ +

#illustration, introductions: #introductions }} />

+

+
+); + +PageThree.propTypes = { + myAccount: ImmutablePropTypes.map.isRequired, +}; + +const PageFour = ({ domain, intl }) => ( +
+
+
+
+
+

+
+ +
+
+

+
+
+ +
+
+
+
+ +
+
+
+
+ +

+
+
+); + +PageFour.propTypes = { + domain: PropTypes.string.isRequired, + intl: PropTypes.object.isRequired, +}; + +const PageSix = ({ admin, domain }) => { + let adminSection = ''; + + if (admin) { + adminSection = ( +

+ @{admin.get('acct')} }} /> +
+ }} /> +

+ ); + } + + return ( +
+

+ {adminSection} +

GitHub }} />

+

}} />

+

+
+ ); +}; + +PageSix.propTypes = { + admin: ImmutablePropTypes.map, + domain: PropTypes.string.isRequired, +}; + +const mapStateToProps = state => ({ + myAccount: state.getIn(['accounts', me]), + admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), + domain: state.getIn(['meta', 'domain']), +}); + +@connect(mapStateToProps) +@injectIntl +export default class OnboardingModal extends React.PureComponent { + + static propTypes = { + onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + myAccount: ImmutablePropTypes.map.isRequired, + domain: PropTypes.string.isRequired, + admin: ImmutablePropTypes.map, + }; + + state = { + currentIndex: 0, + }; + + componentWillMount() { + const { myAccount, admin, domain, intl } = this.props; + this.pages = [ + , + , + , + , + , + ]; + }; + + componentDidMount() { + window.addEventListener('keyup', this.handleKeyUp); + } + + componentWillUnmount() { + window.addEventListener('keyup', this.handleKeyUp); + } + + handleSkip = (e) => { + e.preventDefault(); + this.props.onClose(); + } + + handleDot = (e) => { + const i = Number(e.currentTarget.getAttribute('data-index')); + e.preventDefault(); + this.setState({ currentIndex: i }); + } + + handlePrev = () => { + this.setState(({ currentIndex }) => ({ + currentIndex: Math.max(0, currentIndex - 1), + })); + } + + handleNext = () => { + const { pages } = this; + this.setState(({ currentIndex }) => ({ + currentIndex: Math.min(currentIndex + 1, pages.length - 1), + })); + } + + handleSwipe = (index) => { + this.setState({ currentIndex: index }); + } + + handleKeyUp = ({ key }) => { + switch (key) { + case 'ArrowLeft': + this.handlePrev(); + break; + case 'ArrowRight': + this.handleNext(); + break; + } + } + + handleClose = () => { + this.props.onClose(); + } + + render () { + const { pages } = this; + const { currentIndex } = this.state; + const hasMore = currentIndex < pages.length - 1; + + const nextOrDoneBtn = hasMore ? ( + + ) : ( + + ); + + return ( +
+ + {pages.map((page, i) => { + const className = classNames('onboarding-modal__page__wrapper', `onboarding-modal__page__wrapper-${i}`, { + 'onboarding-modal__page__wrapper--active': i === currentIndex, + }); + + return ( +
{page}
+ ); + })} + + +
+
+ +
+ +
+ {pages.map((_, i) => { + const className = classNames('onboarding-modal__dot', { + active: i === currentIndex, + }); + + return ( +
+ ); + })} +
+ +
+ {nextOrDoneBtn} +
+
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index a03c4cefd..d6586680b 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -94,6 +94,10 @@ export function Mutes () { return import(/* webpackChunkName: "features/mutes" */'../../mutes'); } +export function OnboardingModal () { + return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal'); +} + export function MuteModal () { return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal'); } diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index d214fe85f..8315763bf 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -174,7 +174,7 @@ "onboarding.page_four.home": "The home timeline shows posts from people you follow.", "onboarding.page_four.notifications": "The notifications column shows when someone interacts with you.", "onboarding.page_one.federation": "Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.", - "onboarding.page_one.handle": "You are on {domain}, so your full handle is {handle}", + "onboarding.page_one.handle": "Your full handle is {handle}. This is what you would tell your friends to search for.", "onboarding.page_one.welcome": "Welcome to Mastodon!", "onboarding.page_six.admin": "Your instance's admin is {admin}.", "onboarding.page_six.almost_done": "Almost done...", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c0a32ed05..4a9a379a8 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1419,6 +1419,10 @@ color: $primary-text-color; } + a { + color: inherit; + } + .permalink { text-decoration: none; } @@ -2760,6 +2764,7 @@ flex: 1 1 auto; align-items: center; justify-content: center; + @supports(display: grid) { // hack to fix Chrome <57 contain: strict; } @@ -2805,11 +2810,48 @@ } } -.pulse-loading { +.no-reduce-motion .pulse-loading { transform-origin: center center; animation: heartbeat 1.5s ease-in-out infinite both; } +@keyframes shake-bottom { + 0%, + 100% { + transform: rotate(0deg); + transform-origin: 50% 100%; + } + + 10% { + transform: rotate(2deg); + } + + 20%, + 40%, + 60% { + transform: rotate(-4deg); + } + + 30%, + 50%, + 70% { + transform: rotate(4deg); + } + + 80% { + transform: rotate(-2deg); + } + + 90% { + transform: rotate(2deg); + } +} + +.no-reduce-motion .shake-bottom { + transform-origin: 50% 100%; + animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both; +} + .emoji-picker-dropdown__menu { background: $simple-background-color; position: absolute; @@ -3300,6 +3342,7 @@ z-index: 100; } +.onboarding-modal, .error-modal, .embed-modal { background: $ui-secondary-color; @@ -3310,6 +3353,25 @@ flex-direction: column; } +.onboarding-modal__pager { + height: 80vh; + width: 80vw; + max-width: 520px; + max-height: 470px; + + .react-swipeable-view-container > div { + width: 100%; + height: 100%; + box-sizing: border-box; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + display: flex; + user-select: text; + } +} + .error-modal__body { height: 80vh; width: 80vw; @@ -3343,6 +3405,23 @@ text-align: center; } +@media screen and (max-width: 550px) { + .onboarding-modal { + width: 100%; + height: 100%; + border-radius: 0; + } + + .onboarding-modal__pager { + width: 100%; + height: auto; + max-width: none; + max-height: none; + flex: 1 1 auto; + } +} + +.onboarding-modal__paginator, .error-modal__footer { flex: 0 0 auto; background: darken($ui-secondary-color, 8%); @@ -3353,20 +3432,35 @@ min-width: 33px; } + .onboarding-modal__nav, .error-modal__nav { color: darken($ui-secondary-color, 34%); - background-color: transparent; border: 0; font-size: 14px; font-weight: 500; - padding: 0; + padding: 10px 25px; line-height: inherit; height: auto; + margin: -10px; + border-radius: 4px; + background-color: transparent; &:hover, &:focus, &:active { color: darken($ui-secondary-color, 38%); + background-color: darken($ui-secondary-color, 16%); + } + + &.onboarding-modal__done, + &.onboarding-modal__next { + color: $ui-base-color; + + &:hover, + &:focus, + &:active { + color: darken($ui-base-color, 4%); + } } } } @@ -3375,6 +3469,239 @@ justify-content: center; } +.onboarding-modal__dots { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.onboarding-modal__dot { + width: 14px; + height: 14px; + border-radius: 14px; + background: darken($ui-secondary-color, 16%); + margin: 0 3px; + cursor: pointer; + + &:hover { + background: darken($ui-secondary-color, 18%); + } + + &.active { + cursor: default; + background: darken($ui-secondary-color, 24%); + } +} + +.onboarding-modal__page__wrapper { + pointer-events: none; + padding: 25px; + padding-bottom: 0; + + &.onboarding-modal__page__wrapper--active { + pointer-events: auto; + } +} + +.onboarding-modal__page { + cursor: default; + line-height: 21px; + + h1 { + font-size: 18px; + font-weight: 500; + color: $ui-base-color; + margin-bottom: 20px; + } + + a { + color: $ui-highlight-color; + + &:hover, + &:focus, + &:active { + color: lighten($ui-highlight-color, 4%); + } + } + + .navigation-bar a { + color: inherit; + } + + p { + font-size: 16px; + color: lighten($ui-base-color, 8%); + margin-top: 10px; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + + strong { + font-weight: 500; + background: $ui-base-color; + color: $ui-secondary-color; + border-radius: 4px; + font-size: 14px; + padding: 3px 6px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + } +} + +.onboarding-modal__page__wrapper-0 { + background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + height: 100%; + padding: 0; +} + +.onboarding-modal__page-one { + &__lead { + padding: 65px; + padding-top: 45px; + padding-bottom: 0; + margin-bottom: 10px; + + h1 { + font-size: 26px; + line-height: 36px; + margin-bottom: 8px; + } + + p { + margin-bottom: 0; + } + } + + &__extra { + padding-right: 65px; + padding-left: 185px; + text-align: center; + } +} + +.display-case { + text-align: center; + font-size: 15px; + margin-bottom: 15px; + + &__label { + font-weight: 500; + color: $ui-base-color; + margin-bottom: 5px; + text-transform: uppercase; + font-size: 12px; + } + + &__case { + background: $ui-base-color; + color: $ui-secondary-color; + font-weight: 500; + padding: 10px; + border-radius: 4px; + } +} + +.onboarding-modal__page-two, +.onboarding-modal__page-three, +.onboarding-modal__page-four, +.onboarding-modal__page-five { + p { + text-align: left; + } + + .figure { + background: darken($ui-base-color, 8%); + color: $ui-secondary-color; + margin-bottom: 20px; + border-radius: 4px; + padding: 10px; + text-align: center; + font-size: 14px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); + + .onboarding-modal__image { + border-radius: 4px; + margin-bottom: 10px; + } + + &.non-interactive { + pointer-events: none; + text-align: left; + } + } +} + +.onboarding-modal__page-four__columns { + .row { + display: flex; + margin-bottom: 20px; + + & > div { + flex: 1 1 0; + margin: 0 10px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + p { + text-align: center; + } + } + + &:last-child { + margin-bottom: 0; + } + } + + .column-header { + color: $primary-text-color; + } +} + +@media screen and (max-width: 320px) and (max-height: 600px) { + .onboarding-modal__page p { + font-size: 14px; + line-height: 20px; + } + + .onboarding-modal__page-two .figure, + .onboarding-modal__page-three .figure, + .onboarding-modal__page-four .figure, + .onboarding-modal__page-five .figure { + font-size: 12px; + margin-bottom: 10px; + } + + .onboarding-modal__page-four__columns .row { + margin-bottom: 10px; + } + + .onboarding-modal__page-four__columns .column-header { + padding: 5px; + font-size: 12px; + } +} + +.onboard-sliders { + display: inline-block; + max-width: 30px; + max-height: auto; + margin-left: 10px; +} + .boost-modal, .confirmation-modal, .report-modal, -- cgit From 80b3ca0f6f2d0c545487d36b88ccbb792761a0e5 Mon Sep 17 00:00:00 2001 From: SerCom_KC Date: Sat, 20 Jan 2018 23:11:21 +0800 Subject: Update Simplified Chinese translations (#6306) * i18n: (zh-CN) Add translations of #6251 * i18n: (zh-CN) Improve translations for #6291 * Fix en.json * i18n: (zh-CN) Update translations for #6303 * i18n: (zh-CN) Add translations of #6273 with minor adjustment * Minor fix * Minor fix --- app/javascript/mastodon/locales/en.json | 3 ++- app/javascript/mastodon/locales/zh-CN.json | 6 +++++- config/locales/devise.zh-CN.yml | 6 +++--- config/locales/zh-CN.yml | 21 ++++++++++++++++++++- 4 files changed, 30 insertions(+), 6 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 8315763bf..02d12677a 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -174,7 +174,8 @@ "onboarding.page_four.home": "The home timeline shows posts from people you follow.", "onboarding.page_four.notifications": "The notifications column shows when someone interacts with you.", "onboarding.page_one.federation": "Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.", - "onboarding.page_one.handle": "Your full handle is {handle}. This is what you would tell your friends to search for.", + "onboarding.page_one.full_handle": "Your full handle", + "onboarding.page_one.handle_hint": "This is what you would tell your friends to search for.", "onboarding.page_one.welcome": "Welcome to Mastodon!", "onboarding.page_six.admin": "Your instance's admin is {admin}.", "onboarding.page_six.almost_done": "Almost done...", diff --git a/app/javascript/mastodon/locales/zh-CN.json b/app/javascript/mastodon/locales/zh-CN.json index b6435a260..a02211b8a 100644 --- a/app/javascript/mastodon/locales/zh-CN.json +++ b/app/javascript/mastodon/locales/zh-CN.json @@ -139,6 +139,7 @@ "loading_indicator.label": "加载中……", "media_gallery.toggle_visible": "切换显示/隐藏", "missing_indicator.label": "找不到内容", + "missing_indicator.sublabel": "无法找到此资源", "mute_modal.hide_notifications": "同时隐藏来自这个用户的通知", "navigation_bar.blocks": "被屏蔽的用户", "navigation_bar.community_timeline": "本站时间轴", @@ -174,7 +175,8 @@ "onboarding.page_four.home": "你的“主页”时间轴上显示的是你的关注对象所发布的嘟文。", "onboarding.page_four.notifications": "如果有人与你互动了，他们就会出现在“通知”栏中哦～", "onboarding.page_one.federation": "Mastodon 是由一系列独立的服务器共同打造的强大的社交网络，我们将这些各自独立而又相互连接的服务器叫做“实例”。", - "onboarding.page_one.handle": "你是在 {domain} 上注册的，所以你的完整用户地址是 {handle}。", + "onboarding.page_one.full_handle": "你的完整用户地址", + "onboarding.page_one.handle_hint": "你的朋友们需要这个才能通过搜索功能找到你。", "onboarding.page_one.welcome": "欢迎来到 Mastodon！", "onboarding.page_six.admin": "{admin} 是你所在服务器实例的管理员。", "onboarding.page_six.almost_done": "差不多了……", @@ -197,6 +199,8 @@ "privacy.public.short": "公开", "privacy.unlisted.long": "所有人可见，但不会出现在公共时间轴上", "privacy.unlisted.short": "不公开", + "regeneration_indicator.label": "加载中……", + "regeneration_indicator.sublabel": "你的主页时间轴正在准备中！", "relative_time.days": "{number}天", "relative_time.hours": "{number}时", "relative_time.just_now": "刚刚", diff --git a/config/locales/devise.zh-CN.yml b/config/locales/devise.zh-CN.yml index dd6b48795..4ee021fcc 100644 --- a/config/locales/devise.zh-CN.yml +++ b/config/locales/devise.zh-CN.yml @@ -18,7 +18,7 @@ zh-CN: mailer: confirmation_instructions: action: 验证电子邮件地址 - explanation: 你在 %{host} 上使用这个电子邮件地址创建了一个帐户。只需点击下面的按钮，即可完成激活。如果你并没有创建过帐户，请忽略此邮件。 + explanation: 你在 %{host} 上使用这个电子邮件地址创建了一个帐户。只需点击下面的链接，即可完成激活。如果你并没有创建过帐户，请忽略此邮件。 extra_html: 请记得阅读本实例的相关规定和我们的使用条款。 subject: Mastodon：确认 %{instance} 帐户信息 title: 验证电子邮件地址 @@ -33,13 +33,13 @@ zh-CN: subject: Mastodon：密码已被更改 title: 密码已被重置 reconfirmation_instructions: - explanation: 请确认你的新电子邮件地址以完成更改。 + explanation: 点击下面的链接来确认你的新电子邮件地址。 extra: 如果你并没有请求本次变更，请忽略此邮件。Mastodon 帐户的电子邮件地址只有在你点击上面的链接后才会更改。 subject: Mastodon：确认 %{instance} 电子邮件地址 title: 验证电子邮件地址 reset_password_instructions: action: 更改密码 - explanation: 你正在请求更改帐户的密码。 + explanation: 点击下面的链接来更改帐户的密码。 extra: 如果你并没有请求本次变更，请忽略此邮件。你的密码只有在你点击上面的链接并输入新密码后才会更改。 subject: Mastodon：重置密码信息 title: 重置密码 diff --git a/config/locales/zh-CN.yml b/config/locales/zh-CN.yml index 25cfe5a8a..7deb241a1 100644 --- a/config/locales/zh-CN.yml +++ b/config/locales/zh-CN.yml @@ -591,7 +591,7 @@ zh-CN: back: 回到 Mastodon delete: 删除帐户 development: 开发 - edit_profile: 更改个人信息 + edit_profile: 更改个人资料 export: 导出 followers: 已授权的关注者 import: 导入 @@ -712,6 +712,25 @@ zh-CN: recovery_instructions_html: 如果你的手机无法使用，你可以使用下列任意一个恢复代码来重新获得对帐户的访问权。请妥善保管好你的恢复代码（例如，你可以将它们打印出来，然后和其他重要的文件放在一起）。 setup: 设置 wrong_code: 输入的认证码无效！请核对一下你的设备显示的时间，如果正确，你可能需要联系一下实例的管理员，让他们校准服务器的时间。 + user_mailer: + welcome: + edit_profile_action: 设置个人资料 + edit_profile_step: 你可以自定义你的个人资料，包括上传头像、横幅图片、更改昵称等等。如果你想在新的关注者关注你之前对他们进行审核，你也可以选择为你的帐户开启保护。 + explanation: 下面是几个小贴士，希望它们能帮到你 + final_action: 开始嘟嘟 + final_step: '开始嘟嘟吧！即便你现在没有关注者，其他人仍然能在本站时间轴或者话题标签等地方看到你的公开嘟文。试着用 #introductions 这个话题标签介绍一下自己吧。' + full_handle: 你的完整用户地址 + full_handle_hint: 你需要把这个告诉你的朋友们，这样他们就能从另一个实例向你发送信息或者关注你。 + review_preferences_action: 更改首选项 + review_preferences_step: 记得调整你的偏好设置，比如你想接收什么类型的邮件，或者你想把你的嘟文可见范围默认设置为什么级别。如果你没有晕动病的话，考虑一下启用“自动播放 GIF 动画”这个选项吧。 + subject: 欢迎来到 Mastodon + tip_bridge_html: 如果你刚从 Twitter 来到这里，你可以在桥梁站（bridge app）上寻找你的朋友。当然，前提是他们也登录了桥梁站！ + tip_federated_timeline: 跨站公共时间轴可以让你一窥更广阔的 Mastodon 网络。不过，由于它只显示你的邻居们所订阅的内容，所以并不是全部。 + tip_following: 默认情况下，你会自动关注你所在实例的管理员。想结交更多有趣的人的话，记得多逛逛本站时间轴和跨站公共时间轴哦。 + tip_local_timeline: 本站时间轴可以让你一窥 %{instance} 上的用户。他们就是离你最近的邻居！ + tip_mobile_webapp: 如果你的移动设备浏览器允许你将 Mastodon 添加到主屏幕，你就能够接收推送消息。它就像本地应用一样好使！ + tips: 小贴士 + title: "%{name}，欢迎你的加入！" users: invalid_email: 输入的电子邮件地址无效 invalid_otp_token: 输入的双重认证代码无效 -- cgit From 38f6d8130df7ba74d963e42d00209b444dd1bfbb Mon Sep 17 00:00:00 2001 From: David Yip Date: Sat, 20 Jan 2018 10:46:43 -0600 Subject: Eliminate stray conflict markers. --- app/javascript/styles/mastodon/components.scss | 215 +------------------------ 1 file changed, 1 insertion(+), 214 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9e858e9ca..75e37237b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3557,7 +3557,7 @@ } .onboarding-modal__page__wrapper-0 { - background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; height: 100%; padding: 0; } @@ -3702,219 +3702,6 @@ margin-left: 10px; } -<<<<<<< HEAD -.onboarding-modal__dots { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; -} - -.onboarding-modal__dot { - width: 14px; - height: 14px; - border-radius: 14px; - background: darken($ui-secondary-color, 16%); - margin: 0 3px; - cursor: pointer; - - &:hover { - background: darken($ui-secondary-color, 18%); - } - - &.active { - cursor: default; - background: darken($ui-secondary-color, 24%); - } -} - -.onboarding-modal__page__wrapper { - pointer-events: none; - - &.onboarding-modal__page__wrapper--active { - pointer-events: auto; - } -} - -.onboarding-modal__page { - cursor: default; - line-height: 21px; - - h1 { - font-size: 18px; - font-weight: 500; - color: $ui-base-color; - margin-bottom: 20px; - } - - a { - color: $ui-highlight-color; - - &:hover, - &:focus, - &:active { - color: lighten($ui-highlight-color, 4%); - } - } - - p { - font-size: 16px; - color: lighten($ui-base-color, 8%); - margin-top: 10px; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - strong { - font-weight: 500; - background: $ui-base-color; - color: $ui-secondary-color; - border-radius: 4px; - font-size: 14px; - padding: 3px 6px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - } -} - -.onboarding-modal__page-one { - display: flex; - align-items: center; -} - -.onboarding-modal__page-one__elephant-friend { - background: url('~images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; -} - -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; - } - - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; - } -} - -.onboarding-modal__page-two, -.onboarding-modal__page-three, -.onboarding-modal__page-four, -.onboarding-modal__page-five { - p { - text-align: left; - } - - .figure { - background: darken($ui-base-color, 8%); - color: $ui-secondary-color; - margin-bottom: 20px; - border-radius: 4px; - padding: 10px; - text-align: center; - font-size: 14px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); - - .onboarding-modal__image { - border-radius: 4px; - margin-bottom: 10px; - } - - &.non-interactive { - pointer-events: none; - text-align: left; - } - } -} - -.onboarding-modal__page-four__columns { - .row { - display: flex; - margin-bottom: 20px; - - & > div { - flex: 1 1 0; - margin: 0 10px; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - p { - text-align: center; - } - } - - &:last-child { - margin-bottom: 0; - } - } - - .column-header { - color: $primary-text-color; - } -} - -@media screen and (max-width: 320px) and (max-height: 600px) { - .onboarding-modal__page p { - font-size: 14px; - line-height: 20px; - } - - .onboarding-modal__page-two .figure, - .onboarding-modal__page-three .figure, - .onboarding-modal__page-four .figure, - .onboarding-modal__page-five .figure { - font-size: 12px; - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .row { - margin-bottom: 10px; - } - - .onboarding-modal__page-four__columns .column-header { - padding: 5px; - font-size: 12px; - } -} - -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - -.onboard-sliders { - display: inline-block; - max-width: 30px; - max-height: auto; - margin-left: 10px; -} - -======= ->>>>>>> origin/master .boost-modal, .confirmation-modal, .report-modal, -- cgit From 3cae3622146d80aef8e43e5790d25f5e2fc9931e Mon Sep 17 00:00:00 2001 From: David Yip Date: Sat, 20 Jan 2018 11:23:06 -0600 Subject: Merge new onboarding styles; delete refs to PNGs. --- .../flavours/glitch/styles/components/drawer.scss | 4 +- .../flavours/glitch/styles/components/modal.scss | 95 ++++++++++++++-------- app/javascript/flavours/glitch/styles/modal.scss | 4 +- 3 files changed, 67 insertions(+), 36 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 11ac0a37f..0ed8c392a 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -296,7 +296,7 @@ position: absolute; top: 0; left: 0; - background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; box-sizing: border-box; padding: 0; display: flex; @@ -311,7 +311,7 @@ } > .mastodon { - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain; flex: 1; } } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index c12f56828..1ac399fa1 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -77,13 +77,12 @@ height: 80vh; width: 80vw; max-width: 520px; - max-height: 420px; + max-height: 470px; .react-swipeable-view-container > div { width: 100%; height: 100%; box-sizing: border-box; - padding: 25px; display: none; flex-direction: column; align-items: center; @@ -156,23 +155,32 @@ .onboarding-modal__nav, .error-modal__nav { color: darken($ui-secondary-color, 34%); - background-color: transparent; border: 0; font-size: 14px; font-weight: 500; - padding: 0; + padding: 10px 25px; line-height: inherit; height: auto; + margin: -10px; + border-radius: 4px; + background-color: transparent; &:hover, &:focus, &:active { color: darken($ui-secondary-color, 38%); + background-color: darken($ui-secondary-color, 16%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $ui-highlight-color; + color: $ui-base-color; + + &:hover, + &:focus, + &:active { + color: darken($ui-base-color, 4%); + } } } } @@ -208,6 +216,8 @@ .onboarding-modal__page__wrapper { pointer-events: none; + padding: 25px; + padding-bottom: 0; &.onboarding-modal__page__wrapper--active { pointer-events: auto; @@ -235,6 +245,10 @@ } } + .navigation-bar a { + color: inherit; + } + p { font-size: 16px; color: lighten($ui-base-color, 8%); @@ -262,29 +276,56 @@ } } -.onboarding-modal__page-one { - display: flex; - align-items: center; +.onboarding-modal__page__wrapper-0 { + background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + height: 100%; + padding: 0; } -.onboarding-modal__page-one__elephant-friend { - background: url('~images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; +.onboarding-modal__page-one { + &__lead { + padding: 65px; + padding-top: 45px; + padding-bottom: 0; + margin-bottom: 10px; + + h1 { + font-size: 26px; + line-height: 36px; + margin-bottom: 8px; + } + + p { + margin-bottom: 0; + } + } + + &__extra { + padding-right: 65px; + padding-left: 185px; + text-align: center; + } } -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; +.display-case { + text-align: center; + font-size: 15px; + margin-bottom: 15px; + + &__label { + font-weight: 500; + color: $ui-base-color; + margin-bottom: 5px; + text-transform: uppercase; + font-size: 12px; } - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; + &__case { + background: $ui-base-color; + color: $ui-secondary-color; + font-weight: 500; + padding: 10px; + border-radius: 4px; } } @@ -374,16 +415,6 @@ } } -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - .onboard-sliders { display: inline-block; max-width: 30px; diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index a17476ccb..ceb79bbb9 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -1,5 +1,5 @@ .modal-layout { - background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed; + background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -15,6 +15,6 @@ > * { flex: 1; max-height: 235px; - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain; } } -- cgit