From 058b74dc0a3cdf6873117ea9f48351035b365d7f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 25 Feb 2022 00:34:33 +0100 Subject: [Glitch] Add explore page to web UI Port d4592bbfcd091c4eaef8c8f24c47d5c2ce1bacd3 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/styles/components/explore.scss | 118 +++++++++++++++++++++ .../flavours/glitch/styles/components/index.scss | 5 + 2 files changed, 123 insertions(+) create mode 100644 app/javascript/flavours/glitch/styles/components/explore.scss (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss new file mode 100644 index 000000000..587bc923c --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -0,0 +1,118 @@ +.explore__search-header { + background: $ui-base-color; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 15px; + + .search { + width: 100%; + margin-bottom: 0; + } + + .search__input { + border-radius: 4px; + color: $inverted-text-color; + background: $simple-background-color; + padding: 10px; + + &::placeholder { + color: $dark-text-color; + } + } + + .search .fa { + top: 10px; + right: 10px; + color: $dark-text-color; + } + + .search .fa-times-circle { + top: 12px; + } +} + +.explore__search-results { + flex: 1 1 auto; + display: flex; + flex-direction: column; +} + +.story { + display: flex; + align-items: center; + color: $primary-text-color; + text-decoration: none; + padding: 15px 0; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + &:hover, + &:active, + &:focus { + background-color: lighten($ui-base-color, 4%); + } + + &__details { + padding: 0 15px; + flex: 1 1 auto; + + &__publisher { + color: $darker-text-color; + margin-bottom: 4px; + } + + &__title { + font-size: 19px; + line-height: 24px; + font-weight: 500; + margin-bottom: 4px; + } + + &__shared { + color: $darker-text-color; + } + } + + &__thumbnail { + flex: 0 0 auto; + margin: 0 15px; + position: relative; + width: 120px; + height: 120px; + + .skeleton { + width: 100%; + height: 100%; + } + + img { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__preview { + border-radius: 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: fill; + position: absolute; + top: 0; + left: 0; + z-index: 0; + + &--hidden { + display: none; + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index b54c3f696..14fbc61b5 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -863,6 +863,10 @@ position: relative; min-height: 120px; } + + .scrollable { + flex: 1 1 auto; + } } .scrollable.fullscreen { @@ -1751,3 +1755,4 @@ noscript { @import 'error_boundary'; @import 'single_column'; @import 'announcements'; +@import 'explore'; -- cgit From 7ba5905416ab9e62e429fdd21bc353aaeb312375 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 9 Oct 2022 11:23:06 +0200 Subject: Restore ability to discard interactions-based follow suggestions --- .../glitch/features/directory/components/account_card.js | 13 +++++++++++++ .../flavours/glitch/features/explore/suggestions.js | 9 +++++++-- .../flavours/glitch/styles/components/explore.scss | 4 ++++ 3 files changed, 24 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js index 6c554336c..218208c10 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.js +++ b/app/javascript/flavours/glitch/features/directory/components/account_card.js @@ -7,6 +7,7 @@ import { makeGetAccount } from 'flavours/glitch/selectors'; import Avatar from 'flavours/glitch/components/avatar'; import DisplayName from 'flavours/glitch/components/display_name'; import Permalink from 'flavours/glitch/components/permalink'; +import IconButton from 'flavours/glitch/components/icon_button'; import Button from 'flavours/glitch/components/button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/util/initial_state'; @@ -29,6 +30,7 @@ const messages = defineMessages({ unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, + dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' }, }); const makeMapStateToProps = () => { @@ -94,6 +96,7 @@ class AccountCard extends ImmutablePureComponent { onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired, + onDismiss: PropTypes.func, }; handleMouseEnter = ({ currentTarget }) => { @@ -138,6 +141,14 @@ class AccountCard extends ImmutablePureComponent { window.open('/settings/profile', '_blank'); } + handleDismiss = (e) => { + const { account, onDismiss } = this.props; + onDismiss(account.get('id')); + + e.preventDefault(); + e.stopPropagation(); + } + render() { const { account, intl } = this.props; @@ -163,6 +174,8 @@ class AccountCard extends ImmutablePureComponent {
+ {this.props.onDismiss && } + ({ suggestions: state.getIn(['suggestions', 'items']), @@ -25,13 +25,18 @@ class Suggestions extends React.PureComponent { dispatch(fetchSuggestions(true)); } + handleDismiss = (accountId) => { + const { dispatch } = this.props; + dispatch(dismissSuggestion(accountId)); + } + render () { const { isLoading, suggestions } = this.props; return (
{isLoading ? : suggestions.map(suggestion => ( - + ))}
); diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index 587bc923c..05df34eff 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -1,3 +1,7 @@ +.account-card__header { + position: relative; +} + .explore__search-header { background: $ui-base-color; display: flex; -- cgit