Commit ccdd2382 authored by lic's avatar lic
Browse files

Merge remote-tracking branch 'origin' into studydocs-style

parents 85225b01 a9f175d9
......@@ -2,21 +2,52 @@ 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() {
const { title, href, img_poster, logo } = this.item;
let { imageurl } = this.item;
if (img_poster) imageurl = `${apiUrl}${img_poster.file}`;
else if (logo) imageurl = `${apiUrl}${logo.file}`;
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 }, m('div.card', { style }, m('div.card-title', title)));
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 {
height: 100%;
width: 100%;
@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: centre-centre;
background-position: center;
overflow: hidden;
.card-title {
font-size: 32px;
@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;
......@@ -18,3 +38,24 @@
width: 100%;
}
}
.card .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;
}
}
.card:hover .card-overlay {
bottom: 0%;
}
......@@ -7,9 +7,19 @@
text-align: center;
border: none;
@media @mobile {
margin: 0;
}
h2 {
@media @desktop, @wide {
font-size: 2em;
}
@media @tablet, @mobile {
font-size: 1.5em;
}
text-align: left;
font-size: 2em;
font-weight: normal;
color: #333;
grid-column: ~'1 / 13';
......@@ -30,17 +40,32 @@
border: none;
.hot-first-card {
background-color: #f00;
grid-column: ~'1 / 3';
grid-row: ~'1 / 3';
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
@media @wide, @desktop, @tablet {
grid-column: ~'1 / 3';
grid-row: ~'1 / 3';
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
@media @mobile {
grid-column: ~'1 / -1';
position: relative;
height: 9/16*100vw;
}
}
.hot-card {
grid-column: ~'3 / 4';
position: relative;
@media @wide, @desktop, @tablet {
grid-column: ~'3 / 4';
position: relative;
}
@media @mobile {
grid-column: ~'1 / -1';
position: relative;
height: 9/16*100vw;
}
}
}
......@@ -53,9 +78,18 @@
grid-gap: 30px;
.frontpage-row-card {
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
@media @wide, @desktop, @tablet {
padding-top: (9 / 16) * 100%;
position: relative;
height: 0;
}
@media @mobile {
grid-column: ~'1 / -1';
left: 0;
position: relative;
height: 9/16*100vw;
}
}
}
}
......@@ -115,10 +115,6 @@ export default class EventList extends FilteredListPage {
const openRegistrationList = [];
const upcomingList = [];
console.log(controller.openRegistrationEvents.length);
console.log(controller.upcomingEvents.length);
console.log(controller.pastEvents.length);
if (controller.openRegistrationEvents.length > 0) {
openRegistrationList.push(
m('div.list-header', m('h4', i18n('events.header_open_registration'))),
......
import m from 'mithril';
import { EventController } from '../models/events';
import { JobofferController } from '../models/joboffers';
import { i18n, currentLanguage } from '../models/language';
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;
switch (currentLanguage()) {
case 'de':
card_item.title = item.title_de;
break;
case 'en':
default:
card_item.title = item.title_en;
}
if (index === 0) return m('div.hot-first-card', m(Card, card_item));
return m('div.hot-card', m(Card, card_item));
};
......@@ -23,17 +15,20 @@ const renderHotCards = (item, index) => {
const renderRowCards = (item, type) => {
const card_item = item;
if (!card_item.href) card_item.href = `${m.route.get() + type}/${card_item._id}`;
switch (currentLanguage()) {
case 'de':
card_item.title = item.title_de;
break;
case 'en':
default:
card_item.title = item.title_en;
}
return m('div.frontpage-row-card', m(Card, card_item));
};
async function getData(state) {
const events = await state.eventController.upcomingEvents.getPageData(1);
if (events.length < 3) {
const pastEvents = await state.eventController.pastEvents.getPageData(1);
const { length } = events;
for (let i = 0; i < 3 - length; i += 1) events.push(pastEvents[i]);
}
const jobs = await state.jobOfferController.getPageData(1);
return { ...{ events }, ...{ jobs } };
}
export default class Frontpage {
oninit() {
this.eventController = new EventController(
......@@ -52,13 +47,9 @@ export default class Frontpage {
}
oncreate() {
this.eventController.upcomingEvents.getPageData(1).then(events => {
this.events = events;
m.redraw();
});
this.jobs = [];
this.jobOfferController.getPageData(1).then(jobs => {
this.jobs = jobs;
getData(this).then(result => {
this.events = result.events;
this.jobs = result.jobs;
m.redraw();
});
......
......@@ -28,7 +28,6 @@ export default class studydocNew {
}
validate() {
console.log(this.doc.type);
this.isValid = this.doc.files && this.doc.files.length > 0 && this.doc.type !== null;
}
......
Supports Markdown
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