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

created box and box-page component

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-16 19:49:50 +01:00
parent de6be7d75c
commit 9026ba6d34
13 changed files with 121 additions and 12 deletions

3
web-frontend/.stylelintrc
View file

@ -11,7 +11,8 @@
"each", "each",
"include", "include",
"mixin", "mixin",
"return" "return",
"extend"
] ]
} }
] ]

1
web-frontend/package.json
View file

@ -14,6 +14,7 @@
"scripts": { "scripts": {
"eslint": "eslint src", "eslint": "eslint src",
"stylelint": "stylelint src/scss/**/*.scss", "stylelint": "stylelint src/scss/**/*.scss",
"stylelint --fix": "stylelint src/scss/**/*.scss --fix",
"build": "webpack -p --progress --config webpack/webpack.prod.js", "build": "webpack -p --progress --config webpack/webpack.prod.js",
"dev": "webpack-dev-server -d --progress --color --open --config webpack/webpack.dev.js" "dev": "webpack-dev-server -d --progress --color --open --config webpack/webpack.dev.js"
}, },

37
web-frontend/public/login.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Login</title>
</head>
<body>
<div class="box-page-header"></div>
<div class="box-page">
<div class="box">
<h1 class="box-title">Baserow</h1>
<div class="alert alert-error alert-has-icon">
<div class="alert-icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert-title">Incorrect credentials</div>
<p class="alert-content">The provided e-mail address or password is incorrect.</p>
</div>
<form>
<div class="control">
<label class="control-label">E-mail address</label>
<div class="control-elements">
<input type="text" class="input input-error input-large" />
<div class="error">Please enter a valid e-mail address</div>
</div>
</div>
<div class="control">
<label class="control-label">Password</label>
<div class="control-elements">
<input type="password" class="input input-large" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>

9
web-frontend/src/scss/abstracts/_placeholders.scss Normal file
View file

@ -0,0 +1,9 @@
%first-last-no-margin {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}

9
web-frontend/src/scss/base/_base.scss
View file

@ -1,5 +1,5 @@
html, html,
body{ body {
height: 100%; height: 100%;
} }
@ -7,7 +7,12 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *::before, body {
background-color: $color-neutral-100;
}
*,
*::before,
*::after { *::after {
box-sizing: inherit; box-sizing: inherit;
} }

10
web-frontend/src/scss/base/_typography.scss
View file

@ -1,4 +1,4 @@
html{ html {
font-size: 62.5%; font-size: 62.5%;
} }
@ -18,6 +18,8 @@ a {
} }
p { p {
@extend %first-last-no-margin;
color: $color-neutral-500; color: $color-neutral-500;
line-height: 170%; line-height: 170%;
margin-bottom: 30px; margin-bottom: 30px;
@ -25,18 +27,24 @@ p {
h1, h1,
.heading-1 { .heading-1 {
@extend %first-last-no-margin;
font-size: 33px; font-size: 33px;
margin: 30px 0; margin: 30px 0;
} }
h2, h2,
.heading-2 { .heading-2 {
@extend %first-last-no-margin;
font-size: 22px; font-size: 22px;
margin: 20px 0; margin: 20px 0;
} }
h3, h3,
.heading-3 { .heading-3 {
@extend %first-last-no-margin;
font-size: 14px; font-size: 14px;
margin: 10px 0; margin: 10px 0;
} }

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

@ -16,7 +16,7 @@
position: absolute; position: absolute;
left: 16px; left: 16px;
top: 16px; top: 16px;
background-color: #ffffff; background-color: #fff;
border: 4px solid; border: 4px solid;
width: 40px; width: 40px;
height: 40px; height: 40px;

11
web-frontend/src/scss/components/_box.scss Normal file
View file

@ -0,0 +1,11 @@
.box {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
padding: 32px 40px;
}
.box-title {
padding-bottom: 20px;
border-bottom: 1px solid $color-neutral-200;
}

31
web-frontend/src/scss/components/_box_page.scss Normal file
View file

@ -0,0 +1,31 @@
.box-page-header {
background: $color-primary-600;
position: absolute;
z-index: 0;
left: 0;
right: 0;
height: 124px;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
background: inherit;
bottom: 0;
height: 200%;
transform: skewY(-4deg);
transform-origin: 100%;
z-index: -1;
}
}
.box-page {
position: relative;
z-index: 1;
margin: 0 auto;
padding: 80px 0;
max-width: 92%;
width: 520px;
}

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

@ -1,8 +1,8 @@
.button { .button {
cursor:pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
color: #ffffff; color: #fff;
border: 1px solid transparent; border: 1px solid transparent;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
@ -16,7 +16,7 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4) box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
} }
&.disabled, &.disabled,
@ -45,6 +45,7 @@
.button-ghost { .button-ghost {
@include button-style(#ffffff, $color-neutral-100, $color-primary-900); @include button-style(#ffffff, $color-neutral-100, $color-primary-900);
border-color: $color-neutral-400; border-color: $color-neutral-400;
} }

4
web-frontend/src/scss/components/_form.scss
View file

@ -9,10 +9,6 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.control-elements {
}
.input { .input {
display: block; display: block;
width: 100%; width: 100%;

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

@ -1,5 +1,6 @@
@import "abstracts/variables"; @import "abstracts/variables";
@import "abstracts/mixins"; @import "abstracts/mixins";
@import "abstracts/placeholders";
@import "vendors"; @import "vendors";
@ -9,3 +10,6 @@
@import "components/button"; @import "components/button";
@import "components/alert"; @import "components/alert";
@import "components/form"; @import "components/form";
@import "components/box";
@import "components/box_page";

5
web-frontend/webpack/webpack.common.js
View file

@ -113,7 +113,12 @@ const plugins = [
new ExtractTextPlugin(config.cssFilename), new ExtractTextPlugin(config.cssFilename),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: `${config.output}/index.html`, template: `${config.output}/index.html`,
filename: 'index.html'
}), }),
new HtmlWebpackPlugin({
template: `${config.output}/login.html`,
filename: 'login.html'
})
]; ];
const webpackConfig = { const webpackConfig = {