Reposition menus on narrow screens and add 2-column view (#3044)

* Fix positions of menus and overlays on narrow screens
* Always show target locale code in the navbar
* Implement a 2-column UI for middle screen widths between 600 and 800 pixels

Also:
* Expand Header navigation breakpoint to the middle screens
* Prevent jumping when moving between tabs
* useNarrowScreen() -> useWindowWidth()

translate/src/App.css

@@ -60,12 +60,8 @@
   transform: rotate(3deg) translate(0px, -4px);
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 800px) {
   /* Header */
-  #app > header {
-    min-width: auto;
-  }
-
   #app .navigation > ul > li:first-child {
     margin-right: -7px;
   }
@@ -74,9 +70,79 @@
     display: none;
   }
 
+  #app .navigation > ul > li.locale {
+    display: block;
+  }
+
+  #app .navigation > ul > li.locale .locale-name {
+    display: none;
+  }
+
+  #app .navigation > ul > li.locale .locale-code {
+    color: inherit;
+    margin-left: -5px;
+    padding: 0;
+  }
+
+  #app .project-info .panel,
+  #app .resource-menu .menu {
+    right: -1px;
+  }
+
   /* Main Content */
   #app > .main-content {
-    overflow-x: hidden; /* Prevent horizontal scroll */
+    height: calc(100% - 60px);
+    overflow: hidden;
+  }
+
+  #app > .main-content > .panel-list {
+    width: 33%;
+  }
+
+  #app > .main-content > .panel-content {
+    overflow-y: auto;
+    width: 67%;
+  }
+
+  /* Editor */
+  #app .entity-details {
+    display: block;
+    height: 160%; /* Prevent jumping when moving between tabs */
+  }
+
+  #app .entity-details > section {
+    height: auto;
+    max-height: none;
+    overflow-y: inherit;
+    width: 100%;
+  }
+
+  /* History */
+  #app .entity-details .history {
+    background: var(--editor-menu-background);
+  }
+
+  /* Helpers */
+  #app > .main-content .third-column {
+    border-left: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  /* Header */
+  #app .progress-chart .menu {
+    position: fixed;
+    top: 59px;
+  }
+
+  #app .project-info .panel {
+    left: -1px;
+    right: -1px;
+  }
+
+  #app .user-notifications-menu .menu {
+    right: -1px;
+    position: fixed;
   }
 
   #app > .main-content > .panel-list,
@@ -101,14 +167,9 @@
     display: block;
   }
 
-  /* Editor */
-  #app .entity-details {
-    display: block;
-  }
-
-  #app .entity-details > section {
-    height: auto;
-    max-height: none;
+  #app .filters-panel .menu {
+    border: 0;
+    left: 0;
     width: 100%;
   }
 
@@ -121,14 +182,9 @@
     margin-right: 15px;
   }
 
-  /* History */
-  #app .entity-details .history {
-    background: var(--editor-menu-background);
-  }
-
-  /* Helpers */
-  #app > .main-content .third-column {
-    border-left: none;
+  #app .keyboard-shortcuts .overlay {
+    padding: 10px;
+    width: 360px;
   }
 
   #app > .main-content .third-column .react-tabs span.count {

