diff options
Diffstat (limited to 'app/javascript/flavours')
6 files changed, 27 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.js b/app/javascript/flavours/glitch/features/ui/components/list_panel.js index e61234283..dff830065 100644 --- a/app/javascript/flavours/glitch/features/ui/components/list_panel.js +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/lists'; import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { NavLink, withRouter } from 'react-router-dom'; -import Icon from 'flavours/glitch/components/icon'; +import { withRouter } from 'react-router-dom'; +import { fetchLists } from 'flavours/glitch/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 ( - <div> + <div className='list-panel'> <hr /> {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> ); diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index 2817374ab..f36258990 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -4,12 +4,12 @@ import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; 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 ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; -import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; const messages = defineMessages({ home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, diff --git a/app/javascript/flavours/glitch/is_mobile.js b/app/javascript/flavours/glitch/is_mobile.js index 0d5663098..31944d89b 100644 --- a/app/javascript/flavours/glitch/is_mobile.js +++ b/app/javascript/flavours/glitch/is_mobile.js @@ -1,10 +1,20 @@ +// @ts-check + import { supportsPassiveEvents } from 'detect-passive-events'; import { forceSingleColumn } from 'flavours/glitch/initial_state'; const LAYOUT_BREAKPOINT = 630; +/** + * @param {number} width + * @returns {boolean} + */ export const isMobile = width => width <= LAYOUT_BREAKPOINT; +/** + * @param {string} layout_local_setting + * @returns {string} + */ export const layoutFromWindow = (layout_local_setting) => { switch (layout_local_setting) { case 'multiple': @@ -28,11 +38,13 @@ export const layoutFromWindow = (layout_local_setting) => { 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/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 1843129a0..28761796b 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 3233506cc..9d8372e75 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -907,7 +907,7 @@ $ui-header-height: 55px; .column-actions { display: flex; - align-items: start; + align-items: flex-start; justify-content: center; padding: 40px; padding-top: 40px; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 4a987a131..3befca567 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -344,6 +344,10 @@ .column-link span { display: none; } + + .list-panel { + display: none; + } } } |