Merge pull request #529 from Budibase/Tidy-ups-and-implementing-new-BBUI-vars
Tidy ups and welcome screen made less busy
This commit is contained in:
Joe
GitHub
commit
c89158c6b5
|
|
@ -13,35 +13,26 @@
|
|||
<style>
|
||||
.apps-card {
|
||||
background-color: var(--white);
|
||||
padding: 20px 20px 20px 20px;
|
||||
max-width: 400px;
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 300px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--grey-4);
|
||||
font-family: Inter;
|
||||
border-radius: var(--border-radius-m);
|
||||
border: var(--border-dark);
|
||||
}
|
||||
|
||||
.app-button:hover {
|
||||
background-color: var(--grey-1);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-l);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
color: var(--grey-7);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -52,17 +43,18 @@
|
|||
.app-button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
background-color: var(--ink);
|
||||
color: var(--white);
|
||||
border: 1.5px var(--ink) solid;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 12px 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px var(--grey-2) solid;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--border-radius-s);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
<style>
|
||||
.apps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
grid-gap: 20px 40px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-gap: var(--layout-m);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -208,16 +208,17 @@
|
|||
</div>
|
||||
<div class="footer">
|
||||
{#if $createAppStore.currentStep > 0}
|
||||
<Button secondary on:click={back}>Back</Button>
|
||||
<Button medium secondary on:click={back}>Back</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep < steps.length - 1}
|
||||
<Button secondary on:click={next} disabled={!currentStepIsValid}>
|
||||
<Button medium blue on:click={next} disabled={!currentStepIsValid}>
|
||||
Next
|
||||
</Button>
|
||||
{/if}
|
||||
{#if $createAppStore.currentStep === steps.length - 1}
|
||||
<Button
|
||||
secondary
|
||||
medium
|
||||
blue
|
||||
on:click={signUp}
|
||||
disabled={!fullFormIsValid || submitting}>
|
||||
{submitting ? 'Loading...' : 'Submit'}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
let blurred = { appName: false }
|
||||
</script>
|
||||
|
||||
<h2>Create your first web app</h2>
|
||||
<h2>Create your web app</h2>
|
||||
<div class="container">
|
||||
<Input
|
||||
on:input={() => (blurred.appName = true)}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
placeholder="Password"
|
||||
type="pasword"
|
||||
error={blurred.password && validationErrors.password} />
|
||||
<Select name="accessLevelId">
|
||||
<Select secondary name="accessLevelId">
|
||||
<option value="ADMIN">Admin</option>
|
||||
<option value="POWER_USER">Power User</option>
|
||||
</Select>
|
||||
|
|
|
|||
|
|
@ -601,7 +601,7 @@ export default {
|
|||
name: "Donut Chart",
|
||||
_component: "@budibase/standard-components/donut",
|
||||
description: "Donut chart",
|
||||
icon: "ri-pie-chart-fill",
|
||||
icon: "ri-pie-chart-line",
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
|
|
@ -695,35 +695,6 @@ export default {
|
|||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "Data List",
|
||||
_component: "@budibase/standard-components/datalist",
|
||||
description: "Shiny list",
|
||||
icon: "ri-file-list-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: "List",
|
||||
_component: "@budibase/standard-components/list",
|
||||
description: "Renders all children once per record, of a given table",
|
||||
icon: "ri-file-list-fill",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Table", key: "model", control: ModelSelect }],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/heading",
|
||||
name: "Headline",
|
||||
description: "A component for displaying heading text",
|
||||
icon: "ri-heading",
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: "Data List",
|
||||
// _component: "@budibase/standard-components/datalist",
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
width: 260px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,17 +2,11 @@
|
|||
import Modal from "svelte-simple-modal"
|
||||
import { Home as Link } from "@budibase/bbui"
|
||||
import {
|
||||
SettingsIcon,
|
||||
AppsIcon,
|
||||
UpdatesIcon,
|
||||
HostingIcon,
|
||||
DocumentationIcon,
|
||||
TutorialsIcon,
|
||||
CommunityIcon,
|
||||
ContributionIcon,
|
||||
BugIcon,
|
||||
EmailIcon,
|
||||
TwitterIcon,
|
||||
} from "components/common/Icons/"
|
||||
</script>
|
||||
|
||||
|
|
@ -24,16 +18,11 @@
|
|||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Build</div>
|
||||
<Link icon={AppsIcon} title="Apps" href="/" active />
|
||||
<Link
|
||||
icon={HostingIcon}
|
||||
title="Hosting"
|
||||
href="https://portal.budi.live/" />
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Learn</div>
|
||||
<Link
|
||||
icon={DocumentationIcon}
|
||||
title="Documentation"
|
||||
|
|
@ -42,23 +31,11 @@
|
|||
icon={CommunityIcon}
|
||||
title="Community"
|
||||
href="https://forum.budibase.com/" />
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Contact</div>
|
||||
<Link
|
||||
icon={ContributionIcon}
|
||||
title="Contribute"
|
||||
href="https://github.com/Budibase/budibase" />
|
||||
<Link
|
||||
icon={BugIcon}
|
||||
title="Report bug"
|
||||
href="https://github.com/Budibase/budibase/issues" />
|
||||
<Link icon={EmailIcon} title="Email" href="mailto:hi@budibase.com" />
|
||||
<Link
|
||||
icon={TwitterIcon}
|
||||
title="Twitter"
|
||||
href="https://twitter.com/budibase" />
|
||||
title="Raise an issue"
|
||||
href="https://github.com/Budibase/budibase" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -88,6 +65,7 @@
|
|||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: var(--border-light);
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
|
|
@ -105,11 +83,4 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,9 @@
|
|||
|
||||
<div class="header">
|
||||
<div class="welcome">Welcome to the Budibase Beta</div>
|
||||
<Button purple large on:click={showCreateAppModal}>Create New Web App</Button>
|
||||
<Button primary purple on:click={showCreateAppModal}>
|
||||
Create New Web App
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
|
|
@ -95,9 +97,9 @@
|
|||
}
|
||||
|
||||
.welcome {
|
||||
font-size: 42px;
|
||||
font-size: var(--font-size-3xl);
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -108,7 +110,7 @@
|
|||
text-align: center;
|
||||
color: white;
|
||||
margin: 20px 80px 40px 80px;
|
||||
border-radius: 10px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.banner img {
|
||||
|
|
|
|||
Loading…
Reference in a new issue