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 @@
&.browserInfoExpanded {
width: calc(100vw - 36px);
@media #{$breakpoint-large} {
@include for-big-desktop-up {
width: calc(100vw - 356px);
}
}
......
......@@ -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);
});
......
......@@ -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,
......
......@@ -5,7 +5,7 @@
background: $light-grey;
padding: 16px;
@media #{$breakpoint-large} {
@include for-desktop-up {
width: calc(100vw - 356px);
}
......
......@@ -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);
......@@ -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 {
......
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;
}
};
......
......@@ -5,5 +5,5 @@ export type GlobalState = Readonly<{
}>;
export const defaultState: GlobalState = {
breakpointWidth: BreakpointWidth.LARGE
breakpointWidth: BreakpointWidth.DESKTOP
};
......@@ -34,7 +34,7 @@
font-size: 11px;
margin-left: 30px;
@media #{$breakpoint-medium} {
@include for-laptop-up {
display: inline-block;
}
......
/*
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; }
}
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