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

Port d7873433256746c9b453aeca31520d68c6de4975 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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;
+    }
   }
 }