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 4d5e61dc authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add styles for Board page

parent a841bdb4
// Contains static information about the current board.
// Markdown can be used to style the text.
import image from '../images/board/board.jpg';
import boardImage from '../images/board/board.jpg';
import pqImage from '../images/board/pq.jpg';
import eventPlanningImage from '../images/board/eventPlanning.jpg';
import erImage from '../images/board/er.jpg';
......@@ -10,7 +10,7 @@ import informationImage from '../images/board/information.jpg';
import infrastructureImage from '../images/board/infrastructure.jpg';
import itImage from '../images/board/it.jpg';
const data = [
const boardPortraits = [
{
image: pqImage,
portraits: [
......@@ -31,16 +31,6 @@ const data = [
},
},
],
tasks: {
de: `
Der Präsident ist für die Koordination der Arbeit des gesamten Vorstandes verantwortlich und repräsentiert den Fachverein nach aussen. Er beruft die Sitzungen und Generalversammlungen ein und delegiert die Arbeit an die einzelnen Ressorts. Er ist das Bindeglied zum Dachverband, dem VSETH.
Der Quästor ist verantwortlich für die finanziellen Angelegenheiten des AMIV, namentlich für die Budgetierung und Rechnungsführung. Er verwaltet zudem die Vereinskonten und prüft die Rechnungen aller Kommissionen.`,
en: `
The president is responsible for coordinating the work of the entire board and represents the association to the outside world. He convenes the meetings and general assemblies and delegates the work to the individual departments. He is the link to the umbrella organization, the VSETH.
The Quaestor is responsible for the financial affairs of AMIV, namely budgeting and accounting. He also manages the bank accounts of the association and checks the bills of all commissions.`,
},
},
{
image: itImage,
......@@ -54,12 +44,6 @@ const data = [
},
},
],
tasks: {
de:
'Der IT Vorstand ist verantwortlich für alle Technik im AMIV. Dazu gehören zum Beispiel Webseite, Apps, Bierautomat, PVK Tool, Server, Workstations und die Organisation des Codingweekends. Alles was die Website angeht: webmaster@amiv.ethz.ch',
en:
'The head of IT is responsible for all technical stuff at AMIV. This includes maintaining the website, apps, beer dispenser, PVK tool, servers, workstations and leading the IT team. Everything regarding the website: webmaster@amiv.ethz.ch',
},
},
{
image: informationImage,
......@@ -73,12 +57,6 @@ const data = [
},
},
],
tasks: {
de:
'Der Informationsvorstand koordiniert diverse Informationskanäle wie die Announce, Facebook und die gute alte Homepage, und stellt sicher, dass alle Studenten gut über des Geschehen in und um ihren Lieblingsverein informiert bleiben. Nicht zuletzt gehört auch das pflichtbewusste Beantworten von allem, was am Ende des Tages im info@amiv.ethz.ch Postfach übrigbleibt, dazu. Ausserdem leitet er das Design-Team, welches sich um das ganze AMIV Werbematerial kümmert.',
en:
'The head of communications coordinates various information channels such as the Announce, Facebook and the good old website, and ensures that all students stay well informed about the events in and around their favorite association. Last but not least, dutifully answering everything that remains at the end of the day in the info@amiv.ethz.ch mailbox is part of it. He also leads the design team, which takes care of the entire AMIV advertising material.',
},
},
{
image: eventPlanningImage,
......@@ -98,10 +76,6 @@ const data = [
name: 'Lina Gehri',
},
],
tasks: {
de:
'Neben einem anspruchsvollen und zeitintensivem Studium, das die ETH bekanntlich mit sich bringt, kommt das Sozialleben oft zu kurz. Deswegen geht das Ressort Kultur der Aufgabe nach, den Studenten ein abwechslungsreiches Freizeitangebot zu bieten. Die Kulturis organisieren diverse Veranstaltungen, bei denen unsere Mitglieder die Möglichkeit haben, sich gegenseitig kennenzulernen. Seit einem Jahr werden die Kultur-Vorstände vom Kulturteam bei der Event-Organisation unterstützt. In diesem Team kann jeder mitmachen, der Lust dazu hat. Zudem gibt es je nach Event noch zahlreiche Helfer, um alle anfallenden Arbeiten zu bewältigen. Interessenten melden sich bitte unter kultur@amiv.ethz.ch',
},
},
{
image: hopoImage,
......@@ -121,10 +95,6 @@ const data = [
name: 'Johannes Schretter',
},
],
tasks: {
de:
'An der ETH haben die Studenten sehr viele Mitspracherechte – vielleicht mehr, als man gemeinhin so denkt. Die Hochschulpolitiker engagieren sich dabei (zusammen mit einem HoPo-Team pro Departement) in den Departements- und Unterrichtskonferenzen der beiden vom AMIV abgedeckten Departementen. Zudem sind sie Ansprechpartner für alle möglichen Studiumsbezogenen Fragen, organisieren Prüfungsvorbereitungskurse und führen Vorlesungs-Evaluationen mittels Semestersprechern sowie Tutorenabende für Studenten aus den tieferen Semestern durch. Hast du Fragen oder Anregungen? Melde dich ganz unverbindlich beim entsprechenden HoPo-Team unter hopo-itet@amiv.ethz.ch oder hopo-mavt@amiv.ethz.ch',
},
},
{
image: erImage,
......@@ -138,10 +108,6 @@ const data = [
name: 'Shuaixin Qi',
},
],
tasks: {
de:
'Die Mitglieder des Ressorts External Relations bauen neue Kontakte zur Wirtschaft auf und pflegen bereits vorhandene. Hauptaufgabe ist die Beschaffung von Sponsoringgeldern und der Informationsaustausch zwischen Industrie und Studenten – um Mehrwert für die Studenten zu schaffen. Zusammen mit dem Präsidenten sind die Vorstände dieses Ressorts das Gesicht des AMIV nach aussen. Ausserdem organisieren sie jeweils im Herbstsemester die grosse AMIV Firmenkontaktmesse «AMIV Kontakt». Um auch während dem Semester interessante Exkursionen anbieten zu können, sind die beiden auf externe Mithilfe angewiesen. Hast du Lust, das ER-Team im Bereich Exkursionen, Kontakt oder Sponsoring zu unterstützen? Dann melde dich kurz unter kontakt@amiv.ethz.ch',
},
},
{
image: infrastructureImage,
......@@ -155,11 +121,7 @@ const data = [
},
},
],
tasks: {
de:
'Antonia ist für sämtliche Räumlichkeiten des AMIV und der darin enthaltenen, dem Verein gehörenden, Einrichtung und deren Zustand verantwortlich. Die Gestaltung und Zuordnung im Kulturraumes, Regeln für den Aufenthaltsraum und die Getränkeversorgung beanspruchen die meiste Zeit ihrer Tätigkeit als Vorstand. Es freut sie jeweils, wenn sie sieht, wie AMIVler denn Müll trennen und sich um Ordnung und Sauberkeit bemühen. Für sämtliche Anliegen, Anreize und Ideen hat sie stets ein offenes Ohr und freut sich auf eine Mail von euch. infrastruktur@amiv.ethz.ch',
},
},
];
export { data, image };
export { boardPortraits, boardImage };
// Contains static information about the tasks of the board members.
// Markdown can be used to style the text.
const boardTaskDescriptions = {
President: {
de:
'Der Präsident ist für die Koordination der Arbeit des gesamten Vorstandes verantwortlich und repräsentiert den Fachverein nach aussen. Er beruft die Sitzungen und Generalversammlungen ein und delegiert die Arbeit an die einzelnen Ressorts. Er ist das Bindeglied zum Dachverband, dem VSETH.',
en:
'The president is responsible for coordinating the work of the entire board and represents the association to the outside world. He convenes the meetings and general assemblies and delegates the work to the individual departments. He is the link to the umbrella organization, the VSETH.',
},
Quaestor: {
de:
'Der Quästor ist verantwortlich für die finanziellen Angelegenheiten des AMIV, namentlich für die Budgetierung und Rechnungsführung. Er verwaltet zudem die Vereinskonten und prüft die Rechnungen aller Kommissionen.',
en:
'The Quaestor is responsible for the financial affairs of AMIV, namely budgeting and accounting. He also manages the bank accounts of the association and checks the bills of all commissions.',
},
IT: {
de:
'Der IT Vorstand ist verantwortlich für alle Technik im AMIV. Dazu gehören zum Beispiel Webseite, Apps, Bierautomat, PVK Tool, Server, Workstations und die Organisation des Codingweekends. Alles was die Website angeht: webmaster@amiv.ethz.ch',
en:
'The head of IT is responsible for all technical stuff at AMIV. This includes maintaining the website, apps, beer dispenser, PVK tool, servers, workstations and leading the IT team. Everything regarding the website: webmaster@amiv.ethz.ch',
},
Information: {
de:
'Der Informationsvorstand koordiniert diverse Informationskanäle wie die Announce, Facebook und die gute alte Homepage, und stellt sicher, dass alle Studenten gut über des Geschehen in und um ihren Lieblingsverein informiert bleiben. Nicht zuletzt gehört auch das pflichtbewusste Beantworten von allem, was am Ende des Tages im info@amiv.ethz.ch Postfach übrigbleibt, dazu. Ausserdem leitet er das Design-Team, welches sich um das ganze AMIV Werbematerial kümmert.',
en:
'The head of communications coordinates various information channels such as the Announce, Facebook and the good old website, and ensures that all students stay well informed about the events in and around their favorite association. Last but not least, dutifully answering everything that remains at the end of the day in the info@amiv.ethz.ch mailbox is part of it. He also leads the design team, which takes care of the entire AMIV advertising material.',
},
'Event Planning': {
de:
'Neben einem anspruchsvollen und zeitintensivem Studium, das die ETH bekanntlich mit sich bringt, kommt das Sozialleben oft zu kurz. Deswegen geht das Ressort Kultur der Aufgabe nach, den Studenten ein abwechslungsreiches Freizeitangebot zu bieten. Die Kulturis organisieren diverse Veranstaltungen, bei denen unsere Mitglieder die Möglichkeit haben, sich gegenseitig kennenzulernen. Seit einem Jahr werden die Kultur-Vorstände vom Kulturteam bei der Event-Organisation unterstützt. In diesem Team kann jeder mitmachen, der Lust dazu hat. Zudem gibt es je nach Event noch zahlreiche Helfer, um alle anfallenden Arbeiten zu bewältigen. Interessenten melden sich bitte unter kultur@amiv.ethz.ch',
},
'University Policy': {
de:
'An der ETH haben die Studenten sehr viele Mitspracherechte – vielleicht mehr, als man gemeinhin so denkt. Die Hochschulpolitiker engagieren sich dabei (zusammen mit einem HoPo-Team pro Departement) in den Departements- und Unterrichtskonferenzen der beiden vom AMIV abgedeckten Departementen. Zudem sind sie Ansprechpartner für alle möglichen Studiumsbezogenen Fragen, organisieren Prüfungsvorbereitungskurse und führen Vorlesungs-Evaluationen mittels Semestersprechern sowie Tutorenabende für Studenten aus den tieferen Semestern durch. Hast du Fragen oder Anregungen? Melde dich ganz unverbindlich beim entsprechenden HoPo-Team unter hopo-itet@amiv.ethz.ch oder hopo-mavt@amiv.ethz.ch',
},
'External Relations': {
de:
'Die Mitglieder des Ressorts External Relations bauen neue Kontakte zur Wirtschaft auf und pflegen bereits vorhandene. Hauptaufgabe ist die Beschaffung von Sponsoringgeldern und der Informationsaustausch zwischen Industrie und Studenten – um Mehrwert für die Studenten zu schaffen. Zusammen mit dem Präsidenten sind die Vorstände dieses Ressorts das Gesicht des AMIV nach aussen. Ausserdem organisieren sie jeweils im Herbstsemester die grosse AMIV Firmenkontaktmesse «AMIV Kontakt». Um auch während dem Semester interessante Exkursionen anbieten zu können, sind die beiden auf externe Mithilfe angewiesen. Hast du Lust, das ER-Team im Bereich Exkursionen, Kontakt oder Sponsoring zu unterstützen? Dann melde dich kurz unter kontakt@amiv.ethz.ch',
},
Infrastructure: {
de:
'Antonia ist für sämtliche Räumlichkeiten des AMIV und der darin enthaltenen, dem Verein gehörenden, Einrichtung und deren Zustand verantwortlich. Die Gestaltung und Zuordnung im Kulturraumes, Regeln für den Aufenthaltsraum und die Getränkeversorgung beanspruchen die meiste Zeit ihrer Tätigkeit als Vorstand. Es freut sie jeweils, wenn sie sieht, wie AMIVler denn Müll trennen und sich um Ordnung und Sauberkeit bemühen. Für sämtliche Anliegen, Anreize und Ideen hat sie stets ein offenes Ohr und freut sich auf eine Mail von euch. infrastruktur@amiv.ethz.ch',
},
};
export { boardTaskDescriptions };
......@@ -4,6 +4,7 @@
@import './infobox.less';
@import './errors.less';
@import './frontpage.less';
@import './board.less';
@import './commissions.less';
@import './studydocList.less';
@import './legalNotice.less';
......
@import './colors.less';
.board {
margin-top: 3em;
> div {
display: grid;
margin-bottom: 3em;
grid-gap: 2em;
grid-template-columns: 1fr 1fr;
grid-template-areas:
'title title'
'image description';
&:nth-child(even) {
grid-template-areas:
'title title'
'description image';
}
@media @mobile {
grid-template-columns: 1fr;
grid-template-areas:
'title'
'image'
'description' !important;
}
> h2 {
grid-area: title;
text-align: center;
margin: 0;
}
> div.image {
grid-area: image;
height: 0;
align-self: start;
}
> div.descriptions {
grid-area: description;
align-self: start;
}
}
p {
text-align: justify;
}
}
import m from 'mithril';
import marked from 'marked';
import escape from 'html-escape';
import { data, image as boardImage } from '../../content/amiv/data/board';
import { Tabs } from '../../components';
import { boardPortraits, boardImage } from '../../content/amiv/data/board_portraits';
import { boardTaskDescriptions } from '../../content/amiv/data/board_roles';
import { i18n, currentLanguage } from '../../models/language';
import { TranslationUnavailable } from '../errors';
class ImageGroup {
oninit(vnode) {
this._portraitNames = [];
this._portraitViews = [];
this._selectedTabIndex = 0;
vnode.attrs.group.portraits.forEach(portrait => {
this._portraitNames.push(portrait.name);
this._portraitViews.push(this.constructor._getPortraitView(portrait));
});
}
static _parseMarkdownText(text) {
// replace leading spaces when using multi-line strings
return marked(escape(text.trim().replace(/\n[^\S\n]+/g, '\n')));
}
static view(vnode) {
view(vnode) {
const { group } = vnode.attrs;
const roles = new Set(group.portraits.map(portrait => i18n(portrait.role)));
let image;
let tasks;
if (group.image) {
image = m('img', { src: `/${group.image}` });
image = m('div.image.ratio-3to2', m('img', { src: `/${group.image}` }));
} else {
image = m('div.no-image', i18n('no image'));
}
if (group.tasks && Object.keys(group.tasks).length > 0) {
tasks = [m('h3', i18n('Tasks'))];
return m('div', [
m('h2', Array.from(roles).join(' & ')),
image,
m('div.descriptions', [
m(Tabs, {
tabs: this._portraitNames.map(name => ({ label: name })),
className: 'themed-tabs',
activeSelected: true,
autofit: true,
element: 'tab',
selectedTab: this._selectedTabIndex,
onChange: data => {
this._selectedTabIndex = data.index;
},
}),
m('div', this._portraitViews[this._selectedTabIndex]),
]),
]);
}
// select translation in the following order:
// current language > english > first available language
if (group.tasks[currentLanguage()]) {
tasks.push(m.trust(ImageGroup._parseMarkdownText(group.tasks[currentLanguage()])));
} else {
let language;
static _getPortraitView(portrait) {
let description;
if (group.tasks.en) {
language = 'en';
} else {
[language] = Object.keys(group.tasks);
}
// select translation in the following order:
// current language > english > first available language
if (!portrait.description || Object.keys(portrait.description).length === 0) {
description = m('p', i18n('no description'));
} else if (portrait.description[currentLanguage()]) {
description = m.trust(ImageGroup._parseMarkdownText(portrait.description[currentLanguage()]));
} else {
let language;
tasks.push(m(TranslationUnavailable, { shown_language: language }));
tasks.push(m.trust(ImageGroup._parseMarkdownText(group.tasks[language])));
if (portrait.description.en) {
language = 'en';
} else {
[language] = Object.keys(portrait.description);
}
} else {
tasks = m('');
description = [
m(TranslationUnavailable, { shown_language: language }),
m.trust(ImageGroup._parseMarkdownText(portrait.description[language])),
];
}
return m('div', [
m('h2', Array.from(roles).join(' & ')),
image,
group.portraits.map(portrait => {
let description;
// select translation in the following order:
// current language > english > first available language
if (!portrait.description || Object.keys(portrait.description).length === 0) {
description = m('p', i18n('no description'));
} else if (portrait.description[currentLanguage()]) {
description = m.trust(
ImageGroup._parseMarkdownText(portrait.description[currentLanguage()])
);
} else {
let language;
if (portrait.description.en) {
language = 'en';
} else {
[language] = Object.keys(portrait.description);
}
description = [
m(TranslationUnavailable, { shown_language: language }),
m.trust(ImageGroup._parseMarkdownText(portrait.description[language])),
];
}
return [m('h3', portrait.name), description];
}),
tasks,
]);
return [m('div.description', description), ImageGroup._getTaskView(portrait.role)];
}
static _getTaskView(role) {
if (!boardTaskDescriptions[role]) return [];
const content = [m('h3', i18n('Tasks'))];
if (boardTaskDescriptions[role][currentLanguage()]) {
content.push(
m.trust(ImageGroup._parseMarkdownText(boardTaskDescriptions[role][currentLanguage()]))
);
} else {
let language;
if (boardTaskDescriptions[role].en) {
language = 'en';
} else {
[language] = Object.keys(boardTaskDescriptions[role]);
}
content.push(m(TranslationUnavailable, { shown_language: language }));
content.push(m.trust(ImageGroup._parseMarkdownText(boardTaskDescriptions[role][language])));
}
return content;
}
}
......@@ -87,15 +112,15 @@ export default class Board {
let image;
if (boardImage) {
image = m('img', { src: `/${boardImage}` });
image = m('div.image.ratio-3to2', m('img', { src: `/${boardImage}` }));
} else {
image = m('div.no-image', i18n('no image'));
image = m('');
}
return m('div', [
m('h1', i18n('Vorstand')),
m('h1.centered', i18n('Board')),
image,
data.map(group => m(ImageGroup, { group })),
m('div.board', boardPortraits.map(group => m(ImageGroup, { group }))),
]);
}
}
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