Merge branch 'master' of github.com:Budibase/budibase

This commit is contained in:
Michael Shanks 2020-06-03 15:43:53 +01:00
commit 3e9a3ec678
6 changed files with 117 additions and 57 deletions

View File

@ -17,6 +17,7 @@ export default ({
body, html {
height: 100%!important;
font-family: Roboto !important;
}
.lay-__screenslot__text {
width: 100%;

View File

@ -267,7 +267,21 @@ export default {
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-fill",
children: [],
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [
{
label: "Name",
key: "name",
control: Input,
},
{
label: "Logo",
key: "logo",
control: Input,
},
],
},
},
{
name: "Table",
@ -349,7 +363,15 @@ export default {
"A component for handling the navigation within your app.",
icon: "ri-navigation-fill",
children: [],
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [
{ label: "Logo URL", key: "logoUrl", control: Input },
{ label: "Title", key: "title", control: Input },
{ label: "Color", key: "color", control: Input },
{ label: "Background", key: "backgroundColor", control: Input },
],
},
},
],
},

View File

@ -15,4 +15,7 @@ JWT_SECRET={{cookieKey1}}
PORT=4001
# error level for koa-pino
LOG_LEVEL=error
LOG_LEVEL=error
# Budibase app directory
BUDIBASE_DIR=~/.budibase

View File

@ -1,14 +1,17 @@
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>{{ title }}</title>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>{{ title }}</title>
<link rel='icon' type='image/png' href='{{ favicon }}'>
<style>
html, body {
html,
body {
font-family: Roboto;
height: 100%;
width: 100%;
margin: 0px;
@ -30,13 +33,14 @@
<script src='{{ appRootPath }}/clientFrontendDefinition.js'></script>
<script src='{{ appRootPath }}/budibase-client.js'></script>
</head>
<body id="app">
<script>
loadBudibase();
</script>
</body>
</html>

View File

@ -59,6 +59,7 @@
"props": {
"logo": "asset",
"loginRedirect": "string",
"name": "string",
"usernameLabel": {
"type": "string",
"default": "Username"

View File

@ -1,10 +1,9 @@
<script>
import Button from "./Button.svelte"
export let usernameLabel = "Username"
export let passwordLabel = "Password"
export let loginButtonLabel = "Login"
export let logo = ""
export let name = ""
export let buttonClass = ""
export let inputClass = ""
@ -51,14 +50,23 @@
</div>
{/if}
<h1 class="header-content">Log in to {name}</h1>
<div class="form-root">
<div class="label">{usernameLabel}</div>
<div class="control">
<input bind:value={username} type="text" class={_inputClass} />
<input
bind:value={username}
type="text"
placeholder="Username"
class={_inputClass} />
</div>
<div class="label">{passwordLabel}</div>
<div class="control">
<input bind:value={password} type="password" class={_inputClass} />
<input
bind:value={password}
type="password"
placeholder="Password"
class={_inputClass} />
</div>
</div>
@ -77,15 +85,17 @@
<style>
.root {
height: 100%;
display: grid;
grid-template-columns: [left] 1fr [middle] auto [right] 1fr;
grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content {
grid-column-start: middle;
grid-row-start: center;
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo-container {
@ -97,8 +107,20 @@
}
.login-button-container {
text-align: right;
margin-top: 20px;
margin-top: 6px;
max-width: 100%;
}
.header-content {
font-family: Inter;
font-weight: 700;
color: #1f1f1f;
font-size: 48px;
line-height: 72px;
margin-bottom: 30px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "case" "rlig" "calt" 0;
}
.incorrect-details-panel {
@ -114,48 +136,55 @@
}
.form-root {
display: grid;
grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
}
.label {
grid-column-start: label;
padding: 5px 10px;
vertical-align: middle;
}
.control {
grid-column-start: control;
padding: 5px 10px;
}
.default-input {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
padding: 6px 0px;
width: 100%;
}
.default-button {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
.default-input {
font-family: Inter;
font-size: 14px;
color: #393c44;
padding: 2px 6px 2px 12px;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
color: #000333;
border: 0.5px solid #d8d8d8;
border-radius: 4px;
width: 100%;
height: 40px;
transition: border-color 100ms ease-in 0s;
outline-color: #797979;
}
.default-button {
font-family: Inter;
font-size: 16px;
padding: 0.4em;
box-sizing: border-box;
border-radius: 4px;
color: white;
background-color: #393c44;
outline: none;
width: 300px;
height: 40px;
cursor: pointer;
transition: all 0.2s ease 0s;
overflow: hidden;
outline: none;
user-select: none;
white-space: nowrap;
text-align: center;
}
.default-button:active {
background-color: #f9f9f9;
}
.default-button:focus {
border-color: #f9f9f9;
.default-button:hover {
background-color: white;
border-color: #393c44;
color: #393c44;
}
</style>