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

added field styling, add buttons and finished basic grid view styling

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-08 14:34:25 +01:00
parent dab8da69fc
commit cee1040bcb
6 changed files with 252 additions and 583 deletions
web-frontend
public
grid.html
src/scss
components/views
_grid.scss
grid
_boolean.scss_number.scss_text.scss
default.scss

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

@ -182,109 +182,42 @@
<div class="grid-view-left" style="width: 200px;">
<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 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 class="grid-view-body">
<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-cell">body 1</div>
<div class="grid-view-cell">
<div class="grid-field-text">
Blue socks
</div>
</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 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>
<a href="#" class="grid-view-add-row">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
<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>
@ -292,30 +225,77 @@
<div class="grid-view-right" style="left: 200px;">
<div class="grid-view-inner" style="min-width: 1800px;">
<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: 200px;">head 8</div>
<div class="grid-view-column" style="width: 200px;">head 9</div>
<div class="grid-view-column" style="width: 100px;">+</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-description">
<div class="grid-view-description-icon">
<i class="fas fa-hashtag"></i>
</div>
<div class="grid-view-description-name">Price</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;">
<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 class="grid-view-body">
<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-cell">body 2</div>
<div class="grid-view-cell">
<div class="grid-field-number">
99,99
</div>
</div>
</div>
<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 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 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 class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
@ -329,487 +309,18 @@
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 9</div>
</div>
<div class="grid-view-column grid-view-add-column-placeholder" style="width: 100px;">
<div class="grid-view-cell"></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 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 class="grid-view-column" style="width: 1600px;">
<a href="#" class="grid-view-add-row"></a>
</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 class="grid-view-column" style="width: 200px;">footer 8</div>
<div class="grid-view-column" style="width: 200px;">footer 9</div>
</div>
<div class="grid-view-foot"></div>
</div>
</div>
</div>
@ -819,6 +330,16 @@
<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);
}
});
$top1 = $(".grid-view-left .grid-view-body");
$top2 = $(".grid-view-right .grid-view-body");
$left1 = $(".grid-view-right");
@ -834,6 +355,33 @@
$left1.scrollLeft(left);
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>
</body>

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

@ -87,6 +87,10 @@
border-top: 1px solid $color-neutral-200;
}
.grid-view-foot-info {
padding: 10px;
}
.grid-view-row {
@extend .clearfix;
height: 32px + 1px;
@ -121,12 +125,91 @@
background-color: $white;
&.active {
@include absolute(-2px);
z-index: 2;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 2px solid $color-primary-500;
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
View 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
View 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
View file

@ -0,0 +1,5 @@
.grid-field-text {
@extend %ellipsis;
@include fixed-height(32px, 13px);
padding: 0 10px;
}

3
web-frontend/src/scss/default.scss
View file

@ -20,5 +20,8 @@
@import "components/scrollbar";
@import "components/views/grid";
@import "components/views/grid/text";
@import "components/views/grid/boolean";
@import "components/views/grid/number";
@import "components/box_page";