Merge pull request #5578 from NadavTasher/feature/various-style-improvements

Sidebar style overhaul - absolute positioning, weird style fixes, disable sidebar scrollbar

client/components/boards/boardBody.css

@@ -16,9 +16,6 @@
   transition: margin 0.1s;
   overflow-y: auto;
 }
-.board-wrapper .board-canvas.is-sibling-sidebar-open {
-  margin-right: 248px;
-}
 .board-wrapper .board-canvas .board-overlay {
   position: fixed;
   left: 0;

client/components/boards/boardBody.jade

@@ -17,7 +17,6 @@ template(name="boardBody")
    | {{_ 'tableVisibilityMode-allowPrivateOnly'}}
   else
     .board-wrapper(class=currentBoard.colorClass)
-      +sidebar
       .board-canvas.js-swimlanes.dragscroll(
         class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
@@ -36,6 +35,7 @@ template(name="boardBody")
           +calendarView
         else
           +listsGroup(currentBoard)
+      +sidebar
 
 template(name="calendarView")
   if isViewCalendar

client/components/boards/boardColors.css

@@ -3269,11 +3269,6 @@ THEME - Clean Light
   color: #FFFFFF;
 }
 
-.board-color-cleanlight .list:first-child,
-.board-color-cleandark .list:first-child {
-  margin-right: -32px;
-}
-
 .board-color-cleanlight .list .list-header .list-header-menu,
 .board-color-cleandark .list .list-header .list-header-menu {
   display: flex;
@@ -3357,7 +3352,6 @@ THEME - Clean Light
 .board-color-cleanlight .swimlane,
 .board-color-cleandark .swimlane {
   background: none;
-  gap: 32px;
 }
 
 .board-color-cleanlight .swimlane-height-apply,

client/components/cards/cardDetails.css

@@ -5,7 +5,7 @@
   float: left;
   height: 30px;
   width: 30px;
-  margin: 0 4px 4px 0;
+  margin: .3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;

client/components/sidebar/sidebar.css

@@ -3,16 +3,16 @@
   top: 0;
   bottom: 0;
   right: 0;
+  overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+  /* Hide scroll bars from middle of the screen */
+  display: none !important;
 }
 .sidebar .sidebar-shadow {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
   background: #f7f7f7;
   box-shadow: -10px 0px 5px -10px #b3b3b3;
-  z-index: 10;
+  height: 100%;
 }
 .sidebar-xmark {
   position: absolute;
@@ -24,17 +24,16 @@
 .sidebar-xmark:hover {
   background: rgba(0,0,0,0.15);
 }
+.sidebar-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 10px 0px 10px;
+}
 .sidebar .sidebar-content {
-  padding: 12px;
+  padding: 0 12px;
   margin-bottom: 1.6em;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: 90%;
 }
 .sidebar .sidebar-content .hide-btn {
   display: none;
@@ -110,21 +109,19 @@
   margin-right: 10px;
 }
 .sidebar .sidebar-shortcuts {
-  position: absolute;
-  margin-left: 40%;
-  padding: 0;
   top: 7px;
   font-size: 0.8em;
   line-height: 1.6em;
   color: #999;
 }
 .board-sidebar {
-  width: 548px;
+  display: none;
-  right: -548px;
+  width: 30vw;
+  z-index: 100;
   transition: top 0.1s, right 0.1s, width 0.1s;
 }
 .board-sidebar.is-open {
-  right: 0;
+  display: block;
 }
 .board-widget h4 {
   margin: 5px 0;

client/components/sidebar/sidebar.jade

@@ -5,7 +5,12 @@ template(name="sidebar")
     //  title="{{showTongueTitle}}")
     //  i.fa.fa-navicon
     .sidebar-shadow
-      a.sidebar-xmark.js-close-sidebar ✕
+      .sidebar-actions
+        .sidebar-shortcuts
+          a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}")
+            i.fa.fa-keyboard-o
+            span {{_ 'keyboard-shortcuts' }}
+        a.sidebar-xmark.js-close-sidebar ✕
       .sidebar-content.js-board-sidebar-content
         //a.hide-btn.js-hide-sidebar
         //  i.fa.fa-navicon
@@ -47,11 +52,6 @@ template(name="membersWidget")
         a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}")
           i.board-header-btn-icon.fa.fa-cog
           | {{_ 'boardMenuPopup-title'}}
-  .board-widget.board-widget-members
-      .sidebar-shortcuts
-        a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}")
-          i.fa.fa-keyboard-o
-          span {{_ 'keyboard-shortcuts' }}
   hr
   h3
     i.fa.fa-users

client/components/users/userAvatar.css

@@ -5,6 +5,7 @@
   float: left;
   height: 30px;
   width: 30px;
+  margin: .3vh;
   cursor: pointer;
   user-select: none;
   z-index: 1;