From 79dae775303ddeed0d86d9a320652548f9dfb42c Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Fri, 22 Mar 2019 12:33:46 +0100
Subject: [PATCH] finished grid styling
---
web-frontend/public/grid.html | 35 ++++++++--
.../src/scss/components/views/_grid.scss | 68 ++++++++++++++++++-
2 files changed, 95 insertions(+), 8 deletions(-)
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 4a2b5b570..990bd6fb3 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -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");
diff --git a/web-frontend/src/scss/components/views/_grid.scss b/web-frontend/src/scss/components/views/_grid.scss
index 17370a670..3fe2c85a9 100644
--- a/web-frontend/src/scss/components/views/_grid.scss
+++ b/web-frontend/src/scss/components/views/_grid.scss
@@ -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;
}