From 536c51d8c66cf3e54731681a308ec22b5a14f1b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20D=C3=B6rge?= <rdoerge@student.ethz.ch>
Date: Sun, 14 Oct 2018 00:56:03 +0200
Subject: [PATCH] Added a feature to the images of the imagelist to make them
bigger when clicked on.
---
src/events/viewEvent.js | 55 ++++++++++++++++++++++++++++++++++++++++-
1 file changed, 54 insertions(+), 1 deletion(-)
diff --git a/src/events/viewEvent.js b/src/events/viewEvent.js
index c78b654..15bfd0d 100644
--- a/src/events/viewEvent.js
+++ b/src/events/viewEvent.js
@@ -5,6 +5,7 @@ import {
ToolbarTitle,
Card,
TextField,
+ Dialog,
} from 'polythene-mithril';
import { styler } from 'polythene-core-css';
import { DropdownCard, DatalistController } from 'amiv-web-ui-components';
@@ -280,6 +281,21 @@ export default class viewEvent extends ItemView {
this.data.img_poster && m('img', {
src: `${apiUrl}${this.data.img_poster.file}`,
width: '100%',
+ onclick: () => {
+ Dialog.show({
+ backdrop: true,
+ fullBleed: true,
+ style: {
+ width: '100vw',
+ 'margin-left': '-37vw',
+ 'text-align': 'center',
+ },
+ body: [m('div', { style: { height: '70vh', overflow: 'hidden' } }, m('img', {
+ src: `${apiUrl}${this.data.img_poster.file}`,
+ height: '100%',
+ }))],
+ });
+ },
})]),
m('div', {
style: {
@@ -292,12 +308,49 @@ export default class viewEvent extends ItemView {
this.data.img_infoscreen && m('img', {
src: `${apiUrl}${this.data.img_infoscreen.file}`,
width: '100%',
- })]),
+ onclick: () => {
+ Dialog.show({
+ backdrop: true,
+ fullBleed: true,
+ style: {
+ width: '100vw',
+ 'margin-left': '-37vw',
+ 'text-align': 'center',
+ },
+ body: [m('div', {
+ style: { height: '70vh', overflow: 'hidden' },
+ }, m('img', {
+ src: `${apiUrl}${this.data.img_infoscreen.file}`,
+ height: '100%',
+ }))],
+ });
+ },
+ }),
+ ]),
m('div', [
this.data.img_banner && m('div', 'Banner'),
this.data.img_banner && m('img', {
src: `${apiUrl}${this.data.img_banner.file}`,
width: '100%',
+ onclick: () => {
+ Dialog.show({
+ body: [m('div', {
+ style: { height: '70vh', overflow: 'hidden' },
+ }, m('img', {
+ src: `${apiUrl}${this.data.img_banner.file}`,
+ 'max-height': '100%',
+ 'max-width': '100%',
+ }))],
+ backdrop: true,
+ fullBleed: true,
+ slef_alignment: 'center',
+ style: {
+ width: '100vw',
+ 'margin-left': '-37vw',
+ 'text-align': 'center',
+ },
+ });
+ },
})]),
]),
]),
--
GitLab