mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-14 09:08:32 +00:00
added field styling, add buttons and finished basic grid view styling
This commit is contained in:
Bram Wiepjes
parent
dab8da69fc
commit
cee1040bcb
6 changed files with 252 additions and 583 deletions
web-frontend
public
src/scss
|
|
@ -182,109 +182,42 @@
|
||||||
<div class="grid-view-left" style="width: 200px;">
|
<div class="grid-view-left" style="width: 200px;">
|
||||||
<div class="grid-view-inner" style="min-width: 200px;">
|
<div class="grid-view-inner" style="min-width: 200px;">
|
||||||
<div class="grid-view-head">
|
<div class="grid-view-head">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 1</div>
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-description">
|
||||||
|
<div class="grid-view-description-icon">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-description-name">Name</div>
|
||||||
|
<a href="#" class="grid-view-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-body">
|
<div class="grid-view-body">
|
||||||
<div class="grid-view-body-inner">
|
<div class="grid-view-body-inner">
|
||||||
<div class="grid-view-row">
|
<div class="grid-view-row" data-repeat="20">
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 1</div>
|
<div class="grid-view-cell">
|
||||||
|
<div class="grid-field-text">
|
||||||
|
Blue socks
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-row">
|
<div class="grid-view-row">
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 1</div>
|
<a href="#" class="grid-view-add-row">
|
||||||
</div>
|
<i class="fas fa-plus"></i>
|
||||||
</div>
|
</a>
|
||||||
<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 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>
|
</div>
|
||||||
<div class="grid-view-foot">
|
<div class="grid-view-foot">
|
||||||
<div class="grid-view-column">footer 1</div>
|
<div class="grid-view-column">
|
||||||
|
<div class="grid-view-foot-info">18 records</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -292,30 +225,77 @@
|
||||||
<div class="grid-view-right" style="left: 200px;">
|
<div class="grid-view-right" style="left: 200px;">
|
||||||
<div class="grid-view-inner" style="min-width: 1800px;">
|
<div class="grid-view-inner" style="min-width: 1800px;">
|
||||||
<div class="grid-view-head">
|
<div class="grid-view-head">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 2</div>
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 3</div>
|
<div class="grid-view-description">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 4</div>
|
<div class="grid-view-description-icon">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 5</div>
|
<i class="fas fa-hashtag"></i>
|
||||||
<div class="grid-view-column" style="width: 200px;">head 6</div>
|
</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">head 7</div>
|
<div class="grid-view-description-name">Price</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">head 8</div>
|
<a href="#" class="grid-view-description-options">
|
||||||
<div class="grid-view-column" style="width: 200px;">head 9</div>
|
<i class="fas fa-caret-down"></i>
|
||||||
<div class="grid-view-column" style="width: 100px;">+</div>
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
|
<div class="grid-view-description">
|
||||||
|
<div class="grid-view-description-icon">
|
||||||
|
<i class="fas fa-check-square"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-description-name">Active</div>
|
||||||
|
<a href="#" class="grid-view-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-column" style="width: 200px;" data-repeat="5">
|
||||||
|
<div class="grid-view-description">
|
||||||
|
<div class="grid-view-description-icon">
|
||||||
|
<i class="fas fa-font"></i>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-description-name">Description</div>
|
||||||
|
<a href="#" class="grid-view-description-options">
|
||||||
|
<i class="fas fa-caret-down"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-view-column" style="width: 100px;">
|
||||||
|
<a href="#" class="grid-view-add-column">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-body">
|
<div class="grid-view-body">
|
||||||
<div class="grid-view-body-inner">
|
<div class="grid-view-body-inner">
|
||||||
<div class="grid-view-row">
|
<div class="grid-view-row" data-repeat="20">
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 2</div>
|
<div class="grid-view-cell">
|
||||||
|
<div class="grid-field-number">
|
||||||
|
99,99
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 3</div>
|
<div class="grid-view-cell">
|
||||||
|
<div class="grid-field-boolean">
|
||||||
|
<div class="grid-field-checkbox">
|
||||||
|
<i class="fas fa-check check"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 4</div>
|
<div class="grid-view-cell">
|
||||||
|
<div class="grid-field-text">
|
||||||
|
A very long description that is not fully visible.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 5</div>
|
<div class="grid-view-cell">
|
||||||
|
<div class="grid-field-text">
|
||||||
|
Hello World!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 6</div>
|
<div class="grid-view-cell">body 6</div>
|
||||||
|
|
@ -329,487 +309,18 @@
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 200px;">
|
||||||
<div class="grid-view-cell">body 9</div>
|
<div class="grid-view-cell">body 9</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="grid-view-column grid-view-add-column-placeholder" style="width: 100px;">
|
||||||
|
<div class="grid-view-cell"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-row">
|
<div class="grid-view-row">
|
||||||
<div class="grid-view-column" style="width: 200px;">
|
<div class="grid-view-column" style="width: 1600px;">
|
||||||
<div class="grid-view-cell">body 2</div>
|
<a href="#" class="grid-view-add-row"></a>
|
||||||
</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 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 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-view-foot">
|
<div class="grid-view-foot"></div>
|
||||||
<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 class="grid-view-column" style="width: 200px;">footer 8</div>
|
|
||||||
<div class="grid-view-column" style="width: 200px;">footer 9</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -819,6 +330,16 @@
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$top1 = $(".grid-view-left .grid-view-body");
|
$top1 = $(".grid-view-left .grid-view-body");
|
||||||
$top2 = $(".grid-view-right .grid-view-body");
|
$top2 = $(".grid-view-right .grid-view-body");
|
||||||
$left1 = $(".grid-view-right");
|
$left1 = $(".grid-view-right");
|
||||||
|
|
@ -834,6 +355,33 @@
|
||||||
$left1.scrollLeft(left);
|
$left1.scrollLeft(left);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$addRow = $(".grid-view-add-row");
|
||||||
|
$addRow.hover(function() {
|
||||||
|
$addRow.addClass("hover");
|
||||||
|
}, function() {
|
||||||
|
$addRow.removeClass("hover");
|
||||||
|
});
|
||||||
|
|
||||||
|
$addColumn = $(".grid-view-add-column");
|
||||||
|
$addPlaceholder = $(".grid-view-add-column-placeholder")
|
||||||
|
$addColumn.hover(function() {
|
||||||
|
$addPlaceholder.addClass("hover");
|
||||||
|
}, function() {
|
||||||
|
$addPlaceholder.removeClass("hover");
|
||||||
|
});
|
||||||
|
|
||||||
|
$cell = $(".grid-view-cell")
|
||||||
|
$cell.click(function(e) {
|
||||||
|
$cell.removeClass("active");
|
||||||
|
$(this).addClass("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".grid-field-checkbox").click(function() {
|
||||||
|
if ($(this).closest(".grid-view-cell").hasClass("active")) {
|
||||||
|
$(this).toggleClass("active");
|
||||||
|
}
|
||||||
|
});
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,10 @@
|
||||||
border-top: 1px solid $color-neutral-200;
|
border-top: 1px solid $color-neutral-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-view-foot-info {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-view-row {
|
.grid-view-row {
|
||||||
@extend .clearfix;
|
@extend .clearfix;
|
||||||
height: 32px + 1px;
|
height: 32px + 1px;
|
||||||
|
|
@ -121,12 +125,91 @@
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
@include absolute(-2px);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
left: -2px;
|
|
||||||
top: -2px;
|
|
||||||
right: -2px;
|
|
||||||
bottom: -2px;
|
|
||||||
border: 2px solid $color-primary-500;
|
border: 2px solid $color-primary-500;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.active-by {
|
||||||
|
border-color: $color-success-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-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-description {
|
||||||
|
padding: 0 30px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
.grid-view-description-icon,
|
||||||
|
.grid-view-description-options {
|
||||||
|
line-height: inherit;
|
||||||
|
width: 30px;
|
||||||
|
color: $color-neutral-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-description-icon {
|
||||||
|
@include absolute(0, auto, 0, 0);
|
||||||
|
padding-left: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-description-options {
|
||||||
|
@include absolute(0, 0, 0, auto);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-neutral-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-description-name {
|
||||||
|
@extend %ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-add-column {
|
||||||
|
display: block;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
color: $color-neutral-900;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $color-primary-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-add-column-placeholder {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-view-add-row {
|
||||||
|
display: block;
|
||||||
|
line-height: 32px;
|
||||||
|
height: 32px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: $color-neutral-900;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.hover {
|
||||||
|
background-color: $color-primary-100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
24
web-frontend/src/scss/components/views/grid/_boolean.scss
Normal file
24
web-frontend/src/scss/components/views/grid/_boolean.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
.grid-field-boolean {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-field-checkbox {
|
||||||
|
margin: auto;
|
||||||
|
border: 1px solid $color-neutral-200;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $color-success-600;
|
||||||
|
@include center-text(18px, 11px);
|
||||||
|
|
||||||
|
.grid-view-cell.active & {
|
||||||
|
border-color: $color-neutral-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active .check {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
web-frontend/src/scss/components/views/grid/_number.scss
Normal file
6
web-frontend/src/scss/components/views/grid/_number.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
.grid-field-number {
|
||||||
|
@extend %ellipsis;
|
||||||
|
@include fixed-height(32px, 13px);
|
||||||
|
text-align: right;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
5
web-frontend/src/scss/components/views/grid/_text.scss
Normal file
5
web-frontend/src/scss/components/views/grid/_text.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.grid-field-text {
|
||||||
|
@extend %ellipsis;
|
||||||
|
@include fixed-height(32px, 13px);
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
@ -20,5 +20,8 @@
|
||||||
@import "components/scrollbar";
|
@import "components/scrollbar";
|
||||||
|
|
||||||
@import "components/views/grid";
|
@import "components/views/grid";
|
||||||
|
@import "components/views/grid/text";
|
||||||
|
@import "components/views/grid/boolean";
|
||||||
|
@import "components/views/grid/number";
|
||||||
|
|
||||||
@import "components/box_page";
|
@import "components/box_page";
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue