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

Verified Commit 5ad975c1 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add april fool

parent c9b7ff18
......@@ -15,7 +15,7 @@ export default class EventCard {
* ```
*/
static view({ attrs: { item } }) {
static view({ attrs: { item, style } }) {
let url;
let cardContent;
......@@ -38,6 +38,7 @@ export default class EventCard {
}
return m(Card, {
style,
url,
content: m('div.image.ratio-paper-a-vertical', cardContent),
});
......
......@@ -9,6 +9,7 @@ import Button from './Button';
import Checkbox from './Checkbox';
import Select from './Select';
import TextField from './TextField';
import { isLsdTripEnabled, getTadaAnimation } from '../models/lsd';
import './FilterView.less';
/**
......@@ -160,6 +161,7 @@ export default class FilterViewComponent {
});
return m(Search, {
style: isLsdTripEnabled() ? getTadaAnimation() : null,
textfield: {
label: field.label || '',
value: this.values[field.key],
......@@ -184,6 +186,7 @@ export default class FilterViewComponent {
this.values[field.key] = this.values[field.key] || field.default || '';
return m(TextField, {
style: isLsdTripEnabled() ? getTadaAnimation() : null,
label: field.label || '',
value: this.values[field.key],
onChange: state => {
......@@ -209,7 +212,7 @@ export default class FilterViewComponent {
field.values.map(item => items.push(this._createCheckbox(field.key, item.label, item.value)));
}
return m('div.check', items);
return m('div.check', { style: isLsdTripEnabled() ? getTadaAnimation() : null }, items);
}
_createCheckbox(key, label, value) {
......@@ -231,7 +234,7 @@ export default class FilterViewComponent {
}
_createRadioGroup(field) {
return m('div.radio', [
return m('div.radio', { style: isLsdTripEnabled() ? getTadaAnimation() : null }, [
field.label ? m('h4', field.label) : m(''),
m(RadioGroup, {
...field,
......@@ -280,7 +283,11 @@ export default class FilterViewComponent {
this.notify();
};
return m(Select, options);
return m(
'div',
{ style: `width:100%;display:grid;${isLsdTripEnabled() ? getTadaAnimation() : ''}` },
m(Select, options)
);
}
_createButton(field) {
......@@ -298,7 +305,11 @@ export default class FilterViewComponent {
options.className = field.className;
}
return m(Button, options);
return m(
'div',
{ style: `width:100%;display:grid;${isLsdTripEnabled() ? getTadaAnimation() : ''}` },
m(Button, options)
);
}
// eslint-disable-next-line class-methods-use-this
......
......@@ -31,6 +31,8 @@ export default {
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="Sharp"><path fill="#000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41z"/></g></svg>',
checkboxMarked:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" /></svg>',
stop:
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M18,18H6V6H18V18Z" /></svg>',
// File Types
file:
......
......@@ -4,6 +4,8 @@ export default {
de: 'Deutsch',
en: 'Englisch',
},
greetingCodingWeekend:
'Grüsse vom Coding Weekend! Klicke rechts auf «Stop» um zur Normalansicht zurückzukehren.',
loading: 'Laden...',
emptyList: 'Es sind keine Einträge zum Anzeigen vorhanden.',
close: 'schliessen',
......
......@@ -4,6 +4,8 @@ export default {
de: 'German',
en: 'English',
},
greetingCodingWeekend:
'Greetings from the Coding Weekend! Click on the «Stop» button on the right to return to the default view.',
loading: 'Loading...',
emptyList: 'There are no items to show.',
close: 'close',
......
let isEnabled = false;
export function isLsdTripEnabled() {
return isEnabled;
}
export function setLsdTripState(state) {
isEnabled = state;
}
export function getTadaAnimation() {
return `animation: tada 1s linear ${Math.floor(Math.random() * 500)}ms infinite !important`;
}
export function getTada2Animation() {
return `animation: tada2 1s linear ${Math.floor(Math.random() * 500)}ms infinite !important`;
}
......@@ -22,6 +22,7 @@
@import './filterView.less';
@import './jobofferList.less';
@import './jobofferDetails.less';
@import './lsd.less';
* {
box-sizing: border-box;
......
@import './colors.less';
.report-issue {
width: 100%;
background-color: @color-grey;
text-align: center;
padding: 1em;
......
@keyframes lsdtrip {
0% {
background-color: hsl(201, 100%, 39%);
}
10% {
background-color: hsl(237, 100%, 39%);
}
20% {
background-color: hsl(273, 100%, 39%);
}
30% {
background-color: hsl(309, 100%, 39%);
}
40% {
background-color: hsl(345, 100%, 39%);
}
50% {
background-color: hsl(21, 100%, 39%);
}
60% {
background-color: hsl(57, 100%, 39%);
}
70% {
background-color: hsl(93, 100%, 39%);
}
80% {
background-color: hsl(129, 100%, 39%);
}
90% {
background-color: hsl(165, 100%, 39%);
}
100% {
background-color: hsl(201, 100%, 39%);
}
}
/* Based on tada animation from Animate.css https://github.com/daneden/animate.css */
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,20% {
transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -4deg);
}
30%,50%,70%,90% {
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg);
}
40%,60%,80% {
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,20% {
transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -4deg);
}
30%,50%,70%,90% {
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg);
}
40%,60%,80% {
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes tada2 {
from {
transform: scale3d(1, 1, 1);
}
10%,20% {
transform: translateX(-1%) scale3d(.95, .95, .95);
}
30%,50%,70%,90% {
transform: translateX(3%) scale3d(1, 1, 1);
}
40%,60%,80% {
transform: translateX(-2%) scale3d(.95, .95, .95);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes floatText {
from {
transform: translateX(100%);
}
to {
transform: translateX(-200%);
}
}
.greeting {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 1em;
text-align: center;
transform: translateX(100%);
&.animation1 {
animation: floatText 30s linear 0s infinite;
}
&.animation2 {
animation: floatText 30s linear 10s infinite;
}
&.animation3 {
animation: floatText 30s linear 20s infinite;
}
}
......@@ -6,6 +6,7 @@ import { boardPortraits, boardImage } from '../../content/amiv/data/board_portra
import { boardTaskDescriptions } from '../../content/amiv/data/board_roles';
import { i18n, currentLanguage } from '../../models/language';
import { TranslationUnavailable } from '../errors';
import { isLsdTripEnabled, getTadaAnimation } from '../../models/lsd';
class ImageGroup {
oninit(vnode) {
......@@ -33,6 +34,7 @@ class ImageGroup {
if (group.image) {
image = m(
'div.image.ratio-3to2',
{ style: isLsdTripEnabled() ? getTadaAnimation() : null },
m('img', { src: `/${group.image}`, alt: this._portraitNames.join(' & ') })
);
} else {
......@@ -118,6 +120,7 @@ export default class Board {
if (boardImage) {
image = m(
'div.image.ratio-3to2',
{ style: isLsdTripEnabled() ? getTadaAnimation() : null },
m('img', { src: `/${boardImage}`, alt: i18n('board.title') })
);
} else {
......
......@@ -9,6 +9,7 @@ import { data as data_ressorts } from '../../content/amiv/data/ressorts';
import { data as data_commissions } from '../../content/amiv/data/commissions';
import { i18n, currentLanguage } from '../../models/language';
import { TranslationUnavailable } from '../errors';
import { isLsdTripEnabled, getTadaAnimation, getTada2Animation } from '../../models/lsd';
class Team {
static _parseMarkdownText(text) {
......@@ -99,6 +100,7 @@ class Team {
return m(Card, {
className: 'team',
style: isLsdTripEnabled() ? getTadaAnimation() : null,
content: [
{
media: {
......@@ -128,11 +130,19 @@ export default class Teams {
static view() {
return m('div', [
m('div', [
m('h1.centered', i18n('teams.ressorts')),
m(
'h1.centered',
{ style: isLsdTripEnabled() ? getTada2Animation() : null },
i18n('teams.ressorts')
),
m('div.teams', data_ressorts.map(ressort => m(Team, { team: ressort }))),
]),
m('div', [
m('h1.centered', i18n('teams.commissions')),
m(
'h1.centered',
{ style: isLsdTripEnabled() ? getTada2Animation() : null },
i18n('teams.commissions')
),
m('div.teams', data_commissions.map(commission => m(Team, { team: commission }))),
]),
]);
......
......@@ -81,7 +81,7 @@ export class TranslationUnavailable {
* @return {Infobox}
*/
export class Infobox {
static view({ attrs: { icon, label } }) {
return m('div', { class: 'infobox' }, [icon, m('span', label)]);
static view({ attrs: { icon, label, style } }) {
return m('div', { class: 'infobox', style }, [icon, m('span', label)]);
}
}
......@@ -6,6 +6,7 @@ import logos from '../../images/logos';
import { i18n, currentLocale } from '../../models/language';
import { EventController } from '../../models/events';
import { FilteredListPage, FilteredListDataStore } from '../filteredListPage';
import { isLsdTripEnabled, getTada2Animation } from '../../models/lsd';
const controller = new EventController({}, true);
const dataStore = new FilteredListDataStore();
......@@ -190,41 +191,45 @@ export default class EventList extends FilteredListPage {
},
];
return m(ExpansionPanel, {
id: this.getItemElementId(event._id),
expanded: event._id === selectedId,
separated: true,
duration: animationDuration,
onChange: expanded => {
this.onChange(event._id, expanded, animationDuration);
},
header: () =>
m('div.event-header', [
m('div.image.ratio-1to1', m('img', { src: imageurl, alt: event.getTitle() })),
m('div.event-content', [
m('h2.title', event.getTitle()),
m('div.catchphrase', event.getCatchphrase()),
m('div.date', this.constructor._renderEventTime(event.time_start, event.time_end)),
m('div.properties', properties.map(item => this.constructor._renderProperty(item))),
return m(
'div',
{ style: isLsdTripEnabled() ? getTada2Animation() : null },
m(ExpansionPanel, {
id: this.getItemElementId(event._id),
expanded: event._id === selectedId,
separated: true,
duration: animationDuration,
onChange: expanded => {
this.onChange(event._id, expanded, animationDuration);
},
header: () =>
m('div.event-header', [
m('div.image.ratio-1to1', m('img', { src: imageurl, alt: event.getTitle() })),
m('div.event-content', [
m('h2.title', event.getTitle()),
m('div.catchphrase', event.getCatchphrase()),
m('div.date', this.constructor._renderEventTime(event.time_start, event.time_end)),
m('div.properties', properties.map(item => this.constructor._renderProperty(item))),
]),
]),
]),
content: ({ expanded }) => {
if (expanded) {
if (eventDetailsModule) {
return m(eventDetailsModule.default, { event });
}
import(/* webpackInclude: /\.js$/ */ /* webpackChunkName: "event" */ './eventDetails').then(
loadedModule => {
eventDetailsModule = loadedModule;
m.redraw();
content: ({ expanded }) => {
if (expanded) {
if (eventDetailsModule) {
return m(eventDetailsModule.default, { event });
}
);
return m('.event-loading', m(Spinner, { show: true, size: '48px' }));
}
return m('');
},
});
import(/* webpackInclude: /\.js$/ */ /* webpackChunkName: "event" */ './eventDetails').then(
loadedModule => {
eventDetailsModule = loadedModule;
m.redraw();
}
);
return m('.event-loading', m(Spinner, { show: true, size: '48px' }));
}
return m('');
},
})
);
}
static _renderProperty({ name = null, value, visible = false }) {
......
......@@ -10,6 +10,7 @@ import { error } from '../models/log';
import { i18n, currentLanguage } from '../models/language';
import FilterView from '../components/FilterView';
import icons from '../images/icons';
import { isLsdTripEnabled, getTadaAnimation, getTada2Animation } from '../models/lsd';
const LIST_LOADING_DELAY = 150;
const LIST_LOADING = 'loading';
......@@ -525,6 +526,7 @@ export class FilteredListPage {
m(
Shadow,
{
style: isLsdTripEnabled() ? getTada2Animation() : null,
className: 'list_header',
shadowDepth: 1,
},
......@@ -571,6 +573,7 @@ export class FilteredListPage {
}
return m(
'div.load-more-items',
{ style: isLsdTripEnabled() ? getTadaAnimation() : null },
m(Button, {
border: true,
extraWide: true,
......
......@@ -3,6 +3,7 @@ import { Icon } from 'polythene-mithril';
import { currentLanguage, i18n } from '../models/language';
import logos from '../images/logos';
import icons from '../images/icons';
import { isLsdTripEnabled, getTadaAnimation } from '../models/lsd';
const renderVseth = coord => {
const style = `
......@@ -18,7 +19,11 @@ const renderVseth = coord => {
href: `https://vseth.ethz.ch/`,
style,
},
m('img', { src: logos.vseth, alt: 'VSETH' })
m('img', {
style: isLsdTripEnabled() ? 'animation: lsdtrip 2s linear infinite;' : null,
src: logos.vseth,
alt: 'VSETH',
})
);
};
......@@ -37,26 +42,48 @@ export default class Footer {
view() {
return [
m('div.report-issue', [
m('span', i18n('footer.issueSpotted')),
m(
'a',
{
href: 'https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug',
target: '_blank',
},
[
i18n('footer.issueReport'),
m(Icon, {
class: 'external-link',
svg: { content: m.trust(icons.link) },
size: 'small',
alt: i18n('externalLink'),
}),
]
),
...(isLsdTripEnabled()
? [
m(
'div',
{
style: {
width: '100%',
height: '1.3em',
overflow: 'hidden',
position: 'relative',
},
},
[
m('span.greeting.animation1', `++++ ${i18n('greetingCodingWeekend')} ++++`),
m('span.greeting.animation2', `++++ ${i18n('greetingCodingWeekend')} ++++`),
m('span.greeting.animation3', `++++ ${i18n('greetingCodingWeekend')} ++++`),
]
),
]
: [
m('span', i18n('footer.issueSpotted')),
m(
'a',
{
href: 'https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug',
target: '_blank',
},
[
i18n('footer.issueReport'),
m(Icon, {
class: 'external-link',
svg: { content: m.trust(icons.link) },
size: 'small',
alt: i18n('externalLink'),
}),
]
),
]),
]),
m(
'footer',
{ style: isLsdTripEnabled() ? 'animation: lsdtrip 2s linear infinite;' : null },
m('div', [
m('div.copyright', [
m('span', `© 1893 - ${new Date().getFullYear()} AMIV an der ETH`),
......@@ -73,7 +100,10 @@ export default class Footer {
'div.social-media-logos',
m(
'a',
{ href: `https://www.facebook.com/AMIV.ETHZ/` },
{
style: isLsdTripEnabled() ? getTadaAnimation() : null,
href: `https://www.facebook.com/AMIV.ETHZ/`,
},
m(Icon, {
size: 'medium',
svg: { content: m.trust(icons.facebook) },
......@@ -82,7 +112,10 @@ export default class Footer {
),
m(
'a',
{ href: `https://www.instagram.com/amiv_eth/` },
{
style: isLsdTripEnabled() ? getTadaAnimation() : null,
href: `https://www.instagram.com/amiv_eth/`,
},
m(Icon, {
size: 'medium',
svg: { content: m.trust(icons.instagram) },
......@@ -91,19 +124,30 @@ export default class Footer {
),
m(
'a',
{ href: `https://twitter.com/amiv_ethz` },
{
style: isLsdTripEnabled() ? getTadaAnimation() : null,
href: `https://twitter.com/amiv_ethz`,
},
m(Icon, { size: 'medium', svg: { content: m.trust(icons.twitter) }, alt: 'Twitter' })
)
),
m('div.institution-logos', [
m(
'a',
{ href: `https://www.ethz.ch/` },
m('img', { src: logos.eth, alt: 'ETH Zürich' })
{
style: isLsdTripEnabled() ? getTadaAnimation() : null,
href: `https://www.ethz.ch/`,
},
m('img', {
style: isLsdTripEnabled() ? 'animation: lsdtrip 2s linear infinite;' : null,
src: logos.eth,
alt: 'ETH Zürich',
})
),
m(
'div',
{
style: isLsdTripEnabled() ? getTadaAnimation() : null,
onclick: () => this.handleClick(),