From f41173dd73faf033bf3f17396b08f6eb0d8c2351 Mon Sep 17 00:00:00 2001 From: Pierre Jarriges <pierre.jarriges@tutanota.com> Date: Fri, 17 Jun 2022 10:54:12 +0200 Subject: [PATCH] images-carousel toggle fullscreen --- .../src/generic-components/image-carousel.js | 24 ++++++++- website/src/style.scss | 54 +++++++++++++++++-- 2 files changed, 73 insertions(+), 5 deletions(-) diff --git a/website/src/generic-components/image-carousel.js b/website/src/generic-components/image-carousel.js index 2910a55..cdb8c5f 100644 --- a/website/src/generic-components/image-carousel.js +++ b/website/src/generic-components/image-carousel.js @@ -1,11 +1,12 @@ "use strict"; -const translator = require("ks-cheap-translator") + class ImageCarousel { constructor(props) { this.props = props; this.id = this.props.images.join("").replace(/[\s\./]/g, ""); this.state = { showImageIndex: 0, + fullscreen: false, }; this.RUN_INTERVAL = 5000; this.props.images.length > 1 && this.run(); @@ -39,9 +40,11 @@ class ImageCarousel { obj2htm.subRender(this.render_bullets(), document.getElementById(this.id + "-bullets"), { mode: "replace", }); + obj2htm.subRender(this.render_fullscreen_button(), document.getElementById(this.id + "-fullscreen-btn"), { + mode: "replace", + }); } - render_image() { return { tag: "img", @@ -68,6 +71,22 @@ class ImageCarousel { } : { tag: "span" }; } + render_fullscreen_button() { + return { + tag: "button", + id: this.id + "-fullscreen-btn", + class: `toggle-fullscreen-button ${this.state.fullscreen ? "to-small" : "to-full"}`, + contents: this.state.fullscreen ? "â–¢" : "â›¶", + onclick: e => { + e.stopImmediatePropagation(); + this.state.fullscreen = !this.state.fullscreen; + document.getElementById(this.id).classList.toggle("fullscreen"); + document.body.style.overflow = this.state.fullscreen ? "hidden" : "initial"; + this.refresh(); + }, + } + } + render() { return { tag: "div", @@ -76,6 +95,7 @@ class ImageCarousel { contents: [ this.render_image(), this.render_bullets(), + this.render_fullscreen_button(), ], }; } diff --git a/website/src/style.scss b/website/src/style.scss index a4a12a2..b33fef0 100644 --- a/website/src/style.scss +++ b/website/src/style.scss @@ -107,12 +107,12 @@ main { bottom: 0; padding: 20px; display: flex; - gap: 10px; + gap: 20px; .bullet { cursor: pointer; - width: 8px; - height: 8px; + width: 12px; + height: 12px; background-color: $medium_grey; border-radius: 100%; box-shadow: 0 0 3px black; @@ -123,6 +123,54 @@ main { } } + .toggle-fullscreen-button { + position: absolute; + right: 15px; + top: 15px; + color: $light_1; + font-weight: bold; + background: none; + border: none; + cursor: pointer; + transition: transform 0.1s; + + &.to-full { + font-size: 20px; + + @media screen and (max-width:1000px) { + display: none; + } + } + + &.to-small { + font-size: 30px; + } + + &:hover { + color: white; + + &.to-small { + transform: scale(0.7); + } + + &.to-full { + transform: scale(1.5); + + } + } + + + } + + &.fullscreen { + position: fixed; + z-index: 20; + top: 0; + right: 0; + left: 0; + height: 100vh !important; + } + @media screen and (max-width: $screen_l) { .carousel-bullets { gap: 30px; -- GitLab