Pārlūkot izejas kodu

Fix chatbox width for narrower viewports

JC Brand 7 gadi atpakaļ
vecāks
revīzija
799b53c098
5 mainītis faili ar 43 papildinājumiem un 46 dzēšanām
  1. 10 12
      css/converse.css
  2. 14 16
      css/inverse.css
  3. 18 16
      sass/_chatbox.scss
  4. 0 1
      sass/_controlbox.scss
  5. 1 1
      sass/inverse/_chatbox.scss

+ 10 - 12
css/converse.css

@@ -1243,18 +1243,17 @@ body .brand-heading {
 @media screen and (max-width: 767px) {
 @media screen and (max-width: 767px) {
   #conversejs #login-dialog .pure-form.converse-form {
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
     padding: 3em 2em 3em; }
-
-  > .chatbox {
+  #conversejs > .chatbox {
     width: calc(100% - 50px); }
     width: calc(100% - 50px); }
-
-  .chatbox .chat-body .chat-message .chat-msg-author {
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
     white-space: normal; }
     white-space: normal; }
-  .chatbox .box-flyout {
-    left: 50px;
-    bottom: 0;
-    width: calc(100% - 50px);
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .chatbox .row {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #converse-embedded-chat .chat-head,
 #converse-embedded-chat .chat-head,
 #conversejs:not(.fullscreen) .chat-head {
 #conversejs:not(.fullscreen) .chat-head {
   border-top-left-radius: 4px;
   border-top-left-radius: 4px;
@@ -1681,8 +1680,7 @@ body .brand-heading {
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 50px;
     left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
     #conversejs #controlbox #users.controlbox-pane {
       height: 100vh; }
       height: 100vh; }
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {

+ 14 - 16
css/inverse.css

@@ -1317,18 +1317,17 @@ body {
 @media screen and (max-width: 767px) {
 @media screen and (max-width: 767px) {
   #conversejs #login-dialog .pure-form.converse-form {
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
     padding: 3em 2em 3em; }
-
-  > .chatbox {
+  #conversejs > .chatbox {
     width: calc(100% - 50px); }
     width: calc(100% - 50px); }
-
-  .chatbox .chat-body .chat-message .chat-msg-author {
+  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
     white-space: normal; }
     white-space: normal; }
-  .chatbox .box-flyout {
-    left: 50px;
-    bottom: 0;
-    width: calc(100% - 50px);
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .chatbox .row {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #conversejs.fullscreen .chatbox-btn {
 #conversejs.fullscreen .chatbox-btn {
   font-size: 18px;
   font-size: 18px;
   margin: 0 0.3em; }
   margin: 0 0.3em; }
@@ -1377,13 +1376,13 @@ body {
   #conversejs.fullscreen .chatbox .chat-title {
   #conversejs.fullscreen .chatbox .chat-title {
     font-size: 26px;
     font-size: 26px;
     line-height: 26px; }
     line-height: 26px; }
-  #conversejs.fullscreen .chatbox form.sendXMPPMessage ul {
+  #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
     width: 100%; }
     width: 100%; }
-  #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley {
+  #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley {
     padding-left: 0.5em; }
     padding-left: 0.5em; }
-    #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
+    #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
       margin-right: 5em; }
       margin-right: 5em; }
-    #conversejs.fullscreen .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
+    #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
       padding-left: 10px;
       padding-left: 10px;
       padding-right: 10px; }
       padding-right: 10px; }
 
 
@@ -1773,8 +1772,7 @@ body {
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 50px;
     left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
     #conversejs #controlbox #users.controlbox-pane {
       height: 100vh; }
       height: 100vh; }
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {
   #conversejs.sidebar-open > .chatbox:not(#controlbox) {

+ 18 - 16
sass/_chatbox.scss

@@ -448,25 +448,27 @@
                 padding: 3em 2em 3em;
                 padding: 3em 2em 3em;
             }
             }
         }
         }
-    }
+        > .chatbox {
+            width: calc(100% - 50px);
+        }
+        .chatbox {
+            .chat-body {
+                .chat-message {
+                    .chat-msg-author {
+                        white-space: normal;
+                    }
+                }
+            }
+            .row {
+                width: calc(100% - 50px);
 
 
-    > .chatbox {
-        width: calc(100% - 50px);
-    }
-    .chatbox {
-        .chat-body {
-            .chat-message {
-                .chat-msg-author {
-                    white-space: normal;
+                .box-flyout {
+                    left: 50px;
+                    bottom: 0;
+                    height: 100vh;
+                    box-shadow: none;
                 }
                 }
             }
             }
         }
         }
-        .box-flyout {
-            left: 50px;
-            bottom: 0;
-            width: calc(100% - 50px);
-            height: 100vh;
-            box-shadow: none;
-        }
     }
     }
 }
 }

+ 0 - 1
sass/_controlbox.scss

@@ -532,7 +532,6 @@
                 top: 0;
                 top: 0;
                 left: 50px;
                 left: 50px;
                 display: none;
                 display: none;
-                width: calc(100% - 50px);
 
 
                 &.controlbox-pane {
                 &.controlbox-pane {
                     height: 100vh;
                     height: 100vh;

+ 1 - 1
sass/inverse/_chatbox.scss

@@ -64,7 +64,7 @@
             line-height: $font-size-huge;
             line-height: $font-size-huge;
         }
         }
 
 
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             ul {
             ul {
                 width: 100%;
                 width: 100%;
             }
             }