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

added context search and footer button styling

Browse source
This commit is contained in:
Bram Wiepjes 2019-04-01 22:04:08 +02:00
parent f8231f53b7
commit bad7c0bb14
6 changed files with 97 additions and 30 deletions

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

@ -9,7 +9,7 @@
<title>Baserow</title>
</head>
<body>
<div class="layout layout-collapsed">
<div class="layout">
<div class="layout-col-1 menu">
<ul class="menu-items">
<li>
@ -182,11 +182,24 @@
<div class="layout-col-3">
<header class="layout-col-3-1 header">
<ul class="header-filter">
<li>
<a href="#">
<li class="header-filter-item">
<a href="#" class="header-filter-link" data-context=".context">
<i class="header-filter-icon fas fa-th"></i>
Grid view name
</a>
<div class="context">
<div class="context-search">
<i class="context-search-icon fas fa-search"></i>
<input type="text" class="context-search-input" placeholder="Search views" />
</div>
@TODO
<div class="context-footer">
<a href="#" class="context-footer-button">
<i class="fas fa-plus"></i>
Do something
</a>
</div>
</div>
</li>
</ul>
<ul class="header-info">

4
web-frontend/src/scss/abstracts/_variables.scss
View file

@ -61,4 +61,6 @@ $color-error-900: #4d0c03 !default;
$z-index-layout-col-1: 3;
$z-index-layout-col-2: 2;
$z-index-layout-col-3: 1;
$z-index-modal: 4;
$z-index-layout-col-3-1: 5;
$z-index-layout-col-3-2: 4;
$z-index-modal: 6;

4
web-frontend/src/scss/base/_helpers.scss
View file

@ -12,6 +12,10 @@
text-align: right;
}
.color-primary {
color: $color-primary-500 !important;
}
.remove-scrollbar {
-ms-overflow-style: none;

50
web-frontend/src/scss/components/_context.scss
View file

@ -4,19 +4,65 @@
white-space: nowrap;
background-color: $white;
border-radius: 6px;
border: 1px solid $color-neutral-200;
box-shadow: 0 2px 6px 0 rgba($black, 0.16);
}
.context-menu-title {
color: $color-neutral-600;
padding: 12px 8px;
padding: 12px 8px 2px 8px;
line-height: 13px;
margin-bottom: 10px;
}
.context-search {
position: relative;
border-bottom: 1px solid $color-neutral-200;
}
.context-search-icon {
@include absolute(0, auto, auto, 0);
@include center-text(32px, 14px, 36px);
color: $color-neutral-300;
}
.context-search-input {
display: block;
width: 100%;
border: none;
padding: 0 12px 0 36px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
@include fixed-height(36px, 14px);
}
.context-footer {
border-top: 1px solid $color-neutral-200;
}
.context-footer-button {
display: block;
padding: 0 12px;
color: $color-neutral-600;
@include fixed-height(36px, 14px);
.fas {
margin-right: 6px;
}
&:hover {
background-color: $color-neutral-100;
text-decoration: none;
}
}
.context-menu {
list-style: none;
padding: 0;
margin-bottom: 10px;
margin: 10px 0;
li {
margin-bottom: 4px;

48
web-frontend/src/scss/components/_header.scss
View file

@ -30,34 +30,34 @@
list-style: none;
padding: 0;
margin: auto 0;
}
li {
@extend %first-last-no-margin;
.header-filter-item {
@extend %first-last-no-margin;
float: left;
margin-left: 12px;
float: left;
margin-left: 12px;
}
.header-filter-link {
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;
}
}
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-filter-icon {
color: $color-primary-500;
margin-right: 4px;
font-size: 14px;
}
.header-info {

2
web-frontend/src/scss/components/_layout.scss
View file

@ -43,6 +43,7 @@
.layout-col-3-1 {
position: absolute;
z-index: $z-index-layout-col-3-1;
left: 0;
top: 0;
right: 0;
@ -51,6 +52,7 @@
.layout-col-3-2 {
position: absolute;
z-index: $z-index-layout-col-3-2;
left: 0;
top: 52px;
right: 0;