diff --git a/src/components/Tabs.js b/src/components/Tabs.js
new file mode 100644
index 0000000000000000000000000000000000000000..b84a254be53086191333e0635b1caeb0f4ecdb0c
--- /dev/null
+++ b/src/components/Tabs.js
@@ -0,0 +1,27 @@
+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 });
+ }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 5142300129f7b0c66c38e0fb857e3f46b437e6cf..563fc179d60cddefb757843a3d4f8c437dc5746a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,8 @@
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
diff --git a/src/views/events/eventDetails.js b/src/views/events/eventDetails.js
index 62063166e29c9c976b8528a2bd15167cd29926fc..364d36bb9bf397105256891031163552a46cf700 100644
--- a/src/views/events/eventDetails.js
+++ b/src/views/events/eventDetails.js
@@ -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]);
}
diff --git a/src/views/frontpage.js b/src/views/frontpage.js
index a5f5e87fbdd6f8d8e0c3be00acbbe7f68bc6a59c..20d9d68f5129a8857c28f02a348468eed2820968 100644
--- a/src/views/frontpage.js
+++ b/src/views/frontpage.js
@@ -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))),
]);
}
}
diff --git a/src/views/layout.js b/src/views/layout.js
index 423bb945cf76e36fe690e080639b9086094f1035..d2d100312ee369fbf15faf7c77821841032bbd65 100644
--- a/src/views/layout.js
+++ b/src/views/layout.js
@@ -1,44 +1,78 @@
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),
+ ]);
+ }
+}
diff --git a/src/views/styles/base.less b/src/views/styles/base.less
index 0e2ebf20790fde15e341a44ab31eca0f38370c46..af19c75dba4a74042b46b6a9dffca9c561ecc811 100644
--- a/src/views/styles/base.less
+++ b/src/views/styles/base.less
@@ -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
diff --git a/src/views/styles/frontpage.less b/src/views/styles/frontpage.less
index d2fbaac9dae5d060bc9394716e48ea44066290cb..580d92f9d1d8de12059ce32370eeab1868f39524 100644
--- a/src/views/styles/frontpage.less
+++ b/src/views/styles/frontpage.less
@@ -1,9 +1,57 @@
#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
diff --git a/src/views/styles/listview.less b/src/views/styles/listview.less
index e0229900dfaf6e358ab1a9c6f273f07b9407351e..635e0e4a342defe057fe77eaf4d7c08b98ac5a5f 100644
--- a/src/views/styles/listview.less
+++ b/src/views/styles/listview.less
@@ -21,6 +21,7 @@
display: grid;
grid-row: auto auto;
border-bottom: solid 1px black;
+ border-top: solid 1px black;
}
}
.content{