translate/src/hooks/useWindowWidth.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const BREAKPOINTS = {
+  narrow: 600,
+  medium: 800,
+};
+
+/**
+ * Return window width range: narrow, medium or wide.
+ *
+ * Useful in Responsive Web Design.
+ */
+export function useWindowWidth(): 'narrow' | 'medium' | 'wide' {
+  function get_range(): 'narrow' | 'medium' | 'wide' {
+    if (window.innerWidth <= BREAKPOINTS.narrow) {
+      return 'narrow';
+    }
+    if (window.innerWidth <= BREAKPOINTS.medium) {
+      return 'medium';
+    }
+    return 'wide';
+  }
+
+  const [windowWidth, setWindowWidth] = useState(get_range());
+
+  useEffect(() => {
+    const handleWindowResize = () => setWindowWidth(get_range());
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, []);
+
+  return windowWidth;
+}

translate/src/modules/entitieslist/components/EntitiesList.tsx

@@ -15,7 +15,7 @@ import { useEntities } from '~/modules/entities/hooks';
 import { SkeletonLoader } from '~/modules/loaders';
 import { ENTITY_NOT_FOUND } from '~/modules/notification/messages';
 import { useAppDispatch, useAppSelector, useAppStore } from '~/hooks';
-import { useNarrowScreen } from '~/hooks/useNarrowScreen';
+import { useWindowWidth } from '~/hooks/useWindowWidth';
 import { usePrevious } from '~/hooks/usePrevious';
 import {
   checkSelection,
@@ -273,7 +273,7 @@ export function EntitiesList(): React.ReactElement<'div'> {
   }
 
   const selectedEntitiesCount = batchactions.entities.length;
-  const isNarrowScreen = useNarrowScreen();
+  const windowWidth = useWindowWidth();
   const entitiesList = useContext(EntitiesListContext);
   const quitBatchActions = useCallback(() => dispatch(resetSelection()), []);
   const showBatchActions = useCallback(() => entitiesList.show(false), []);
@@ -296,7 +296,7 @@ export function EntitiesList(): React.ReactElement<'div'> {
         ))}
       </ul>
       {hasNextPage && <SkeletonLoader items={entities} sentryRef={sentryRef} />}
-      {selectedEntitiesCount === 0 || !isNarrowScreen ? null : (
+      {selectedEntitiesCount === 0 || windowWidth !== 'narrow' ? null : (
         <EntitiesToolbar
           count={selectedEntitiesCount}
           onEdit={showBatchActions}

translate/src/modules/entitydetails/components/Helpers.tsx

@@ -5,7 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import type { Entity } from '~/api/entity';
 import { HelperSelection } from '~/context/HelperSelection';
 import type { Location } from '~/context/Location';
-import { useNarrowScreen } from '~/hooks/useNarrowScreen';
+import { useWindowWidth } from '~/hooks/useWindowWidth';
 import type { TermState } from '~/modules/terms';
 import type { UserState } from '~/modules/user';
 import { Machinery, MachineryCount } from '~/modules/machinery';
@@ -54,6 +54,7 @@ export function Helpers({
   resetContactPerson,
 }: Props): React.ReactElement<any> {
   const { setTab } = useContext(HelperSelection);
+  const windowWidth = useWindowWidth();
 
   const isTerminologyProject = parameters.project === 'terminology';
 
@@ -138,7 +139,7 @@ export function Helpers({
     );
   }
 
-  if (useNarrowScreen()) {
+  if (windowWidth === 'narrow' || windowWidth === 'medium') {
     return (
       <>
         <div className='bottom'>

translate/src/modules/navbar/components/Navigation.tsx

@@ -34,7 +34,7 @@ export function Navigation(): React.ReactElement<'nav'> {
   return (
     <nav className='navigation'>
       <ul>
-        <li>
+        <li className='logo'>
           <a href='/'>
             <img
               src='/static/img/logo.svg'
@@ -44,9 +44,9 @@ export function Navigation(): React.ReactElement<'nav'> {
             />
           </a>
         </li>
-        <li>
+        <li className='locale'>
           <a href={`/${code}/`}>
-            {name}
+            <span className='locale-name'>{name}</span>
             <span className='locale-code'>{code}</span>
           </a>
         </li>

translate/src/modules/project/components/ProjectMenu.tsx

@@ -153,7 +153,7 @@ export function ProjectMenu({
 
   if (parameters.project !== 'all-projects') {
     return (
-      <li>
+      <li className='project'>
         <a href={`/${code}/${project.slug}/`}>{project.name}</a>
       </li>
     );