archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-26 21:54:40 +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> <title>Baserow</title>
</head> </head>
<body> <body>
<div class="layout layout-collapsed"> <div class="layout">
<div class="layout-col-1 menu"> <div class="layout-col-1 menu">
<ul class="menu-items"> <ul class="menu-items">
<li> <li>
@ -182,11 +182,24 @@
<div class="layout-col-3"> <div class="layout-col-3">
<header class="layout-col-3-1 header"> <header class="layout-col-3-1 header">
<ul class="header-filter"> <ul class="header-filter">
<li> <li class="header-filter-item">
<a href="#"> <a href="#" class="header-filter-link" data-context=".context">
<i class="header-filter-icon fas fa-th"></i> <i class="header-filter-icon fas fa-th"></i>
Grid view name Grid view name
</a> </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> </li>
</ul> </ul>
<ul class="header-info"> <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-1: 3;
$z-index-layout-col-2: 2; $z-index-layout-col-2: 2;
$z-index-layout-col-3: 1; $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; text-align: right;
} }
.color-primary {
color: $color-primary-500 !important;
}
.remove-scrollbar { .remove-scrollbar {
-ms-overflow-style: none; -ms-overflow-style: none;

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

@ -4,19 +4,65 @@
white-space: nowrap; white-space: nowrap;
background-color: $white; background-color: $white;
border-radius: 6px; border-radius: 6px;
border: 1px solid $color-neutral-200;
box-shadow: 0 2px 6px 0 rgba($black, 0.16); box-shadow: 0 2px 6px 0 rgba($black, 0.16);
} }
.context-menu-title { .context-menu-title {
color: $color-neutral-600; color: $color-neutral-600;
padding: 12px 8px; padding: 12px 8px 2px 8px;
line-height: 13px; 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 { .context-menu {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: 10px; margin: 10px 0;
li { li {
margin-bottom: 4px; margin-bottom: 4px;

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

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

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

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