Commit 0253ab30 authored by lic's avatar lic Committed by Sandro Lutz
Browse files

Styling of CardComponent

parent d345611e
......@@ -13,6 +13,20 @@ export default class CheckboxComponent {
if (img_poster) imageurl = `${apiUrl}${img_poster.file}`;
const style = imageurl ? `background-image: url(${imageurl})` : '';
return m('div.card', { style }, m('a', { href }, title));
return m(
'a',
{ href },
m(
'div.card',
{ style },
m('div.card-overlay', [
m('h3', title),
m(
'p',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
),
])
)
);
}
}
......@@ -4,7 +4,25 @@
position: absolute;
top: 0;
left: 0;
background-color: yellow;
background-color: #1f2d54;
background-size: cover;
background-position: centre-centre;
.card-overlay {
position: absolute;
width: 100%;
max-height: 100%;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
text-align: right;
h3 {
margin: 10px;
font-weight: 100;
}
p {
margin: 10px;
}
}
}
import m from 'mithril';
import * as events from '../models/events';
import * as jobs from '../models/joboffers';
import { i18n } from '../models/language';
// import { i18n } from '../models/language';
import { Card } from '../components';
const date = `${new Date().toISOString().split('.')[0]}Z`;
......@@ -76,13 +76,13 @@ export default class Frontpage {
view() {
return m('div#frontpage-container', [
m('h2', i18n('frontpage.whats_hot')),
// m('h2', i18n('frontpage.whats_hot')),
m('div.hot-row', this.hot.map((item, index) => renderHotCards(item, index))),
m('h2', i18n('Events')),
// m('h2', i18n('Events')),
m('div.frontpage-row', this.events.map(item => renderRowCards(item))),
m('h2', 'Jobs'),
// m('h2', 'Jobs'),
m('div.frontpage-row', this.jobs.map(item => renderRowCards(item))),
m('h2', i18n('frontpage.social_media')),
// m('h2', i18n('frontpage.social_media')),
m('div.frontpage-row', this.socialmedia.map(item => renderRowCards(item))),
]);
}
......
......@@ -2,7 +2,7 @@
@import './studydocList.less';
div {
border: solid 1px black;
outline: dashed 1px lightskyblue;
}
#amiv-container {
......
......@@ -2,7 +2,8 @@
// Grid general settings
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 30px;
grid-column-gap: 30px;
grid-row-gap: 60px;
align-content: center;
text-align: center;
border: none;
......
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