Commit 6a1388d5 authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

implemented new hero section

parent 592789f3
Pipeline #167536 passed with stages
in 7 minutes and 44 seconds
import React from "react";
export default function VFHero({
spacing = 800,
heading = "",
subheading = "",
link_text = "",
link_href = "JavaScript:Void(0);",
image_url = "",
image_size = "auto 28.5rem",
}) {
return (
<section
className={`vf-hero vf-hero--${spacing} | vf-u-fullbleed`}
style={{
"--vf-hero--bg-image": `url(${image_url})`,
"--vf-hero--bg-image-size": image_size,
}}
>
<div className="vf-hero__content | vf-box | vf-stack vf-stack--400">
<h2 className="vf-hero__heading">{heading}</h2>
<p className="vf-hero__subheading">{subheading}</p>
<a className="vf-hero__link" href={link_href}>
{link_text}
</a>
</div>
</section>
);
}
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { VfIntro } from "component-templates/VFIntro";
import { VFLoaderBox } from "component-templates/VFLoader/VFLoader";
import { useFetch } from "helpers/useFetch";
import "./JobDetails.scss";
import { extendJobsObjects } from "services/useFetchJobsList";
import { VFShortcutsList } from "component-templates/VFShortcutsList";
import { formatISODate, parseISODateFromTimeHtml } from "helpers/date-helpers";
import { useFetch } from "helpers/useFetch";
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { Html } from "../Html";
import { EmblCards } from "../EmblCards";
import { EmblHeader } from "../EmblHeader";
import { extendJobsObjects } from "services/useFetchJobsList";
import VFHero from "../../component-templates/VFHero";
import { useScrollToTop } from "../../helpers/useScrollToTop";
import { EBICards } from "../EBICards";
import { EmblBreadcrumbs } from "../EmblBreadcrumbs";
import { EmblCards } from "../EmblCards";
import { EmblFooter } from "../EmblFooter";
import { EBICards } from "../EBICards";
import { VfIntro } from "component-templates/VFIntro";
import { useScrollToTop } from "../../helpers/useScrollToTop";
import { EmblHeader } from "../EmblHeader";
import { Html } from "../Html";
/* Hero section data */
import HeroData from "./data.json";
import "./JobDetails.scss";
import Testimony from "./Testimony";
const shortcutLinks = [
......@@ -121,6 +124,9 @@ export function JobDetails({ location }) {
<EmblHeader />
<EmblBreadcrumbs />
{/* hero section */}
{creteHeroSection(currentJob)}
<section
className="vf-intro"
id="intro"
......@@ -448,3 +454,22 @@ export function JobNotFound() {
</>
);
}
function creteHeroSection(job) {
if (!job) {
return null;
}
const heroDataForThisLocation =
HeroData.hero_section.find(
(datum) => datum.location === job.$stripped_field_jobs_duty_station
) || {};
return (
<VFHero
image_url={heroDataForThisLocation?.image_url}
heading={heroDataForThisLocation?.heading || "Job at EMBL"}
subheading={heroDataForThisLocation?.subheading || ""}
/>
);
}
{
"hero_section": [
{
"location": "Hamburg, Germany",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_Hamburg_V1-scaled.jpg",
"heading": "Jobs at EMBL Hamburg",
"subheading": "EMBL Hamburg carries out research in structural and infection biology and provides related services."
},
{
"location": "EMBL-EBI Hinxton",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_EMBL-EBI-scaled.jpg",
"heading": "Jobs at EMBL-EBI",
"subheading": "At EMBL's European Bioinformatics Institute (EMBL-EBI), we help scientists realise the potential of 'big data' in biology, exploiting complex information to make discoveries that benefit humankind."
},
{
"location": "Barcelona, Spain",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_Barcelona-scaled.jpg",
"heading": "Jobs at EMBL Barcelona",
"subheading": "At EMBL Barcelona we study how tissues and organs develop and function in health and disease."
},
{
"location": "Grenoble, France",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_Grenoble-scaled.jpg",
"heading": "Jobs at EMBL Grenoble",
"subheading": "EMBL's site in France is specialised in Structural Biology research, instrumentation development and services."
},
{
"location": "EMBL Heidelberg",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_Heidelberg-scaled.jpg",
"heading": "Jobs at EMBL Heidelberg",
"subheading": "EMBL’s headquarters and host to five research units and scientific core facilities."
},
{
"location": "Rome, Italy",
"image_url": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210616_Jobs_Hero_Rome-scaled.jpg",
"heading": "Jobs at EMBL Rome",
"subheading": "EMBL's site in Italy is a centre for research in Epigenetics and Neurobiology."
}
]
}
import { Link } from "react-router-dom";
import { VFLoaderBox } from "component-templates/VFLoader/VFLoader";
import { formatISODate, parseISODateFromTimeHtml } from "helpers/date-helpers";
import { stripHtml } from "helpers/helpers";
import { Link } from "react-router-dom";
import "./JobList.scss";
export function JobList({ jobs, loading, resetFilters, isIframe = false }) {
......@@ -25,9 +24,7 @@ export function JobList({ jobs, loading, resetFilters, isIframe = false }) {
)}
<hr className="vf-divider" />
{isIframe ? (
<div>ebi-bottom</div>
) : (
{!isIframe && (
<p>
<Link to="/alerts">Create a customised email alert for jobs</Link>
</p>
......
......@@ -11,6 +11,5 @@ h3.job-title {
}
.location {
font-weight: 600;
margin-bottom: 8px;
}
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