archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-10 23:50:12 +00:00
Code Issues Projects Releases Wiki Activity
bramw_baserow/web-frontend/public/grid.html

577 lines
39 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<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">
<div class="layout-col-1 menu">
<ul class="menu-items">
<li>
<a href="#" class="menu-item active">
<i class="fas fa-tachometer-alt"></i>
<span class="menu-item-text">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="menu-item">
<i class="fas fa-layer-group"></i>
<span class="menu-item-text">Groups</span>
</a>
</li>
</ul>
<ul class="menu-items">
<li>
<a href="#" class="user-item">
B
<span class="menu-item-text">Full Name</span>
</a>
</li>
</ul>
</div>
<div class="layout-col-2 sidebar">
<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>
</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>
<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>
<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>
<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">
<i class="fas fa-angle-double-left"></i>
Collapse sidebar
</a>
</div>
</div>
<div class="layout-col-3">
<header class="layout-col-3-1 header">
<ul class="header-filter">
<li>
<a href="#">
<i class="header-filter-icon fas fa-th"></i>
Grid view name
</a>
</li>
</ul>
<ul class="header-info">
<li class="undo-redo">
<a href="#" class="active">
<i class="fas fa-undo"></i>
</a>
<a href="#">
<i class="fas fa-redo"></i>
</a>
</li>
<li>Webshop</li>
<li>Products</li>
</ul>
</header>
<div class="layout-col-3-2 content">
<div class="grid-view">
<div class="grid-view-left" style="width: 200px;">
<div class="grid-view-outer remove-scrollbar">
<div class="grid-view-inner" style="min-width: 200px;">
<div class="grid-view-head">
<div class="grid-view-column" style="width: 200px;">head 1</div>
</div>
<div class="grid-view-body">
<div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
<div class="grid-view-body-inner">
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-view-foot">
<div class="grid-view-column">footer 1</div>
</div>
</div>
</div>
</div>
<div class="grid-view-divider" style="left: 200px;"></div>
<div class="grid-view-right" style="left: 200px;">
<div class="grid-view-outer remove-scrollbar">
<div class="grid-view-inner" style="min-width: 1400px;">
<div class="grid-view-head">
<div class="grid-view-column" style="width: 200px;">head 2</div>
<div class="grid-view-column" style="width: 200px;">head 3</div>
<div class="grid-view-column" style="width: 200px;">head 4</div>
<div class="grid-view-column" style="width: 200px;">head 5</div>
<div class="grid-view-column" style="width: 200px;">head 6</div>
<div class="grid-view-column" style="width: 200px;">head 7</div>
<div class="grid-view-column" style="width: 100px;">+</div>
</div>
<div class="grid-view-body">
<div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
<div class="grid-view-body-inner">
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell active">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 2</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 3</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 4</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 5</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 7</div>
</div>
</div>
</div>
</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>
</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-scroll-top]");
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;
}
});
});
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>
</html>
Reference in a new issue View git blame Copy permalink