From 9026ba6d34a3d0b3b5e78c93ba12d0352231a8fc Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Sat, 16 Feb 2019 19:49:50 +0100
Subject: [PATCH] created box and box-page component
---
web-frontend/.stylelintrc | 3 +-
web-frontend/package.json | 1 +
web-frontend/public/login.html | 37 +++++++++++++++++++
.../src/scss/abstracts/_placeholders.scss | 9 +++++
web-frontend/src/scss/base/_base.scss | 9 ++++-
web-frontend/src/scss/base/_typography.scss | 10 ++++-
web-frontend/src/scss/components/_alert.scss | 2 +-
web-frontend/src/scss/components/_box.scss | 11 ++++++
.../src/scss/components/_box_page.scss | 31 ++++++++++++++++
web-frontend/src/scss/components/_button.scss | 7 ++--
web-frontend/src/scss/components/_form.scss | 4 --
web-frontend/src/scss/default.scss | 4 ++
web-frontend/webpack/webpack.common.js | 5 +++
13 files changed, 121 insertions(+), 12 deletions(-)
create mode 100644 web-frontend/public/login.html
create mode 100644 web-frontend/src/scss/abstracts/_placeholders.scss
create mode 100644 web-frontend/src/scss/components/_box.scss
create mode 100644 web-frontend/src/scss/components/_box_page.scss
diff --git a/web-frontend/.stylelintrc b/web-frontend/.stylelintrc
index 892231dc6..ef2d20c3a 100755
--- a/web-frontend/.stylelintrc
+++ b/web-frontend/.stylelintrc
@@ -11,7 +11,8 @@
"each",
"include",
"mixin",
- "return"
+ "return",
+ "extend"
]
}
]
diff --git a/web-frontend/package.json b/web-frontend/package.json
index 710b0b18d..61cd1da4c 100755
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -14,6 +14,7 @@
"scripts": {
"eslint": "eslint src",
"stylelint": "stylelint src/scss/**/*.scss",
+ "stylelint --fix": "stylelint src/scss/**/*.scss --fix",
"build": "webpack -p --progress --config webpack/webpack.prod.js",
"dev": "webpack-dev-server -d --progress --color --open --config webpack/webpack.dev.js"
},
diff --git a/web-frontend/public/login.html b/web-frontend/public/login.html
new file mode 100644
index 000000000..1832e2a64
--- /dev/null
+++ b/web-frontend/public/login.html
@@ -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>
diff --git a/web-frontend/src/scss/abstracts/_placeholders.scss b/web-frontend/src/scss/abstracts/_placeholders.scss
new file mode 100644
index 000000000..e0260b625
--- /dev/null
+++ b/web-frontend/src/scss/abstracts/_placeholders.scss
@@ -0,0 +1,9 @@
+%first-last-no-margin {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
diff --git a/web-frontend/src/scss/base/_base.scss b/web-frontend/src/scss/base/_base.scss
index 96d988502..52b9444b5 100644
--- a/web-frontend/src/scss/base/_base.scss
+++ b/web-frontend/src/scss/base/_base.scss
@@ -1,5 +1,5 @@
html,
-body{
+body {
height: 100%;
}
@@ -7,7 +7,12 @@ html {
box-sizing: border-box;
}
-*, *::before,
+body {
+ background-color: $color-neutral-100;
+}
+
+*,
+*::before,
*::after {
box-sizing: inherit;
}
diff --git a/web-frontend/src/scss/base/_typography.scss b/web-frontend/src/scss/base/_typography.scss
index 85cab7a71..8339d154b 100644
--- a/web-frontend/src/scss/base/_typography.scss
+++ b/web-frontend/src/scss/base/_typography.scss
@@ -1,4 +1,4 @@
-html{
+html {
font-size: 62.5%;
}
@@ -18,6 +18,8 @@ a {
}
p {
+ @extend %first-last-no-margin;
+
color: $color-neutral-500;
line-height: 170%;
margin-bottom: 30px;
@@ -25,18 +27,24 @@ p {
h1,
.heading-1 {
+ @extend %first-last-no-margin;
+
font-size: 33px;
margin: 30px 0;
}
h2,
.heading-2 {
+ @extend %first-last-no-margin;
+
font-size: 22px;
margin: 20px 0;
}
h3,
.heading-3 {
+ @extend %first-last-no-margin;
+
font-size: 14px;
margin: 10px 0;
}
diff --git a/web-frontend/src/scss/components/_alert.scss b/web-frontend/src/scss/components/_alert.scss
index 562b9642f..3f36ec74e 100644
--- a/web-frontend/src/scss/components/_alert.scss
+++ b/web-frontend/src/scss/components/_alert.scss
@@ -16,7 +16,7 @@
position: absolute;
left: 16px;
top: 16px;
- background-color: #ffffff;
+ background-color: #fff;
border: 4px solid;
width: 40px;
height: 40px;
diff --git a/web-frontend/src/scss/components/_box.scss b/web-frontend/src/scss/components/_box.scss
new file mode 100644
index 000000000..5db576db9
--- /dev/null
+++ b/web-frontend/src/scss/components/_box.scss
@@ -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;
+}
diff --git a/web-frontend/src/scss/components/_box_page.scss b/web-frontend/src/scss/components/_box_page.scss
new file mode 100644
index 000000000..25e908f6f
--- /dev/null
+++ b/web-frontend/src/scss/components/_box_page.scss
@@ -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;
+}
diff --git a/web-frontend/src/scss/components/_button.scss b/web-frontend/src/scss/components/_button.scss
index 9afb0e081..ab489a39b 100644
--- a/web-frontend/src/scss/components/_button.scss
+++ b/web-frontend/src/scss/components/_button.scss
@@ -1,8 +1,8 @@
.button {
- cursor:pointer;
+ cursor: pointer;
display: inline-block;
margin-bottom: 0;
- color: #ffffff;
+ color: #fff;
border: 1px solid transparent;
white-space: nowrap;
text-align: center;
@@ -16,7 +16,7 @@
&:hover,
&:focus {
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,
@@ -45,6 +45,7 @@
.button-ghost {
@include button-style(#ffffff, $color-neutral-100, $color-primary-900);
+
border-color: $color-neutral-400;
}
diff --git a/web-frontend/src/scss/components/_form.scss b/web-frontend/src/scss/components/_form.scss
index 8675bc710..bf5538b7d 100644
--- a/web-frontend/src/scss/components/_form.scss
+++ b/web-frontend/src/scss/components/_form.scss
@@ -9,10 +9,6 @@
margin-bottom: 16px;
}
-.control-elements {
-
-}
-
.input {
display: block;
width: 100%;
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index c618b52ff..d8da67523 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -1,5 +1,6 @@
@import "abstracts/variables";
@import "abstracts/mixins";
+@import "abstracts/placeholders";
@import "vendors";
@@ -9,3 +10,6 @@
@import "components/button";
@import "components/alert";
@import "components/form";
+@import "components/box";
+
+@import "components/box_page";
diff --git a/web-frontend/webpack/webpack.common.js b/web-frontend/webpack/webpack.common.js
index 70e353571..dfdbba179 100755
--- a/web-frontend/webpack/webpack.common.js
+++ b/web-frontend/webpack/webpack.common.js
@@ -113,7 +113,12 @@ const plugins = [
new ExtractTextPlugin(config.cssFilename),
new HtmlWebpackPlugin({
template: `${config.output}/index.html`,
+ filename: 'index.html'
}),
+ new HtmlWebpackPlugin({
+ template: `${config.output}/login.html`,
+ filename: 'login.html'
+ })
];
const webpackConfig = {