Tidy ups and welcome screen made less busy
Comment today from the demo was the welcome screen was a little busy in re to the links on the left hand panel
This commit is contained in:
Joe
parent
903ce05e26
commit
3a66c4055a
|
|
@ -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,15 +43,15 @@
|
|||
.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-s);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<style>
|
||||
.apps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-gap: 20px 40px;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -433,7 +433,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: [
|
||||
{
|
||||
|
|
@ -527,35 +527,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 medium 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 {
|
||||
|
|
|
|||
|
|
@ -783,9 +783,9 @@
|
|||
sirv-cli "^0.4.6"
|
||||
|
||||
"@budibase/client@^0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc"
|
||||
integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA==
|
||||
version "0.1.17"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.17.tgz#9ec8848c75711751c9d088361122f181e8eb44e1"
|
||||
integrity sha512-6O9iWHkpIWksUMm+/ysN/Yb8QufF3FE4CfxCEFUVWaeYqyIXZifiqZxeAR380JIqwxjHltSC/23wgCWzhhiMUw==
|
||||
dependencies:
|
||||
"@nx-js/compiler-util" "^2.0.0"
|
||||
bcryptjs "^2.4.3"
|
||||
|
|
@ -7775,9 +7775,9 @@ svelte@3.23.x:
|
|||
integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
|
||||
|
||||
svelte@^3.9.2:
|
||||
version "3.24.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
|
||||
integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
|
||||
version "3.24.1"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
|
||||
integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
|
||||
|
||||
symbol-observable@1.0.1:
|
||||
version "1.0.1"
|
||||
|
|
|
|||
Loading…
Reference in New Issue