Commit 94a6298c authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Replace frontpage cards with polythene component

parent ad4c9eca
......@@ -757,8 +757,8 @@
"dev": true
},
"amiv-web-ui-components": {
"version": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#1a1f5064d46c5de4b43fcbd1cd4c8245041b8c8a",
"from": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#1a1f5064d46c5de4b43fcbd1cd4c8245041b8c8a",
"version": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#d9109e235029dab9c3328a286f2370dd2b2af081",
"from": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#d9109e235029dab9c3328a286f2370dd2b2af081",
"requires": {
"@material/select": "^0.35.1",
"ajv": "^5.5.0",
......@@ -5185,12 +5185,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5205,17 +5207,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5332,7 +5337,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -5344,6 +5350,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5358,6 +5365,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -5365,12 +5373,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
......@@ -5389,6 +5399,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5469,7 +5480,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5481,6 +5493,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5602,6 +5615,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -14518,7 +14532,7 @@
},
"colors": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
"resolved": "http://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
"integrity": "sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w="
},
"concat-stream": {
......@@ -15015,7 +15029,7 @@
},
"lru-cache": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
"resolved": "http://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
"integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI="
},
"map-obj": {
......@@ -15141,7 +15155,7 @@
},
"pako": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
"resolved": "http://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
"integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
},
"parse-json": {
......@@ -15197,7 +15211,7 @@
},
"pretty-bytes": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
"resolved": "http://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
"integrity": "sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=",
"requires": {
"get-stdin": "^4.0.1",
......@@ -15286,7 +15300,7 @@
},
"shelljs": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.1.4.tgz",
"resolved": "http://registry.npmjs.org/shelljs/-/shelljs-0.1.4.tgz",
"integrity": "sha1-37vnjVbDwBaNL7eeEOzR28sH7A4="
},
"sigmund": {
......@@ -15301,7 +15315,7 @@
},
"source-map": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
"integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
},
"spdx-correct": {
......@@ -15324,7 +15338,7 @@
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
},
"strip-ansi": {
......
......@@ -22,7 +22,7 @@
"author": "AMIV IT team",
"license": "ISC",
"dependencies": {
"amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#1a1f5064d46c5de4b43fcbd1cd4c8245041b8c8a",
"amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#d9109e235029dab9c3328a286f2370dd2b2af081",
"babel-polyfill": "^6.26.0",
"email-validator": "^2.0.4",
"html-escape": "^2.0.0",
......
import m from 'mithril';
import { apiUrl } from 'config';
import './Card.less';
import AmivLogo from '../images/logoNoText.svg';
import { currentLanguage } from '../models/language';
const renderSlider = description =>
description ? m('div.card-overlay', m('div', description)) : '';
export default class CheckboxComponent {
constructor(vnode) {
this.item = vnode.attrs;
}
oninit(vnode) {
this.localization(vnode);
}
onupdate(vnode) {
this.localization(vnode);
}
localization(vnode) {
switch (currentLanguage()) {
case 'de':
this.item.title = vnode.attrs.title_de;
this.item.description = vnode.attrs.description_de;
break;
case 'en':
default:
this.item.title = vnode.attrs.title_en;
this.item.description = vnode.attrs.description_en;
}
}
view() {
let { imageurl, description } = this.item;
if (this.item.img_poster) imageurl = `${apiUrl}${this.item.img_poster.file}`;
else if (this.item.logo) imageurl = `${apiUrl}${this.item.logo.file}`;
if (description && description.length > 140)
description = `${description.substring(0, 140)}...`;
const style = imageurl
? `background-image: url(${imageurl})`
: `background-image: url(${AmivLogo})`;
return m(
'a',
{ href: this.item.href },
m('div.card', { style }, [m('div.card-title', this.item.title), renderSlider(description)])
);
}
}
@import '../styles/mediaquery.less';
.card {
@media @desktop, @wide, @tablet {
height: 100%;
width: 100%;
}
@media @mobile {
height: 9/16*100vw;
width: 100%;
}
position: absolute;
top: 0;
left: 0;
background-color: #fafafa;
background-size: cover;
background-position: center;
overflow: hidden;
.card-title {
@media @desktop, @wide {
font-size: 2em;
}
@media @tablet {
font-size: 1.5em;
}
@media @mobile {
font-size: 1em;
}
color: rgb(255, 255, 255);
background-image: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
padding: 20px 0 10px;
position: absolute;
bottom: 0;
transition: opacity .2s;
width: 100%;
}
.card-overlay {
background: rgba(255, 255, 255, .8);
bottom: -100%;
height: 100%;
left: 0%;
text-align: center;
position: absolute;
transition: bottom .5s ease;
width: 100%;
div {
padding: 1.5em;
color: #000;
font-size: 1.5em;
}
}
&:hover {
.card-overlay {
bottom: 0%;
}
.card-title {
opacity: 0;
}
}
}
import m from 'mithril';
import { apiUrl } from 'config';
import { Card } from 'polythene-mithril';
import { Spinner } from 'amiv-web-ui-components';
export default class EventCard {
/**
* A card showing the event poster (or titel and catchphrase if there is not poster)
*
* @param {object} attrs.item Event item received from the API.
*
* Example:
* ```javascript
* m(EventCard, { item: null })
* ```
*/
static view({ attrs: { item } }) {
let url;
let cardContent;
if (item) {
url = {
href: `${m.route.get()}events/${item._id}`,
oncreate: m.route.link,
};
if (item.img_poster) {
cardContent = m('img', {
src: `${apiUrl}${item.img_poster.file}`,
});
} else {
cardContent = m('div', [m('h2', item.getTitle()), m('span', item.getCatchphrase())]);
}
} else {
cardContent = m(Spinner, { show: true });
}
return m(Card, {
url,
content: m('div.image.ratio-paper-a-vertical', cardContent),
});
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
export { default as Button } from './Button';
export { default as Card } from './Card';
export { default as Checkbox } from './Checkbox';
export { default as Tabs } from './Tabs';
export { default as Dropdown } from './Dropdown';
......@@ -8,3 +7,4 @@ export { default as FilterView } from './FilterView';
export { default as InputGroupForm } from './form/inputGroup';
export { default as SelectGroupForm } from './form/selectGroup';
export { default as FileInput } from './FileInput';
export { default as Spinner } from './EventCard';
import icons from 'amiv-web-ui-components';
/**
* This is the collection of SVG icons used on the website
*/
export default {
// Icons provided by our web-ui-components library
...icons,
// AMIV Logo
amivDiode:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg0" width="48" height="48" viewBox="0 0 48 48" xml:space="preserve"><style type="text/css">.st0{fill:#E8462B;}</style><path class="st0" d="M24.6,20.2l-12.8,1.3l3.8,5.3l-6,4.4c0,0.9,1.9,3.7,3.2,4.5l6.1-4.4l4.1,5.6l5.1-11.8l3.8,5.2l4.5-3.2l-4-5.6l5.2-3.8c-0.8-1.7-1.9-3.2-3.2-4.5L29.2,17l-4-5.6l-4.5,3.2l4.1,5.6l0,0"/></svg>',
amivGear:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg1" width="48" height="48" viewBox="0 0 48 48" xml:space="preserve"><style type="text/css">.st0{fill:#E8462B;}</style><path class="st0" d="M48.6,27.3c0.3-2.2,0.3-4.3,0-6.5l-5.7-0.9c-0.3-1.2-0.6-2.3-1.1-3.4l4.1-4.1c-0.5-1-1.1-1.9-1.7-2.8c-0.6-0.9-1.3-1.7-2.1-2.5l-5.2,2.7c-0.4-0.4-0.9-0.8-1.4-1.1c-0.5-0.4-1-0.7-1.5-1L35,2c-1-0.5-2-0.9-3-1.2c-1-0.3-2.1-0.6-3.2-0.8l-2.6,5.2c-1.2-0.1-2.3-0.1-3.5,0L20.1,0c-1.1,0.2-2.1,0.5-3.2,0.8c-1,0.3-2,0.8-3,1.2l0.9,5.7c-1,0.6-2,1.3-2.9,2.1L6.7,7.2C6,8,5.3,8.8,4.7,9.7c-0.6,0.9-1.2,1.8-1.7,2.8l4.1,4.1c-0.5,1.1-0.8,2.2-1.1,3.3l-5.8,0.9c-0.3,2.2-0.3,4.3,0,6.5L6,28.2c0.3,1.1,0.6,2.3,1.1,3.3l-4.1,4.1c0.5,1,1.1,1.9,1.7,2.8C5.3,39.3,6,40.2,6.8,41l5.2-2.7c0.4,0.4,0.9,0.8,1.4,1.1c0.5,0.4,1,0.7,1.5,1l-0.9,5.7c1,0.5,2,0.9,3,1.2c1,0.3,2.1,0.6,3.2,0.8l2.6-5.2c1.2,0.1,2.3,0.1,3.5,0l2.6,5.2c1.1-0.2,2.1-0.5,3.2-0.8c1-0.3,2-0.7,3-1.2L34,40.4c1-0.6,2-1.3,2.9-2.1l5.2,2.7c0.8-0.8,1.5-1.6,2.1-2.5c0.6-0.9,1.2-1.8,1.7-2.8l-4.1-4.1c0.5-1.1,0.8-2.2,1.1-3.4L48.6,27.3z M35.5,32.1c-0.1,0.2-0.3,0.4-0.4,0.5s-0.1,0.1-0.1,0.2c-0.2,0.3-0.5,0.6-0.8,0.8l-0.1,0.1c-0.3,0.3-0.5,0.5-0.8,0.8l-0.2,0.1c-0.3,0.2-0.6,0.4-0.9,0.6L32,35.5L31.1,36l-0.4,0.2c-0.2,0.1-0.5,0.2-0.8,0.3l-0.5,0.2L28.8,37l-0.7,0.2l-0.6,0.2c-0.2,0.1-0.5,0.1-0.7,0.2l-0.6,0.1l-0.7,0.1h-0.7h-0.4h-0.2h-0.8l-0.6,0l-0.7-0.1c-0.2,0-0.4-0.1-0.6-0.1s-0.4-0.1-0.6-0.2l-0.7-0.2c-0.2-0.1-0.4-0.1-0.6-0.2s-0.5-0.2-0.7-0.3l-0.5-0.2L17.7,36c-0.2-0.1-0.3-0.2-0.5-0.3s-0.5-0.3-0.7-0.5l-0.2-0.1c-0.1-0.1-0.2-0.1-0.2-0.2c-0.2-0.2-0.5-0.4-0.7-0.6l-0.2-0.1l0,0c-2.7-2.5-4.4-5.9-4.5-9.6v-0.1c0-0.2,0-0.3,0-0.5c0-0.6,0.1-1.3,0.1-1.9l0.1-0.4c0-0.2,0.1-0.5,0.1-0.7s0.1-0.4,0.1-0.6s0.2-0.6,0.3-0.9s0.1-0.3,0.2-0.5s0.1-0.4,0.2-0.5s0.2-0.5,0.4-0.8s0.2-0.4,0.3-0.6s0.2-0.4,0.3-0.6l0.3-0.4l0.1-0.2l0.2-0.2c0.2-0.2,0.3-0.5,0.5-0.7l0.4-0.4c0.2-0.2,0.3-0.4,0.5-0.5s0.3-0.3,0.5-0.4s0.4-0.3,0.6-0.5l0.5-0.4l0.6-0.4l0.5-0.3l0.7-0.4l0.4-0.2l0.8-0.3l0.4-0.1c0.3-0.1,0.6-0.2,0.9-0.3l0.4-0.1c0.3-0.1,0.6-0.1,0.8-0.2c0.2,0,0.3-0.1,0.5-0.1l0.8-0.1H24h0.4h0.2c0.3,0,0.5,0,0.8,0H26l0.9,0.1l0.5,0.1c0.3,0.1,0.6,0.1,0.9,0.2l0.4,0.1c0.3,0.1,0.6,0.2,0.9,0.3l0.3,0.1c0.3,0.1,0.6,0.3,0.9,0.4l0.3,0.1c0.3,0.2,0.6,0.3,0.8,0.5c0.1,0.1,0.2,0.1,0.3,0.2l0.3,0.2l0.4,0.3c0.2,0.1,0.3,0.3,0.5,0.4c0.1,0.1,0.2,0.2,0.3,0.3l0,0c1.4,1.3,2.4,2.8,3.2,4.5l0,0c0,0,0,0.1,0,0.1c0.1,0.2,0.1,0.3,0.2,0.5s0.2,0.4,0.2,0.6s0.1,0.3,0.2,0.5s0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.5s0.1,0.6,0.1,0.8c0,0.1,0,0.2,0,0.3c0,0.4,0.1,0.8,0.1,1.2c0,0,0,0.1,0,0.1s0,0.1,0,0.1C38.1,27,37.2,29.8,35.5,32.1z"/></svg>',
amivWheel:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="81.059502" height="80.056625" id="svg2" xml:space="preserve"><defs id="defs6"><clipPath id="clipPath18"><path d="m 0,849.563 1960.52,0 L 1960.52,0 0,0 0,849.563 z" id="path20" /></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,-16.34525,92.96925)" id="g10"><g transform="scale(0.1,0.1)" id="g12"><g clip-path="url(#clipPath18)" id="g16"><path d="m 566.012,342.883 c -44.453,-61.184 -130.383,-74.797 -191.563,-30.344 -3.969,2.891 -7.719,5.957 -11.289,9.18 l 41.192,29.922 40.945,-56.375 51.351,117.707 37.684,-51.848 44.727,32.5 -40.387,55.598 41.469,30.132 c 19.257,-43.32 15.679,-95.437 -14.129,-136.472 m -235.504,23.465 c -19.887,43.554 -16.5,96.32 13.601,137.75 44.45,61.179 130.383,74.789 191.559,30.336 4.352,-3.161 8.391,-6.579 12.254,-10.125 l -41.762,-30.344 -40.558,55.82 -44.735,-32.5 40.563,-55.828 -0.067,-0.051 -127.726,-12.449 38.203,-52.578 -41.332,-30.031 z m 366.523,24.668 c 1.41,10.644 2.207,21.48 2.207,32.511 0,11.028 -0.797,21.86 -2.207,32.508 l -57.468,8.922 c -2.571,11.469 -6.196,22.711 -10.864,33.57 l 41.211,40.961 c -5.109,9.438 -10.828,18.676 -17.312,27.598 -6.481,8.922 -13.496,17.223 -20.899,25 l -51.679,-26.52 c -4.372,3.84 -8.93,7.532 -13.731,11.02 -4.84,3.512 -9.801,6.73 -14.84,9.719 l 9.258,57.351 c -9.676,4.641 -19.734,8.75 -30.238,12.16 -10.481,3.407 -21.039,5.993 -31.586,7.938 l -26.262,-51.918 c -11.742,1.07 -23.519,1.031 -35.199,-0.066 l -26.293,51.984 c -10.559,-1.945 -21.109,-4.531 -31.598,-7.938 -10.492,-3.41 -20.551,-7.519 -30.23,-12.148 l 9.269,-57.434 c -10.039,-5.925 -19.582,-12.859 -28.511,-20.707 l -51.746,26.559 c -7.407,-7.777 -14.422,-16.07 -20.903,-25 -6.492,-8.922 -12.211,-18.16 -17.32,-27.598 l 41.258,-41.011 c -4.715,-10.922 -8.36,-22.137 -10.887,-33.512 l -57.481,-8.93 c -1.421,-10.64 -2.218,-21.48 -2.218,-32.508 0,-11.031 0.797,-21.855 2.218,-32.511 l 57.563,-8.934 c 2.559,-11.445 6.168,-22.668 10.82,-33.496 L 240.09,307.57 c 5.109,-9.445 10.828,-18.683 17.32,-27.597 6.481,-8.926 13.488,-17.227 20.903,-25 l 51.675,26.523 c 4.41,-3.867 9,-7.59 13.84,-11.105 4.801,-3.485 9.723,-6.688 14.723,-9.657 l -9.258,-57.336 c 9.687,-4.636 19.746,-8.75 30.238,-12.156 10.489,-3.418 21.039,-5.996 31.598,-7.929 l 26.219,51.843 c 11.773,-1.093 23.57,-1.062 35.285,0.039 l 26.238,-51.894 c 10.559,1.945 21.117,4.523 31.598,7.941 10.504,3.406 20.551,7.52 30.238,12.149 l -9.246,57.285 c 10.078,5.957 19.648,12.898 28.617,20.789 l 51.621,-26.492 c 7.403,7.773 14.41,16.074 20.899,25 6.484,8.914 12.203,18.152 17.312,27.597 l -41.148,40.907 c 4.73,10.957 8.379,22.207 10.929,33.644 l 57.34,8.895" id="path30" style="fill:#f03d30;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></g></svg>',
};
@import './colors.less';
#frontpage-container {
// Grid general settings
display: grid;
......@@ -12,6 +14,11 @@
}
h2 {
text-align: center;
color: #333;
grid-column: ~'1 / 13';
margin: 2em 0 1em;
@media @desktop, @wide {
font-size: 2em;
}
......@@ -19,11 +26,6 @@
@media @tablet, @mobile {
font-size: 1.5em;
}
text-align: left;
font-weight: normal;
color: #333;
grid-column: ~'1 / 13';
margin: 10px 0 0;
}
// Hot sector on the frontpage
......@@ -36,60 +38,52 @@
// Grid declaration for sub items, 2 frame columns
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
grid-gap: 25px;
border: none;
.hot-first-card {
@media @wide, @desktop, @tablet {
grid-column: ~'1 / 3';
grid-row: ~'1 / 3';
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
grid-column: ~'1 / 3';
grid-row: ~'1 / 3';
@media @mobile {
grid-column: ~'1 / -1';
position: relative;
height: 9/16*100vw;
}
}
.hot-card {
@media @wide, @desktop, @tablet {
grid-column: ~'3 / 4';
position: relative;
}
grid-column: ~'3 / 4';
margin-left: 20px;
@media @mobile {
grid-column: ~'1 / -1';
position: relative;
height: 9/16*100vw;
margin: 0;
}
&:first-child {
margin-bottom: 10px;
}
&:last-child {
margin-top: 10px;
}
}
}
.frontpage-row {
grid-column: ~'1 / 13';
margin-bottom: 30px;
// Grid declaration for sub items, 3 frame columns
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
.frontpage-row-card {
@media @wide, @desktop, @tablet {
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
@media @mobile {
grid-template-columns: 1fr;
}
@media @mobile {
grid-column: ~'1 / -1';
left: 0;
position: relative;
height: 9/16*100vw;
}
h3,span {
color: #000;
}
}
}
......@@ -24,4 +24,16 @@
&.ratio-3to2 {
padding-bottom: 66.66%;
}
&.ratio-2to1 {
padding-bottom: 50%;
}
&.ratio-4to1 {
padding-bottom: 25%;
}
&.ratio-paper-a-vertical {
padding-bottom: 141%;
}
}
import m from 'mithril';
import { apiUrl } from 'config';
import { Card } from 'polythene-mithril';
import { Spinner } from '../components';
import { EventController } from '../models/events';
import { JobofferController } from '../models/joboffers';
import { i18n } from '../models/language';
import { Card } from '../components';
// Render the Hot Cards, with link and imageurl
const renderHotCards = (item, index) => {
const card_item = item;
if (index === 0) return m('div.hot-first-card', m(Card, card_item));
return m('div.hot-card', m(Card, card_item));
};
// Render the frontpage cards, with href and imageurl
const renderRowCards = (item, type = null) => {
const card_item = item;
if (!card_item.href && type) card_item.href = `${m.route.get() + type}/${card_item._id}`;
return m('div.frontpage-row-card', m(Card, card_item));
};
import { i18n, currentLanguage } from '../models/language';
import icons from '../images/icons';
import EventCard from '../components/EventCard';
async function getData(state) {
const events = await state.eventController.upcomingEvents.getPageData(1);
console.log(events);
if (events.length < 3) {
const pastEvents = await state.eventController.pastEvents.getPageData(1);
const { length } = events;
......@@ -56,19 +47,28 @@ export default class Frontpage {
// MOCKDATA
this.hot = [
{
title_en: 'super hot',
title_de: 'richtig heiss',
imageurl: 'http://www.heilpraxisnet.de/wp-content/uploads/2016/04/bier-lagern-1024x724.jpg',
getTitle: () => {
if (currentLanguage() === 'de') return 'richtig heiss';
return 'super hot';
},
imageurl:
'https://www.heilpraxisnet.de/wp-content/uploads/2016/04/bier-lagern-1024x724.jpg',
},
{
title_en: 'also pretty hot',
title_de: 'auch ziemlich heiss',
getTitle: () => {
if (currentLanguage() === 'de') return 'auch ziemlich heiss';
return 'also pretty hot';
},
imageurl:
'https://image.shutterstock.com/z/stock-photo-group-of-happy-people-isolated-over-white-background-102307264.jpg',
},
{
title_en: 'kinda hot',
title_de: 'lauwarm',
getTitle: () => {
if (currentLanguage() === 'de') return 'lauwarm';
return 'kinda hot';
},
imageurl: 'https://bit.ly/2OUjN5w',
},
];
......@@ -98,13 +98,124 @@ export default class Frontpage {
view() {
return m('div#frontpage-container', [
m('div.hot-row', this.hot.map((item, index) => renderHotCards(item, index))),
m('div.hot-row', this.hot.map((item, index) => this.constructor._renderHotCard(item, index))),
m('h2', i18n('Events')),
m('div.frontpage-row', this.events.map(item => renderRowCards(item, 'events'))),
m('h2', 'Jobs'),
m('div.frontpage-row', this.jobs.map(item => renderRowCards(item, 'jobs'))),
m('h2', i18n('frontpage.social_media')),
m('div.frontpage-row', this.socialmedia.map(item => renderRowCards(item))),
m(
'div.frontpage-row',
this.events.length > 0
? this.events.map(item => m(EventCard, { item }))
: Array.from(Array(3)).map(() => m(EventCard))
),
m('h2', i18n('Jobs')),
m(
'div.frontpage-row',
this.jobs.length > 0
? this.jobs.map(item => this.constructor._renderJobCard(item))
: Array.from(Array(3)).map(() => this.constructor._renderJobCard(null, true))
),
m(
'div.frontpage-row',
this.socialmedia.map(item => this.constructor._renderSocialMediaCard(item))
),
]);
}
static _renderHotCard(item, index) {
return m(Card, {
className: index === 0 ? 'hot-first-card' : 'hot-card',
content: [
{
media: {
origin: 'center',
ratio: 'landscape',
content: m('img', {
src: item.imageurl ? item.imageurl : icons.logoWheel,
}),