tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

[Glitch] Hide list panel from nav bar in mobile layout

Browse Source 
Port d787343325 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Yamagishi Kazutoshi 2022-10-11 04:41:25 +09:00 committed by Claire
parent 1e7f819c85
commit 1850166de9
6 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/flavours/glitch/features/ui/components/list_panel.js
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createSelector } from 'reselect';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { fetchLists } from 'flavours/glitch/actions/lists';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { withRouter } from 'react-router-dom';
import { NavLink, withRouter } from 'react-router-dom'; import { fetchLists } from 'flavours/glitch/actions/lists';
import Icon from 'flavours/glitch/components/icon'; import ColumnLink from './column_link';
const getOrderedLists = createSelector([state => state.get('lists')], lists => { const getOrderedLists = createSelector([state => state.get('lists')], lists => {
if (!lists) { if (!lists) {
@ -42,11 +42,11 @@ class ListPanel extends ImmutablePureComponent {
} }
return ( return (
<div> <div className='list-panel'>
<hr /> <hr />
{lists.map(list => ( {lists.map(list => (
<NavLink key={list.get('id')} className='column-link column-link--transparent' strict to={`/lists/${list.get('id')}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.get('title')}</NavLink> <ColumnLink icon='list-ul' key={list.get('id')} strict text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
))} ))}
</div> </div>
); );

2
app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
View File

@ -4,12 +4,12 @@ import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container';
import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; import { showTrends, timelinePreview } from 'flavours/glitch/initial_state';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
import FollowRequestsColumnLink from './follow_requests_column_link'; import FollowRequestsColumnLink from './follow_requests_column_link';
import ListPanel from './list_panel'; import ListPanel from './list_panel';
import NotificationsCounterIcon from './notifications_counter_icon'; import NotificationsCounterIcon from './notifications_counter_icon';
import SignInBanner from './sign_in_banner'; import SignInBanner from './sign_in_banner';
import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
const messages = defineMessages({ const messages = defineMessages({
home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, home: { id: 'tabs_bar.home', defaultMessage: 'Home' },

14
app/javascript/flavours/glitch/is_mobile.js
View File

@ -1,10 +1,20 @@
// @ts-check
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
import { forceSingleColumn } from 'flavours/glitch/initial_state'; import { forceSingleColumn } from 'flavours/glitch/initial_state';
const LAYOUT_BREAKPOINT = 630; const LAYOUT_BREAKPOINT = 630;
/**
* @param {number} width
* @returns {boolean}
*/
export const isMobile = width => width <= LAYOUT_BREAKPOINT; export const isMobile = width => width <= LAYOUT_BREAKPOINT;
/**
* @param {string} layout_local_setting
* @returns {string}
*/
export const layoutFromWindow = (layout_local_setting) => { export const layoutFromWindow = (layout_local_setting) => {
switch (layout_local_setting) { switch (layout_local_setting) {
case 'multiple': case 'multiple':
@ -28,11 +38,13 @@ export const layoutFromWindow = (layout_local_setting) => {
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
let userTouching = false; let userTouching = false;
let listenerOptions = supportsPassiveEvents ? { passive: true } : false;
const touchListener = () => { const touchListener = () => {
userTouching = true; userTouching = true;
window.removeEventListener('touchstart', touchListener, listenerOptions); window.removeEventListener('touchstart', touchListener, listenerOptions);
}; };

4
app/javascript/flavours/glitch/styles/about.scss
View File

@ -163,8 +163,8 @@ $small-breakpoint: 960px;
th, th,
td { td {
padding: 8px; padding: 8px;
align-self: start; align-self: flex-start;
align-items: start; align-items: flex-start;
word-break: break-all; word-break: break-all;
&.nowrap { &.nowrap {

2
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -907,7 +907,7 @@ $ui-header-height: 55px;
.column-actions { .column-actions {
display: flex; display: flex;
align-items: start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 40px; padding: 40px;
padding-top: 40px; padding-top: 40px;

4
app/javascript/flavours/glitch/styles/components/single_column.scss
View File

@ -344,6 +344,10 @@
.column-link span { .column-link span {
display: none; display: none;
} }
.list-panel {
display: none;
}
} }
} }