mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-04 21:25:24 +00:00
added first setup for the grid view component with scrolling
This commit is contained in:
Bram Wiepjes
parent
47cf84bf0b
commit
602d4f54db
5 changed files with 480 additions and 106 deletions
web-frontend
|
|
@ -3,6 +3,7 @@
|
|||
<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">
|
||||
|
|
@ -31,115 +32,117 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="layout-col-2 sidebar">
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-title">Baserow</div>
|
||||
<div class="sidebar-group-title">Group name 1</div>
|
||||
<ul class="tree">
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-angle-right"></i>
|
||||
Map nummer 1
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item active">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Webshop
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="tree-subs">
|
||||
<li class="tree-sub active">
|
||||
<a href="#" class="tree-sub-link">Customers</a>
|
||||
<div class="sidebar-content-wrapper">
|
||||
<nav class="sidebar-content">
|
||||
<div class="sidebar-title">Baserow</div>
|
||||
<div class="sidebar-group-title">Group name 1</div>
|
||||
<ul class="tree">
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Products very long name</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-angle-right"></i>
|
||||
Map nummer 1
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item active">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Webshop
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Categories</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-angle-down"></i>
|
||||
Map nummer 1
|
||||
</a>
|
||||
</div>
|
||||
<ul class="tree">
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles
|
||||
</a>
|
||||
</div>
|
||||
<ul class="tree-subs">
|
||||
<li class="tree-sub active">
|
||||
<a href="#" class="tree-sub-link">Customers</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Something
|
||||
</a>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Products very long name</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles with very long name and that is not good.
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Something else
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Categories</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-angle-down"></i>
|
||||
Map nummer 1
|
||||
</a>
|
||||
</div>
|
||||
<ul class="tree">
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Something
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Vehicles with very long name and that is not good.
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Something else
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sidebar-footer">
|
||||
<a href="#" class="sidebar-collapse">
|
||||
|
|
@ -149,7 +152,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="layout-col-3">
|
||||
<div class="layout-col-3-1 header">
|
||||
<header class="layout-col-3-1 header">
|
||||
<ul class="header-filter">
|
||||
<li>
|
||||
<a href="#">
|
||||
|
|
@ -170,11 +173,266 @@
|
|||
<li>Webshop</li>
|
||||
<li>Products</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="layout-col-3-2 content">
|
||||
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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</div>
|
||||
</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-height]");
|
||||
var ignore = false;
|
||||
|
||||
$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;
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
width: 226px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layout-col-3 {
|
||||
|
|
@ -48,5 +47,4 @@
|
|||
top: 52px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
border-right: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.sidebar-content-wrapper {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
|
@ -18,11 +22,11 @@
|
|||
|
||||
.sidebar-collapse {
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
padding: 0 16px;
|
||||
color: $color-primary-900;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
|
||||
@include fixed-height(47px, 14px);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
113
web-frontend/src/scss/components/views/_grid.scss
Normal file
113
web-frontend/src/scss/components/views/_grid.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.grid-view {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-view-left,
|
||||
.grid-view-right-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: -17px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.grid-view-left {
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-view-header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 33px;
|
||||
background-color: $color-neutral-50;
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.grid-view-data {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 33px;
|
||||
right: -17px;
|
||||
bottom: 48px - 17px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.grid-view-spacer {
|
||||
display: block;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-view-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background-color: $color-neutral-50;
|
||||
border-top: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.grid-view-row {
|
||||
@extend .clearfix;
|
||||
height: 32px + 1px;
|
||||
}
|
||||
|
||||
.grid-view-column {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 32px + 1px;
|
||||
border-right: 1px solid $color-neutral-200;
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
|
||||
.grid-view-header & {
|
||||
height: 32px;
|
||||
border-bottom: none;
|
||||
background-color: $color-neutral-100;
|
||||
}
|
||||
|
||||
.grid-view-left & {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view-cell {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $white;
|
||||
|
||||
&.active {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -18,5 +18,6 @@
|
|||
@import "components/tree";
|
||||
@import "components/header";
|
||||
|
||||
@import "components/box_page";
|
||||
@import "components/views/grid";
|
||||
|
||||
@import "components/box_page";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue