diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 8af02b57c..d37ea858c 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -31,7 +31,122 @@
</ul>
</div>
<div class="layout-col-2 sidebar">
- sidebar
+ <div class="sidebar-content">
+ <div class="sidebar-title">Baserow</div>
+ <div class="sidebar-group-title">Group name 1</div>
+ <ul class="tree">
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Vehicles
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ </li>
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-angle-right"></i>
+ Map nummer 1
+ </a>
+ </div>
+ </li>
+ <li class="tree-item active">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Webshop
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ <ul class="tree-subs">
+ <li class="tree-sub active">
+ <a href="#" class="tree-sub-link">Customers</a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </li>
+ <li class="tree-sub">
+ <a href="#" class="tree-sub-link">Products very long name</a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </li>
+ <li class="tree-sub">
+ <a href="#" class="tree-sub-link">Categories</a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </li>
+ </ul>
+ </li>
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-angle-down"></i>
+ Map nummer 1
+ </a>
+ </div>
+ <ul class="tree">
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Vehicles
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ </li>
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Something
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Vehicles with very long name and that is not good.
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ </li>
+ <li class="tree-item">
+ <div class="tree-action">
+ <a href="#" class="tree-link">
+ <i class="tree-type fas fa-database"></i>
+ Something else
+ </a>
+ <a href="#" class="tree-options">
+ <i class="fas fa-ellipsis-v"></i>
+ </a>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="sidebar-footer">
+ <a href="#" class="sidebar-collapse">
+ <i class="fas fa-angle-double-left"></i>
+ Collapse sidebar
+ </a>
+ </div>
</div>
<div class="layout-col-3">content</div>
</div>
diff --git a/web-frontend/src/scss/abstracts/_mixins.scss b/web-frontend/src/scss/abstracts/_mixins.scss
index 3fa4b9ea8..481ebdf71 100644
--- a/web-frontend/src/scss/abstracts/_mixins.scss
+++ b/web-frontend/src/scss/abstracts/_mixins.scss
@@ -41,10 +41,15 @@
}
}
-@mixin center-text($width, $font-size, $height: $width) {
- width: $width;
+@mixin fixed-height($height, $font-size) {
height: $height;
line-height: $height;
font-size: $font-size;
+}
+
+@mixin center-text($width, $font-size, $height: $width) {
+ @include fixed-height($height, $font-size);
+
+ width: $width;
text-align: center;
}
diff --git a/web-frontend/src/scss/abstracts/_placeholders.scss b/web-frontend/src/scss/abstracts/_placeholders.scss
index e0260b625..44e7eaa54 100644
--- a/web-frontend/src/scss/abstracts/_placeholders.scss
+++ b/web-frontend/src/scss/abstracts/_placeholders.scss
@@ -7,3 +7,9 @@
margin-bottom: 0;
}
}
+
+%ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/web-frontend/src/scss/base/_typography.scss b/web-frontend/src/scss/base/_typography.scss
index fb631dbd6..f2f16c83b 100644
--- a/web-frontend/src/scss/base/_typography.scss
+++ b/web-frontend/src/scss/base/_typography.scss
@@ -1,5 +1,14 @@
html {
font-size: 62.5%;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+}
+
+@-moz-document url-prefix() {
+ body {
+ font-weight: lighter !important;
+ }
}
body {
diff --git a/web-frontend/src/scss/components/_layout.scss b/web-frontend/src/scss/components/_layout.scss
index 213255ac6..3b165e58b 100644
--- a/web-frontend/src/scss/components/_layout.scss
+++ b/web-frontend/src/scss/components/_layout.scss
@@ -4,21 +4,31 @@
top: 0;
right: 0;
bottom: 0;
- display: flex;
}
.layout-col-1 {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 52px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 52px;
+ overflow-x: auto;
}
.layout-col-2 {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 226px;
+ position: absolute;
+ left: 52px;
+ top: 0;
+ bottom: 0;
+ width: 226px;
+ overflow-y: auto;
}
.layout-col-3 {
- width: 100%;
+ position: absolute;
+ left: 278px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ overflow-y: auto;
}
diff --git a/web-frontend/src/scss/components/_menu.scss b/web-frontend/src/scss/components/_menu.scss
index 89d2fb7e9..5ae9cbf6b 100644
--- a/web-frontend/src/scss/components/_menu.scss
+++ b/web-frontend/src/scss/components/_menu.scss
@@ -41,6 +41,7 @@
border-radius: 100%;
background-color: $color-primary-500;
color: $white;
+ font-weight: 700;
@include center-text(32px, 18px);
}
@@ -55,6 +56,7 @@
border-radius: 3px;
padding: 0 4px;
white-space: nowrap;
+ font-weight: 400;
@include center-text(auto, 11px, 21px);
diff --git a/web-frontend/src/scss/components/_sidebar.scss b/web-frontend/src/scss/components/_sidebar.scss
index 1b59a7000..619ce3875 100644
--- a/web-frontend/src/scss/components/_sidebar.scss
+++ b/web-frontend/src/scss/components/_sidebar.scss
@@ -1,4 +1,44 @@
.sidebar {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
background-color: $white;
border-right: 1px solid $color-neutral-200;
}
+
+.sidebar-content {
+ padding: 12px;
+}
+
+.sidebar-footer {
+ flex-grow: 0;
+ flex-shrink: 0;
+ border-top: 1px solid $color-neutral-200;
+}
+
+.sidebar-collapse {
+ display: block;
+ padding: 14px 16px;
+ color: $color-primary-900;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 14px;
+
+ &:hover {
+ text-decoration: none;
+ background-color: $color-neutral-100;
+ }
+}
+
+.sidebar-title {
+ font-family: $logo-font-stack;
+ font-size: 20px;
+ font-weight: 700;
+ margin-bottom: 16px;
+}
+
+.sidebar-group-title {
+ font-size: 14px;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
diff --git a/web-frontend/src/scss/components/_tree.scss b/web-frontend/src/scss/components/_tree.scss
new file mode 100644
index 000000000..542f6391d
--- /dev/null
+++ b/web-frontend/src/scss/components/_tree.scss
@@ -0,0 +1,144 @@
+.tree {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ .tree-item & {
+ padding-left: 8px;
+ }
+}
+
+.tree-item {
+ @extend %first-last-no-margin;
+
+ position: relative;
+ margin: 4px 0;
+ border-radius: 3px;
+
+ &.active {
+ background-color: $color-primary-100;
+ }
+}
+
+%tree-size {
+ line-height: 32px;
+ height: 32px;
+}
+
+.tree-action {
+ @extend %tree-size;
+
+ padding: 0 32px 0 6px;
+ border-radius: 3px;
+
+ &:hover {
+ background-color: $color-neutral-100;
+ }
+
+ .tree-item.active &:hover {
+ background-color: transparent;
+ }
+}
+
+.tree-link {
+ @extend %tree-size;
+ @extend %ellipsis;
+
+ display: block;
+ color: $color-primary-900;
+ font-size: 14px;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.tree-type {
+ @extend %tree-size;
+
+ text-align: center;
+ width: $fa-fw-width;
+ color: $color-neutral-300;
+ margin-right: 4px;
+ font-size: 11px;
+}
+
+%sub-tree-size {
+ line-height: 28px;
+ height: 28px;
+}
+
+.tree-subs {
+ list-style: none;
+ padding: 0 0 2px 0;
+ margin: 0;
+}
+
+.tree-sub {
+ @extend %sub-tree-size;
+
+ position: relative;
+ padding: 0 34px;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ left: 12px;
+ }
+
+ &::before {
+ top: 0;
+ height: 28px;
+ border-left: 1px solid $color-neutral-200;
+ }
+
+ &::after {
+ top: 14px;
+ width: 12px;
+ border-bottom: 1px solid $color-neutral-200;
+ }
+
+ &:last-child::before {
+ height: 15px;
+ }
+}
+
+.tree-sub-link {
+ @extend %sub-tree-size;
+ @extend %ellipsis;
+
+ color: $color-primary-900;
+ display: block;
+
+ &:hover {
+ text-decoration: none;
+ color: $color-primary-500;
+ }
+
+ .active > & {
+ font-weight: 600;
+ color: $color-primary-600;
+ }
+}
+
+.tree-options {
+ display: none;
+ position: absolute;
+ z-index: 1;
+ right: 0;
+ top: 0;
+ text-align: center;
+ width: 32px;
+ color: $color-neutral-300;
+ height: inherit;
+ line-height: inherit;
+
+ &:hover {
+ color: $color-neutral-700;
+ }
+
+ :hover > & {
+ display: block;
+ }
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 5b3f06711..26d5aa97f 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -15,5 +15,6 @@
@import "components/layout";
@import "components/menu";
@import "components/sidebar";
+@import "components/tree";
@import "components/box_page";