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

src/components/Tabs.js

+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 });
+  }
+}

src/components/index.js

 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

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]);
       }

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))),
     ]);
   }
 }

src/views/layout.js

 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),
+    ]);
+  }
+}

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

src/views/styles/frontpage.less

 #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

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{