Add styles for Commissions page

src/content/amiv/data/commissions.js

@@ -13,7 +13,9 @@ const data = [
   {
     name: 'Bastli',
     description: {
-      de: 'Keine richtige Beschreibung.',
+      de: `Das Elektroniklabor des AMIV von und für ETH Studenten bietet Euch kostenlose Arbeitsplätze und Werkzeuge um eure eigenen Projekte und Ideen umzusetzen.
+
+          Wir sind für alle da und helfen euch gerne. Vorkentnisse werden keine benötigt, Hauptsache ihr habt Spass daran Dinge zu bauen ;)`,
     },
     website: 'https://bastli.ethz.ch',
     email: 'info@bastli.ethz.ch',

src/languages/de.json

@@ -44,7 +44,6 @@
         "honorary_member": "Ehrenmitglied",
         "no image": "Kein Bild verfügbar.",
         "no description": "Keine Beschreibung verfügbar.",
-        "translation unavailable": "Übersetzung nicht verfügbar. Zeige text in %{shown_language}",
         "email": "Email",
         "email_invalid": "Ungültige Email-Adresse",
         "search": "Suchen",
@@ -57,6 +56,7 @@
         "legal-notice.copyrights": "Urheberrechte",
         "legal-notice.copyrights-text": "Die Urheber- und alle anderen Rechte an Inhalten, Bildern, Fotos oder anderen Dateien auf der Website gehören ausschliesslich dem «AMIV an der ETH» oder den speziell genannten Rechtsinhabern. Für die Reproduktion jeglicher Elemente ist die schriftliche Zustimmung der Urheberrechtsträger im Voraus einzuholen.",
         "Switzerland": "Schweiz",
+        "commissions.no_contact_info": "Keine Kontaktinformationen",
         "profile.free_beer": "Du bist berechtigt, gratis Bier zu beziehen!",
         "profile.set_rfid": "Setze deine RFID unten, um gratis Bier zu erhalten!",
         "profile.membership": "Mitgliedschaft",
@@ -135,6 +135,8 @@
         "joboffers.no_selection": "Kein Jobangebot ausgewählt",
         "errors.title": "Ups, das ist ein Fehler!",
         "errors.access_denied.default_reason": "Diese Seite ist nur für eingeloggte Benutzer verfügbar.",
-        "errors.not_found.text": "Die gewünschte Seite konnte nicht gefunden werden."
+        "errors.not_found.text": "Die gewünschte Seite konnte nicht gefunden werden.",
+        "errors.translation_unavailable": "Übersetzung nicht verfügbar.",
+        "errors.shown_language": "Zeige Text in %{shown_language}"
     }
 }

src/languages/en.json

@@ -44,7 +44,6 @@
         "honorary_member": "honorary member",
         "no image": "No image available.",
         "no description": "No description available.",
-        "translation unavailable": "Translation not available. Showing text in %{shown_language}",
         "email": "Email",
         "email_invalid": "Not a valid email address",
         "search": "Search",
@@ -57,6 +56,7 @@
         "legal-notice.copyrights": "Copyrights",
         "legal-notice.copyrights-text": "The copyright and any other rights relating to texts, illustrations, photos or any other files on the website belong exclusively «AMIV an der ETH» or mentioned owners. Any reproduction requires the written permission of the copyright holder , which must be obtained in advance.",
         "Switzerland": "Switzerland",
+        "commissions.no_contact_info": "No contact information.",
         "profile.free_beer": "You are allowed to get free beer!",
         "profile.set_rfid": "Set your RFID below to get free beer!",
         "profile.membership": "Membership",
@@ -135,6 +135,8 @@
         "joboffers.no_selection": "No job offer selected",
         "errors.title": "Woops, that's an error!",
         "errors.access_denied.default_reason": "This page is accessible only for authenticated users.",
-        "errors.not_found.text": "The page you are looking for could not be found."
+        "errors.not_found.text": "The page you are looking for could not be found.",
+        "errors.translation_unavailable": "Translation not available.",
+        "errors.shown_language": "Showing text in %{shown_language}"
     }
 }

