Chapril/xmpp.chapril.org-conversejs
Chapril
/
xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix background for overlayed mode

This commit is contained in:
JC Brand 2021-08-28 23:41:21 +02:00
parent fc51257ee1
commit 6c3a3dd1d3
8 changed files with 127 additions and 3558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dev.html
View File

@ -12,10 +12,11 @@
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<script src="dist/website.css"></script>
<script src="dist/converse.js"></script>
</head>
<body class="reset">
<body class="reset" style="background-color: #211018;">
<div id="conversejs-bg"></div>
<script>
@ -36,8 +37,8 @@
muc_show_logs_before_join: true,
notify_all_room_messages: ['discuss@conference.conversejs.org'],
persistent_store: 'IndexedDB',
theme: 'concord',
view_mode: 'fullscreen',
// theme: 'concord',
// view_mode: 'fullscreen',
websocket_url: 'wss://conversejs.org/xmpp-websocket',
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
whitelisted_plugins: ['converse-debug'],

3481
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
src/plugins/fullscreen/index.js
View File

@ -10,7 +10,6 @@ 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', {

74
src/plugins/fullscreen/styles/background.scss
View File

@ -1,74 +0,0 @@
@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;
}
}
}

2
src/shared/styles/_variables.scss
View File

@ -1,7 +1,7 @@
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
.conversejs, .conversejs-bg, body.converse-fullscreen {
.conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
--subdued-color: #A8ABA1;
--green: #3AA569;

117
src/shared/styles/background.scss Normal file
View File

@ -0,0 +1,117 @@
@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__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;
}
}
}
.converse-fullscreen {
#conversejs-bg {
.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-overlayed {
#conversejs-bg {
.converse-brand__padding {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(2);
}
@include media-breakpoint-up(lg) {
@include make-col(1);
}
@include media-breakpoint-up(xl) {
@include make-col(1);
}
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(10);
}
@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;
}
}
}
}

1
src/shared/styles/index.scss
View File

@ -34,3 +34,4 @@
@import "forms";
@import "lists";
@import "messages";
@import "background";

2
src/templates/background_logo.js
View File

@ -1,4 +1,5 @@
import { html } from "lit";
import { api } from '@converse/headless/core.js';
export default () => html`
@ -46,4 +47,5 @@ export default () => html`
<p class="byline">messaging freedom</p>
</span>
</div>
${ api.settings.get('view_mode') === 'overlayed' ? html`<div class="converse-brand__padding"></div>` : '' }
</div>`;