To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

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 = [
{
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',
......
......@@ -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}"
}
}
......@@ -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}"
}
}
@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;
}
@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 {
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 }))),
]);
}
}
......@@ -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}`),
})
),
......
Markdown is supported
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