To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 1b7a0147 authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Add ribbons to home page

parent da8f731f
......@@ -64,6 +64,8 @@
"tableOfContent.show": "Inhaltsverzeichnis anzeigen",
"tableOfContent.hide": "Inhaltsverzeichnis ausblenden",
"home.title": "Home",
"home.ribbon.new": "Neu an der ETH?",
"home.ribbon.visit": "Möchtest du schnuppern?",
"about.title": "Über den AMIV",
"studies.howToErsti.title": "Pre-Study Tipps und FAQ",
"legal-notice.title": "Impressum",
......
......@@ -64,6 +64,8 @@
"tableOfContent.show": "Show table of content",
"tableOfContent.hide": "Hide table of content",
"home.title": "Home",
"home.ribbon.new": "New at ETH?",
"home.ribbon.visit": "Want to visit?",
"about.title": "About AMIV",
"studies.howToErsti.title": "Pre-Study Tips and FAQ",
"legal-notice.title": "Legal Notice",
......
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { FormattedMessage } from 'gatsby-plugin-intl'
import { makeStyles } from '@material-ui/core/styles'
import { makeStyles, useTheme } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'
import { listLoadNextPage } from '~store/common/actions'
......@@ -21,6 +21,41 @@ const useStyles = makeStyles(
paddingTop: '1em',
},
},
ribbon: {
position: 'absolute',
padding: 0,
top: -6,
right: 0,
overflow: 'hidden',
zIndex: 2,
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
ribbonText: {
position: 'absolute',
transform: 'rotate(45deg)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
top: -35,
right: -35,
'& a': {
padding: '0.5em',
cursor: 'pointer',
color: theme.palette.secondary.contrastText,
},
'& a:first-child': {
marginBottom: '0.5em',
},
'& a:hover': {
textDecoration: 'none',
color: theme.palette.text.secondary,
},
},
title: {
color: theme.palette.text.primary,
},
......@@ -50,6 +85,7 @@ const IndexPage = () => {
const joboffersFrontpage = useSelector(state => state.joboffers.frontpage)
const dispatch = useDispatch()
const classes = useStyles()
const theme = useTheme()
// Note: the second empty array ensures that the effect is called only once after mount.
useEffect(() => {
......@@ -84,6 +120,31 @@ const IndexPage = () => {
return (
<Layout className={classes.root} seoProps={{ title: 'home.title' }}>
{/* Ribbon for Hopo pages */}
<div className={classes.ribbon}>
<svg height="250" width="250">
<polygon
points="75 0, 250 175, 250 111, 139 0"
fill={theme.palette.secondary.main}
strokeWidth="0"
/>
<polygon
points="0 0, 250 250, 250 185, 65 0"
fill={theme.palette.common.orange}
strokeWidth="0"
/>
</svg>
<div className={classes.ribbonText}>
<Link variant="body1" href="/studies/how-to-ersti">
<FormattedMessage id="home.ribbon.new" />
</Link>
<Link variant="body1" component="a" to="/studies/student-for-a-day">
<FormattedMessage id="home.ribbon.visit" />
</Link>
</div>
</div>
{/* Event posters */}
<Link to="/events">
<Typography variant="h3" className={classes.title}>
<FormattedMessage id="events.title" />
......@@ -106,6 +167,8 @@ const IndexPage = () => {
))
)}
</div>
{/* Job offers */}
<Link to="/jobs">
<Typography variant="h3" className={classes.title}>
<FormattedMessage id="jobs.title" />
......
......@@ -16,6 +16,8 @@ export const createTheme = type => {
greyContrastText: isDark ? '#fff' : '#000',
amivblue: '#1f2d54',
amivred: '#e8462b',
orange: '#e8a92b',
orangeContrastText: '#fff',
mobileSubmenu: isDark ? grey[500] : '#fff',
header: isDark ? grey[900] : '#1f2d54',
headerContrastText: '#fff',
......
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