Commit a841bdb4 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add styles for Commissions page

parent 3ef45e70
...@@ -13,7 +13,9 @@ const data = [ ...@@ -13,7 +13,9 @@ const data = [
{ {
name: 'Bastli', name: 'Bastli',
description: { 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', website: 'https://bastli.ethz.ch',
email: 'info@bastli.ethz.ch', email: 'info@bastli.ethz.ch',
......
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
"honorary_member": "Ehrenmitglied", "honorary_member": "Ehrenmitglied",
"no image": "Kein Bild verfügbar.", "no image": "Kein Bild verfügbar.",
"no description": "Keine Beschreibung verfügbar.", "no description": "Keine Beschreibung verfügbar.",
"translation unavailable": "Übersetzung nicht verfügbar. Zeige text in %{shown_language}",
"email": "Email", "email": "Email",
"email_invalid": "Ungültige Email-Adresse", "email_invalid": "Ungültige Email-Adresse",
"search": "Suchen", "search": "Suchen",
...@@ -57,6 +56,7 @@ ...@@ -57,6 +56,7 @@
"legal-notice.copyrights": "Urheberrechte", "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.", "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", "Switzerland": "Schweiz",
"commissions.no_contact_info": "Keine Kontaktinformationen",
"profile.free_beer": "Du bist berechtigt, gratis Bier zu beziehen!", "profile.free_beer": "Du bist berechtigt, gratis Bier zu beziehen!",
"profile.set_rfid": "Setze deine RFID unten, um gratis Bier zu erhalten!", "profile.set_rfid": "Setze deine RFID unten, um gratis Bier zu erhalten!",
"profile.membership": "Mitgliedschaft", "profile.membership": "Mitgliedschaft",
...@@ -135,6 +135,8 @@ ...@@ -135,6 +135,8 @@
"joboffers.no_selection": "Kein Jobangebot ausgewählt", "joboffers.no_selection": "Kein Jobangebot ausgewählt",
"errors.title": "Ups, das ist ein Fehler!", "errors.title": "Ups, das ist ein Fehler!",
"errors.access_denied.default_reason": "Diese Seite ist nur für eingeloggte Benutzer verfügbar.", "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}"
} }
} }
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
"honorary_member": "honorary member", "honorary_member": "honorary member",
"no image": "No image available.", "no image": "No image available.",
"no description": "No description available.", "no description": "No description available.",
"translation unavailable": "Translation not available. Showing text in %{shown_language}",
"email": "Email", "email": "Email",
"email_invalid": "Not a valid email address", "email_invalid": "Not a valid email address",
"search": "Search", "search": "Search",
...@@ -57,6 +56,7 @@ ...@@ -57,6 +56,7 @@
"legal-notice.copyrights": "Copyrights", "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.", "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", "Switzerland": "Switzerland",
"commissions.no_contact_info": "No contact information.",
"profile.free_beer": "You are allowed to get free beer!", "profile.free_beer": "You are allowed to get free beer!",
"profile.set_rfid": "Set your RFID below to get free beer!", "profile.set_rfid": "Set your RFID below to get free beer!",
"profile.membership": "Membership", "profile.membership": "Membership",
...@@ -135,6 +135,8 @@ ...@@ -135,6 +135,8 @@
"joboffers.no_selection": "No job offer selected", "joboffers.no_selection": "No job offer selected",
"errors.title": "Woops, that's an error!", "errors.title": "Woops, that's an error!",
"errors.access_denied.default_reason": "This page is accessible only for authenticated users.", "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}"
} }
} }
@import './colors.less'; @import './colors.less';
@import './dimensions.less'; @import './dimensions.less';
@import './mediaquery.less'; @import './mediaquery.less';
@import './infobox.less';
@import './errors.less'; @import './errors.less';
@import './frontpage.less'; @import './frontpage.less';
@import './commissions.less';
@import './studydocList.less'; @import './studydocList.less';
@import './legalNotice.less'; @import './legalNotice.less';
@import './header.less'; @import './header.less';
...@@ -65,19 +67,10 @@ main { ...@@ -65,19 +67,10 @@ main {
} }
} }
.infobox { h1 {
width: 100%; margin: 2em 0;
padding: .5em; }
background-color: @color-grey;
line-height: 1.5em;
height: 1.5em;
img {
height: 100%;
margin-right: .5em;
}
span { .centered {
vertical-align: super; text-align: center;
}
} }
@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;
}
}
}
@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%;
}
}
@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;
}
}
...@@ -19,9 +19,9 @@ class Commission { ...@@ -19,9 +19,9 @@ class Commission {
const contactInfo = []; const contactInfo = [];
if (commission.image) { if (commission.image) {
image = m('img', { src: `/${commission.image}` }); image = m('div.image.ratio-16to9', m('img', { src: `/${commission.image}` }));
} else { } 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 // collect all avialable contact information
...@@ -60,15 +60,23 @@ class Commission { ...@@ -60,15 +60,23 @@ class Commission {
description = m(''); 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 { export default class Commissions {
static view() { static view() {
return m('div', [ return m('div', [
m('h1', i18n('Kommissionen')), m('h1.centered', i18n('Commissions')),
data.map(commission => m(Commission, { commission })), m('div.commissions', data.map(commission => m(Commission, { commission }))),
]); ]);
} }
} }
...@@ -61,9 +61,11 @@ export class TranslationUnavailable { ...@@ -61,9 +61,11 @@ export class TranslationUnavailable {
}, },
[ [
m('img', { src: translateIcon }), m('img', { src: translateIcon }),
m('span', i18n('errors.translation_unavailable')),
' ',
m( m(
'span', 'span',
i18n('translation unavailable', { i18n('errors.shown_language', {
shown_language: i18n(`language.${vnode.attrs.shown_language}`), shown_language: i18n(`language.${vnode.attrs.shown_language}`),
}) })
), ),
......
Supports Markdown
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