mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-10 15:47:32 +00:00
Merge branch '10-investigate-if-the-left-part-of-the-grid-can-be-replaced-with-position-sticky' into 'develop'
Created proof of concept grid with position sticky Closes #10 See merge request bramw/baserow!5
This commit is contained in:
Bram Wiepjes
commit
94171f769b
4 changed files with 926 additions and 1 deletions
old-web-frontend
web-frontend/assets/scss
640
old-web-frontend/public/grid-s.html
Normal file
640
old-web-frontend/public/grid-s.html
Normal file
|
|
@ -0,0 +1,640 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/png" href="../../web-frontend/static/img/favicon_16.png" sizes="16x16" />
|
||||||
|
<link rel="icon" type="image/png" href="../../web-frontend/static/img/favicon_32.png" sizes="32x32" />
|
||||||
|
<link rel="icon" type="image/png" href="../../web-frontend/static/img/favicon_48.png" sizes="48x48" />
|
||||||
|
<link rel="icon" type="image/png" href="../../web-frontend/static/img/favicon_48.png" sizes="192x192" />
|
||||||
|
<title>Baserow</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="layout">
|
||||||
|
<div class="layout-col-1 menu">
|
||||||
|
<ul class="menu-items">
|
||||||
|
<li class="menu-item">
|
||||||
|
<a href="#" class="menu-link active">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span class="menu-link-text">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<a href="#" class="menu-link" data-context=".select">
|
||||||
|
<i class="fas fa-layer-group"></i>
|
||||||
|
<span class="menu-link-text">Groups</span>
|
||||||
|
</a>
|
||||||
|
<div class="select hidden">
|
||||||
|
<div class="select-search">
|
||||||
|
<i class="select-search-icon fas fa-search"></i>
|
||||||
|
<input type="text" class="select-search-input" placeholder="Search views" />
|
||||||
|
</div>
|
||||||
|
<ul class="select-items">
|
||||||
|
<li class="select-item active">
|
||||||
|
<a href="#" class="select-item-link">Group name 1</a>
|
||||||
|
<a href="#" class="select-item-options" data-context=".context">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
<div class="context hidden">
|
||||||
|
<ul class="context-menu">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||||
|
Rename group
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||||
|
Delete group
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">Group name 2</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">Group name 3</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">Group name 4</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="select-footer">
|
||||||
|
<a href="#" class="select-footer-button">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
Do something
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="menu-items">
|
||||||
|
<li class="menu-item layout-uncollapse">
|
||||||
|
<a href="#" class="menu-link" data-toggle-layout-collapse>
|
||||||
|
<i class="menu-item-icon fas fa-angle-double-right"></i>
|
||||||
|
<span class="menu-link-text">Uncollapse</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<a href="#" class="menu-link menu-user-item">
|
||||||
|
B
|
||||||
|
<span class="menu-link-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">
|
||||||
|
<img src="../../web-frontend/static/img/logo.svg" alt="" />
|
||||||
|
</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" data-context=".context">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
<div class="context hidden">
|
||||||
|
<div class="context-menu-title">Vehicles</div>
|
||||||
|
<ul class="context-menu">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||||
|
Rename database
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||||
|
Delete table
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</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" data-toggle-layout-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 class="header-filter-item">
|
||||||
|
<a href="#" class="header-filter-link" data-context=".select">
|
||||||
|
<i class="header-filter-icon fas fa-th"></i>
|
||||||
|
Grid view name
|
||||||
|
</a>
|
||||||
|
<div class="select hidden">
|
||||||
|
<div class="select-search">
|
||||||
|
<i class="select-search-icon fas fa-search"></i>
|
||||||
|
<input type="text" class="select-search-input" placeholder="Search views" />
|
||||||
|
</div>
|
||||||
|
<ul class="select-items">
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">
|
||||||
|
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||||
|
Grid view name
|
||||||
|
</a>
|
||||||
|
<a href="#" class="select-item-options" data-context=".context">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
<div class="context hidden">
|
||||||
|
<ul class="context-menu">
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||||
|
Rename
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||||
|
Delete
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">
|
||||||
|
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||||
|
Grid view option 2.
|
||||||
|
</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">
|
||||||
|
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||||
|
Grid view 2
|
||||||
|
</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="select-item">
|
||||||
|
<a href="#" class="select-item-link">
|
||||||
|
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
|
||||||
|
Grid view 3
|
||||||
|
</a>
|
||||||
|
<a href="#" class="select-item-options">
|
||||||
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="select-footer">
|
||||||
|
<div class="select-footer-multiple">
|
||||||
|
<div class="select-footer-multiple-label">Add a view:</div>
|
||||||
|
<a href="#" class="select-footer-multiple-item">
|
||||||
|
<i class="select-footer-multiple-icon fas fa-th"></i>
|
||||||
|
Grid
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-s">
|
||||||
|
<div class="scrollbars" style="left: 260px;">
|
||||||
|
<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-s-divider" style="left: 260px;"></div>
|
||||||
|
<a href="#" class="grid-view-s-divider-width"style="left: 260px;"></a>
|
||||||
|
<div class="grid-view-s-scroll">
|
||||||
|
<div class="grid-view-s-inner" style="width: 2000px;">
|
||||||
|
<div class="grid-view-s-head">
|
||||||
|
<div class="grid-view-s-sticky-left" style="width: 260px;">
|
||||||
|
<div class="grid-view-s-column grid-view-s-column-no-border-right" style="width: 60px;"></div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-description">
|
||||||
|
<div class="grid-view-s-description-icon">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-description-name">Name</div>
|
||||||
|
<a href="#" class="grid-view-s-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-description">
|
||||||
|
<div class="grid-view-s-description-icon">
|
||||||
|
<i class="fas fa-hashtag"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-description-name">Price</div>
|
||||||
|
<a href="#" class="grid-view-s-description-options" data-context=".context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="grid-view-s-description-width"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-description">
|
||||||
|
<div class="grid-view-s-description-icon">
|
||||||
|
<i class="fas fa-check-square"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-description-name">Active</div>
|
||||||
|
<a href="#" class="grid-view-s-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="grid-view-s-description-width"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;" data-repeat="5">
|
||||||
|
<div class="grid-view-s-description">
|
||||||
|
<div class="grid-view-s-description-icon">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-description-name">Description</div>
|
||||||
|
<a href="#" class="grid-view-s-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="grid-view-s-description-width"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 100px;">
|
||||||
|
<a href="#" class="grid-view-s-add-column">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-body">
|
||||||
|
<div class="grid-view-s-row" data-repeat="20">
|
||||||
|
<div class="grid-view-s-sticky-left" style="width: 260px;">
|
||||||
|
<div class="grid-view-s-column grid-view-s-column-no-border-right" style="width: 60px;">
|
||||||
|
<div class="grid-view-s-row-info">
|
||||||
|
<div class="grid-view-s-row-count">10</div>
|
||||||
|
<a href="#" class="grid-view-s-row-more">
|
||||||
|
<i class="fas fa-expand"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">
|
||||||
|
<div class="grid-field-text">
|
||||||
|
Blue socks
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">
|
||||||
|
<div class="grid-field-number">
|
||||||
|
99,99
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">
|
||||||
|
<div class="grid-field-boolean">
|
||||||
|
<div class="grid-field-checkbox">
|
||||||
|
<i class="fas fa-check check"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">
|
||||||
|
<div class="grid-field-text">
|
||||||
|
A very long description that is not fully visible.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">
|
||||||
|
<div class="grid-field-text">Hello World!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">body 6</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">body 7</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">body 8</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-s-cell">body 9</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-column grid-view-s-add-column-placeholder" style="width: 100px;">
|
||||||
|
<div class="grid-view-s-cell"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-row">
|
||||||
|
<div class="grid-view-s-column" style="width: 1860px;">
|
||||||
|
<a href="#" class="grid-view-s-add-row">
|
||||||
|
<div class="grid-view-s-add-row-icon grid-view-s-sticky-left" style="width: 260px;">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-s-foot">
|
||||||
|
<div class="grid-view-s-sticky-left" style="width: 260px;">
|
||||||
|
<div class="grid-view-s-column" style="width: 260px;">
|
||||||
|
<div class="grid-view-s-foot-info">18 records</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-wrapper hidden">
|
||||||
|
<div class="modal-box">
|
||||||
|
<a href="#" class="modal-close">
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</a>
|
||||||
|
<h2 class="box-title">Orange Penquin</h2>
|
||||||
|
<form>
|
||||||
|
<div class="control">
|
||||||
|
<label class="control-label">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
Name
|
||||||
|
<a href="#" class="control-context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div class="control-elements">
|
||||||
|
<input type="text" class="input input-large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<label class="control-label">
|
||||||
|
<i class="fas fa-hashtag"></i>
|
||||||
|
Price
|
||||||
|
<a href="#" class="control-context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div class="control-elements">
|
||||||
|
<input type="text" class="input input-large field-number" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<label class="control-label">
|
||||||
|
<i class="fas fa-check-square"></i>
|
||||||
|
Active
|
||||||
|
<a href="#" class="control-context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div class="control-elements">
|
||||||
|
<div class="field-boolean-checkbox">
|
||||||
|
<i class="fas fa-check check"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<label class="control-label">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
Description
|
||||||
|
<a href="#" class="control-context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div class="control-elements">
|
||||||
|
<input type="text" class="input input-large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<label class="control-label">
|
||||||
|
<i class="fas fa-hashtag"></i>
|
||||||
|
Times sold
|
||||||
|
<a href="#" class="control-context">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div class="control-elements">
|
||||||
|
<input type="text" class="input input-large field-number" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
add field
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
$("[data-repeat]").each(function(i, object) {
|
||||||
|
var $object = $(object);
|
||||||
|
var amount = parseInt($object.attr("data-repeat"));
|
||||||
|
|
||||||
|
var html = $object[0].outerHTML;
|
||||||
|
for(var i = 0; i < amount; i++) {
|
||||||
|
$(html).insertAfter($object);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$scroll = $(".grid-view-s-scroll");
|
||||||
|
$divider = $(".grid-view-s-divider");
|
||||||
|
|
||||||
|
$(".grid-view-s-scroll").on('wheel', function(event) {
|
||||||
|
var top = $scroll.scrollTop() + event.originalEvent.deltaY;
|
||||||
|
var left = $scroll.scrollLeft() + event.originalEvent.deltaX;
|
||||||
|
|
||||||
|
$divider.toggleClass("shadow", left > 0);
|
||||||
|
$scroll.scrollTop(top);
|
||||||
|
$scroll.scrollLeft(left);
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$addColumn = $(".grid-view-s-add-column");
|
||||||
|
$addPlaceholder = $(".grid-view-s-add-column-placeholder")
|
||||||
|
$addColumn.hover(function() {
|
||||||
|
$addPlaceholder.addClass("hover");
|
||||||
|
}, function() {
|
||||||
|
$addPlaceholder.removeClass("hover");
|
||||||
|
});
|
||||||
|
|
||||||
|
$cell = $(".grid-view-s-cell");
|
||||||
|
$cell.click(function(e) {
|
||||||
|
$cell.removeClass("active");
|
||||||
|
$(this).addClass("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
$row = $(".grid-view-s-row");
|
||||||
|
$row.hover(function() {
|
||||||
|
$this = $(this);
|
||||||
|
$this.addClass("grid-view-s-row-hover");
|
||||||
|
}, function() {
|
||||||
|
$this = $(this);
|
||||||
|
$this.removeClass("grid-view-s-row-hover");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".grid-field-checkbox").click(function() {
|
||||||
|
if ($(this).closest(".grid-view-s-cell").hasClass("active")) {
|
||||||
|
$(this).toggleClass("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".field-boolean-checkbox").click(function() {
|
||||||
|
$(this).toggleClass("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".modal-close").click(function() {
|
||||||
|
$(this).closest(".modal-wrapper").addClass("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".grid-view-s-row-more").click(function() {
|
||||||
|
$(".modal-wrapper").removeClass("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("[data-context]").click(function() {
|
||||||
|
$(this).siblings($(this).attr("data-context")).toggleClass("hidden");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("[data-toggle-layout-collapse]").click(function() {
|
||||||
|
$(".layout").toggleClass("layout-collapsed");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".dropdown-items .select-item-link").click(function(e) {
|
||||||
|
$(this).closest(".dropdown-items").addClass("hidden");
|
||||||
|
})
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -10,7 +10,7 @@ const config = {
|
||||||
'cssFilename': './baserow.css',
|
'cssFilename': './baserow.css',
|
||||||
'sourceMaps': true,
|
'sourceMaps': true,
|
||||||
'devtool': 'inline-source-map',
|
'devtool': 'inline-source-map',
|
||||||
'pages': ['index.html', 'login.html', 'grid.html']
|
'pages': ['index.html', 'login.html', 'grid.html', 'grid-s.html']
|
||||||
};
|
};
|
||||||
|
|
||||||
// Export config
|
// Export config
|
||||||
|
|
|
||||||
284
web-frontend/assets/scss/components/views/_grid-s.scss
Normal file
284
web-frontend/assets/scss/components/views/_grid-s.scss
Normal file
|
|
@ -0,0 +1,284 @@
|
||||||
|
.grid-view-s {
|
||||||
|
@include absolute(0);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-sticky-left {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-scroll {
|
||||||
|
@include absolute(0);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-head {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
height: 33px;
|
||||||
|
background-color: $color-neutral-50;
|
||||||
|
border-bottom: 1px solid $color-neutral-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
min-height: calc(100% - 33px - 48px);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-foot {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
height: 48px;
|
||||||
|
background-color: $color-neutral-50;
|
||||||
|
border-top: 1px solid $color-neutral-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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-s-divider {
|
||||||
|
@include absolute(0, auto);
|
||||||
|
|
||||||
|
z-index: 3;
|
||||||
|
width: 4px;
|
||||||
|
border-left: 1px solid $color-neutral-300;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
margin-left: -1px;
|
||||||
|
|
||||||
|
&::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-s-divider-width {
|
||||||
|
@include absolute(3px, auto, auto, auto);
|
||||||
|
|
||||||
|
margin-left: -4.5px;
|
||||||
|
z-index: 3;
|
||||||
|
width: 9px;
|
||||||
|
height: 26px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@include absolute(0, 2px, 0, 2px);
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
background-color: $color-primary-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-foot-info {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-row {
|
||||||
|
@extend .clearfix;
|
||||||
|
|
||||||
|
height: 32px + 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Because the width of a column can be adjusted it is specified in the html file.
|
||||||
|
.grid-view-s-column {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
height: 32px + 1px;
|
||||||
|
border-right: 1px solid $color-neutral-200;
|
||||||
|
border-bottom: 1px solid $color-neutral-200;
|
||||||
|
|
||||||
|
.grid-view-s-head & {
|
||||||
|
height: 32px;
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: $color-neutral-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-foot & {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grid-view-s-column-no-border-right {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-row-info {
|
||||||
|
@include absolute(0);
|
||||||
|
|
||||||
|
background-color: $white;
|
||||||
|
padding: 0 24px 0 6px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-row-count {
|
||||||
|
@extend %ellipsis;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-row-more {
|
||||||
|
@include absolute((32px - 18px) / 2, 4px, 0 auto);
|
||||||
|
@include center-text(18px, 11px);
|
||||||
|
|
||||||
|
color: $color-neutral-400;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.grid-view-s-row-hover & {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-100;
|
||||||
|
color: $color-primary-800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-cell {
|
||||||
|
@include absolute(0);
|
||||||
|
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include absolute(-2px);
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
border: 2px solid $color-primary-500;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active-by {
|
||||||
|
border-color: $color-success-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-cell-active-by {
|
||||||
|
@include absolute(-8px, 0, auto, auto);
|
||||||
|
@include fixed-height(18px, 12px);
|
||||||
|
|
||||||
|
background-color: $color-success-500;
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 3px;
|
||||||
|
transform: translateX(50%);
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-description {
|
||||||
|
padding: 0 30px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
.grid-view-s-description-icon,
|
||||||
|
.grid-view-s-description-options {
|
||||||
|
line-height: inherit;
|
||||||
|
width: 30px;
|
||||||
|
color: $color-neutral-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-description-icon {
|
||||||
|
@include absolute(0, auto, 0, 0);
|
||||||
|
|
||||||
|
padding-left: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-description-options {
|
||||||
|
@include absolute(0, 4px, 0, auto);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-neutral-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-description-width {
|
||||||
|
@include absolute(3px, -4.5px, 3px, auto);
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
width: 9px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@include absolute(0, 2px, 0, 2px);
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
background-color: $color-primary-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-description-name {
|
||||||
|
@extend %ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-add-column {
|
||||||
|
display: block;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
color: $color-neutral-900;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-add-column-placeholder {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-add-row {
|
||||||
|
display: block;
|
||||||
|
height: 32px;
|
||||||
|
color: $color-neutral-900;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-s-add-row-icon {
|
||||||
|
padding-left: 10px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
@import 'components/fields/boolean';
|
@import 'components/fields/boolean';
|
||||||
@import 'components/fields/number';
|
@import 'components/fields/number';
|
||||||
@import 'components/views/grid';
|
@import 'components/views/grid';
|
||||||
|
@import 'components/views/grid-s';
|
||||||
@import 'components/views/grid/text';
|
@import 'components/views/grid/text';
|
||||||
@import 'components/views/grid/boolean';
|
@import 'components/views/grid/boolean';
|
||||||
@import 'components/views/grid/number';
|
@import 'components/views/grid/number';
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue