Преглед изворни кода

Fix background for overlayed mode

JC Brand пре 3 година
родитељ
комит
6c3a3dd1d3

+ 4 - 3
dev.html

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

Разлика између датотеке није приказан због своје велике величине
+ 0 - 127
package-lock.json


+ 0 - 1
src/plugins/fullscreen/index.js

@@ -10,7 +10,6 @@ import "@converse/headless/plugins/muc/index.js";
 import { api, converse } from "@converse/headless/core";
 import { api, converse } from "@converse/headless/core";
 
 
 import './styles/fullscreen.scss';
 import './styles/fullscreen.scss';
-import './styles/background.scss';
 
 
 
 
 converse.plugins.add('converse-fullscreen', {
 converse.plugins.add('converse-fullscreen', {

+ 0 - 74
src/plugins/fullscreen/styles/background.scss

@@ -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;
-        }
-    }
-}

+ 1 - 1
src/shared/styles/_variables.scss

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

+ 117 - 0
src/shared/styles/background.scss

@@ -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 - 0
src/shared/styles/index.scss

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

+ 2 - 0
src/templates/background_logo.js

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

Неке датотеке нису приказане због велике количине промена