diff --git a/website/src/generic-components/image-carousel.js b/website/src/generic-components/image-carousel.js index 2910a55607e810a9ac1410e93def9adaadcf26b1..cdb8c5fe32beeae6427edc0b0e230e86c16bb3fd 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 a4a12a2e05f570b754b8b29f70641d736bcbf8e6..b33fef02ef16b49785400b51bfc5d5b481d346f8 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;