Commit 918169a9 authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

added ebi iframe component

parent c9b551fd
Pipeline #155945 passed with stages
in 4 minutes and 20 seconds
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
......@@ -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>
......
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>
);
......
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>
......
import { Home } from "./Home";
export function EBIHome() {
return <Home showLocations={false} />;
}
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 EMBLs 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 />
</>
);
}
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 EMBLs 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 />
</>
)}
</>
......
......@@ -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(
......
......@@ -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
......
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