Skip to content

Commit 157ecf2

Browse files
GargronClearlyClaire
Gargron
authored and
ClearlyClaire
committed
[Glitch] Change responsive break points on navigation panel in web UI
Port 28c4eca to glitch-soc Signed-off-by: Claire <[email protected]>
1 parent b8c23f9 commit 157ecf2

File tree

5 files changed

+116
-95
lines changed

5 files changed

+116
-95
lines changed

‎app/javascript/flavours/glitch/components/navigation_portal.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import AccountNavigation from 'flavours/glitch/features/account/navigation';
44
import Trends from 'flavours/glitch/features/getting_started/containers/trends_container';
55
import { showTrends } from 'flavours/glitch/initial_state';
66

7-
const DefaultNavigation: React.FC = () =>
8-
showTrends ? (
9-
<>
10-
<div className='flex-spacer' />
11-
<Trends />
12-
</>
13-
) : null;
7+
const DefaultNavigation: React.FC = () => (showTrends ? <Trends /> : null);
148

159
export const NavigationPortal: React.FC = () => (
16-
<Switch>
17-
<Route path='/@:acct' exact component={AccountNavigation} />
18-
<Route path='/@:acct/tagged/:tagged?' exact component={AccountNavigation} />
19-
<Route path='/@:acct/with_replies' exact component={AccountNavigation} />
20-
<Route path='/@:acct/followers' exact component={AccountNavigation} />
21-
<Route path='/@:acct/following' exact component={AccountNavigation} />
22-
<Route path='/@:acct/media' exact component={AccountNavigation} />
23-
<Route component={DefaultNavigation} />
24-
</Switch>
10+
<div className='navigation-panel__portal'>
11+
<Switch>
12+
<Route path='/@:acct' exact component={AccountNavigation} />
13+
<Route
14+
path='/@:acct/tagged/:tagged?'
15+
exact
16+
component={AccountNavigation}
17+
/>
18+
<Route path='/@:acct/with_replies' exact component={AccountNavigation} />
19+
<Route path='/@:acct/followers' exact component={AccountNavigation} />
20+
<Route path='/@:acct/following' exact component={AccountNavigation} />
21+
<Route path='/@:acct/media' exact component={AccountNavigation} />
22+
<Route component={DefaultNavigation} />
23+
</Switch>
24+
</div>
2525
);

‎app/javascript/flavours/glitch/features/account/navigation.jsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,7 @@ class AccountNavigation extends PureComponent {
4343
}
4444

4545
return (
46-
<>
47-
<div className='flex-spacer' />
48-
<FeaturedTags accountId={accountId} tagged={tagged} />
49-
</>
46+
<FeaturedTags accountId={accountId} tagged={tagged} />
5047
);
5148
}
5249

‎app/javascript/flavours/glitch/features/ui/components/column_link.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44
import { useRouteMatch, NavLink } from 'react-router-dom';
55

6-
import { Icon } from 'flavours/glitch/components/icon';
6+
import { Icon } from 'flavours/glitch/components/icon';
77

8-
const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, onClick, href, method, badge, transparent, ...other }) => {
8+
const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, onClick, href, method, badge, transparent, optional, ...other }) => {
99
const match = useRouteMatch(to);
10-
const className = classNames('column-link', { 'column-link--transparent': transparent });
10+
const className = classNames('column-link', { 'column-link--transparent': transparent, 'column-link--optional': optional });
1111
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
1212
const iconElement = (typeof icon === 'string' || iconComponent) ? <Icon id={icon} icon={iconComponent} className='column-link__icon' /> : icon;
1313
const activeIconElement = activeIcon ?? (activeIconComponent ? <Icon id={icon} icon={activeIconComponent} className='column-link__icon' /> : iconElement);
@@ -58,6 +58,7 @@ ColumnLink.propTypes = {
5858
method: PropTypes.string,
5959
badge: PropTypes.node,
6060
transparent: PropTypes.bool,
61+
optional: PropTypes.bool,
6162
};
6263

6364
export default ColumnLink;

‎app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

+60-53
Original file line numberDiff line numberDiff line change
@@ -122,14 +122,17 @@ class NavigationPanel extends Component {
122122

123123
let banner = undefined;
124124

125-
if(transientSingleColumn)
126-
banner = (<div className='switch-to-advanced'>
127-
{intl.formatMessage(messages.openedInClassicInterface)}
128-
{" "}
129-
<a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
130-
{intl.formatMessage(messages.advancedInterface)}
131-
</a>
132-
</div>);
125+
if (transientSingleColumn) {
126+
banner = (
127+
<div className='switch-to-advanced'>
128+
{intl.formatMessage(messages.openedInClassicInterface)}
129+
{" "}
130+
<a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
131+
{intl.formatMessage(messages.advancedInterface)}
132+
</a>
133+
</div>
134+
);
135+
}
133136

134137
return (
135138
<div className='navigation-panel'>
@@ -139,55 +142,59 @@ class NavigationPanel extends Component {
139142
</div>
140143
}
141144

142-
{signedIn && (
143-
<>
144-
<ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
145-
<NotificationsLink />
146-
<FollowRequestsLink />
147-
</>
148-
)}
149-
150-
{trendsEnabled ? (
151-
<ColumnLink transparent to='/explore' icon='explore' iconComponent={ExploreIcon} activeIconComponent={ExploreActiveIcon} text={intl.formatMessage(messages.explore)} />
152-
) : (
153-
<ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
154-
)}
155-
156-
{(signedIn || timelinePreview) && (
157-
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
158-
)}
159-
160-
{!signedIn && (
161-
<div className='navigation-panel__sign-in-banner'>
145+
<div className='navigation-panel__menu'>
146+
{signedIn && (
147+
<>
148+
<ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
149+
<NotificationsLink />
150+
<FollowRequestsLink />
151+
</>
152+
)}
153+
154+
{trendsEnabled ? (
155+
<ColumnLink transparent to='/explore' icon='explore' iconComponent={ExploreIcon} activeIconComponent={ExploreActiveIcon} text={intl.formatMessage(messages.explore)} />
156+
) : (
157+
<ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
158+
)}
159+
160+
{(signedIn || timelinePreview) && (
161+
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
162+
)}
163+
164+
{!signedIn && (
165+
<div className='navigation-panel__sign-in-banner'>
166+
<hr />
167+
{ disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
168+
</div>
169+
)}
170+
171+
{signedIn && (
172+
<>
173+
<ColumnLink transparent to='/conversations' icon='at' iconComponent={MailIcon} activeIconComponent={MailActiveIcon} text={intl.formatMessage(messages.direct)} />
174+
<ColumnLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} />
175+
<ColumnLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} />
176+
<ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} />
177+
178+
<ListPanel />
179+
180+
<hr />
181+
182+
{!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />}
183+
<ColumnLink transparent onClick={onOpenSettings} icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.app_settings)} />
184+
185+
{canManageReports(permissions) && <ColumnLink optional transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
186+
{canViewAdminDashboard(permissions) && <ColumnLink optional transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
187+
</>
188+
)}
189+
190+
<div className='navigation-panel__legal'>
162191
<hr />
163-
{ disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
192+
<ColumnLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} />
164193
</div>
165-
)}
166-
167-
{signedIn && (
168-
<>
169-
<ColumnLink transparent to='/conversations' icon='at' iconComponent={MailIcon} activeIconComponent={MailActiveIcon} text={intl.formatMessage(messages.direct)} />
170-
<ColumnLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} />
171-
<ColumnLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} />
172-
<ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} />
173-
174-
<ListPanel />
175-
176-
<hr />
177-
178-
{!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />}
179-
<ColumnLink transparent onClick={onOpenSettings} icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.app_settings)} />
180-
181-
{canManageReports(permissions) && <ColumnLink transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
182-
{canViewAdminDashboard(permissions) && <ColumnLink transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
183-
</>
184-
)}
185-
186-
<div className='navigation-panel__legal'>
187-
<hr />
188-
<ColumnLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} />
189194
</div>
190195

196+
<div className='flex-spacer' />
197+
191198
<NavigationPortal />
192199
</div>
193200
);

‎app/javascript/flavours/glitch/styles/components.scss

+35-19
Original file line numberDiff line numberDiff line change
@@ -3684,12 +3684,14 @@ $ui-header-logo-wordmark-width: 99px;
36843684
margin-top: 10px;
36853685
margin-bottom: 10px;
36863686
height: calc(100% - 20px);
3687-
overflow-y: auto;
3687+
overflow: hidden;
36883688
display: flex;
36893689
flex-direction: column;
36903690

3691-
& > a {
3692-
flex: 0 0 auto;
3691+
&__menu {
3692+
flex: 1 1 auto;
3693+
min-height: 0;
3694+
overflow-y: auto;
36933695
}
36943696

36953697
.logo {
@@ -3700,6 +3702,36 @@ $ui-header-logo-wordmark-width: 99px;
37003702
&__logo {
37013703
margin-bottom: 12px;
37023704
}
3705+
3706+
@media screen and (height <= 710px) {
3707+
&__portal {
3708+
display: none;
3709+
}
3710+
}
3711+
3712+
@media screen and (height <= 765px) {
3713+
&__portal .trends__item:nth-child(n + 3) {
3714+
display: none;
3715+
}
3716+
}
3717+
3718+
@media screen and (height <= 820px) {
3719+
&__portal .trends__item:nth-child(n + 4) {
3720+
display: none;
3721+
}
3722+
}
3723+
3724+
@media screen and (height <= 920px) {
3725+
.column-link.column-link--optional {
3726+
display: none;
3727+
}
3728+
}
3729+
3730+
@media screen and (height <= 1040px) {
3731+
.list-panel {
3732+
display: none;
3733+
}
3734+
}
37033735
}
37043736

37053737
.navigation-panel,
@@ -4063,22 +4095,6 @@ $ui-header-logo-wordmark-width: 99px;
40634095
}
40644096
}
40654097

4066-
@media screen and (height <= 810px) {
4067-
.trends__item:nth-of-type(3) {
4068-
display: none;
4069-
}
4070-
}
4071-
4072-
@media screen and (height <= 720px) {
4073-
.trends__item:nth-of-type(2) {
4074-
display: none;
4075-
}
4076-
}
4077-
4078-
@media screen and (height <= 670px) {
4079-
display: none;
4080-
}
4081-
40824098
.trends__item {
40834099
border-bottom: 0;
40844100
padding: 10px;

0 commit comments

Comments
 (0)