From d7873433256746c9b453aeca31520d68c6de4975 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 11 Oct 2022 04:41:25 +0900 Subject: [PATCH] Hide list panel from nav bar in mobile layout (#19337) --- .../mastodon/features/ui/components/list_panel.js | 12 ++++++------ .../features/ui/components/navigation_panel.js | 2 +- app/javascript/mastodon/is_mobile.js | 13 ++++++++++++- app/javascript/styles/mastodon/about.scss | 4 ++-- app/javascript/styles/mastodon/components.scss | 6 +++++- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js index 411f62508..2f92a9254 100644 --- a/app/javascript/mastodon/features/ui/components/list_panel.js +++ b/app/javascript/mastodon/features/ui/components/list_panel.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { createSelector } from 'reselect'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { fetchLists } from 'mastodon/actions/lists'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { NavLink, withRouter } from 'react-router-dom'; -import Icon from 'mastodon/components/icon'; +import { withRouter } from 'react-router-dom'; +import { fetchLists } from 'mastodon/actions/lists'; +import ColumnLink from './column_link'; const getOrderedLists = createSelector([state => state.get('lists')], lists => { if (!lists) { @@ -42,11 +42,11 @@ class ListPanel extends ImmutablePureComponent { } return ( -
+

{lists.map(list => ( - {list.get('title')} + ))}
); diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 4dadf294d..166d3552b 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -5,11 +5,11 @@ import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'mastodon/initial_state'; +import ColumnLink from './column_link'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; -import ColumnLink from 'mastodon/features/ui/components/column_link'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 2926eb4b1..3c8ec1545 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -1,10 +1,19 @@ +// @ts-check + import { supportsPassiveEvents } from 'detect-passive-events'; import { forceSingleColumn } from 'mastodon/initial_state'; const LAYOUT_BREAKPOINT = 630; +/** + * @param {number} width + * @returns {boolean} + */ export const isMobile = width => width <= LAYOUT_BREAKPOINT; +/** + * @returns {string} + */ export const layoutFromWindow = () => { if (isMobile(window.innerWidth)) { return 'mobile'; @@ -17,11 +26,13 @@ export const layoutFromWindow = () => { const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; +const listenerOptions = supportsPassiveEvents ? { passive: true } : false; + let userTouching = false; -let listenerOptions = supportsPassiveEvents ? { passive: true } : false; const touchListener = () => { userTouching = true; + window.removeEventListener('touchstart', touchListener, listenerOptions); }; diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index c82be742d..8893e3cf0 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -163,8 +163,8 @@ $small-breakpoint: 960px; th, td { padding: 8px; - align-self: start; - align-items: start; + align-self: flex-start; + align-items: flex-start; word-break: break-all; &.nowrap { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 039d0b904..a8919b9cb 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2673,6 +2673,10 @@ $ui-header-height: 55px; .column-link span { display: none; } + + .list-panel { + display: none; + } } } @@ -2755,7 +2759,7 @@ $ui-header-height: 55px; .column-actions { display: flex; - align-items: start; + align-items: flex-start; justify-content: center; padding: 40px; padding-top: 40px;