Commit e65093ae authored by Anne Lyle's avatar Anne Lyle Committed by Andrey Azov
Browse files

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

ENSWBSITES-205
parent adbd99d2
Pipeline #43073 passed with stages
in 4 minutes and 33 seconds
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
&.browserInfoExpanded { &.browserInfoExpanded {
width: calc(100vw - 36px); width: calc(100vw - 36px);
@media #{$breakpoint-large} { @include for-big-desktop-up {
width: calc(100vw - 356px); width: calc(100vw - 356px);
} }
} }
......
...@@ -39,7 +39,7 @@ describe('<BrowserBar />', () => { ...@@ -39,7 +39,7 @@ describe('<BrowserBar />', () => {
const defaultProps = { const defaultProps = {
activeGenomeId: faker.lorem.word(), activeGenomeId: faker.lorem.word(),
breakpointWidth: BreakpointWidth.LARGE, breakpointWidth: BreakpointWidth.DESKTOP,
browserActivated: true, browserActivated: true,
browserNavOpened: false, browserNavOpened: false,
chrLocation: ['13', 32275301, 32433493] as ChrLocation, chrLocation: ['13', 32275301, 32433493] as ChrLocation,
...@@ -148,7 +148,7 @@ describe('<BrowserBar />', () => { ...@@ -148,7 +148,7 @@ describe('<BrowserBar />', () => {
test('hides TrackPanelTabs on small if TrackPanel is closed', () => { test('hides TrackPanelTabs on small if TrackPanel is closed', () => {
const renderedBrowserBar = mount( const renderedBrowserBar = mount(
renderBrowserBar({ breakpointWidth: BreakpointWidth.MEDIUM }) renderBrowserBar({ breakpointWidth: BreakpointWidth.LAPTOP })
); );
expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(0); expect(renderedBrowserBar.find(TrackPanelTabs).length).toBe(0);
}); });
......
...@@ -139,7 +139,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = ( ...@@ -139,7 +139,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
const shouldShowTrackPanelTabs = const shouldShowTrackPanelTabs =
props.activeGenomeId && props.activeGenomeId &&
(props.isTrackPanelOpened || (props.isTrackPanelOpened ||
props.breakpointWidth === BreakpointWidth.LARGE); props.breakpointWidth === BreakpointWidth.DESKTOP);
const className = classNames(styles.browserInfo, { const className = classNames(styles.browserInfo, {
[styles.browserInfoExpanded]: !props.isTrackPanelOpened, [styles.browserInfoExpanded]: !props.isTrackPanelOpened,
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
background: $light-grey; background: $light-grey;
padding: 16px; padding: 16px;
@media #{$breakpoint-large} { @include for-desktop-up {
width: calc(100vw - 356px); width: calc(100vw - 356px);
} }
......
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
getBrowserTrackStates getBrowserTrackStates
} from '../browserSelectors'; } from '../browserSelectors';
import { getBreakpointWidth } from 'src/global/globalSelectors'; import { getBreakpointWidth } from 'src/global/globalSelectors';
import { toggleTrackPanel } from './trackPanelActions';
import { BreakpointWidth } from 'src/global/globalConfig'; import { BreakpointWidth } from 'src/global/globalConfig';
import { TrackSet, TrackStates } from './trackPanelConfig'; import { TrackSet, TrackStates } from './trackPanelConfig';
...@@ -41,11 +42,20 @@ type TrackPanelProps = { ...@@ -41,11 +42,20 @@ type TrackPanelProps = {
selectedTrackPanelTab: TrackSet; selectedTrackPanelTab: TrackSet;
genomeTrackCategories: GenomeTrackCategory[]; genomeTrackCategories: GenomeTrackCategory[];
trackStates: TrackStates; trackStates: TrackStates;
toggleTrackPanel: (isTrackPanelOpened: boolean) => void;
}; };
const TrackPanel = (props: TrackPanelProps) => { const TrackPanel = (props: TrackPanelProps) => {
const { isDrawerOpened } = props; const { isDrawerOpened } = props;
useEffect(() => {
if (props.breakpointWidth !== BreakpointWidth.DESKTOP) {
props.toggleTrackPanel(false);
} else {
props.toggleTrackPanel(true);
}
}, [props.breakpointWidth, props.toggleTrackPanel]);
const [trackAnimation, setTrackAnimation] = useSpring(() => ({ const [trackAnimation, setTrackAnimation] = useSpring(() => ({
config: { tension: 280, friction: 45 }, config: { tension: 280, friction: 45 },
height: '100%', height: '100%',
...@@ -102,4 +112,11 @@ const mapStateToProps = (state: RootState) => { ...@@ -102,4 +112,11 @@ const mapStateToProps = (state: RootState) => {
}; };
}; };
export default connect(mapStateToProps)(TrackPanel); const mapDispatchToProps = {
toggleTrackPanel
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(TrackPanel);
...@@ -2,9 +2,11 @@ export const assetsUrl = '/static'; ...@@ -2,9 +2,11 @@ export const assetsUrl = '/static';
export const imgBaseUrl = `${assetsUrl}/img`; export const imgBaseUrl = `${assetsUrl}/img`;
export enum BreakpointWidth { export enum BreakpointWidth {
SMALL = 0, PHONE = 0,
MEDIUM = 900, TABLET = 600,
LARGE = 1400 LAPTOP = 900,
DESKTOP = 1400,
BIG_DESKTOP = 1800
} }
export enum AppName { export enum AppName {
......
import { BreakpointWidth } from './globalConfig'; import { BreakpointWidth } from './globalConfig';
export const getBreakpoint = (width: number): BreakpointWidth => { export const getBreakpoint = (width: number): BreakpointWidth => {
if (width > BreakpointWidth.LARGE) { if (width > BreakpointWidth.DESKTOP) {
return BreakpointWidth.LARGE; return BreakpointWidth.DESKTOP;
} else if (width > BreakpointWidth.MEDIUM) { } else if (width > BreakpointWidth.LAPTOP) {
return BreakpointWidth.MEDIUM; return BreakpointWidth.LAPTOP;
} else { } else {
return BreakpointWidth.SMALL; return BreakpointWidth.TABLET;
} }
}; };
......
...@@ -5,5 +5,5 @@ export type GlobalState = Readonly<{ ...@@ -5,5 +5,5 @@ export type GlobalState = Readonly<{
}>; }>;
export const defaultState: GlobalState = { export const defaultState: GlobalState = {
breakpointWidth: BreakpointWidth.LARGE breakpointWidth: BreakpointWidth.DESKTOP
}; };
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
font-size: 11px; font-size: 11px;
margin-left: 30px; margin-left: 30px;
@media #{$breakpoint-medium} { @include for-laptop-up {
display: inline-block; display: inline-block;
} }
......
/* /*
Breakpoints suggested by Foundation (copied from _settings.scss): Breakpoints based on the following article:
$breakpoints: ( https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
small: 0,
medium: 640px, Breakpoints are 600, 900, 1200 and 1800, based on common device types
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px
);
*/ */
$breakpoint-small: 'screen and (min-width: 0)'; @mixin for-phone-only {
$breakpoint-medium: 'screen and (min-width: 900px)'; @media (max-width: 599px) { @content; }
$breakpoint-large: 'screen and (min-width: 1400px)'; }
/* 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; }
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment