Skip to content

GitLab

Commit 0b726a6d authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

Implemented content pages, fixed order in alerts screen

parent 2bee8b9f
Pipeline #157068 passed with stages
in 6 minutes and 7 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 1240 additions and 413 deletions
src/app/App.js
View file @ 0b726a6d
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Home } from "components/home/Home";
import "@visual-framework/vf-form__input/vf-form__input.css";
/* All the css files that can not be imported in index.scss */
import "@visual-framework/vf-summary/vf-summary.css";
import "@visual-framework/vf-form__input/vf-form__input.css";
import "./App.scss";
import { Alerts } from "components/alerts/Alerts";
import { Apply } from "components/apply/Apply";
import { Partners } from "components/content/Partners";
import { JobDetails } from "components/job-details/JobDetails";
import { Metadata } from "components/Metadata";
import { Apply } from "components/apply/Apply";
import { Partners } from "components/Partners";
import { Alerts } from "components/alerts/Alerts";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { HrExcellenceInResearch } from "../components/content/HrExcellenceInResearch";
import { Science4Refugees } from "../components/content/Science4Refugees";
import { ConditionsEmployment } from "../components/content/work-at-embl/conditions-employment/ConditionsEmployment";
import { FamilyLife } from "../components/content/work-at-embl/conditions-employment/FamilyLife";
import { FinancialSupport } from "../components/content/work-at-embl/conditions-employment/FinancialSupport";
import { Remuneration } from "../components/content/work-at-embl/conditions-employment/Remuneration";
import { SocialSecurity } from "../components/content/work-at-embl/conditions-employment/SocialSecurity";
import { Training } from "../components/content/work-at-embl/conditions-employment/Training";
import { VisaRequirement } from "../components/content/work-at-embl/conditions-employment/VisaRequirement";
import { WorkingHoursLeave } from "../components/content/work-at-embl/conditions-employment/WorkingHoursLeave";
import { GroupLeaderRecruitment } from "../components/content/work-at-embl/GroupLeaderRecruitment";
import { EBIHome } from "../components/home/EBIHome";
import { EMBLHome } from "../components/home/EMBLHome";
import "./App.scss";
export function App() {
return (
......@@ -25,6 +34,50 @@ export function App() {
<Route path="/partners" component={Partners} />
<Route path="/alerts" component={Alerts} />
<Route path="/ebi/iframe" component={EBIHome} />
<Route
path="/hr-excellence-in-research"
component={HrExcellenceInResearch}
/>
<Route path="/science4refugees" component={Science4Refugees} />
<Route
path="/work-at-embl/group-leader-recruitment"
component={GroupLeaderRecruitment}
/>
<Route
exact
path="/work-at-embl/conditions-employment"
component={ConditionsEmployment}
/>
<Route
path="/work-at-embl/conditions-employment/family-life"
component={FamilyLife}
/>
<Route
path="/work-at-embl/conditions-employment/financial-support"
component={FinancialSupport}
/>
<Route
path="/work-at-embl/conditions-employment/remuneration"
component={Remuneration}
/>
<Route
path="/work-at-embl/conditions-employment/social-security"
component={SocialSecurity}
/>
<Route
path="/work-at-embl/conditions-employment/training"
component={Training}
/>
<Route
path="/work-at-embl/conditions-employment/visa-requirements"
component={VisaRequirement}
/>
<Route
path="/work-at-embl/conditions-employment/working-hours-leave"
component={WorkingHoursLeave}
/>
{/* default route */}
<Route path="*" component={EMBLHome} />
</Switch>
</div>
......
src/component-templates/VFCard.jsx
View file @ 0b726a6d
export function VFCard({ imageUrl, altText, heading, subheading, text, href }) {
import { VfClassNormalize } from "../helpers/helpers";
export function VFCard({
card_image,
card_image__alt,
card_custom_aspect_ratio,
card_heading,
card_href,
card_subheading,
card_text,
variant,
modifiers,
override_class,
id,
theme,
newTheme,
}) {
const cardClasses = VfClassNormalize(
"vf-card",
theme && `vf-card-theme--${theme}`,
newTheme &&
(newTheme === "primary" ? "vf-card--brand" : `vf-card--${newTheme}`),
variant && `vf-card--${variant}`,
modifiers,
override_class
);
return (
<article className="vf-card vf-card--brand vf-card--bordered">
<img
src={imageUrl}
alt={altText}
className="vf-card__image"
loading="lazy"
/>
<article
id={id}
className={cardClasses}
style={{ "--vf-card__image--aspect-ratio": card_custom_aspect_ratio }}
>
{card_image && (
<img
src={card_image}
alt={card_image__alt}
className="vf-card__image"
loading="lazy"
/>
)}
<div className="vf-card__content | vf-stack vf-stack--400">
<h3 className="vf-card__heading">
<a className="vf-card__link" href={href}>
{heading}
<a className="vf-card__link" href={card_href}>
{card_heading}
<svg
aria-hidden="true"
className="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end"
......@@ -26,8 +57,10 @@ export function VFCard({ imageUrl, altText, heading, subheading, text, href }) {
</svg>
</a>
</h3>
{subheading && <p className="vf-card__subheading">{subheading}</p>}
{text && <p className="vf-card__text">{text}</p>}
{card_subheading && (
<p className="vf-card__subheading">{card_subheading}</p>
)}
{card_text && <p className="vf-card__text">{card_text}</p>}
</div>
</article>
);
......
src/component-templates/VFIntro.jsx 0 → 100644
View file @ 0b726a6d
export function VfIntro({
vf_intro_heading,
vf_intro_subheading,
vf_intro_badge,
vf_intro_lede,
vf_intro_text,
id,
}) {
return (
<section className="vf-intro" id={id}>
<div>{/* <!-- empty --> */}</div>
<div className="vf-stack">
<h1
className={`vf-intro__heading ${
vf_intro_badge && "vf-intro__heading--has-tag"
}`}
>
{vf_intro_heading}
{vf_intro_badge}
</h1>
{vf_intro_subheading && (
<h2 className="vf-intro__subheading">{vf_intro_subheading}</h2>
)}
{vf_intro_lede && <p className="vf-lede">{vf_intro_lede}</p>}
{vf_intro_text &&
(Array.isArray(vf_intro_text) ? (
vf_intro_text.map((html, index) => (
<p
key={index}
className="vf-intro__text"
dangerouslySetInnerHTML={{
__html: html,
}}
></p>
))
) : (
<p
className="vf-intro__text"
dangerouslySetInnerHTML={{
__html: vf_intro_text,
}}
></p>
))}
</div>
</section>
);
}
src/component-templates/VFSummary.jsx 0 → 100644
View file @ 0b726a6d
export function VfSummary({
summary__title,
summary__text,
summary__href,
id,
}) {
return (
<article id={id} className="vf-summary">
<h3 className="vf-summary__title">
<a href={summary__href} className="vf-summary__link">
{summary__title}
</a>
</h3>
<p className="vf-summary__text">{summary__text}</p>
</article>
);
}
src/components/EBICards.jsx
View file @ 0b726a6d
......@@ -4,29 +4,35 @@ export function EBICards() {
return (
<VFCard.Container>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/ebi-jobs-campus-south-building.jpg?w=500&h=300&func=crop"
altText="Aerial image of EMBL-EBI South building on campus"
heading="Life at EMBL-EBI"
subheading=""
text="With outstanding technical infrastructure and a flexible working style, EMBL-EBI is a medium-sized organisation with a small-company feel."
href="//www.ebi.ac.uk/about/jobs/career-profiles"
card_image="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/ebi-jobs-campus-south-building.jpg?w=500&h=300&func=crop"
card_image__alt="Aerial image of EMBL-EBI South building on campus"
card_heading="Life at EMBL-EBI"
card_subheading=""
card_text="With outstanding technical infrastructure and a flexible working style, EMBL-EBI is a medium-sized organisation with a small-company feel."
card_href="//www.ebi.ac.uk/about/jobs/career-profiles"
newTheme="primary"
modifiers="vf-card--bordered"
/>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://wwwdev.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/Events/all-at-ebi_stepping_down_EBI.jpg?w=500&h=300&func=crop"
altText="EMBL-EBI staff members"
heading="Employee benefits"
subheading=""
text="We value your skills, wherever you may come from and we offer a generous benefits package to support you."
href="//www.ebi.ac.uk/about/jobs/benefits"
card_image="https://acxngcvroo.cloudimg.io/v7/https://wwwdev.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/Events/all-at-ebi_stepping_down_EBI.jpg?w=500&h=300&func=crop"
card_image__alt="EMBL-EBI staff members"
card_heading="Employee benefits"
card_subheading=""
card_text="We value your skills, wherever you may come from and we offer a generous benefits package to support you."
card_href="//www.ebi.ac.uk/about/jobs/benefits"
newTheme="primary"
modifiers="vf-card--bordered"
/>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/AdobeStock_245533971_900x500.jpeg"
altText="Visual of the world with connecting lines"
heading="International applicants"
subheading=""
text="Join an inclusive community of 850+ employees from over 78 countries and get unparalleled support with visa sponsorship."
href="//www.ebi.ac.uk/about/jobs/benefits"
card_image="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/AdobeStock_245533971_900x500.jpeg"
card_image__alt="Visual of the world with connecting lines"
card_heading="International applicants"
card_subheading=""
card_text="Join an inclusive community of 850+ employees from over 78 countries and get unparalleled support with visa sponsorship."
card_href="//www.ebi.ac.uk/about/jobs/benefits"
newTheme="primary"
modifiers="vf-card--bordered"
/>
</VFCard.Container>
);
......
src/components/EmblCards.jsx
View file @ 0b726a6d
......@@ -4,29 +4,35 @@ export function EmblCards() {
return (
<VFCard.Container>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/0607_ells-school-group_hd-s.jpg"
altText="Image opf staff looking at a test"
heading="Work at EMBL"
subheading=""
text="We offer attractive conditions and benefits to attract and retain the brightest talent."
href="/jobs/work-at-embl"
card_image="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/0607_ells-school-group_hd-s.jpg"
card_image__alt="Image opf staff looking at a test"
card_heading="Work at EMBL"
card_subheading=""
card_text="We offer attractive conditions and benefits to attract and retain the brightest talent."
card_href="/jobs/work-at-embl"
newTheme="primary"
modifiers="vf-card--bordered"
/>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210104_EMBL_Partnership_A4_lean620x425.png"
altText="map of EMBL member states and its sites"
heading="One laboratory. Six sites. Global reach."
subheading=""
text="The European Molecular Biology Laboratory is a single organisation spread across six European sites. Each site hosts its own research units, services, and facilities."
href="//www.embl.org/sites"
card_image="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20210104_EMBL_Partnership_A4_lean620x425.png"
card_image__alt="map of EMBL member states and its sites"
card_heading="One laboratory. Six sites. Global reach."
card_subheading=""
card_text="The European Molecular Biology Laboratory is a single organisation spread across six European sites. Each site hosts its own research units, services, and facilities."
card_href="//www.embl.org/sites"
newTheme="primary"
modifiers="vf-card--bordered"
/>
<VFCard
imageUrl="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/20200127_about.jpg?w=800&h=550&gravity=auto"
altText="Illustration of EMBL staff discussing over coffee"
heading="EMBL is Europe’s leading life sciences laboratory"
subheading=""
text="We train students and scientists to perform world-class biological research, and we provide state-of-the-art technologies for a wide range of scientific and experimental services."
href="//www.embl.org/about"
card_image="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/20200127_about.jpg?w=800&h=550&gravity=auto"
card_image__alt="Illustration of EMBL staff discussing over coffee"
card_heading="EMBL is Europe’s leading life sciences laboratory"
card_subheading=""
card_text="We train students and scientists to perform world-class biological research, and we provide state-of-the-art technologies for a wide range of scientific and experimental services."
card_href="//www.embl.org/about"
newTheme="primary"
modifiers="vf-card--bordered"
/>
</VFCard.Container>
);
......
src/components/Intro.jsx deleted 100644 → 0
View file @ 2bee8b9f
import React from "react";
export class VfIntro extends React.Component {
render() {
return (
<section className="vf-intro | embl-grid embl-grid--has-centered-content">
<div>{/* empty */}</div>
<div>
<p className="vf-lede">
Cancer is a generic term for lots of different diseases in which
cells divide many more times than usual. This abnormal growth can
affect many cell types in almost any part of the body.
</p>
<p className="vf-intro__text">
Cancer is a multi-stage process. Normal cells begin to divide
abnormally, spreading beyond their normal boundaries, and abnormal
tissue growth causes swellings called tumours to form. Tumours can
be benign – with no harmful effect on the body – or malignant,
invading healthy tissue and interfering with normal bodily
functions.
</p>
<p className="vf-intro__text">
There are more than 100 types of cancer and symptoms vary depending
on the type.{" "}
<a className="vf-link" href="#toCome">
Read more about Cancer
</a>
.
</p>
</div>
</section>
);
}
}
src/components/alerts/Alerts.jsx
View file @ 0b726a6d
import { useRef } from "react";
import { useForm } from "react-hook-form";
import { EMAIL_VALIDATION_REGEX } from "../../helpers/helpers";
import { locationsWithCountries, positionTypes } from "data/jobs-data.json";
import "./Alerts.scss";
/* Subscription-alerts page, uses react-hook-form */
export function Alerts() {
......@@ -90,7 +93,7 @@ export function Alerts() {
<br />
<fieldset className="vf-form__fieldset">
<fieldset className="vf-form__fieldset vf-u-margin__bottom--800">
<legend className="form-subtitle vf-form__legend">
Location
</legend>
......@@ -110,97 +113,29 @@ export function Alerts() {
</div>
<ul className="vf-list">
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc1"
value="1"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc1" className="vf-form__label">
Heidelberg (Germany)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc2"
value="2"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc2" className="vf-form__label">
EBI - Hinxton (UK)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc4"
value="4"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc4" className="vf-form__label">
Grenoble (France)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc3"
value="3"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc3" className="vf-form__label">
Hamburg (Germany)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc5"
value="5"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc5" className="vf-form__label">
Rome (Italy)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc6"
value="6"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc6" className="vf-form__label">
EMBO (Heidelberg, Germany)
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="loc7"
value="7"
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label htmlFor="loc7" className="vf-form__label">
Barcelona (Spain)
</label>
</li>
{Object.entries(locationsWithCountries).map(
([displayText, locationValue]) => (
<li
key={locationValue}
className="vf-form__item vf-form__item--checkbox"
>
<input
type="checkbox"
className="vf-form__checkbox"
id={"loc" + locationValue}
value={locationValue}
{...register("loc[]")}
{...allLocationSelectedObjectForSpread}
/>
<label
htmlFor={"loc" + locationValue}
className="vf-form__label"
>
{displayText}
</label>
</li>
)
)}
</ul>
</div>
</fieldset>
......@@ -225,219 +160,34 @@ export function Alerts() {
</div>
<ul className="vf-list">
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos1"
value="ADM"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos1" className="vf-form__label">
Administration
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos2"
value="BIO"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos2" className="vf-form__label">
Bioinformatics
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos3"
value="COM"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos3" className="vf-form__label">
Communication
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos4"
value="DTC"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos4" className="vf-form__label">
Data Curation
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos5"
value="GEN"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos5" className="vf-form__label">
General Support Services
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos6"
value="ITS"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos6" className="vf-form__label">
IT and Infrastructure
</label>
</li>
<li className="vf-form__item vf-form__item--checkbox">
<input
type="checkbox"
className="vf-form__checkbox"
id="pos7"
value="POS"
{...register("pos[]")}
{...allPosSelectedObjectForSpread}
/>
<label htmlFor="pos7"