From 257b4a2f6771186d85f96e3a9d1289a7f2a266dd Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Fri, 12 Apr 2019 12:22:22 +0200
Subject: [PATCH] added icon and max-height to select
---
web-frontend/public/grid.html | 22 ++++++++++++++-----
web-frontend/src/scss/components/_select.scss | 16 +++++++++++++-
2 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index e87a2b95a..eeae33d7d 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -247,8 +247,11 @@
<input type="text" class="select-search-input" placeholder="Search views" />
</div>
<ul class="select-items">
- <li class="select-item active">
- <a href="#" class="select-item-link">Grid view name</a>
+ <li class="select-item">
+ <a href="#" class="select-item-link">
+ <i class="fas fa-th fa-fw color-primary"></i>
+ Grid view name
+ </a>
<a href="#" class="select-item-options" data-context=".context">
<i class="fas fa-ellipsis-v"></i>
</a>
@@ -270,19 +273,28 @@
</div>
</li>
<li class="select-item">
- <a href="#" class="select-item-link">Grid view option 2.</a>
+ <a href="#" class="select-item-link">
+ <i class="fas fa-th fa-fw color-primary"></i>
+ Grid view option 2.
+ </a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select-item">
- <a href="#" class="select-item-link">Grid view 2</a>
+ <a href="#" class="select-item-link">
+ <i class="fas fa-th fa-fw color-primary"></i>
+ Grid view 2
+ </a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select-item">
- <a href="#" class="select-item-link">Grid view 3</a>
+ <a href="#" class="select-item-link">
+ <i class="fas fa-th fa-fw color-primary"></i>
+ Grid view 3
+ </a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
diff --git a/web-frontend/src/scss/components/_select.scss b/web-frontend/src/scss/components/_select.scss
index ab2994762..c0a2dfaa6 100644
--- a/web-frontend/src/scss/components/_select.scss
+++ b/web-frontend/src/scss/components/_select.scss
@@ -30,7 +30,17 @@
.select-items {
list-style: none;
padding: 0;
- margin: 10px 0;
+ margin: 0;
+ max-height: (4 * 36px) + 20px; // we show max 8 items
+ overflow: auto;
+
+ &:before,
+ &:after {
+ content: "";
+ display: block;
+ height: 10px;
+ width: 100%;
+ }
}
%select-item-size {
@@ -45,6 +55,10 @@
padding: 0 32px 0 10px;
border-radius: 3px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+
&:hover {
background-color: $color-neutral-100;
}