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 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",
"include",
"mixin",
"return"
"return",
"extend"
]
}
]

1
web-frontend/package.json
View file

@ -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"
},

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,
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;
}

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

@ -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;
}

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

@ -16,7 +16,7 @@
position: absolute;
left: 16px;
top: 16px;
background-color: #ffffff;
background-color: #fff;
border: 4px solid;
width: 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 {
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;
}

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

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

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

@ -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";

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

@ -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 = {