From dab8da69fc682429e5cd6cc0263b4c82eb65612c Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Fri, 8 Mar 2019 12:12:04 +0100
Subject: [PATCH] fixed first setup for the scrolling
---
web-frontend/public/grid.html | 1005 +++++++++++------
web-frontend/src/scss/abstracts/_mixins.scss | 59 +
.../src/scss/abstracts/_variables.scss | 2 +
.../src/scss/components/_scrollbar.scss | 29 +
.../src/scss/components/views/_grid.scss | 99 +-
web-frontend/src/scss/default.scss | 1 +
6 files changed, 768 insertions(+), 427 deletions(-)
create mode 100644 web-frontend/src/scss/components/_scrollbar.scss
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index e810ff89d..e90cbe638 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -3,7 +3,6 @@
<head>
<meta charset="utf-8" />
<title>Baserow</title>
- <link href="https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="layout">
@@ -176,351 +175,640 @@
</header>
<div class="layout-col-3-2 content">
<div class="grid-view">
+ <div class="scrollbars" style="left: 200px;">
+ <div class="scrollbar-vertical" style="top: 20px; height: 40px;"></div>
+ <div class="scrollbar-horizontal" style="left: 10px; width: 40px;"></div>
+ </div>
<div class="grid-view-left" style="width: 200px;">
- <div class="grid-view-outer remove-scrollbar">
- <div class="grid-view-inner" style="min-width: 200px;">
- <div class="grid-view-head">
- <div class="grid-view-column" style="width: 200px;">head 1</div>
- </div>
- <div class="grid-view-body">
- <div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
- <div class="grid-view-body-inner">
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
+ <div class="grid-view-inner" style="min-width: 200px;">
+ <div class="grid-view-head">
+ <div class="grid-view-column" style="width: 200px;">head 1</div>
+ </div>
+ <div class="grid-view-body">
+ <div class="grid-view-body-inner">
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
</div>
</div>
</div>
- <div class="grid-view-foot">
- <div class="grid-view-column">footer 1</div>
- </div>
+ </div>
+ <div class="grid-view-foot">
+ <div class="grid-view-column">footer 1</div>
</div>
</div>
</div>
<div class="grid-view-divider" style="left: 200px;"></div>
<div class="grid-view-right" style="left: 200px;">
- <div class="grid-view-outer remove-scrollbar">
- <div class="grid-view-inner" style="min-width: 1400px;">
- <div class="grid-view-head">
- <div class="grid-view-column" style="width: 200px;">head 2</div>
- <div class="grid-view-column" style="width: 200px;">head 3</div>
- <div class="grid-view-column" style="width: 200px;">head 4</div>
- <div class="grid-view-column" style="width: 200px;">head 5</div>
- <div class="grid-view-column" style="width: 200px;">head 6</div>
- <div class="grid-view-column" style="width: 200px;">head 7</div>
- <div class="grid-view-column" style="width: 100px;">+</div>
- </div>
- <div class="grid-view-body">
- <div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
- <div class="grid-view-body-inner">
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell active">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- </div>
+ <div class="grid-view-inner" style="min-width: 1800px;">
+ <div class="grid-view-head">
+ <div class="grid-view-column" style="width: 200px;">head 2</div>
+ <div class="grid-view-column" style="width: 200px;">head 3</div>
+ <div class="grid-view-column" style="width: 200px;">head 4</div>
+ <div class="grid-view-column" style="width: 200px;">head 5</div>
+ <div class="grid-view-column" style="width: 200px;">head 6</div>
+ <div class="grid-view-column" style="width: 200px;">head 7</div>
+ <div class="grid-view-column" style="width: 200px;">head 8</div>
+ <div class="grid-view-column" style="width: 200px;">head 9</div>
+ <div class="grid-view-column" style="width: 100px;">+</div>
+ </div>
+ <div class="grid-view-body">
+ <div class="grid-view-body-inner">
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell active">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 8</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 9</div>
</div>
</div>
</div>
- <div class="grid-view-foot">
- <div class="grid-view-column" style="width: 200px;">footer 2</div>
- <div class="grid-view-column" style="width: 200px;">footer 3</div>
- <div class="grid-view-column" style="width: 200px;">footer 4</div>
- <div class="grid-view-column" style="width: 200px;">footer 5</div>
- <div class="grid-view-column" style="width: 200px;">footer 6</div>
- <div class="grid-view-column" style="width: 200px;">footer 7</div>
- </div>
+ </div>
+ <div class="grid-view-foot">
+ <div class="grid-view-column" style="width: 200px;">footer 2</div>
+ <div class="grid-view-column" style="width: 200px;">footer 3</div>
+ <div class="grid-view-column" style="width: 200px;">footer 4</div>
+ <div class="grid-view-column" style="width: 200px;">footer 5</div>
+ <div class="grid-view-column" style="width: 200px;">footer 6</div>
+ <div class="grid-view-column" style="width: 200px;">footer 7</div>
+ <div class="grid-view-column" style="width: 200px;">footer 8</div>
+ <div class="grid-view-column" style="width: 200px;">footer 9</div>
</div>
</div>
</div>
@@ -529,47 +817,22 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.js"></script>
<script>
(function() {
- $matchHeight = $("[data-match-scroll-top]");
- var ignore = false;
+ $top1 = $(".grid-view-left .grid-view-body");
+ $top2 = $(".grid-view-right .grid-view-body");
+ $left1 = $(".grid-view-right");
+ $divider = $(".grid-view-divider");
- $matchHeight.scroll(function(e) {
- if (ignore) {
- ignore = false;
- return;
- }
- $matchHeight.each(function(i, object) {
- if (object !== e.currentTarget) {
- ignore = true;
- object.scrollTop = e.currentTarget.scrollTop;
- }
- });
- });
+ $(".grid-view").on('wheel', function(event) {
+ var top = $top2.scrollTop() + event.originalEvent.deltaY;
+ var left = $left1.scrollLeft() + event.originalEvent.deltaX;
- var size = scrollbarSize();
- function scrollbarSize () {
- var div = $(
- '<div class="remove-scrollbar"' +
- ' style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;">' +
- ' <div style="height:100px;width:100%"/>' +
- '</div>'
- );
-
- $('body').append(div);
- var w1 = $(div).innerWidth();
- var w2 = $('div', div).innerWidth();
- $(div).remove();
-
- return size = w1 - w2;
- };
-
- $(".remove-scrollbar").each(function(i, object) {
- $(object).css({
- "bottom": "-" + size + "px",
- "right": "-" + size + "px"
- });
+ $divider.toggleClass("shadow", left > 0);
+ $top1.scrollTop(top);
+ $top2.scrollTop(top);
+ $left1.scrollLeft(left);
+ event.preventDefault();
});
})();
</script>
diff --git a/web-frontend/src/scss/abstracts/_mixins.scss b/web-frontend/src/scss/abstracts/_mixins.scss
index 481ebdf71..f17260724 100644
--- a/web-frontend/src/scss/abstracts/_mixins.scss
+++ b/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;
+ }
+ }
+}
diff --git a/web-frontend/src/scss/abstracts/_variables.scss b/web-frontend/src/scss/abstracts/_variables.scss
index 945d0f1e9..c71050ed6 100644
--- a/web-frontend/src/scss/abstracts/_variables.scss
+++ b/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
diff --git a/web-frontend/src/scss/components/_scrollbar.scss b/web-frontend/src/scss/components/_scrollbar.scss
new file mode 100644
index 000000000..2af249768
--- /dev/null
+++ b/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;
+}
diff --git a/web-frontend/src/scss/components/views/_grid.scss b/web-frontend/src/scss/components/views/_grid.scss
index e7d1a9ae6..3763014de 100644
--- a/web-frontend/src/scss/components/views/_grid.scss
+++ b/web-frontend/src/scss/components/views/_grid.scss
@@ -1,65 +1,67 @@
-// @TODO make this a bit clearer
-
.grid-view {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ @include absolute(0);
overflow: hidden;
-}
-.grid-view-divider {
- position: absolute;
- top: 0;
- bottom: 0;
- border-right: 1px solid $color-neutral-300;
+ .scrollbars {
+ // We don't want the scrollbars to go over the header. We also don't want the
+ // scrollbars to go over the first column, but since the width can automatically
+ // be adjusted that needs to be specified in the html file.
+ top: 33px;
+ }
}
.grid-view-left,
.grid-view-right {
- position: absolute;
- top: 0;
- bottom: 0;
+ @include absolute(0, auto);
+ z-index: 1;
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 {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-.grid-view-inner {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
-}
-
+// The divider has not left property because the width of the left column can be
+// adjusted that is why it is specified in the html file.
.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;
- left: 0;
- top: 0;
- right: 0;
+ @include absolute(0, 0, auto, 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;
- left: 0;
- bottom: 0;
- right: 0;
+ @include absolute(auto, 0, 0, 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;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ @include absolute(0);
background-color: $white;
&.active {
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 7dc7bc457..288e34fe0 100755
--- a/web-frontend/src/scss/default.scss
+++ b/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";