src/styles/base.less

 @import './colors.less';
 @import './dimensions.less';
 @import './mediaquery.less';
+@import './infobox.less';
 @import './errors.less';
 @import './frontpage.less';
+@import './commissions.less';
 @import './studydocList.less';
 @import './legalNotice.less';
 @import './header.less';
@@ -65,19 +67,10 @@ main {
   }
 }
 
-.infobox {
-  width: 100%;
-  padding: .5em;
-  background-color: @color-grey;
-  line-height: 1.5em;
-  height: 1.5em;
-
-  img {
-    height: 100%;
-    margin-right: .5em;
-  }
+h1 {
+  margin: 2em 0;
+}
 
-  span {
-    vertical-align: super;
-  }
+.centered {
+  text-align: center;
 }

src/styles/commissions.less

+@import './colors.less';
+@import './images.less';
+
+.commissions {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 30px;
+  align-content: center;
+  text-align: center;
+  border: none;
+  margin-bottom: 3em;
+
+  @media @tablet {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media @mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.commission {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  border: 1px solid @color-grey;
+
+  .description {
+    text-align: justify;
+
+    p { margin: .5em; }
+  }
+
+  .contact {
+    background-color: @color-grey;
+    padding: .5em;
+    height: 5em;
+
+    > * {
+      display: block;
+      padding: .25em 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: @color-dark-blue;
+    }
+  }
+}

src/styles/images.less

+@import './colors.less';
+
+.image,.no-image {
+  width: 100%;
+  background-color: @color-grey;
+  position: relative;
+
+  > * {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  > img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  &.ratio-16to9 {
+    padding-bottom: 56.25%;
+  }
+
+  &.ratio-3to2 {
+    padding-bottom: 66.66%;
+  }
+}

src/styles/infobox.less

+@import './colors.less';
+
+.infobox {
+  position: relative;
+  width: calc(100% - 3em);
+  text-align: left;
+  padding: .5em .5em .5em 2.5em;
+  background-color: @color-grey;
+  line-height: 1.5em;
+
+  img {
+    position: absolute;
+    height: 1.5em;
+    float: left;
+    top: 50%;
+    left: .5em;
+    transform: translateY(-50%);
+  }
+
+  span {
+    display: inline-block;
+  }
+}

src/views/amiv/commissions.js

@@ -19,9 +19,9 @@ class Commission {
     const contactInfo = [];
 
     if (commission.image) {
-      image = m('img', { src: `/${commission.image}` });
+      image = m('div.image.ratio-16to9', m('img', { src: `/${commission.image}` }));
     } else {
-      image = m('div.no-image', i18n('no image'));
+      image = m('div.no-image.ratio-16to9', m('span', i18n('no image')));
     }
 
     // collect all avialable contact information
@@ -60,15 +60,23 @@ class Commission {
       description = m('');
     }
 
-    return m('div', [m('h2', commission.name), image, description, contactInfo]);
+    return m('div.commission', [
+      image,
+      m('h2', commission.name),
+      m('div.description', description),
+      m(
+        'div.contact',
+        contactInfo.length > 0 ? contactInfo : m('span', i18n('commissions.no_contact_info'))
+      ),
+    ]);
   }
 }
 
 export default class Commissions {
   static view() {
     return m('div', [
-      m('h1', i18n('Kommissionen')),
-      data.map(commission => m(Commission, { commission })),
+      m('h1.centered', i18n('Commissions')),
+      m('div.commissions', data.map(commission => m(Commission, { commission }))),
     ]);
   }
 }

src/views/errors.js

@@ -61,9 +61,11 @@ export class TranslationUnavailable {
       },
       [
         m('img', { src: translateIcon }),
+        m('span', i18n('errors.translation_unavailable')),
+        ' ',
         m(
           'span',
-          i18n('translation unavailable', {
+          i18n('errors.shown_language', {
             shown_language: i18n(`language.${vnode.attrs.shown_language}`),
           })
         ),