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

created first layout

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-20 20:35:51 +01:00
parent 695e4392c1
commit 9a2a09c615
10 changed files with 148 additions and 4 deletions

39
web-frontend/public/grid.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Baserow</title>
</head>
<body>
<div class="layout">
<div class="layout-col-1 menu">
<ul class="menu-items">
<li>
<a href="#" class="menu-item active">
<i class="fas fa-tachometer-alt"></i>
<span class="menu-item-text">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="menu-item">
<i class="fas fa-layer-group"></i>
<span class="menu-item-text">Groups</span>
</a>
</li>
</ul>
<ul class="menu-items">
<li>
<a href="#" class="user-item">
B
<span class="menu-item-text">Full Name</span>
</a>
</li>
</ul>
</div>
<div class="layout-col-2 sidebar">
sidebar
</div>
<div class="layout-col-3">content</div>
</div>
</body>
</html>

2
web-frontend/public/login.html
View file

@ -138,7 +138,7 @@
</form>
</div>
<!-- sign up page -->
<!-- reset password page -->
<div class="box login-page login-page-reset-password hidden">
<h1 class="box-title">Reset password</h1>
<form>

10
web-frontend/src/scss/abstracts/_mixins.scss
View file

@ -1,4 +1,4 @@
@mixin button-style($background, $active-background, $color: #ffffff) {
@mixin button-style($background, $active-background, $color: $white) {
background-color: $background;
color: $color;
@ -40,3 +40,11 @@
color: $text;
}
}
@mixin center-text($width, $font-size, $height: $width) {
width: $width;
height: $height;
line-height: $height;
font-size: $font-size;
text-align: center;
}

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

@ -1,6 +1,8 @@
$text-font-stack: 'Open Sans', sans-serif;
$logo-font-stack: 'Montserrat', sans-serif;
$white: #fff;
// primary colors
$color-primary-100: #ebf7ff !default;
$color-primary-200: #b5dbf5 !default;

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

@ -45,7 +45,7 @@
}
.button-ghost {
@include button-style(#ffffff, $color-neutral-100, $color-primary-900);
@include button-style($white, $color-neutral-100, $color-primary-900);
border-color: $color-neutral-400;
}

24
web-frontend/src/scss/components/_layout.scss Normal file
View file

@ -0,0 +1,24 @@
.layout {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
}
.layout-col-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 52px;
}
.layout-col-2 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 226px;
}
.layout-col-3 {
width: 100%;
}

64
web-frontend/src/scss/components/_menu.scss Normal file
View file

@ -0,0 +1,64 @@
.menu {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: $color-primary-600;
color: $white;
}
.menu-items {
list-style: none;
padding: 0;
margin: 0;
li {
margin: 10px;
}
a {
position: relative;
display: block;
text-decoration: none;
}
}
.menu-item {
border-radius: 3px;
color: $white;
@include center-text(32px, 16px);
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
&.active {
background-color: rgba(0, 0, 0, 0.3);
}
}
.user-item {
border-radius: 100%;
background-color: $color-primary-500;
color: $white;
@include center-text(32px, 18px);
}
.menu-item-text {
display: none;
position: absolute;
left: 36px;
top: 50%;
margin-top: -10.5px;
background-color: $color-neutral-900;
border-radius: 3px;
padding: 0 4px;
white-space: nowrap;
@include center-text(auto, 11px, 21px);
a:hover & {
display: block;
}
}

4
web-frontend/src/scss/components/_sidebar.scss Normal file
View file

@ -0,0 +1,4 @@
.sidebar {
background-color: $white;
border-right: 1px solid $color-neutral-200;
}

3
web-frontend/src/scss/default.scss
View file

@ -12,5 +12,8 @@
@import "components/alert";
@import "components/form";
@import "components/box";
@import "components/layout";
@import "components/menu";
@import "components/sidebar";
@import "components/box_page";

2
web-frontend/webpack/config.js
View file

@ -10,7 +10,7 @@ const config = {
'cssFilename': './baserow.css',
'sourceMaps': true,
'devtool': 'inline-source-map',
'pages': ['index.html', 'login.html']
'pages': ['index.html', 'login.html', 'grid.html']
};
// Export config