From 47cf84bf0b0951a28f7c2aabb32a3e09c19da7a3 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Fri, 1 Mar 2019 12:59:35 +0100
Subject: [PATCH] added header styling
---
.editorconfig | 2 +-
web-frontend/public/grid.html | 28 ++++++-
web-frontend/src/scss/_vendors.scss | 2 +-
web-frontend/src/scss/base/_helpers.scss | 12 ++-
web-frontend/src/scss/components/_header.scss | 81 +++++++++++++++++++
web-frontend/src/scss/components/_layout.scss | 20 ++++-
web-frontend/src/scss/default.scss | 2 +
7 files changed, 140 insertions(+), 7 deletions(-)
create mode 100644 web-frontend/src/scss/components/_header.scss
diff --git a/.editorconfig b/.editorconfig
index 5808f97c1..ca6f42730 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -11,7 +11,7 @@ insert_final_newline = true
[Makefile]
indent_style = tab
-[*.{js,yml,scss,json}]
+[*.{js,yml,scss,json,eslintrc,stylelintrc}]
indent_size = 2
[*.md]
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index d37ea858c..8486a0bf7 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -148,7 +148,33 @@
</a>
</div>
</div>
- <div class="layout-col-3">content</div>
+ <div class="layout-col-3">
+ <div class="layout-col-3-1 header">
+ <ul class="header-filter">
+ <li>
+ <a href="#">
+ <i class="header-filter-icon fas fa-th"></i>
+ Grid view name
+ </a>
+ </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>
+ </div>
+ <div class="layout-col-3-2 content">
+ CONTENT !
+ </div>
+ </div>
</div>
</body>
</html>
diff --git a/web-frontend/src/scss/_vendors.scss b/web-frontend/src/scss/_vendors.scss
index f20661142..4b2fd4020 100644
--- a/web-frontend/src/scss/_vendors.scss
+++ b/web-frontend/src/scss/_vendors.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,400i,700,700i");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,400i,600,700,700i");
@import "~normalize.css/normalize.css";
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index cfb01246a..f6f6764a2 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -1,3 +1,9 @@
+.clearfix::after {
+ clear: both;
+ content: '';
+ display: table;
+}
+
.hidden {
display: none;
}
@@ -11,11 +17,11 @@
transform: rotate(0deg);
}
- 68% {
- transform: rotate(880deg);
+ 40% {
+ transform: rotate(360deg);
}
100% {
- transform: rotate(1080deg);
+ transform: rotate(720deg);
}
}
diff --git a/web-frontend/src/scss/components/_header.scss b/web-frontend/src/scss/components/_header.scss
new file mode 100644
index 000000000..6f5694d0d
--- /dev/null
+++ b/web-frontend/src/scss/components/_header.scss
@@ -0,0 +1,81 @@
+.header {
+ display: flex;
+ justify-content: space-between;
+ background-color: $white;
+ border-bottom: 2px solid $color-neutral-200;
+}
+
+.undo-redo a {
+ @extend %first-last-no-margin;
+
+ display: inline-block;
+ font-size: 12px;
+ color: $color-neutral-300;
+ cursor: inherit;
+ margin: 0 2px;
+
+ &.active {
+ cursor: pointer;
+ color: $color-neutral-800;
+
+ &:hover {
+ color: $color-primary-500;
+ }
+ }
+}
+
+.header-filter {
+ @extend .clearfix;
+
+ list-style: none;
+ padding: 0;
+ margin: auto 0;
+
+ li {
+ @extend %first-last-no-margin;
+
+ float: left;
+ margin-left: 12px;
+ }
+
+ a {
+ display: block;
+ font-weight: 600;
+ color: $color-primary-900;
+ padding: 0 10px;
+ border-radius: 3px;
+
+ @include fixed-height(32px, 13px);
+
+ &:hover {
+ text-decoration: none;
+ background-color: $color-neutral-100;
+ }
+ }
+
+ .header-filter-icon {
+ color: $color-primary-500;
+ margin-right: 4px;
+ font-size: 14px;
+ }
+}
+
+.header-info {
+ @extend .clearfix;
+
+ list-style: none;
+ padding: 0;
+ margin: auto 0;
+
+ li {
+ float: left;
+ padding: 2px 12px;
+ border-right: 1px solid $color-neutral-200;
+ font-size: 14px;
+ font-weight: 600;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
diff --git a/web-frontend/src/scss/components/_layout.scss b/web-frontend/src/scss/components/_layout.scss
index 3b165e58b..8a72d6c89 100644
--- a/web-frontend/src/scss/components/_layout.scss
+++ b/web-frontend/src/scss/components/_layout.scss
@@ -8,15 +8,16 @@
.layout-col-1 {
position: absolute;
+ z-index: 3;
left: 0;
top: 0;
bottom: 0;
width: 52px;
- overflow-x: auto;
}
.layout-col-2 {
position: absolute;
+ z-index: 2;
left: 52px;
top: 0;
bottom: 0;
@@ -26,9 +27,26 @@
.layout-col-3 {
position: absolute;
+ z-index: 1;
left: 278px;
top: 0;
bottom: 0;
right: 0;
+}
+
+.layout-col-3-1 {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ height: 52px;
+}
+
+.layout-col-3-2 {
+ position: absolute;
+ left: 0;
+ top: 52px;
+ right: 0;
+ bottom: 0;
overflow-y: auto;
}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 26d5aa97f..802ee7167 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -16,5 +16,7 @@
@import "components/menu";
@import "components/sidebar";
@import "components/tree";
+@import "components/header";
@import "components/box_page";
+