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

refactored the grid styling so that it works according design

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-04 22:34:19 +01:00
parent 602d4f54db
commit ac542ec954
3 changed files with 430 additions and 250 deletions
web-frontend
public
grid.html
src/scss
base
_helpers.scss
components/views
_grid.scss

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

@ -177,236 +177,351 @@
<div class="layout-col-3-2 content">
<div class="grid-view">
<div class="grid-view-left" style="width: 200px;">
<div class="grid-view-header">
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
header column 1
<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>
</div>
<div class="grid-view-data" data-match-height>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
<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>
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
<div class="grid-view-foot">
<div class="grid-view-column">footer 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 1
</div>
</div>
</div>
<div class="grid-view-spacer"></div>
</div>
<div class="grid-view-footer">
<div class="grid-view-footer-column" style="width: 200px;">
18 records
</div>
</div>
</div>
<div class="grid-view-right-wrapper" style="left: 200px;">
<div class="grid-view-right" style="min-width: 700px;">
<div class="grid-view-header">
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
header column 2
</div>
<div class="grid-view-column" style="width: 200px;">
header column 3
</div>
<div class="grid-view-column" style="width: 200px;">
header column 4
</div>
<div class="grid-view-column" style="width: 100px;">
+
<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>
</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-data" data-match-height>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 2
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 3
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
data column 4
</div>
</div>
</div>
<div class="grid-view-spacer"></div>
</div>
<div class="grid-view-footer">right footer</div>
</div>
</div>
</div>
@ -417,7 +532,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.js"></script>
<script>
(function() {
$matchHeight = $("[data-match-height]");
$matchHeight = $("[data-match-scroll-top]");
var ignore = false;
$matchHeight.scroll(function(e) {
@ -432,6 +547,30 @@
}
});
});
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"
});
});
})();
</script>
</body>

9
web-frontend/src/scss/base/_helpers.scss
View file

@ -12,6 +12,15 @@
text-align: right;
}
.remove-scrollbar {
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);

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

@ -1,3 +1,5 @@
// @TODO make this a bit clearer
.grid-view {
position: absolute;
left: 0;
@ -7,41 +9,53 @@
overflow: hidden;
}
.grid-view-left,
.grid-view-right-wrapper {
.grid-view-divider {
position: absolute;
top: 0;
bottom: -17px;
overflow-x: scroll;
bottom: 0;
border-right: 1px solid $color-neutral-300;
}
.grid-view-left,
.grid-view-right {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
}
.grid-view-left {
left: 0;
background-color: $color-neutral-50;
&:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-right: 1px solid $color-neutral-300;
}
}
.grid-view-right-wrapper {
right: 0;
}
.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;
overflow: hidden;
}
.grid-view-header {
.grid-view-divider {
z-index: 2;
border-right: 1px solid $color-neutral-300;
}
.grid-view-head {
position: absolute;
left: 0;
top: 0;
@ -51,22 +65,29 @@
border-bottom: 1px solid $color-neutral-200;
}
.grid-view-data {
.grid-view-body {
position: absolute;
left: 0;
top: 33px;
right: -17px;
bottom: 48px - 17px;
right: 0;
bottom: 48px;
overflow: hidden;
}
.grid-view-body-outer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: scroll;
}
.grid-view-spacer {
display: block;
height: 50px;
width: 100%;
.grid-view-body-inner {
padding-bottom: 100px;
}
.grid-view-footer {
.grid-view-foot {
position: absolute;
left: 0;
bottom: 0;
@ -88,12 +109,17 @@
border-right: 1px solid $color-neutral-200;
border-bottom: 1px solid $color-neutral-200;
.grid-view-header & {
.grid-view-head & {
height: 32px;
border-bottom: none;
background-color: $color-neutral-100;
}
.grid-view-foot & {
border-right: 0;
border-bottom: 0;
}
.grid-view-left & {
border-right: none;
}
@ -108,6 +134,12 @@
background-color: $white;
&.active {
z-index: 2;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 2px solid $color-primary-500;
border-radius: 2px;
}
}