صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
im-changing.ru
/
converse.js
mirrorاز https://github.com/conversejs/converse.js.git
2
0
انشعاب 0
پرونده‌ها مشکلات 0 ویکی
فهرست منبع

Fix sidebar in responsive mode

JC Brand 7 سال پیش
والد
b5a43f8177
کامیت
53adebb780
10فایلهای تغییر یافته به همراه57 افزوده شده و 44 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 18 14
      css/converse.css
  2. 21 17
      css/inverse.css
  3. 1 1
      mockup/chatbox.html
  4. 1 1
      mockup/chatroom.html
  5. 1 1
      mockup/sidebar.js
  6. 11 0
      sass/_chatbox.scss
  7. 2 4
      sass/_controlbox.scss
  8. 1 2
      sass/_core.scss
  9. 1 3
      sass/inverse/_chatbox.scss
  10. 0 1
      sass/inverse/_controlbox.scss

+ 18 - 14
css/converse.css
مشاهده فایل 

@@ -4803,10 +4803,9 @@
 
   #converse-embedded-chat .sidebar,
 
   #conversejs .sidebar {
 
     display: none;
 
-    position: absolute;
 
     width: 50px;
 
     height: 100vh;
 
-    padding: 10px 0;
 
+    padding: 1rem 0;
 
     background-color: #578EA9;
 
     color: white;
 
     text-align: center; }
 
@@ -5604,15 +5603,21 @@
 
       left: 0; }
 
 
 @media screen and (max-width: 767px) {
 
+  #conversejs > .row {
 
+    flex-direction: row-reverse; }
 
   #conversejs #login-dialog .pure-form.converse-form {
 
     padding: 3em 2em 3em; }
 
-  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
 
-    white-space: normal; }
 
-  #conversejs .chatbox .row .box-flyout {
 
-    left: 50px;
 
-    bottom: 0;
 
-    height: 100vh;
 
-    box-shadow: none; } }
 
+  #conversejs .sidebar {
 
+    display: block; }
 
+  #conversejs .chatbox {
 
+    width: calc(100% - 50px); }
 
+    #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
 
+      white-space: normal; }
 
+    #conversejs .chatbox .row .box-flyout {
 
+      left: 50px;
 
+      bottom: 0;
 
+      height: 100vh;
 
+      box-shadow: none; } }
 
 #converse-embedded-chat .chat-head,
 
 #conversejs:not(.fullscreen) .chat-head {
 
   border-top-left-radius: 4px;
 
@@ -6036,12 +6041,11 @@
 
   #conversejs #controlbox #users {
 
     position: absolute;
 
     top: 0;
 
-    left: 50px;
 
-    display: none;
 
-    width: calc(100% - 50px); }
 
+    display: none; }
 
     #conversejs #controlbox #users.controlbox-pane {
 
-      height: 100vh; }
 
-  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
 
+      height: 100vh;
 
+      width: 100%; }
 
+  #conversejs.sidebar-open .chatbox:not(#controlbox) {
 
     display: none; }
 
   #conversejs.sidebar-open #controlbox #users {
 
     display: block; } }

+ 21 - 17
css/inverse.css
مشاهده فایل 

@@ -4803,10 +4803,9 @@
 
   #converse-embedded-chat .sidebar,
 
   #conversejs .sidebar {
 
     display: none;
 
-    position: absolute;
 
     width: 50px;
 
     height: 100vh;
 
-    padding: 10px 0;
 
+    padding: 1rem 0;
 
     background-color: #578EA9;
 
     color: white;
 
     text-align: center; }
 
@@ -5660,15 +5659,21 @@ body {
 
       left: 0; }
 
 
 @media screen and (max-width: 767px) {
 
+  #conversejs > .row {
 
+    flex-direction: row-reverse; }
 
   #conversejs #login-dialog .pure-form.converse-form {
 
     padding: 3em 2em 3em; }
 
-  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
 
-    white-space: normal; }
 
-  #conversejs .chatbox .row .box-flyout {
 
-    left: 50px;
 
-    bottom: 0;
 
-    height: 100vh;
 
-    box-shadow: none; } }
 
+  #conversejs .sidebar {
 
+    display: block; }
 
+  #conversejs .chatbox {
 
+    width: calc(100% - 50px); }
 
+    #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
 
+      white-space: normal; }
 
+    #conversejs .chatbox .row .box-flyout {
 
+      left: 50px;
 
+      bottom: 0;
 
+      height: 100vh;
 
+      box-shadow: none; } }
 
 #conversejs.fullscreen .chatbox-btn {
 
   font-size: 18px;
 
   margin: 0 0.3em; }
 
@@ -5728,10 +5733,10 @@ body {
 
       padding-right: 10px; }
 
 
 @media screen and (max-width: 767px) {
 
-  #conversejs.fullscreen > .chatbox {
 
+  #conversejs.fullscreen .chatbox {
 
     width: calc(100% - 50px); }
 
