archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-16 01:54:12 +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>
<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,14 +175,16 @@
</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;">
@ -245,6 +246,40 @@
<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>
@ -253,11 +288,9 @@
</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-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>
@ -265,10 +298,11 @@
<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-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;">
@ -289,6 +323,12 @@
<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;">
@ -309,25 +349,11 @@
<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 class="grid-view-cell">body 8</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 class="grid-view-cell">body 9</div>
</div>
</div>
<div class="grid-view-row">
@ -349,25 +375,11 @@
<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 class="grid-view-cell">body 8</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 class="grid-view-cell">body 9</div>
</div>
</div>
<div class="grid-view-row">
@ -389,25 +401,11 @@
<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 class="grid-view-cell">body 8</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 class="grid-view-cell">body 9</div>
</div>
</div>
<div class="grid-view-row">
@ -429,25 +427,11 @@
<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 class="grid-view-cell">body 8</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 class="grid-view-cell">body 9</div>
</div>
</div>
<div class="grid-view-row">
@ -469,25 +453,11 @@
<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 class="grid-view-cell">body 8</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 class="grid-view-cell">body 9</div>
</div>
</div>
<div class="grid-view-row">
@ -509,6 +479,323 @@
<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>
@ -520,7 +807,8 @@
<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 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>

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

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

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

@ -1,6 +1,8 @@
$text-font-stack: 'Open Sans', sans-serif;
$logo-font-stack: 'Montserrat', sans-serif;
$scrollbar-size: 6px;
$white: #fff;
// 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 {
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 {

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

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