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
embl.org
html-sites
embl-jobs-pages
Commits
ccfc8767
Commit
ccfc8767
authored
May 14, 2021
by
Nitin Jadhav
Browse files
Merge branch 'ebi-iframe' into 'master'
added ebi iframe component See merge request
!38
parents
c9b551fd
918169a9
Pipeline
#155973
passed with stages
in 35 seconds
Changes
9
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
155 additions
and
118 deletions
+155
-118
.env.production
.env.production
+1
-1
public/index.html
public/index.html
+5
-0
src/app/App.js
src/app/App.js
+12
-6
src/components/Metadata.jsx
src/components/Metadata.jsx
+7
-9
src/components/home/EBIHome.js
src/components/home/EBIHome.js
+5
-0
src/components/home/EMBLHome.js
src/components/home/EMBLHome.js
+86
-0
src/components/home/Home.js
src/components/home/Home.js
+7
-78
src/components/job-list-filters/JobListFilters.jsx
src/components/job-list-filters/JobListFilters.jsx
+27
-24
src/index.js
src/index.js
+5
-0
No files found.
.env.production
View file @
ccfc8767
REACT_APP_API_URL=https://www.embl.org/api/v1/
SASS_PATH=node_modules:node_modules/@visual-framework:src
SASS_PATH=node_modules:node_modules/@visual-framework:src
\ No newline at end of file
public/index.html
View file @
ccfc8767
...
...
@@ -64,6 +64,11 @@
type=
"text/css"
media=
"all"
/>
<style>
.ebi-iframe-only
.vf-content-hub-html
,
.ebi-iframe-only
.embl-breadcrumbs-lookup
{
display
:
none
;
}
</style>
</head>
<body
class=
"vf-body vf-stack"
>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
...
...
src/app/App.js
View file @
ccfc8767
import
{
BrowserRouter
as
Router
,
Route
}
from
"
react-router-dom
"
;
import
{
BrowserRouter
as
Router
,
Route
,
Switch
}
from
"
react-router-dom
"
;
import
{
Home
}
from
"
components/home/Home
"
;
/* All the css files that can not be imported in index.scss */
...
...
@@ -10,17 +10,23 @@ import { Metadata } from "components/Metadata";
import
{
Apply
}
from
"
components/apply/Apply
"
;
import
{
Partners
}
from
"
components/Partners
"
;
import
{
Alerts
}
from
"
components/alerts/Alerts
"
;
import
{
EBIHome
}
from
"
../components/home/EBIHome
"
;
import
{
EMBLHome
}
from
"
../components/home/EMBLHome
"
;
export
function
App
()
{
return
(
<
Router
basename
=
"
jobs
"
>
<
Metadata
/>
<
div
className
=
"
vf-body
"
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
path
=
"
/position/:jobRef
"
component
=
{
JobDetails
}
/
>
<
Route
path
=
"
/apply
"
component
=
{
Apply
}
/
>
<
Route
path
=
"
/partners
"
component
=
{
Partners
}
/
>
<
Route
path
=
"
/alerts
"
component
=
{
Alerts
}
/
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
EMBLHome
}
/
>
<
Route
path
=
"
/position/:jobRef
"
component
=
{
JobDetails
}
/
>
<
Route
path
=
"
/apply
"
component
=
{
Apply
}
/
>
<
Route
path
=
"
/partners
"
component
=
{
Partners
}
/
>
<
Route
path
=
"
/alerts
"
component
=
{
Alerts
}
/
>
<
Route
path
=
"
/ebi/iframe
"
component
=
{
EBIHome
}
/
>
<
Route
path
=
"
*
"
component
=
{
EMBLHome
}
/
>
<
/Switch
>
<
/div
>
<
/Router
>
);
...
...
src/components/Metadata.jsx
View file @
ccfc8767
import
{
merge
}
from
"
lodash-es
"
;
import
React
,
{
useMemo
}
from
"
react
"
;
import
{
useMemo
}
from
"
react
"
;
import
{
Helmet
}
from
"
react-helmet
"
;
import
defaultMetadata
from
"
../data/metadata.json
"
;
/* Adds metadata to header of page, provide metadata prop object to override defaults. */
export
function
Metadata
({
metadata
=
{},
page
=
{}
})
{
const
finalMetadata
=
useMemo
(()
=>
merge
(
defaultMetadata
,
metadata
),
[
metadata
,
]);
const
finalMetadata
=
useMemo
(
()
=>
merge
(
defaultMetadata
,
metadata
),
[
metadata
]
);
const
{
meta
,
site_information
,
embl_content_meta_properties
,
}
=
finalMetadata
;
const
{
meta
,
site_information
,
embl_content_meta_properties
}
=
finalMetadata
;
return
(
<
Helmet
>
...
...
src/components/home/EBIHome.js
0 → 100644
View file @
ccfc8767
import
{
Home
}
from
"
./Home
"
;
export
function
EBIHome
()
{
return
<
Home
showLocations
=
{
false
}
/>
;
}
src/components/home/EMBLHome.js
0 → 100644
View file @
ccfc8767
import
{
EmblCards
}
from
"
../EmblCards
"
;
import
"
./Home.scss
"
;
import
{
Home
}
from
"
./Home
"
;
export
function
EMBLHome
()
{
return
(
<>
<
section
className
=
"
vf-hero | vf-u-fullbleed
"
>
<
div
className
=
"
vf-hero__content | vf-box | vf-stack vf-stack--400
"
>
{
"
"
}
<
h2
className
=
"
vf-hero__heading
"
>
<
a
className
=
"
vf-hero__heading_link
"
>
Opportunities
across
EMBL
<
/a
>
<
/h2
>
<
p
className
=
"
vf-hero__subheading
"
>
We
'
re a community of world-class researchers and skilled
professionals working together to uncover the secrets of life.
</p>{" "}
<p className="vf-hero__text">
We offer{" "}
<a className="vf-link" href="/jobs/work-at-embl">
attractive conditions and benefits
</a>{" "}
to attract and retain the brightest talent for scientific and
non-scientific positions. We encourage applications from
international candidates at all career levels.
</p>
</div>
</section>
<Home />
<hr className="vf-divider" />
<section className="vf-grid vf-grid__col-3">
<article className="vf-summary vf-summary--job">
<h3 className="vf-summary__title">
<a href="/jobs/partners" className="vf-summary__link">
Related opportunities
</a>
</h3>
<p className="vf-summary__text">
There may also be openings from EMBL
'
s
partners
and
similar
institutions
.
<
/p
>
<
/article
>
<
article
className
=
"
vf-summary vf-summary--job
"
>
<
h3
className
=
"
vf-summary__title
"
>
<
a
href
=
"
https://www.embl.de/training/eipp/application/index.html
"
className
=
"
vf-summary__link
"
>
Predoctoral
fellowships
<
/a
>
<
/h3
>
<
p
className
=
"
vf-summary__text
"
>
The
EMBL
International
PhD
Programme
,
established
in
1983
,
represents
EMBL
’
s
commitment
to
first
-
class
training
and
education
.
We
are
committed
to
providing
EMBL
PhD
students
with
the
best
starting
platform
for
a
successful
career
in
science
.
<
/p
>
<
/article
>
<
article
className
=
"
vf-summary vf-summary--job
"
>
<
h3
className
=
"
vf-summary__title
"
>
<
a
href
=
"
https://www.embl.de/training/postdocs/02-entry_routes/index.html
"
className
=
"
vf-summary__link
"
>
Postdoctoral
fellowships
<
/a
>
<
/h3
>
<
p
className
=
"
vf-summary__text
"
>
Postdocs
at
EMBL
have
a
wide
range
of
backgrounds
including
,
biology
,
chemistry
,
biochemistry
,
molecular
biology
,
medicine
,
engineering
,
physics
,
mathematics
,
computer
science
,
and
bioinformatics
.
Interdisciplinarity
is
an
important
strength
of
research
at
EMBL
and
we
welcome
fellows
interested
in
moving
into
a
new
area
of
research
.
<
/p
>
<
/article
>
<
/section
>
<
EmblCards
/>
<
/
>
);
}
src/components/home/Home.js
View file @
ccfc8767
import
React
,
{
useState
}
from
"
react
"
;
import
{
VFSearchBox
}
from
"
component-templates/VFSearchBox
"
;
import
{
JobListFilters
}
from
"
components/job-list-filters/JobListFilters
"
;
import
{
getInitialFilters
,
JobListFilters
,
}
from
"
components/job-list-filters/JobListFilters
"
;
import
{
JobList
}
from
"
components/job-list/JobList
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
useFetchJobsList
}
from
"
services/useFetchJobsList
"
;
import
{
getInitialFilters
}
from
"
components/job-list-filters/JobListFilters
"
;
import
"
./Home.scss
"
;
import
{
EmblCards
}
from
"
../EmblCards
"
;
export
function
Home
()
{
export
function
Home
(
{
showLocations
=
true
}
)
{
const
[
filters
,
setFilters
]
=
useState
(
getInitialFilters
());
const
{
...
...
@@ -27,27 +28,6 @@ export function Home() {
return
(
<>
<
section
className
=
"
vf-hero | vf-u-fullbleed
"
>
<
div
className
=
"
vf-hero__content | vf-box | vf-stack vf-stack--400
"
>
{
"
"
}
<
h2
className
=
"
vf-hero__heading
"
>
<
a
className
=
"
vf-hero__heading_link
"
>
Opportunities
across
EMBL
<
/a
>
<
/h2
>
<
p
className
=
"
vf-hero__subheading
"
>
We
'
re a community of world-class researchers and skilled
professionals working together to uncover the secrets of life.
</p>{" "}
<p className="vf-hero__text">
We offer{" "}
<a className="vf-link" href="/jobs/work-at-embl">
attractive conditions and benefits
</a>{" "}
to attract and retain the brightest talent for scientific and
non-scientific positions. We encourage applications from
international candidates at all career levels.
</p>
</div>
</section>
{
error
&&
(
<
div
className
=
"
vf-box vf-u-background-color--red--light
"
>
<
h3
className
=
"
vf-box__heading
"
>
Error
occurred
<
/h3
>
...
...
@@ -70,62 +50,11 @@ export function Home() {
positionJobsCount
=
{
positionJobsCount
}
onFiltersChange
=
{
setFilters
}
loading
=
{
loading
}
showLocations
=
{
showLocations
}
/
>
<
JobList
jobs
=
{
jobs
}
loading
=
{
loading
}
/
>
<
/section
>
<hr className="vf-divider" />
<section className="vf-grid vf-grid__col-3">
<article className="vf-summary vf-summary--job">
<h3 className="vf-summary__title">
<a href="/jobs/partners" className="vf-summary__link">
Related opportunities
</a>
</h3>
<p className="vf-summary__text">
There may also be openings from EMBL
'
s
partners
and
similar
institutions
.
<
/p
>
<
/article
>
<
article
className
=
"
vf-summary vf-summary--job
"
>
<
h3
className
=
"
vf-summary__title
"
>
<
a
href
=
"
https://www.embl.de/training/eipp/application/index.html
"
className
=
"
vf-summary__link
"
>
Predoctoral
fellowships
<
/a
>
<
/h3
>
<
p
className
=
"
vf-summary__text
"
>
The
EMBL
International
PhD
Programme
,
established
in
1983
,
represents
EMBL
’
s
commitment
to
first
-
class
training
and
education
.
We
are
committed
to
providing
EMBL
PhD
students
with
the
best
starting
platform
for
a
successful
career
in
science
.
<
/p
>
<
/article
>
<
article
className
=
"
vf-summary vf-summary--job
"
>
<
h3
className
=
"
vf-summary__title
"
>
<
a
href
=
"
https://www.embl.de/training/postdocs/02-entry_routes/index.html
"
className
=
"
vf-summary__link
"
>
Postdoctoral
fellowships
<
/a
>
<
/h3
>
<
p
className
=
"
vf-summary__text
"
>
Postdocs
at
EMBL
have
a
wide
range
of
backgrounds
including
,
biology
,
chemistry
,
biochemistry
,
molecular
biology
,
medicine
,
engineering
,
physics
,
mathematics
,
computer
science
,
and
bioinformatics
.
Interdisciplinarity
is
an
important
strength
of
research
at
EMBL
and
we
welcome
fellows
interested
in
moving
into
a
new
area
of
research
.
<
/p
>
<
/article
>
<
/section
>
<
EmblCards
/>
<
/
>
)}
<
/
>
...
...
src/components/job-list-filters/JobListFilters.jsx
View file @
ccfc8767
...
...
@@ -16,6 +16,7 @@ export function JobListFilters({
positionJobsCount
=
[],
onFiltersChange
,
loading
,
showLocations
=
true
,
})
{
const
handleLocationFilterChange
=
(
location
)
=>
{
// toggle this element in array
...
...
@@ -58,31 +59,33 @@ export function JobListFilters({
return
(
<
form
className
=
"vf-form filters-form"
>
<
fieldset
className
=
"vf-form__fieldset | vf-stack vf-stack--400"
>
<
legend
className
=
"vf-form__legend"
>
Position location
</
legend
>
{
locationJobsCount
.
map
(
({
location
,
locationTitle
,
jobCount
},
index
)
=>
(
<
div
key
=
{
location
}
className
=
"vf-form__item vf-form__item--checkbox"
>
<
input
type
=
"checkbox"
id
=
{
`location-checkbox-
${
index
}
`
}
className
=
"vf-form__checkbox"
checked
=
{
filters
.
selectedLocations
.
includes
(
location
)
}
onChange
=
{
()
=>
handleLocationFilterChange
(
location
)
}
/>
<
label
htmlFor
=
{
`location-checkbox-
${
index
}
`
}
className
=
"vf-form__label"
{
showLocations
&&
(
<
fieldset
className
=
"vf-form__fieldset | vf-stack vf-stack--400"
>
<
legend
className
=
"vf-form__legend"
>
Position location
</
legend
>
{
locationJobsCount
.
map
(
({
location
,
locationTitle
,
jobCount
},
index
)
=>
(
<
div
key
=
{
location
}
className
=
"vf-form__item vf-form__item--checkbox"
>
{
locationTitle
}
(
{
jobCount
}
)
</
label
>
</
div
>
)
)
}
</
fieldset
>
<
input
type
=
"checkbox"
id
=
{
`location-checkbox-
${
index
}
`
}
className
=
"vf-form__checkbox"
checked
=
{
filters
.
selectedLocations
.
includes
(
location
)
}
onChange
=
{
()
=>
handleLocationFilterChange
(
location
)
}
/>
<
label
htmlFor
=
{
`location-checkbox-
${
index
}
`
}
className
=
"vf-form__label"
>
{
locationTitle
}
(
{
jobCount
}
)
</
label
>
</
div
>
)
)
}
</
fieldset
>
)
}
<
fieldset
className
=
"vf-form__fieldset | vf-stack vf-stack--400"
>
<
legend
className
=
"vf-form__legend"
>
Type
</
legend
>
{
positionJobsCount
.
map
(
...
...
src/index.js
View file @
ccfc8767
...
...
@@ -7,6 +7,11 @@ import * as serviceWorker from "./serviceWorker";
ReactDOM
.
render
(
<
App
/>
,
document
.
getElementById
(
"
root
"
));
//app url contains /ebi/iframe - hide headers/footers
if
(
window
&&
window
.
location
.
pathname
===
"
/jobs/ebi/iframe
"
)
{
document
.
body
.
classList
.
add
(
"
ebi-iframe-only
"
);
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
...
...
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