Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
e65093ae
Commit
e65093ae
authored
Oct 31, 2019
by
Anne Lyle
Committed by
Andrey Azov
Oct 31, 2019
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
Changes
10
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
72 additions
and
28 deletions
+72
-28
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
...sembl/src/content/app/browser/browser-bar/BrowserBar.scss
+1
-1
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.test.tsx
...l/src/content/app/browser/browser-bar/BrowserBar.test.tsx
+2
-2
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
...nsembl/src/content/app/browser/browser-bar/BrowserBar.tsx
+1
-1
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.scss
...bl/src/content/app/browser/browser-nav/BrowserNavBar.scss
+1
-1
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+18
-1
src/ensembl/src/global/globalConfig.ts
src/ensembl/src/global/globalConfig.ts
+5
-3
src/ensembl/src/global/globalHelper.ts
src/ensembl/src/global/globalHelper.ts
+5
-5
src/ensembl/src/global/globalState.ts
src/ensembl/src/global/globalState.ts
+1
-1
src/ensembl/src/header/Header.scss
src/ensembl/src/header/Header.scss
+1
-1
src/ensembl/src/styles/_breakpoints.scss
src/ensembl/src/styles/_breakpoints.scss
+37
-12
No files found.
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
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
View file @
e65093ae
...
...
@@ -5,5 +5,5 @@ export type GlobalState = Readonly<{
}
>
;
export
const
defaultState
:
GlobalState
=
{
breakpointWidth
:
BreakpointWidth
.
LARGE
breakpointWidth
:
BreakpointWidth
.
DESKTOP
};
src/ensembl/src/header/Header.scss
View file @
e65093ae
...
...
@@ -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
View file @
e65093ae
/*
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
;
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment