Skip to content

GitLab

Commit ccfc8767 authored by Nitin Jadhav's avatar 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
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 118 deletions
.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
......
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