archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-21 12:10:32 +00:00
Code Issues Projects Releases Wiki Activity

fixed first setup for the scrolling

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-08 12:12:04 +01:00
parent ac542ec954
commit dab8da69fc
6 changed files with 768 additions and 427 deletions
web-frontend
public
grid.html
src/scss
abstracts
_mixins.scss_variables.scss
components
_scrollbar.scss
views
_grid.scss
default.scss

513
web-frontend/public/grid.html
View file

@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Baserow</title> <title>Baserow</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<div class="layout"> <div class="layout">
@ -176,14 +175,16 @@
</header> </header>
<div class="layout-col-3-2 content"> <div class="layout-col-3-2 content">
<div class="grid-view"> <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-left" style="width: 200px;">
<div class="grid-view-outer remove-scrollbar">
<div class="grid-view-inner" style="min-width: 200px;"> <div class="grid-view-inner" style="min-width: 200px;">
<div class="grid-view-head"> <div class="grid-view-head">
<div class="grid-view-column" style="width: 200px;">head 1</div> <div class="grid-view-column" style="width: 200px;">head 1</div>
</div> </div>
<div class="grid-view-body"> <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-body-inner">
<div class="grid-view-row"> <div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
@ -245,6 +246,40 @@
<div class="grid-view-cell">body 1</div> <div class="grid-view-cell">body 1</div>
</div> </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> </div>
</div> </div>
@ -253,11 +288,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="grid-view-divider" style="left: 200px;"></div> <div class="grid-view-divider" style="left: 200px;"></div>
<div class="grid-view-right" style="left: 200px;"> <div class="grid-view-right" style="left: 200px;">
<div class="grid-view-outer remove-scrollbar"> <div class="grid-view-inner" style="min-width: 1800px;">
<div class="grid-view-inner" style="min-width: 1400px;">
<div class="grid-view-head"> <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 2</div>
<div class="grid-view-column" style="width: 200px;">head 3</div> <div class="grid-view-column" style="width: 200px;">head 3</div>
@ -265,10 +298,11 @@
<div class="grid-view-column" style="width: 200px;">head 5</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 6</div>
<div class="grid-view-column" style="width: 200px;">head 7</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 class="grid-view-column" style="width: 100px;">+</div>
</div> </div>
<div class="grid-view-body"> <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-body-inner">
<div class="grid-view-row"> <div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
@ -289,6 +323,12 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</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-row"> <div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
@ -309,25 +349,11 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</div> </div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div> <div class="grid-view-cell">body 8</div>
</div> </div>
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div> <div class="grid-view-cell">body 9</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> </div>
<div class="grid-view-row"> <div class="grid-view-row">
@ -349,25 +375,11 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</div> </div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div> <div class="grid-view-cell">body 8</div>
</div> </div>
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div> <div class="grid-view-cell">body 9</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> </div>
<div class="grid-view-row"> <div class="grid-view-row">
@ -389,25 +401,11 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</div> </div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div> <div class="grid-view-cell">body 8</div>
</div> </div>
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div> <div class="grid-view-cell">body 9</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> </div>
<div class="grid-view-row"> <div class="grid-view-row">
@ -429,25 +427,11 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</div> </div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div> <div class="grid-view-cell">body 8</div>
</div> </div>
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div> <div class="grid-view-cell">body 9</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> </div>
<div class="grid-view-row"> <div class="grid-view-row">
@ -469,25 +453,11 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</div> </div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div> <div class="grid-view-cell">body 8</div>
</div> </div>
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div> <div class="grid-view-cell">body 9</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> </div>
<div class="grid-view-row"> <div class="grid-view-row">
@ -509,6 +479,323 @@
<div class="grid-view-column" style="width: 200px;"> <div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div> <div class="grid-view-cell">body 7</div>
</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>
</div> </div>
@ -520,7 +807,8 @@
<div class="grid-view-column" style="width: 200px;">footer 5</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 6</div>
<div class="grid-view-column" style="width: 200px;">footer 7</div> <div class="grid-view-column" style="width: 200px;">footer 7</div>
</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> </div>
</div> </div>
@ -529,47 +817,22 @@
</div> </div>
</div> </div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <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> <script>
(function() { (function() {
$matchHeight = $("[data-match-scroll-top]"); $top1 = $(".grid-view-left .grid-view-body");
var ignore = false; $top2 = $(".grid-view-right .grid-view-body");
$left1 = $(".grid-view-right");
$divider = $(".grid-view-divider");
$matchHeight.scroll(function(e) { $(".grid-view").on('wheel', function(event) {
if (ignore) { var top = $top2.scrollTop() + event.originalEvent.deltaY;
ignore = false; var left = $left1.scrollLeft() + event.originalEvent.deltaX;
return;
}
$matchHeight.each(function(i, object) {
if (object !== e.currentTarget) {
ignore = true;
object.scrollTop = e.currentTarget.scrollTop;
}
});
});
var size = scrollbarSize(); $divider.toggleClass("shadow", left > 0);
function scrollbarSize () { $top1.scrollTop(top);
var div = $( $top2.scrollTop(top);
'<div class="remove-scrollbar"' + $left1.scrollLeft(left);
' style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;">' + event.preventDefault();
' <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"
});
}); });
})(); })();
</script> </script>

59
web-frontend/src/scss/abstracts/_mixins.scss
View file

@ -53,3 +53,62 @@
width: $width; width: $width;
text-align: center; 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;
}
}
}

2
web-frontend/src/scss/abstracts/_variables.scss
View file

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

29
web-frontend/src/scss/components/_scrollbar.scss Normal file
View file

@ -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;
}

99
web-frontend/src/scss/components/views/_grid.scss
View file

@ -1,65 +1,67 @@
// @TODO make this a bit clearer
.grid-view { .grid-view {
position: absolute; @include absolute(0);
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden; 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-left,
.grid-view-right { .grid-view-right {
position: absolute; @include absolute(0, auto);
top: 0; z-index: 1;
bottom: 0;
overflow: hidden; 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 { .grid-view-left {
left: 0; left: 0;
background-color: $color-neutral-50; 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 { .grid-view-right {
right: 0; 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 { .grid-view-divider {
@include absolute(0, auto);
z-index: 2; 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 { .grid-view-head {
position: absolute; @include absolute(0, 0, auto, 0);
left: 0;
top: 0;
right: 0;
height: 33px; height: 33px;
background-color: $color-neutral-50; background-color: $color-neutral-50;
border-bottom: 1px solid $color-neutral-200; border-bottom: 1px solid $color-neutral-200;
@ -74,24 +76,12 @@
overflow: hidden; overflow: hidden;
} }
.grid-view-body-outer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: scroll;
}
.grid-view-body-inner { .grid-view-body-inner {
padding-bottom: 100px; padding-bottom: 100px;
} }
.grid-view-foot { .grid-view-foot {
position: absolute; @include absolute(auto, 0, 0, 0);
left: 0;
bottom: 0;
right: 0;
height: 48px; height: 48px;
background-color: $color-neutral-50; background-color: $color-neutral-50;
border-top: 1px solid $color-neutral-200; border-top: 1px solid $color-neutral-200;
@ -102,6 +92,7 @@
height: 32px + 1px; height: 32px + 1px;
} }
// Because the width of a column can be adjusted it is specified in the html file.
.grid-view-column { .grid-view-column {
position: relative; position: relative;
float: left; float: left;
@ -126,11 +117,7 @@
} }
.grid-view-cell { .grid-view-cell {
position: absolute; @include absolute(0);
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: $white; background-color: $white;
&.active { &.active {

1
web-frontend/src/scss/default.scss
View file

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