fixed first setup for the scrolling

web-frontend/src/scss/abstracts/_mixins.scss

@@ -53,3 +53,62 @@
   width: $width;
   text-align: center;
 }
+
+// The basically works the same as padding: 10px 0 0 10px or padding: 10px; only then
+// resulting position: absolute; with corresponding top, right, bottom, left values.
+// -------
+// Example:
+//  @include absolute(10px);
+// Would result in:
+//  position: absolute;
+//  top: 10px; right: 10px; bottom: 10px; left: 10px;
+// -------
+// Example:
+//  @include absolute(10px, 20px);
+// Would result in:
+//  position: absolute;
+//  top: 10px; right: 20px; bottom: 10px; left: 20px;
+// -------
+// Example:
+//  @include absolute(10px, 20px, 30px);
+// Would result in:
+//  position: absolute;
+//  top: 10px; right: 20px; bottom: 30px;
+@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
+  position: absolute;
+
+  @if ($top != null and $right == null and $bottom == null and $left == null) {
+    top: $top;
+    right: $top;
+    bottom: $top;
+    left: $top;
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @else if ($top != null and $right != null and $bottom == null and
+  $left == null) {
+    top: $top;
+    right: $right;
+    bottom: $top;
+    left: $right;
+  }
+
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @else {
+    @if $top != null {
+      top: $top;
+    }
+
+    @if $right != null {
+      right: $right;
+    }
+
+    @if $bottom != null {
+      bottom: $bottom;
+    }
+
+    @if $left != null {
+      left: $left;
+    }
+  }
+}

web-frontend/src/scss/abstracts/_variables.scss

@@ -1,6 +1,8 @@
 $text-font-stack: 'Open Sans', sans-serif;
 $logo-font-stack: 'Montserrat', sans-serif;
 
+$scrollbar-size: 6px;
+
 $white: #fff;
 
 // primary colors

web-frontend/src/scss/components/_scrollbar.scss

@@ -0,0 +1,29 @@
+.scrollbars {
+  @include absolute(0);
+
+  z-index: 100;
+  pointer-events: none;
+}
+
+%scrollbar {
+  position: absolute;
+  background-color: $color-neutral-900;
+  opacity: 0.6;
+  border-radius: 3px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.scrollbar-vertical {
+  @extend %scrollbar;
+
+  width: $scrollbar-size;
+  right: 3px;
+}
+
+.scrollbar-horizontal {
+  @extend %scrollbar;
+
+  height: $scrollbar-size;
+  bottom: 3px;
+}

web-frontend/src/scss/components/views/_grid.scss

@@ -1,65 +1,67 @@
-// @TODO make this a bit clearer
-
 .grid-view {
-  position: absolute;
+  @include absolute(0);
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
   overflow: hidden;
-}
 
-.grid-view-divider {
+  .scrollbars {
-  position: absolute;
+    // We don't want the scrollbars to go over the header. We also don't want the
-  top: 0;
+    // scrollbars to go over the first column, but since the width can automatically
-  bottom: 0;
+    // be adjusted that needs to be specified in the html file.
-  border-right: 1px solid $color-neutral-300;
+    top: 33px;
+  }
 }
 
 .grid-view-left,
 .grid-view-right {
-  position: absolute;
+  @include absolute(0, auto);
-  top: 0;
+  z-index: 1;
-  bottom: 0;
   overflow: hidden;
 }
 
+.grid-view-inner {
+  @include absolute(0);
+  overflow: hidden;
+}
+
+// The width of the first column can be adjusted that is why it is specified in the html
+// file.
 .grid-view-left {
   left: 0;
   background-color: $color-neutral-50;
 }
 
+// The width of the first column can be adjusted that is why the left offset is
+// specified in the html file.
 .grid-view-right {
   right: 0;
 }
 
-.grid-view-outer {
+// The divider has not left property because the width of the left column can be
-  position: absolute;
+// adjusted that is why it is specified in the html file.
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  overflow: scroll;
-}
-
-.grid-view-inner {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
 .grid-view-divider {
+  @include absolute(0, auto);
   z-index: 2;
-  border-right: 1px solid $color-neutral-300;
+  width: 4px;
+  border-left: 1px solid $color-neutral-300;
+  overflow: hidden;
+  pointer-events: none;
+
+  &:before {
+    display: none;
+    content: "";
+    @include absolute(0, auto, 0, 0);
+    width: 4px;
+    left: -4px;
+    background-color: black;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  &.shadow:before {
+    display: block;
+  }
 }
 
 .grid-view-head {
-  position: absolute;
+  @include absolute(0, 0, auto, 0);
-  left: 0;
-  top: 0;
-  right: 0;
   height: 33px;
   background-color: $color-neutral-50;
   border-bottom: 1px solid $color-neutral-200;
@@ -74,24 +76,12 @@
   overflow: hidden;
 }
 
-.grid-view-body-outer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  overflow: scroll;
-}
-
 .grid-view-body-inner {
   padding-bottom: 100px;
 }
 
 .grid-view-foot {
-  position: absolute;
+  @include absolute(auto, 0, 0, 0);
-  left: 0;
-  bottom: 0;
-  right: 0;
   height: 48px;
   background-color: $color-neutral-50;
   border-top: 1px solid $color-neutral-200;
@@ -102,6 +92,7 @@
   height: 32px + 1px;
 }
 
+// Because the width of a column can be adjusted it is specified in the html file.
 .grid-view-column {
   position: relative;
   float: left;
@@ -126,11 +117,7 @@
 }
 
 .grid-view-cell {
-  position: absolute;
+  @include absolute(0);
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
   background-color: $white;
 
   &.active {

web-frontend/src/scss/default.scss

@@ -17,6 +17,7 @@
 @import "components/sidebar";
 @import "components/tree";
 @import "components/header";
+@import "components/scrollbar";
 
 @import "components/views/grid";