-  #conversejs.fullscreen .chatbox .row {
 
-    width: calc(100% - 50px); } }
 
+    #conversejs.fullscreen .chatbox .row {
 
+      width: calc(100% - 50px); } }
 
 #conversejs #controlbox {
 
   margin-right: 1.5em; }
 
   #conversejs #controlbox .pure-form.converse-form {
 
@@ -6110,12 +6115,11 @@ body {
 
   #conversejs #controlbox #users {
 
     position: absolute;
 
     top: 0;
 
-    left: 50px;
 
-    display: none;
 
-    width: calc(100% - 50px); }
 
+    display: none; }
 
     #conversejs #controlbox #users.controlbox-pane {
 
-      height: 100vh; }
 
-  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
 
+      height: 100vh;
 
+      width: 100%; }
 
+  #conversejs.sidebar-open .chatbox:not(#controlbox) {
 
     display: none; }
 
   #conversejs.sidebar-open #controlbox #users {
 
     display: block; } }

+ 1 - 1
mockup/chatbox.html
مشاهده فایل 

@@ -10,11 +10,11 @@
 
 
 <body>
 
     <div id="conversejs" class="fullscreen">
 
+        <div class="sidebar"></div>
 
         <div class="row no-gutters">
 
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
 
                 <div class="flyout box-flyout">
 
                     <div class="controlbox-panes">
 
-                        <div class="sidebar"></div>
 
                         <div id="users" class="controlbox-pane"></div>
 
                     </div>
 
                 </div>

+ 1 - 1
mockup/chatroom.html
مشاهده فایل 

@@ -10,11 +10,11 @@
 
 
 <body>
 
     <div id="conversejs" class="fullscreen">
 
+        <div class="sidebar"></div>
 
         <div class="row no-gutters">
 
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
 
                 <div class="flyout box-flyout">
 
                     <div class="controlbox-panes">
 
-                        <div class="sidebar"></div>
 
                         <div id="users" class="controlbox-pane"></div>
 
                     </div>
 
                 </div>

+ 1 - 1
mockup/sidebar.js
مشاهده فایل 

@@ -16,7 +16,7 @@ const Sidebar = Backbone.NativeView.extend({
 
         if (_.includes(converse_el.classList, 'sidebar-open')) {
 
             converse_el.classList.remove('sidebar-open');
 
             hamburger.classList.remove('fa-times');
 
-            hamburger.classList.remove('fa-bars');
 
+            hamburger.classList.add('fa-bars');
 
         } else {
 
             converse_el.classList.add('sidebar-open');
 
             hamburger.classList.remove('fa-bars');

+ 11 - 0
sass/_chatbox.scss
مشاهده فایل 

@@ -438,12 +438,23 @@
 
 
 @media screen and (max-width: 767px) {
 
     #conversejs  {
 
+        > .row {
 
+            flex-direction: row-reverse;
 
+        }
 
+
 
         #login-dialog {
 
             .pure-form.converse-form {
 
                 padding: 3em 2em 3em;
 
             }
 
         }
 
+
 
+        .sidebar {
 
+            display: block;
 
+        }
 
+
 
         .chatbox {
 
+            width: calc(100% - 50px);
 
+
 
             .chat-body {
 
                 .chat-message {
 
                     .chat-msg-author {

+ 2 - 4
sass/_controlbox.scss
مشاهده فایل 

@@ -522,19 +522,17 @@
 
             #users {
 
                 position: absolute;
 
                 top: 0;
 
-                left: 50px;
 
                 display: none;
 
-                width: calc(100% - 50px);
 
-
 
                 &.controlbox-pane {
 
                     height: 100vh;
 
+                    width: 100%;
 
                 }
 
             }
 
 
         }
 
 
         &.sidebar-open {
 
-            > .chatbox:not(#controlbox) {
 
+            .chatbox:not(#controlbox) {
 
                 display: none;
 
             }
 
             #controlbox {

+ 1 - 2
sass/_core.scss
مشاهده فایل 

@@ -54,10 +54,9 @@
 
 
      .sidebar {
 
         display: none;
 
-        position: absolute;
 
         width: 50px;
 
         height: 100vh;
 
-        padding: 10px 0;
 
+        padding: 1rem 0;
 
         background-color: $controlbox-head-color;
 
         color: white;
 
         text-align: center;

+ 1 - 3
sass/inverse/_chatbox.scss
مشاهده فایل 

@@ -88,10 +88,8 @@
 
 
 @media screen and (max-width: 767px) {
 
     #conversejs.fullscreen  {
 
-        > .chatbox {
 
-            width: calc(100% - 50px);
 
-        }
 
         .chatbox {
 
+            width: calc(100% - 50px);
 
             .row {
 
                 width: calc(100% - 50px);
 
             }

+ 0 - 1
sass/inverse/_controlbox.scss
مشاهده فایل 

@@ -1,5 +1,4 @@
 
 #conversejs.fullscreen {
 
-
 
     #controlbox {
 
         margin: 0;