Skip to content

Commit

Permalink
#proposal 86 communities redesign (#3927)
Browse files Browse the repository at this point in the history 
* #3915 Bug Fix

Addition of overflow-wrap property to h1 element so that words longer than the display area are forced to wrap instead of being completely hidden.

* Fixed Bug #3911

This issue also applied when trying to downvote a post at the end of a user's feed and in all other scenarios where the downvote button appears towards the bottom of the screen.

Upvote overlay has a "top: -30px" set so this implementation was replicated with a "top" of -270px for the downvote overlay.

270px was chosen as it allows for the contents of the overlay to be visible when at downvoting the first and last post in a feed.

A margin-left of -36px was added so that the close 'X' button is visible on mobile devices. (left did not work due to 'left: 0%' being set in the Dropdown.scss file.

* Avatar Menu Position on Mobile Devices

Adjusted the position of the Avatar Menu on mobile devices so that when opened on Android phones, the Primary Navigation remains visible.

This is an additional fix to bug #3918.

* Reintroduction of "Hot" Menu Option

Fix for bug #3919 to reintroduce "Hot" Menu Option alongside "Trending", "New", etc.

* Fixed Table Layout

Fixed bug #3924 by introducing a scrollbar underneath tables that exceed their wrapper width.

* Introduced Navigation Toggle

To solve some visibility issues that are predominantly on Android devices (bug #3923 ), a show/hide navigation toggle has been introduced on Mobile Devices.

More details regarding these changes can be found in this post - https://steemit.com/hive-151113/@the-gorilla/proposal-86-change-log-bugs-3911-3915-3918-3919-3923-3924

* Community Carousel

Introduction of a carousel for Pinned Posts, allowing the user to collapse all pinned posts into a more condensed view via a toggle.

For more information, please read this post - https://steemit.com/hive-151113/@the-gorilla/proposal-86-change-log-community-pinned-posts

* Removed Comments

Deleted commented out styles that were used for debugging.

* New Community Banner

Implemented a configurable banner for each community.  These can be set within the Community's Settings.

More detail can be found here - https://steemit.com/hive-151113/@the-gorilla/proposal-86-change-log-community-banner-and-settings

* Translations for Communities

Introduced translations for the community pages - Main page, banner, subscribe button and settings.

* Additional Translation

Included additional translation for Show / Collapse Pinned posts.

* Pinned Posts Fix

Adjusted the pinned posts display so that when the "minimised state" is stored and then posts are unpinned, it reverts to the list view.
  • Loading branch information
@the-gorilla-steem
the-gorilla-steem authored Nov 19, 2024
1 parent 17a0e5b commit 0da5aa3
Show file tree
Hide file tree
Showing 31 changed files with 1,747 additions and 535 deletions.
5 changes: 5 additions & 0 deletions src/app/assets/icons/pencil.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion src/app/assets/stylesheets/foundation-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,16 @@ table {
box-shadow: inset 0 0 0 -1px red;
}

.MarkdownViewer table {
display: block;
overflow-x: auto;
width: 100%;
}

thead, tbody, tfoot {
@include themify($themes) {
background-color: themed('backgroundColor');
}
}
}

thead {
Expand All @@ -120,6 +125,7 @@ tbody tr:nth-child(even) {
border: transparent;
transition: 0.2s all ease-in-out;
outline: none;
padding-bottom: 50px !important;
@include themify($themes) {
background-color: themed('modalBackgroundColor');
color: themed('modalTextColorPrimary');
Expand Down
2 changes: 2 additions & 0 deletions src/app/components/all.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@
@import './elements/FlagButton';
@import './elements/VideoAd';
@import './elements/UserList';
@import './elements/CommunityBanner';

// modules
@import './modules/Header/styles';
@import './modules/CommunitySettings';
@import './modules/LoginForm';
@import './modules/PostDrafts';
@import './modules/PostTemplates';
Expand Down
1 change: 1 addition & 0 deletions src/app/components/cards/PostFull.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
}
> h1 {
overflow: hidden;
overflow-wrap: break-word;
font-family: $body-font-family;
font-size: 240%;
font-weight: 800;
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/cards/PostSummary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ class PostSummary extends React.Component {
if (this.props.blogmode) {
thumb = <img className="articles__feature-img" src={blogImg} />;
} else {
const listImg = proxify(image_link, '256x512');
const listImg = proxify(image_link, '640x0');
thumb = (
<picture className="articles__feature-img">
<source srcSet={listImg} media="(min-width: 1000px)" />
Expand Down
208 changes: 192 additions & 16 deletions src/app/components/cards/PostsList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import tt from 'counterpart';
import { List } from 'immutable';
import * as userActions from 'app/redux/UserReducer';
import { actions as fetchDataSagaActions } from 'app/redux/FetchDataSaga';
import PostSummary from 'app/components/cards/PostSummary';
import Post from 'app/components/pages/Post';
import LoadingIndicator from 'app/components/elements/LoadingIndicator';
import debounce from 'lodash.debounce';
import { findParent } from 'app/utils/DomUtils';
import Icon from 'app/components/elements/Icon';
import VideoAd from 'app/components/elements/VideoAd';
import SearchUserList from 'app/components/cards/SearchUserList';
import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
import xhr from 'axios/index';
import tt from 'counterpart';

function topPosition(domElt) {
if (!domElt) {
Expand Down Expand Up @@ -42,16 +36,31 @@ class PostsList extends React.Component {
thumbSize: 'desktop',
showNegativeComments: false,
blist: [],
currentSlide: 0,
arePinnedPostsCollapsed: false,
};
this.scrollListener = this.scrollListener.bind(this);
this.onBackButton = this.onBackButton.bind(this);
this.shouldComponentUpdate = shouldComponentUpdate(this, 'PostsList');
this.nextSlide = this.nextSlide.bind(this);
this.prevSlide = this.prevSlide.bind(this);
this.togglePinnedPosts = this.togglePinnedPosts.bind(this);
}

async componentWillMount() {}

componentDidMount() {
this.attachScrollListener();
this.initiatePinnedCollapsedState();
}

componentDidUpdate(prevProps) {
if (
this.props.category &&
this.props.category.startsWith('hive-') &&
this.props.category !== prevProps.category
) {
this.updateSlide(0);
this.initiatePinnedCollapsedState();
}
}

componentWillUnmount() {
Expand Down Expand Up @@ -85,9 +94,8 @@ class PostsList extends React.Component {
topPosition(el) + el.offsetHeight - scrollTop - window.innerHeight <
10
) {
const { loadMore, posts, total_result } = this.props;
if (loadMore && posts.size > 0 /*&& posts.size < total_result*/)
loadMore();
const { loadMore, posts } = this.props;
if (loadMore && posts.size > 0) loadMore();
}

// Detect if we're in mobile mode (renders larger preview imgs)
Expand Down Expand Up @@ -116,6 +124,74 @@ class PostsList extends React.Component {
window.removeEventListener('resize', this.scrollListener);
}

updateSlide(index) {
const filteredPosts = this.props.posts.filter(post =>
post.getIn(['stats', 'is_pinned'], false)
);
const totalSlides = filteredPosts.size - 1; // We reduce the slide count by 1 because we're displaying 2 on a screen and don't want an empty gap at the end
const pinnedPostsElement = document.querySelector('.pinnedPosts');
const sliderPosition = (index + totalSlides) % totalSlides;
this.setState({ currentSlide: sliderPosition });
if (pinnedPostsElement) {
requestAnimationFrame(() => {
pinnedPostsElement.style.setProperty(
`--pinned`,
`-${sliderPosition * 50}%`
);
});
}
}

nextSlide() {
this.updateSlide(this.state.currentSlide + 1);
}

prevSlide() {
this.updateSlide(this.state.currentSlide - 1);
}

initiatePinnedCollapsedState() {
const arePinnedPostsCollapsedStored = process.env.BROWSER
? localStorage.getItem('collapsepinned-' + this.props.category)
: null;
const arePinnedPostsCollapsed = arePinnedPostsCollapsedStored
? JSON.parse(arePinnedPostsCollapsedStored)
: false;

if (arePinnedPostsCollapsed !== this.state.arePinnedPostsCollapsed) {
this.setState({ arePinnedPostsCollapsed });
}
}

togglePinnedPosts() {
const { category } = this.props;
const { arePinnedPostsCollapsed } = this.state;
const updatedCollapsedState = !arePinnedPostsCollapsed;

this.setState(
prevState => ({
arePinnedPostsCollapsed: !prevState.arePinnedPostsCollapsed,
}),
() => {
if (process.env.BROWSER) {
localStorage.setItem(
'collapsepinned-' + category,
updatedCollapsedState
);
}

if (updatedCollapsedState) {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
} else {
this.updateSlide(0);
}
}
);
}

render() {
const {
posts,
Expand All @@ -124,10 +200,14 @@ class PostsList extends React.Component {
order,
nsfwPref,
hideCategory,
blacklist,
depth,
} = this.props;
const { thumbSize, blist } = this.state;
const { thumbSize, currentSlide, arePinnedPostsCollapsed } = this.state;

const pinnedPosts = posts.filter(post =>
post.getIn(['stats', 'is_pinned'], false)
);
const pinnedPostsCount = pinnedPosts.size;

const renderSummary = items =>
items.map((post, i) => {
Expand All @@ -143,7 +223,18 @@ class PostsList extends React.Component {
);

const summary = [];
summary.push(<li key={i}>{ps}</li>);
summary.push(
<li
key={i}
className={
post.getIn(['stats', 'is_pinned'], false)
? 'isPinned'
: ''
}
>
{ps}
</li>
);

const every = this.props.adSlots.in_feed_1.every;
if (false && this.props.videoAdsEnabled && i === 4) {
Expand All @@ -170,14 +261,99 @@ class PostsList extends React.Component {
return summary;
});

const renderDotLinks = totalItems => {
const adjustedTotalItems = totalItems - 1;
const dots = Array.from({ length: adjustedTotalItems }, (_, i) => (
<span
key={i}
className={currentSlide === i ? 'dot active' : 'dot'}
role="button"
onClick={() => this.updateSlide(i)}
/>
));
return dots;
};

return (
<div id="posts_list" className="PostsList">
{category &&
category.startsWith('hive-') &&
pinnedPostsCount > 0 &&
(order === 'trending' || order === 'created') && (
<div
className={`${
arePinnedPostsCollapsed && pinnedPostsCount > 2
? 'pinnedPostsContainer'
: ''
}`}
>
{arePinnedPostsCollapsed &&
pinnedPostsCount > 2 && (
<button
className="prev"
onClick={this.prevSlide}
>
&#10094;
</button>
)}
<ul
className="PostsList__summaries hfeed pinnedPosts"
itemScope
itemType="http://schema.org/blogPosts"
>
{renderSummary(pinnedPosts)}
</ul>
{arePinnedPostsCollapsed &&
pinnedPostsCount > 2 && (
<button
className="next"
onClick={this.nextSlide}
>
&#10095;
</button>
)}
{arePinnedPostsCollapsed &&
pinnedPostsCount > 2 && (
<div className="carouselDots">
{renderDotLinks(pinnedPostsCount)}
</div>
)}
{pinnedPostsCount >= 2 && (
<div className="collapseShowPinned">
<a
href="#"
onClick={event => {
this.togglePinnedPosts();
event.preventDefault();
}}
>
{pinnedPostsCount == 2 &&
arePinnedPostsCollapsed
? tt('g.view_as_list') + ' \u25BC'
: arePinnedPostsCollapsed
? tt('g.show_pinned') + ' \u25BC'
: tt('g.collapse_pinned') +
' \u25B2'}
</a>
</div>
)}
</div>
)}
<ul
className="PostsList__summaries hfeed"
itemScope
itemType="http://schema.org/blogPosts"
>
{renderSummary(posts)}
{category &&
category.startsWith('hive-') &&
(order === 'trending' || order === 'created')
? renderSummary(
posts.filter(
post =>
!post.getIn(['stats', 'is_pinned'], false)
)
)
: renderSummary(posts)}
</ul>
{loading && (
<center>
Expand Down
Loading

0 comments on commit 0da5aa3

Please sign in to comment.