Unverified Commit 9190a407 authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

New Homepage layout (#516)

* ENSWBSITES-1114: Build homepage layout
* remove old codes/components not being used anymore
* new grid layout for new homepage
* new assets for homepage
* updated root styling since we only need 2 rows for the grid

* ENSWBSITES-1114: Fix help layout
fix the root grid (should be 2 rows only) as part of the homepage work
updated help page to reflect updated root grid
moved help app header inside main help

* ENSWBSITES-1114: new homepage
updated title tag to be just Ensembl
parent b872f136
Pipeline #171798 passed with stages
in 4 minutes and 30 seconds
.help {
display: grid;
grid-template-rows: [menu] auto [article-grid] minmax(0, 1fr);
grid-template-rows: [appBar] auto [menu] auto [article-grid] minmax(0, 1fr);
height: 100%;
}
......
......@@ -49,13 +49,11 @@ const Help = () => {
});
return (
<>
<div className={styles.help}>
<AppBar />
<div className={styles.help}>
{menu && <HelpMenu menu={menu} currentUrl={location.pathname} />}
{article && <MainContent article={article} />}
</div>
</>
{menu && <HelpMenu menu={menu} currentUrl={location.pathname} />}
{article && <MainContent article={article} />}
</div>
);
};
......
@import 'src/styles/common';
.home {
padding-bottom: 80px;
display: grid;
grid-template-rows: minmax(550px, auto) 85px;
}
h2 {
color: $grey;
font-size: 14px;
font-weight: $normal;
}
.main {
display: grid;
grid-template-rows: auto 1fr;
background-image: linear-gradient($black, $blue);
padding-top: 40px;
}
.mainTop {
position: relative;
}
.search {
background: $light-grey;
box-shadow: 0 3px 5px $medium-light-grey;
min-height: 235px;
padding: 15px 60px;
.mainTopMiddle {
display: grid;
grid-template-rows: auto 110px auto;
justify-content: center;
.logotype {
height: 36px;
fill: $white;
justify-self: center;
}
.text {
text-align: center;
font-size: 18px;
font-weight: $light;
color: $white;
margin-top: 15px;
}
}
.appList {
display: grid;
grid-template-columns: repeat(3, 270px);
}
.appListItem {
display: grid;
grid-template-rows: 56px auto;
justify-content: center;
.button {
display: block;
position: relative;
width: 221px;
height: 40px;
background-color: $blue;
color: $white;
border-radius: 6px;
text-align: center;
padding: 5px;
font-size: 18px;
font-weight: $bold;
h2 {
span {
margin-left: -20px;
}
.icon {
position: absolute;
right: 20px;
fill: $white;
height: 32px;
width: 32px;
}
}
.bottomText {
font-size: 14px;
color: $white;
padding: 10px;
width: 190px;
text-align: center;
margin-left: 20px;
}
}
.homeTopRight {
position: absolute;
top: 0;
right: 30px;
color: $blue;
font-weight: $bold;
display: grid;
grid-template-columns: auto auto;
height: 40px;
cursor: pointer;
.wrapper {
display: grid;
grid-template-columns: 130px auto;
}
.text {
margin-top: 10px;
}
.helpIcon {
width: 32px;
height: 32px;
fill: $white;
background-color: $blue;
}
}
.homeTopRightDisabled {
cursor: default;
color: $grey;
.helpIcon {
fill: $white;
background-color: $grey;
}
}
.speciesContainer {
overflow-x: hidden;
position: relative;
.speciesStrip {
max-width: none;
height: 100%;
position: absolute;
bottom: 0;
transform: translateX(calc(-1 * (100% - 100vw) / 2));
}
input[type='text'] {
border: none;
.platform {
position: absolute;
bottom: 0;
background-color: $dark-grey;
background-image: linear-gradient($dark-grey, $black);
height: 9%;
width: 100%;
max-width: 485px;
height: 36px;
box-shadow: inset 2px 2px 4px -2px $dark-grey;
padding: 12px 20px;
}
&::placeholder {
color: $grey;
@media (orientation: portrait) {
.speciesStrip {
max-height: 60%;
transform: translateX(calc(-1 * (100% - 100vw) / 2));
}
.platform {
height: 6%;
}
}
}
button {
border: 1px solid $grey;
border-radius: 5px;
margin-left: 15px;
padding: 8px 24px;
text-transform: uppercase;
footer {
display: grid;
grid-template-columns: auto auto;
padding-left: 60px;
padding-right: 60px;
}
.footerLeft {
grid-column: 1/2;
display: flex;
align-items: center;
.logotype {
width: 92px;
height: 34px;
margin-right: 10px;
fill: $dark-grey;
}
.ebiLogo {
margin-right: 20px;
width: 110px;
height: 34px;
}
.text {
font-size: 15px;
font-weight: 300;
color: $dark-grey;
margin-right: 10px;
}
}
.footerRightIcons {
grid-column: 2/2;
display: flex;
align-items: center;
margin-left: auto;
.link {
margin-right: 12px;
margin-bottom: 10px;
color: $blue;
}
.mediaIcons {
width: 24px;
height: 24px;
margin: 0 12px 10px 12px;
}
.elixirLogo {
width: 71px;
height: 52px;
margin-left: 90px;
}
}
......@@ -15,25 +15,152 @@
*/
import React from 'react';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import HomepageSpeciesBar from 'src/content/home/components/homepage-species-bar/HomepageSpeciesBar';
import HomepageSiteInfo from 'src/content/home/components/homepage-site-info/HomepageSiteInfo';
import HomepageAppLinks from 'src/content/home/components/homepage-app-links/HomepageAppLinks';
import { ReactComponent as Logotype } from 'static/img/brand/logotype.svg';
import { ReactComponent as SpeciesSelectorIcon } from 'static/img/launchbar/species-selector.svg';
import { ReactComponent as BrowserIcon } from 'static/img/launchbar/browser.svg';
import { ReactComponent as EntityViewerIcon } from 'static/img/launchbar/entity-viewer.svg';
import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
import speciesStripUrl from 'static/img/home/species-strip.svg';
import ebiLogoUrl from 'static/img/home/EMBLEBI-logo.svg';
import elixirLogoUrl from 'static/img/home/elixir-logo.svg';
import facebookIconUrl from 'static/img/home/facebook.svg';
import twitterIconUrl from 'static/img/home/twitter.svg';
import blogIconUrl from 'static/img/home/blog.svg';
import { isEnvironment, Environment } from 'src/shared/helpers/environment';
import styles from './Home.scss';
const Home = () => {
const helpButton = (
<div className={styles.wrapper}>
<div className={styles.text}>How to use Ensembl</div>
<HelpIcon className={styles.helpIcon} />
</div>
);
return (
<div className={styles.home}>
<HomepageSpeciesBar />
<section className={styles.search}>
<h2>Find</h2>
<p>
<input type="text" placeholder="Name, symbol or ID" disabled={true} />
</p>
</section>
<HomepageAppLinks />
<HomepageSiteInfo />
<div className={styles.main}>
<div className={styles.mainTop}>
<div className={styles.mainTopMiddle}>
<Logotype className={styles.logotype} />
<div className={styles.text}>Genome data & annotation</div>
<div className={styles.appList}>
<div className={styles.appListItem}>
<div className={styles.buttonsContainer}>
<Link to="/species-selector" className={styles.button}>
<span>Species selector</span>
<SpeciesSelectorIcon className={styles.icon} />
</Link>
</div>
<div className={styles.bottomTextContainer}>
<div className={styles.bottomText}>
Create & manage your own species list
</div>
</div>
</div>
<div className={styles.appListItem}>
<div className={styles.buttonsContainer}>
<Link to="/genome-browser" className={styles.button}>
<span>Genome browser</span>
<BrowserIcon className={styles.icon} />
</Link>
</div>
<div className={styles.bottomTextContainer}>
<div className={styles.bottomText}>
Look at genes & transcripts in their genomic context
</div>
</div>
</div>
<div className={styles.appListItem}>
<div className={styles.buttonsContainer}>
<Link to="/entity-viewer" className={styles.button}>
<span>Entity viewer</span>
<EntityViewerIcon className={styles.icon} />
</Link>
</div>
<div className={styles.bottomTextContainer}>
<div className={styles.bottomText}>
Get gene & transcript information
</div>
</div>
</div>
</div>
</div>
{isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) ? (
<div className={styles.homeTopRight}>
<Link to="/help">{helpButton}</Link>
</div>
) : (
<div
className={classNames(
styles.homeTopRight,
styles.homeTopRightDisabled
)}
>
{helpButton}
</div>
)}
</div>
<div className={styles.speciesContainer}>
<span className={styles.platform}></span>
<img src={speciesStripUrl} className={styles.speciesStrip} />
</div>
</div>
<footer>
<div className={styles.footerLeft}>
<Logotype className={styles.logotype} />
<img src={ebiLogoUrl} className={styles.ebiLogo} />
<div className={styles.text}>
Wellcome Genome Campus, Hinxton, Cambridgeshire CB10 1SD, UK
</div>
</div>
<div className={styles.footerRightIcons}>
<a
href="https://www.ensembl.info"
target="_blank"
rel="noopener noreferrer"
>
<div className={styles.link}>Ensembl blog</div>
</a>
<a
href="https://www.ensembl.info"
target="_blank"
rel="noopener noreferrer"
>
<img src={blogIconUrl} className={styles.mediaIcons} />
</a>
<a
href="https://www.facebook.com/Ensembl.org"
target="_blank"
rel="noopener noreferrer"
>
<img src={facebookIconUrl} className={styles.mediaIcons} />
</a>
<a
href="https://twitter.com/ensembl"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitterIconUrl} className={styles.mediaIcons} />
</a>
<a
href="https://elixir-europe.org/platforms/data/core-data-resources"
target="_blank"
rel="noopener noreferrer"
>
<img src={elixirLogoUrl} className={styles.elixirLogo} />
</a>
</div>
</footer>
</div>
);
};
......
......@@ -28,7 +28,7 @@ const HomePage = () => {
return (
<>
<Helmet>
<title>Ensembl home page</title>
<title>Ensembl</title>
<meta name="description" content="This is Ensembl home page" />
</Helmet>
{hasMounted && <LoadableHome />}
......
@import 'src/styles/common';
.homepageAppLinks {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 15px 80px;
}
.homepageAppLinksRow {
flex: 0 0 auto;
display: grid;
grid-template-columns: 300px 60px auto;
align-items: center;
justify-items: start;
padding: 0 20px;
min-width: 500px;
&Expanded {
background-color: $ice-blue;
}
.speciesNameColumn {
grid-column: 1/2;
line-height: 1.2;
padding: 13px 0;
}
}
.homepageAppLink {
margin-left: 1.1em;
&:first-of-type {
margin-left: 0.6em;
}
}
.homepageAppLinkButtons {
grid-column: 3/4;
display: flex;
align-items: center;
}
.homepageAppLinkButton {
svg {
width: 25px;
height: 25px;
fill: $white;
background-color: $blue;
}
}
.speciesName {
color: $blue;
cursor: pointer;
.homepageAppLinksRowExpanded & {
color: $black;
cursor: default;
}
}
.assemblyName {
margin-left: 0.8em;
font-size: 12px;
color: $grey;
}
.viewIn {
font-size: 10px;
color: $grey;
}
// TODO: remove the previouslyViewed styles after the PreviouslyViewedLinks fallback component
// is deleted from HomepageAppLinks.tsx
.previouslyViewed {
line-height: 2;
padding: 15px 80px;
}
.previouslyViewedItem {
margin-left: 40px;
}
.previouslyViewedItemAssemblyName {
color: $medium-dark-grey;
font-size: 11px;
margin-left: 0.2em;
}
.speciesInfoButton {
width: 18px;
height: 18px;
svg {
fill: $blue;
height: 100%;
}
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState, useRef } from 'react';
import { connect, useDispatch } from 'react-redux';
import { push } from 'connected-react-router';
import classNames from 'classnames';
import * as urlFor from 'src/shared/helpers/urlHelper';
import useOutsideClick from 'src/shared/hooks/useOutsideClick';
import { fetchDataForLastVisitedObjects } from 'src/content/app/browser/browserActions';
import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
import {
getPreviouslyViewedGenomeBrowserObjects,
PreviouslyViewedGenomeBrowserObjects
} from 'src/content/home/homePageSelectors';
import ImageButton from 'src/shared/components/image-button/ImageButton';
import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
import { ReactComponent as InfoIcon } from 'static/img/shared/info_circle.svg';
import { RootState } from 'src/store';
import { Status } from 'src/shared/types/status';
import { CommittedItem } from 'src/content/app/species-selector/types/species-search';
import styles from './HomepageAppLinks.scss';
type Props = {
species: CommittedItem[];
previouslyViewedGenomeBrowserObjects: PreviouslyViewedGenomeBrowserObjects;