From 90ab412628e3ff1d5da394a844583663225f4aae Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 19 Mar 2021 12:05:43 +0100 Subject: [PATCH] Move fullscreen styles into relevant plugin --- src/converse.js | 2 +- .../{fullscreen.js => fullscreen/index.js} | 9 +- src/plugins/fullscreen/styles/background.scss | 74 +++++++++++++++++ src/plugins/fullscreen/styles/fullscreen.scss | 4 + src/shared/styles/_core.scss | 82 +------------------ 5 files changed, 89 insertions(+), 82 deletions(-) rename src/plugins/{fullscreen.js => fullscreen/index.js} (78%) create mode 100644 src/plugins/fullscreen/styles/background.scss create mode 100644 src/plugins/fullscreen/styles/fullscreen.scss diff --git a/src/converse.js b/src/converse.js index 45c8a851e..e0e1a8b8d 100644 --- a/src/converse.js +++ b/src/converse.js @@ -19,7 +19,7 @@ import "./plugins/bookmark-views/index.js"; // Views for XEP-0048 Bookmark import "./plugins/chatview/index.js"; // Renders standalone chat boxes for single user chat import "./plugins/controlbox/index.js"; // The control box import "./plugins/dragresize/index.js"; // Allows chat boxes to be resized by dragging them -import "./plugins/fullscreen.js"; +import "./plugins/fullscreen/index.js"; import "./plugins/headlines-view/index.js"; import "./plugins/mam-views.js"; import "./plugins/minimize/index.js"; // Allows chat boxes to be minimized diff --git a/src/plugins/fullscreen.js b/src/plugins/fullscreen/index.js similarity index 78% rename from src/plugins/fullscreen.js rename to src/plugins/fullscreen/index.js index b1a2edacf..fd67722b5 100644 --- a/src/plugins/fullscreen.js +++ b/src/plugins/fullscreen/index.js @@ -3,12 +3,15 @@ * @license Mozilla Public License (MPLv2) * @copyright 2020, the Converse.js contributors */ -import "./chatview/index.js"; -import "./controlbox/index.js"; -import "./singleton.js"; +import "plugins/chatview/index.js"; +import "plugins/controlbox/index.js"; +import "plugins/singleton.js"; import "@converse/headless/plugins/muc/index.js"; import { api, converse } from "@converse/headless/core"; +import './styles/fullscreen.scss'; +import './styles/background.scss'; + converse.plugins.add('converse-fullscreen', { diff --git a/src/plugins/fullscreen/styles/background.scss b/src/plugins/fullscreen/styles/background.scss new file mode 100644 index 000000000..fd8829d6d --- /dev/null +++ b/src/plugins/fullscreen/styles/background.scss @@ -0,0 +1,74 @@ +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; + +#conversejs-bg { + .subdued { + opacity: 0.35; + } + + .converse-brand { + display: flex; + justify-content: space-between; + margin-top: 15vh; + animation-name: fadein; + animation-fill-mode: forwards; + animation-duration: 5s; + animation-timing-function: ease; + } + + .converse-brand__padding { + @include make-col-ready(); + @include media-breakpoint-up(md) { + @include make-col(4); + } + @include media-breakpoint-up(lg) { + @include make-col(3); + } + @include media-breakpoint-up(xl) { + @include make-col(2); + } + padding: 0; + } + + .converse-brand__heading { + @include make-col-ready(); + @include media-breakpoint-up(md) { + font-size: 4em; + @include make-col(8); + } + @include media-breakpoint-up(lg) { + font-size: 5em; + @include make-col(9); + } + @include media-breakpoint-up(xl) { + font-size: 6em; + @include make-col(10); + } + padding: 0; + display: flex; + justify-content: center; + margin: auto; + svg { + margin-top: 0.3em; + } + } + + .converse-brand__text { + color: #ffffff; + font-family: var(--branding-font); + font-weight: normal; + text-align: center; + font-size: 140%; + margin-left: 0.2em; + .byline { + margin: 0; + font-family: var(--heading-font); + font-size: 0.3em; + opacity: 0.55; + margin-bottom: 2em; + margin-left: -2.7em; + word-spacing: 5px; + } + } +} diff --git a/src/plugins/fullscreen/styles/fullscreen.scss b/src/plugins/fullscreen/styles/fullscreen.scss new file mode 100644 index 000000000..a3ac3f9be --- /dev/null +++ b/src/plugins/fullscreen/styles/fullscreen.scss @@ -0,0 +1,4 @@ +body.converse-fullscreen { + margin: 0; + background-color: var(--global-background-color); +} diff --git a/src/shared/styles/_core.scss b/src/shared/styles/_core.scss index fb5d226b1..184b29aa6 100644 --- a/src/shared/styles/_core.scss +++ b/src/shared/styles/_core.scss @@ -1,81 +1,3 @@ -body.converse-fullscreen { - margin: 0; - background-color: var(--global-background-color); -} - -#conversejs-bg { - .converse-brand { - display: flex; - justify-content: space-between; - margin-top: 15vh; - animation-name: fadein; - animation-fill-mode: forwards; - animation-duration: 5s; - animation-timing-function: ease; - } - - .converse-brand__padding { - @include make-col-ready(); - @include media-breakpoint-up(md) { - @include make-col(4); - } - @include media-breakpoint-up(lg) { - @include make-col(3); - } - @include media-breakpoint-up(xl) { - @include make-col(2); - } - padding: 0; - } - - .converse-brand__heading { - @include make-col-ready(); - @include media-breakpoint-up(md) { - font-size: 4em; - @include make-col(8); - } - @include media-breakpoint-up(lg) { - font-size: 5em; - @include make-col(9); - } - @include media-breakpoint-up(xl) { - font-size: 6em; - @include make-col(10); - } - padding: 0; - display: flex; - justify-content: center; - margin: auto; - svg { - margin-top: 0.3em; - } - } - - .converse-brand__text { - color: #ffffff; - font-family: var(--branding-font); - font-weight: normal; - text-align: center; - font-size: 140%; - margin-left: 0.2em; - .byline { - margin: 0; - font-family: var(--heading-font); - font-size: 0.3em; - opacity: 0.55; - margin-bottom: 2em; - margin-left: -2.7em; - word-spacing: 5px; - } - } -} - -#conversejs-bg, #conversejs { - .subdued { - opacity: 0.35; - } -} - #conversejs { bottom: 0; height: 100%; @@ -92,6 +14,10 @@ body.converse-fullscreen { background-color: #EEE !important; } + .subdued { + opacity: 0.35; + } + .fit-content { width: fit-content !important; max-width: fit-content !important;