- {isLoading ? (new Array(8)).fill().map((_, i) =>
) : suggestions.map(suggestion => (
-
- ))}
+ {loadedContent}
-
diff --git a/app/javascript/flavours/glitch/features/onboarding/share.jsx b/app/javascript/flavours/glitch/features/onboarding/share.jsx
index 10526f515d..ef54972352 100644
--- a/app/javascript/flavours/glitch/features/onboarding/share.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/share.jsx
@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
import { me, domain } from 'flavours/glitch/initial_state';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, FormattedHTMLMessage } from 'react-intl';
import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon';
import ArrowSmallRight from './components/arrow_small_right';
import { Link } from 'react-router-dom';
+import SwipeableViews from 'react-swipeable-views';
const messages = defineMessages({
- shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on Mastodon! Come follow me at {url}' },
+ shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
});
const mapStateToProps = state => ({
@@ -80,6 +81,60 @@ class CopyPasteText extends React.PureComponent {
}
+class TipCarousel extends React.PureComponent {
+
+ static propTypes = {
+ children: PropTypes.node,
+ };
+
+ state = {
+ index: 0,
+ };
+
+ handleSwipe = index => {
+ this.setState({ index });
+ };
+
+ handleChangeIndex = e => {
+ this.setState({ index: Number(e.currentTarget.getAttribute('data-index')) });
+ };
+
+ handleKeyDown = e => {
+ switch(e.key) {
+ case 'ArrowLeft':
+ e.preventDefault();
+ this.setState(({ index }, { children }) => ({ index: Math.abs(index - 1) % children.length }));
+ break;
+ case 'ArrowRight':
+ e.preventDefault();
+ this.setState(({ index }, { children }) => ({ index: (index + 1) % children.length }));
+ break;
+ }
+ };
+
+ render () {
+ const { children } = this.props;
+ const { index } = this.state;
+
+ return (
+
+
+ {children}
+
+
+
+ {children.map((_, i) => (
+
+ ))}
+
+
+ );
+ }
+
+}
+
class Share extends React.PureComponent {
static propTypes = {
@@ -105,6 +160,12 @@ class Share extends React.PureComponent {
+
+
+
+
+
+
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 4f07d62ed9..f01d36d8f4 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -1145,6 +1145,29 @@ $ui-header-height: 55px;
.account:last-child {
border-bottom: 0;
}
+
+ &__empty {
+ text-align: center;
+ color: $darker-text-color;
+ font-weight: 500;
+ padding: 40px;
+ }
+}
+
+.tip-carousel {
+ border: 1px solid transparent;
+ border-radius: 8px;
+ padding: 16px;
+ margin-bottom: 30px;
+
+ &:focus {
+ outline: 0;
+ border-color: $highlight-text-color;
+ }
+
+ .media-modal__pagination {
+ margin-bottom: 0;
+ }
}
.copy-paste-text {
@@ -1319,4 +1342,9 @@ $ui-header-height: 55px;
font-weight: 700;
}
}
+
+ &:focus {
+ outline: 0;
+ background-color: $highlight-text-color;
+ }
}