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

finished grid styling

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-22 12:33:46 +01:00
parent 703ac6d861
commit 79dae77530
2 changed files with 95 additions and 8 deletions
web-frontend
public
grid.html
src/scss/components/views
_grid.scss

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

@ -175,13 +175,14 @@
</header>
<div class="layout-col-3-2 content">
<div class="grid-view">
<div class="scrollbars" style="left: 200px;">
<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-left" style="width: 200px;">
<div class="grid-view-inner" style="min-width: 200px;">
<div class="grid-view-left" style="width: 260px;">
<div class="grid-view-inner" style="width: 260px;">
<div class="grid-view-head">
<div class="grid-view-column" style="width: 60px;"></div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-description">
<div class="grid-view-description-icon">
@ -197,6 +198,14 @@
<div class="grid-view-body">
<div class="grid-view-body-inner">
<div class="grid-view-row" data-repeat="20">
<div class="grid-view-column" style="width: 60px;">
<div class="grid-view-row-info">
<div class="grid-view-row-count">10</div>
<a href="#" class="grid-view-row-more">
<i class="fas fa-expand"></i>
</a>
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
<div class="grid-field-text">
@ -206,7 +215,7 @@
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-column" style="width: 260px;">
<a href="#" class="grid-view-add-row">
<i class="fas fa-plus"></i>
</a>
@ -221,8 +230,9 @@
</div>
</div>
</div>
<div class="grid-view-divider" style="left: 200px;"></div>
<div class="grid-view-right" style="left: 200px;">
<div class="grid-view-divider" style="left: 260px;"></div>
<a href="#" class="grid-view-divider-width"style="left: 260px;"></a>
<div class="grid-view-right" style="left: 260px;">
<div class="grid-view-inner" style="min-width: 1800px;">
<div class="grid-view-head">
<div class="grid-view-column" style="width: 200px;">
@ -234,6 +244,7 @@
<a href="#" class="grid-view-description-options">
<i class="fas fa-caret-down"></i>
</a>
<a href="#" class="grid-view-description-width"></a>
</div>
</div>
<div class="grid-view-column" style="width: 200px;">
@ -245,6 +256,7 @@
<a href="#" class="grid-view-description-options">
<i class="fas fa-caret-down"></i>
</a>
<a href="#" class="grid-view-description-width"></a>
</div>
</div>
<div class="grid-view-column" style="width: 200px;" data-repeat="5">
@ -256,6 +268,7 @@
<a href="#" class="grid-view-description-options">
<i class="fas fa-caret-down"></i>
</a>
<a href="#" class="grid-view-description-width"></a>
</div>
</div>
<div class="grid-view-column" style="width: 100px;">
@ -292,6 +305,7 @@
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">
<!--<div class-parent="active-by" class="grid-view-cell-active-by">Bram</div>-->
<div class="grid-field-text">
Hello World!
</div>
@ -371,6 +385,15 @@
$addPlaceholder.removeClass("hover");
});
$row = $(".grid-view-row");
$row.hover(function() {
$this = $(this);
$this.addClass("grid-view-row-hover");
}, function() {
$this = $(this);
$this.removeClass("grid-view-row-hover");
});
$cell = $(".grid-view-cell")
$cell.click(function(e) {
$cell.removeClass("active");

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

@ -39,7 +39,7 @@
// adjusted that is why it is specified in the html file.
.grid-view-divider {
@include absolute(0, auto);
z-index: 2;
z-index: 3;
width: 4px;
border-left: 1px solid $color-neutral-300;
overflow: hidden;
@ -60,6 +60,24 @@
}
}
.grid-view-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-head {
@include absolute(0, 0, auto, 0);
height: 33px;
@ -120,6 +138,36 @@
}
}
.grid-view-row-info {
@include absolute(0);
background-color: $white;
padding: 0 24px 0 6px;
line-height: 32px;
}
.grid-view-row-count {
@extend %ellipsis;
width: 100%;
}
.grid-view-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-row-hover & {
display: block;
}
&:hover {
background-color: $color-primary-100;
color: $color-primary-800;
}
}
.grid-view-cell {
@include absolute(0);
background-color: $white;
@ -168,7 +216,7 @@
}
.grid-view-description-options {
@include absolute(0, 0, 0, auto);
@include absolute(0, 4px, 0, auto);
text-align: center;
&:hover {
@ -176,6 +224,22 @@
}
}
.grid-view-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-description-name {
@extend %ellipsis;
}