css: refactoring & fixing - finalized

src/dependencies.pug

@@ -9,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- local
 //- script(type="module" src="/lib/sib-core/src/index.js")
 //- script(type="module" src="/lib/sib-router/src/index.js")
-script(type="module" src="/lib/sib-chat/sib-chat.js")
+//- script(type="module" src="/lib/sib-chat/sib-chat.js")
 //- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
 //- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
 //- script(type="module" src="/lib/sib-directory/sib-directory.js")
@@ -17,8 +17,8 @@ script(type="module" src="/lib/sib-chat/sib-chat.js")
 //- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12")
 script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.15")
 

src/index.pug

@@ -31,7 +31,7 @@ html(lang="en")
         #circle(hidden).with-sidebar
           include page-circle.pug
 
-        #member-chat(hidden).no-sidebar
+        #member-chat(hidden).with-sidebar
           include page-member-chat.pug
 
         #user-profile(hidden)

src/page-circle.pug

@@ -1,3 +1,12 @@
+.views-container
+  #circle-chat
+    include page-circle-chat.pug
+  #circle-profile
+    include page-circle-profile.pug
+  #circle-edit
+    include page-circle-edit.pug
+  #circle-create
+    include page-circle-create.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='circle-chat')
     ul
@@ -15,12 +24,3 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='circle-create')
         li
           a Add new
-.views-container
-  #circle-chat
-    include page-circle-chat.pug
-  #circle-profile
-    include page-circle-profile.pug
-  #circle-edit
-    include page-circle-edit.pug
-  #circle-create
-    include page-circle-create.pug

src/page-job-offer-create.pug

@@ -1,6 +1,6 @@
 .content-box.with-form
   h1 Post a new job offer
-  p This form allows you to share an offer to all members of the network.
+  p.center This form allows you to share an offer to all members of the network.
     
   sib-widget(name='title-text')
     template

src/page-project.pug

@@ -1,3 +1,12 @@
+.views-container
+  #project-chat
+    include page-project-chat.pug
+  #project-profile
+    include page-project-profile.pug
+  #project-edit
+    include page-project-edit.pug
+  #project-create
+    include page-project-create.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
@@ -15,12 +24,3 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='project-create', use-id)
         li
           a Add new
-.views-container
-  #project-chat
-    include page-project-chat.pug
-  #project-profile
-    include page-project-profile.pug
-  #project-edit
-    include page-project-edit.pug
-  #project-create
-    include page-project-create.pug

src/scripts/index.js

@@ -1,8 +1,9 @@
 document.addEventListener('DOMContentLoaded', function (event) {
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
   const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
+  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
 
-  // Toggle sub-menus
+  //- Toggle sub-menus
   menuWrappers.forEach(menuWrapper => {
     const menu = menuWrapper.querySelector('.menu');
     menu.addEventListener('click', e => {
@@ -10,12 +11,13 @@ document.addEventListener('DOMContentLoaded', function (event) {
     });
   });
 
-  // Open/close menu on the right
+  //- Open/close menu on the right
   rightMenus.forEach(rightMenu => {
     const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
 
     btnRightMenu.addEventListener('click', e => {
-      rightMenu.classList.toggle('offsite-is-closed');
+      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
+      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
     })
   });
 

src/styles/base/form.scss

@@ -22,7 +22,7 @@
       text-align: center;
     }
 
-    p:first-child {
+    p.center {
       margin-bottom: 6.8rem;
       text-align: center;
     }

src/styles/base/main.scss

@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
   display: none !important;
 }
 
+* {
+  outline: none;
+}
+
 :root {
   font-size: 10px;
   font-family: Open Sans, sans-serif;

src/styles/components/chat.scss

@@ -2,14 +2,18 @@
 // chat
 
 .chat-view {
-  padding: 1.7rem;
+  padding: 0;
   height: calc(100vh - 84px);
+  position: relative;
 
   > sib-chat {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
+    bottom: 0;
+    max-height: calc(100vh - 84px);
+    z-index: 0;
   }
 }
 

src/styles/components/sidebar.scss

@@ -6,13 +6,19 @@
 .with-sidebar {
   flex-grow: 1;
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: stretch;
   overflow-x: hidden;
 
   .views-container {
     flex: 1 0 0;
     overflow-y: auto;
+    -webkit-backface-visibility: hidden;
+
+    &.sidebar-is-closed {
+      margin-left: -15.5rem;
+      transform: translate(15.5rem);
+    }
   }
 
   >div {
@@ -96,11 +102,6 @@
       & .jsOffsiteToggle::before {
         transform: rotate(180deg);
       }
-
-      &~.views-container {
-        margin-left: -15.5rem;
-        transform: translate(15.5rem);
-      }
     }
   }
 }