From e32a4f55fe2f0b066ae129c5ab26e7fad0086570 Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Tue, 30 Oct 2018 00:47:43 +0100 Subject: [Glitch] RTL: fix preferences page checkbox margins Port 5ee0b51ac8363da1687cc518e80eac53c23b048a to glitch-soc --- app/javascript/flavours/glitch/styles/rtl.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index d4618440d..c0079a286 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -210,12 +210,16 @@ body.rtl { margin-left: 5px; } - .simple_form .check_boxes .checkbox label, - .simple_form .input.with_label.boolean label.checkbox { + .simple_form .check_boxes .checkbox label { padding-left: 0; padding-right: 25px; } + .simple_form .input.with_label.boolean label.checkbox { + padding-left: 25px; + padding-right: 0; + } + .simple_form .check_boxes .checkbox input[type="checkbox"], .simple_form .input.boolean input[type="checkbox"] { left: auto; -- cgit From 3aa2418217edf77ccfd499064938896dce4c2bee Mon Sep 17 00:00:00 2001 From: Masoud Abkenar Date: Tue, 30 Oct 2018 00:49:29 +0100 Subject: [Glitch] RTL: fix toot privacy preferences radio buttonss Port e961a763a2cf722bd5f1311a2de706e28d6c33c6 to glitch-soc --- app/javascript/flavours/glitch/styles/rtl.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index c0079a286..9e0a93ec2 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -385,4 +385,9 @@ body.rtl { padding-left: 0; padding-right: 10px; } + + .simple_form .input.radio_buttons .radio > label input { + left: auto; + right: 0; + } } -- cgit From ac9780b8449527a6a7ab5e2031eeb37f7f2291e7 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 29 Oct 2018 14:44:04 +0100 Subject: [Glitch] Include preview cards in status entity in REST API Port 795f0107d23c1c9bd039f6449fa1e094ab7653a7 to glitch-soc --- .../flavours/glitch/components/status.js | 10 ++++++++ .../glitch/features/status/components/card.js | 18 +++++++------- .../features/status/containers/card_container.js | 2 +- app/javascript/flavours/glitch/reducers/index.js | 2 -- .../flavours/glitch/reducers/statuses.js | 5 ++++ .../flavours/glitch/styles/components/status.scss | 28 ++++++++++++++++++++++ 6 files changed, 54 insertions(+), 11 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 449532ea4..3a22f165b 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -7,6 +7,7 @@ import StatusIcons from './status_icons'; import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import AttachmentList from './attachment_list'; +import Card from '../features/status/components/card'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video } from 'flavours/glitch/util/async-components'; @@ -477,6 +478,15 @@ export default class Status extends ImmutablePureComponent { if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) { background = attachments.getIn([0, 'preview_url']); } + } else if (status.get('card')) { + media = ( + + ); + //TODO: set mediaIcon? } // Here we prepare extra data-* attributes for CSS selectors. diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index b52f3c4fa..9a87f7a3f 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -59,10 +59,12 @@ export default class Card extends React.PureComponent { card: ImmutablePropTypes.map, maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, + compact: PropTypes.boolean, }; static defaultProps = { maxDescription: 50, + compact: false, }; state = { @@ -131,25 +133,25 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription } = this.props; - const { width, embedded } = this.state; + const { card, maxDescription, compact } = this.props; + const { width, embedded } = this.state; if (card === null) { return null; } const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); - const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width) || card.get('type') !== 'link'; - const className = classnames('status-card', { horizontal }); + const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const interactive = card.get('type') !== 'link'; + const className = classnames('status-card', { horizontal, compact, interactive }); const title = interactive ? {card.get('title')} : {card.get('title')}; - const ratio = card.get('width') / card.get('height'); + const ratio = compact ? 16 / 9 : card.get('width') / card.get('height'); const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio); const description = (
{title} - {!horizontal &&

{trim(card.get('description') || '', maxDescription)}

} + {!(horizontal || compact) &&

{trim(card.get('description') || '', maxDescription)}

} {provider}
); @@ -174,7 +176,7 @@ export default class Card extends React.PureComponent {
- + {horizontal && }
@@ -184,7 +186,7 @@ export default class Card extends React.PureComponent { return (
{embed} - {description} + {!compact && description}
); } else if (card.get('image')) { diff --git a/app/javascript/flavours/glitch/features/status/containers/card_container.js b/app/javascript/flavours/glitch/features/status/containers/card_container.js index a97404de1..6170d9fd8 100644 --- a/app/javascript/flavours/glitch/features/status/containers/card_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/card_container.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import Card from '../components/card'; const mapStateToProps = (state, { statusId }) => ({ - card: state.getIn(['cards', statusId], null), + card: state.getIn(['statuses', statusId, 'card'], null), }); export default connect(mapStateToProps)(Card); diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.js index 218a5ac8f..ae9e2b639 100644 --- a/app/javascript/flavours/glitch/reducers/index.js +++ b/app/javascript/flavours/glitch/reducers/index.js @@ -15,7 +15,6 @@ import settings from './settings'; import local_settings from './local_settings'; import push_notifications from './push_notifications'; import status_lists from './status_lists'; -import cards from './cards'; import mutes from './mutes'; import reports from './reports'; import contexts from './contexts'; @@ -47,7 +46,6 @@ const reducers = { settings, local_settings, push_notifications, - cards, mutes, reports, contexts, diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index 617d96e5d..4c6387461 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -23,6 +23,9 @@ import { STATUS_MUTE_SUCCESS, STATUS_UNMUTE_SUCCESS, } from 'flavours/glitch/actions/statuses'; +import { + STATUS_CARD_FETCH_SUCCESS +} from 'flavours/glitch/actions/cards'; import { TIMELINE_UPDATE, TIMELINE_DELETE, @@ -143,6 +146,8 @@ export default function statuses(state = initialState, action) { return normalizeStatuses(state, action.statuses); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); + case STATUS_CARD_FETCH_SUCCESS: + return state.setIn([action.id, 'card'], fromJS(action.card)); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index aa49aba55..38ead06cf 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -731,6 +731,9 @@ a.status-card { display: block; margin-top: 5px; font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .status-card__image { @@ -755,6 +758,31 @@ a.status-card { } } +.status-card.compact { + border-color: lighten($ui-base-color, 4%); + + &.interactive { + border: 0; + } + + .status-card__content { + padding: 8px; + padding-top: 10px; + } + + .status-card__title { + white-space: nowrap; + } + + .status-card__image { + flex: 0 0 60px; + } +} + +a.status-card.compact:hover { + background-color: lighten($ui-base-color, 4%); +} + .status-card__image-image { border-radius: 4px 0 0 4px; display: block; -- cgit From 2b2facbbdfb7c0b53e38048e932143d592af401e Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 27 Oct 2018 23:09:07 +0200 Subject: [Glitch] Port some of upstream's getting started footer links --- .../glitch/features/getting_started/index.js | 40 ++++++++++------------ .../flavours/glitch/styles/components/index.scss | 36 +++++++++++++++++++ .../flavours/glitch/util/initial_state.js | 2 ++ 3 files changed, 57 insertions(+), 21 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index c1897cc33..ce1ae50e4 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -8,7 +8,7 @@ import { openModal } from 'flavours/glitch/actions/modal'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me } from 'flavours/glitch/util/initial_state'; +import { me, invitesEnabled, version } from 'flavours/glitch/util/initial_state'; import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; import { List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; @@ -163,26 +163,24 @@ export default class GettingStarted extends ImmutablePureComponent {
-
-

- - -  •  - - - -

-

- glitch-soc/mastodon, - Mastodon: Mastodon, - }} - /> -

-
+
    +
  • ·
    • + {invitesEnabled &&
  • ·
    • } +
  • ·
    • +
  • ·
    • +
  • ·
    • +
    • +
+ +

+ glitch-soc/mastodon (v{version}), + Mastodon: Mastodon }} + /> +

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index cbf968ec4..7d71f0d1d 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -732,6 +732,42 @@ a { color: $dark-text-color; } + + &__footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + + ul { + margin-bottom: 10px; + } + + ul li { + display: inline; + } + + p { + color: $dark-text-color; + font-size: 13px; + margin-bottom: 20px; + + a { + color: $dark-text-color; + text-decoration: underline; + } + } + + a { + text-decoration: none; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } } .column-link__badge { diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js index 0aaf65904..d12c05c0d 100644 --- a/app/javascript/flavours/glitch/util/initial_state.js +++ b/app/javascript/flavours/glitch/util/initial_state.js @@ -22,6 +22,8 @@ export const deleteModal = getMeta('delete_modal'); export const me = getMeta('me'); export const searchEnabled = getMeta('search_enabled'); export const maxChars = (initialState && initialState.max_toot_chars) || 500; +export const invitesEnabled = getMeta('invites_enabled'); +export const version = getMeta('version'); export const isStaff = getMeta('is_staff'); export default initialState; -- cgit From b3c13809808560870ac649c438211e4c64a24749 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 31 Oct 2018 11:01:50 +0100 Subject: Fix styling of display names in public pages --- app/javascript/flavours/glitch/styles/stream_entries.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 80e2d0ca0..7b6060628 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -175,12 +175,6 @@ .embed, .public-layout { .status { - .status__info .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - } - .status__info { font-size: 15px; display: initial; @@ -200,6 +194,10 @@ max-width: 100%; padding-right: 25px; margin: initial; + + .display-name strong { + display: inline; + } } .status__avatar { -- cgit From 34209c0340ca6b7c61de964a17f5f3fe2e0f7c7b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 31 Oct 2018 11:10:51 +0100 Subject: Fix timestamp position in public pages with RTL languages --- app/javascript/flavours/glitch/styles/stream_entries.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 7b6060628..45dcf70ed 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -208,3 +208,11 @@ } } } + +.rtl { + .embed, .public-layout { + .status .status__relative-time { + float: left; + } + } +} -- cgit