Change CSS breakpoints to use mixins with better names (#165)

ENSWBSITES-205

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss

@@ -40,7 +40,7 @@
   &.browserInfoExpanded {
     width: calc(100vw - 36px);
 
-    @media #{$breakpoint-large} {
+    @include for-big-desktop-up {
       width: calc(100vw - 356px);
     }
   }

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.test.tsx

@@ -39,7 +39,7 @@ describe('<BrowserBar />', () => {
 
   const defaultProps = {
     activeGenomeId: faker.lorem.word(),
-    breakpointWidth: BreakpointWidth.LARGE,
+    breakpointWidth: BreakpointWidth.DESKTOP,
     browserActivated: true,
     browserNavOpened: false,
     chrLocation: ['13', 32275301, 32433493] as ChrLocation,
@@ -148,7 +148,7 @@ describe('<BrowserBar />', () => {
 
     test('hides TrackPanelTabs on small if TrackPanel is closed', () => {
       const renderedBrowserBar = mount(
-        renderBrowserBar({ breakpointWidth: BreakpointWidth.MEDIUM })
+        renderBrowserBar({ breakpointWidth: BreakpointWidth.LAPTOP })
       );
       expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(0);
     });

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx

@@ -139,7 +139,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
   const shouldShowTrackPanelTabs =
     props.activeGenomeId &&
     (props.isTrackPanelOpened ||
-      props.breakpointWidth === BreakpointWidth.LARGE);
+      props.breakpointWidth === BreakpointWidth.DESKTOP);
 
   const className = classNames(styles.browserInfo, {
     [styles.browserInfoExpanded]: !props.isTrackPanelOpened,

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.scss

@@ -5,7 +5,7 @@
   background: $light-grey;
   padding: 16px;
 
-  @media #{$breakpoint-large} {
+  @include for-desktop-up {
     width: calc(100vw - 356px);
   }
 

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

@@ -21,6 +21,7 @@ import {
   getBrowserTrackStates
 } from '../browserSelectors';
 import { getBreakpointWidth } from 'src/global/globalSelectors';
+import { toggleTrackPanel } from './trackPanelActions';
 import { BreakpointWidth } from 'src/global/globalConfig';
 import { TrackSet, TrackStates } from './trackPanelConfig';
 
@@ -41,11 +42,20 @@ type TrackPanelProps = {
   selectedTrackPanelTab: TrackSet;
   genomeTrackCategories: GenomeTrackCategory[];
   trackStates: TrackStates;
+  toggleTrackPanel: (isTrackPanelOpened: boolean) => void;
 };
 
 const TrackPanel = (props: TrackPanelProps) => {
   const { isDrawerOpened } = props;
 
+  useEffect(() => {
+    if (props.breakpointWidth !== BreakpointWidth.DESKTOP) {
+      props.toggleTrackPanel(false);
+    } else {
+      props.toggleTrackPanel(true);
+    }
+  }, [props.breakpointWidth, props.toggleTrackPanel]);
+
   const [trackAnimation, setTrackAnimation] = useSpring(() => ({
     config: { tension: 280, friction: 45 },
     height: '100%',
@@ -102,4 +112,11 @@ const mapStateToProps = (state: RootState) => {
   };
 };
 
-export default connect(mapStateToProps)(TrackPanel);
+const mapDispatchToProps = {
+  toggleTrackPanel
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TrackPanel);

src/ensembl/src/global/globalConfig.ts

@@ -2,9 +2,11 @@ export const assetsUrl = '/static';
 export const imgBaseUrl = `${assetsUrl}/img`;
 
 export enum BreakpointWidth {
-  SMALL = 0,
-  MEDIUM = 900,
-  LARGE = 1400
+  PHONE = 0,
+  TABLET = 600,
+  LAPTOP = 900,
+  DESKTOP = 1400,
+  BIG_DESKTOP = 1800
 }
 
 export enum AppName {

src/ensembl/src/global/globalHelper.ts

 import { BreakpointWidth } from './globalConfig';
 
 export const getBreakpoint = (width: number): BreakpointWidth => {
-  if (width > BreakpointWidth.LARGE) {
-    return BreakpointWidth.LARGE;
-  } else if (width > BreakpointWidth.MEDIUM) {
-    return BreakpointWidth.MEDIUM;
+  if (width > BreakpointWidth.DESKTOP) {
+    return BreakpointWidth.DESKTOP;
+  } else if (width > BreakpointWidth.LAPTOP) {
+    return BreakpointWidth.LAPTOP;
   } else {
-    return BreakpointWidth.SMALL;
+    return BreakpointWidth.TABLET;
   }
 };
 

src/ensembl/src/global/globalState.ts

@@ -5,5 +5,5 @@ export type GlobalState = Readonly<{
 }>;
 
 export const defaultState: GlobalState = {
-  breakpointWidth: BreakpointWidth.LARGE
+  breakpointWidth: BreakpointWidth.DESKTOP
 };

src/ensembl/src/header/Header.scss

@@ -34,7 +34,7 @@
   font-size: 11px;
   margin-left: 30px;
 
-  @media #{$breakpoint-medium} {
+  @include for-laptop-up {
     display: inline-block;
   }
 

src/ensembl/src/styles/_breakpoints.scss

-/* 
-Breakpoints suggested by Foundation (copied from _settings.scss):
+/*
+Breakpoints based on the following article:
 
-$breakpoints: (
-  small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1440px
-);
+https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
+
+Breakpoints are 600, 900, 1200 and 1800, based on common device types
 
 */
 
-$breakpoint-small: 'screen and (min-width: 0)';
-$breakpoint-medium: 'screen and (min-width: 900px)';
-$breakpoint-large: 'screen and (min-width: 1400px)';
+@mixin for-phone-only {
+  @media (max-width: 599px) { @content; }
+}
+
+/* big phones, tablets in portrait mode */
+@mixin for-tablet-up {
+  @media (min-width: 600px) { @content; }
+}
+@mixin for-tablet-only {
+  @media (min-width: 600px) and (max-width: 899px) { @content; }
+}
+
+/* tablets in landscape mode, small laptops */
+@mixin for-laptop-up {
+  @media (min-width: 900px) { @content; }
+}
+@mixin for-laptop-only {
+  @media (min-width: 900px) and (max-width: 1199px) { @content; }
+}
+
+/* big laptops, standard monitors */
+@mixin for-desktop-up {
+  @media (min-width: 1200px) { @content; }
+}
+@mixin for-desktop-only {
+  @media (min-width: 1200px) and (max-width: 1799px) { @content; }
+}
+
+/* big monitors */
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) { @content; }
+}