Skip to content
Snippets Groups Projects
Commit 321e2bfe authored by Elias Asikainen's avatar Elias Asikainen
Browse files

Merge branch 'master' of gitlab.ethz.ch:amiv/amiv-website into listview

parents e0b11f35 4b6c554c
No related branches found
No related tags found
1 merge request!47Listview
import m from 'mithril';
import { Tabs } from 'polythene-mithril';
import { TabsCSS } from 'polythene-css';
TabsCSS.addStyle('.themed-tabs', {
tab_max_width: 110,
tab_min_width: 110,
color_light: '#444',
color_light_selected: '#ff1744',
color_light_tab_indicator: '#ff1744',
color_dark: '#ccc',
color_dark_selected: '#c51162',
color_dark_tab_indicator: '#c51162',
});
export default class TabComponent {
constructor() {
this.defaultProps = {
className: 'themed-tabs',
activeSelected: true,
};
}
view(vnode) {
return m(Tabs, { ...this.defaultProps, ...vnode.attrs });
}
}
export { default as Button } from './Button';
<<<<<<< HEAD
export { default as Checkbox } from './Checkbox';
export { default as RadioGroup } from './RadioGroup';
export { default as TextField } from './TextField';
=======
export { default as Tabs } from './Tabs';
>>>>>>> 4b6c554c7a733576d7bea69b758fc04b6ba0f353
......@@ -138,7 +138,7 @@ export default class EventDetails {
} else {
let participantNotice = '';
if (events.getSignupForSelectedEvent() !== 'undefined') {
participantNotice = m('You signed up for this event.');
participantNotice = m('span', 'You signed up for this event.');
}
eventSignupForm = m('div', ['The registration period is over.', participantNotice]);
}
......
......@@ -3,15 +3,33 @@ import * as events from '../models/events';
const date = `${new Date().toISOString().split('.')[0]}Z`;
// Render the frontpage cards, with href and imageurl
const renderCards = item => {
const { title } = item;
return m('div.frontpage-card', title);
const { title, href, imageurl } = item;
return m(
'div.frontpage-card',
{ style: `background-image: url(${imageurl})` },
m('a', { href }, title)
);
};
// Render the Hot Cards, with link and imageurl
const renderHotCards = (item, index) => {
const { title } = item;
if (index === 0) return m('div.hot-first-card', title);
return m('div.hot-card', title);
const { title, href, imageurl } = item;
if (index === 0) {
return m(
'div.hot-first-card',
{
style: `background-image: url(${imageurl})`,
},
m('a', { href }, title)
);
}
return m(
'div.hot-card',
{ style: `background-image: url(${imageurl})` },
m('a', { href }, title)
);
};
export default class Frontpage {
......@@ -26,21 +44,40 @@ export default class Frontpage {
});
this.events = events.getList().slice(0, 3);
console.log(this.events);
// MOCKDATA
this.hot = [{ title: 'super hot' }, { title: 'also pretty hot' }, { title: 'kinda hot' }];
this.jobs = [
{ title: 'google' },
{ title: 'less than google' },
{ title: 'abb' },
{ title: 'accenture' },
this.hot = [
{
title: 'super hot',
imageurl: 'http://www.heilpraxisnet.de/wp-content/uploads/2016/04/bier-lagern-1024x724.jpg',
},
{ title: 'also pretty hot' },
{ title: 'kinda hot' },
];
this.jobs = [{ title: 'Google' }, { title: 'ABB' }, { title: 'Accenture' }];
this.socialmedia = [
{
title: 'Facebook',
href: 'https://www.facebook.com/AMIV.ETHZ/',
imageurl: 'https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg',
},
{
title: 'Instagram',
href: 'https://www.instagram.com/amiv_eth/?hl=de',
imageurl:
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2000px-Instagram_logo_2016.svg.png',
},
{
title: 'Twitter',
href: 'https://twitter.com/amiv_ethz?lang=de',
imageurl:
'https://upload.wikimedia.org/wikipedia/de/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png',
},
];
}
onbeforeupdate() {
this.events = events.getList().slice(0, 4);
console.log(this.events);
this.events = events.getList().slice(0, 3);
}
view() {
......@@ -48,6 +85,7 @@ export default class Frontpage {
m('div.hot-row', this.hot.map((item, index) => renderHotCards(item, index))),
m('div.frontpage-row', this.events.map(item => renderCards(item))),
m('div.frontpage-row', this.jobs.map(item => renderCards(item))),
m('div.frontpage-row', this.socialmedia.map(item => renderCards(item))),
]);
}
}
import m from 'mithril';
import { checkLogin, isLoggedIn, logout } from '../models/auth';
import { Tabs } from '../components';
const layoutCommon = [
m('a', { href: '/', oncreate: m.route.link }, 'AMIV'),
m('a', { href: '/events', oncreate: m.route.link }, 'Events'),
m('a', { href: '/studydocuments', oncreate: m.route.link }, 'Studienunterlagen'),
m('a', { href: '/jobs', oncreate: m.route.link }, 'Jobs'),
];
const defaultTabs = ['AMIV', 'Events', 'Studienunterlagen', 'Jobs'];
const tabsLoggedOut = ['Login'];
const tabsLoggedIn = ['Profil', 'Logout'];
const layoutLoggedOut = vnode =>
m('div', [
m('nav', [layoutCommon, m('a', { href: '/login', oncreate: m.route.link }, 'Login')]),
m('main', vnode.children),
]);
const gotoRoute = route => {
const current = m.route.get();
if (current !== route) m.route.set(route);
};
const layoutLoggedIn = vnode =>
m('div', [
m('nav', [
layoutCommon,
m('a', { href: '/profile', oncreate: m.route.link }, 'Profil'),
m(
'a',
{
href: '/',
onclick: () => {
logout().then(() => {
m.route.set('/');
});
return false;
},
},
'Logout'
),
]),
m('main', vnode.children),
]);
export default class Layout {
constructor() {
checkLogin();
this.setTabs();
this.selectedTabIndex = 0;
this.wasLoggedIn = isLoggedIn();
}
setTabs() {
const tabOptions = isLoggedIn() ? tabsLoggedIn : tabsLoggedOut;
this.tabs = [...defaultTabs, ...tabOptions];
}
selectTab(tabIndex) {
const tabString = this.tabs[tabIndex];
switch (tabString) {
case 'AMIV':
gotoRoute('/');
break;
case 'Events':
gotoRoute('/events');
break;
case 'Studienunterlagen':
gotoRoute('/studydocuments');
break;
case 'Jobs':
gotoRoute('/jobs');
break;
case 'Profil':
gotoRoute('/profile');
break;
case 'Logout':
gotoRoute('/');
logout();
break;
case 'Login':
gotoRoute('/login');
break;
default:
console.log('Tab not known!');
}
}
onupdate() {
if (this.wasLoggedIn !== isLoggedIn()) {
this.selectedTabIndex = 0;
this.wasLoggedIn = isLoggedIn();
this.setTabs();
}
}
module.exports = {
oninit: checkLogin,
view(vnode) {
return isLoggedIn() ? layoutLoggedIn(vnode) : layoutLoggedOut(vnode);
},
};
return m('div#amiv-container', [
m(Tabs, {
onChange: ({ index }) => {
this.selectedTabIndex = index;
this.selectTab(index);
},
tabs: this.tabs.map(tab => ({ label: tab })),
selectedTab: this.selectedTabIndex,
}),
m('main', vnode.children),
]);
}
}
......@@ -2,5 +2,16 @@
@import './studydocList.less';
div {
<<<<<<< HEAD
border: none;
}
=======
border: solid 1px black;
}
#amiv-container {
max-width: 1280px;
display: block;
margin: 0 auto;
}
>>>>>>> 4b6c554c7a733576d7bea69b758fc04b6ba0f353
#frontpage-container {
width: 800px;
// Grid general settings
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 30px;
align-content: center;
text-align: center;
border: none;
// Hot sector on the frontpage
.hot-row {
background-color: aqua;
// Grid of 12 frame colums
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 15;
// Grid declaration for sub items, 2 frame columns
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 30px;
border: none;
.hot-first-card {
background-color: red;
grid-row-start: 1;
grid-row-end: 3;
background-size: cover;
background-position: centre-centre;
}
.hot-card {
background-color: yellow;
background-size: cover;
background-position: centre-centre;
}
}
.frontpage-row{
grid-column-start: 1;
grid-column-end: 13;
// Grid declaration for sub items, 3 frame columns
display: grid;
border: none;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
.frontpage-card{
background-color: yellowgreen;
grid-row-start: 1;
grid-row-end: 8;
background-size: cover;
background-position: centre-centre;
}
}
}
\ No newline at end of file
......@@ -21,6 +21,7 @@
display: grid;
grid-row: auto auto;
border-bottom: solid 1px black;
border-top: solid 1px black;
}
}
.content{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment