1
0
Fork 0
mirror of synced 2024-10-03 19:43:32 +13:00

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 2020-08-11 16:57:15 +01:00
parent d925103b8a
commit bae5e11df3
10 changed files with 38 additions and 102 deletions

View file

@ -13,35 +13,26 @@
<style> <style>
.apps-card { .apps-card {
background-color: var(--white); background-color: var(--white);
padding: 20px 20px 20px 20px; padding: var(--spacing-xl);
max-width: 400px; max-width: 300px;
max-height: 150px; max-height: 150px;
border-radius: 5px; border-radius: var(--border-radius-m);
border: 1px solid var(--grey-4); border: var(--border-dark);
font-family: Inter;
} }
.app-button:hover { .app-button:hover {
background-color: var(--grey-1); background-color: var(--white);
color: var(--black);
text-decoration: none; text-decoration: none;
} }
.app-title { .app-title {
font-size: 18px; font-size: var(--font-size-l);
font-weight: 600; font-weight: 600;
color: var(--ink); color: var(--ink);
text-transform: capitalize; 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 { .card-footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -52,15 +43,15 @@
.app-button { .app-button {
align-items: center; align-items: center;
display: flex; display: flex;
background-color: var(--white); background-color: var(--ink);
color: var(--ink); color: var(--white);
border: 1.5px var(--ink) solid;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
padding: 12px 20px; padding: 8px 16px;
border-radius: 5px; border-radius: var(--border-radius-s);
border: 1px var(--grey-2) solid; font-size: var(--font-size-s);
font-size: 14px; font-weight: 500;
font-weight: 400;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-sizing: border-box; box-sizing: border-box;

View file

@ -25,7 +25,7 @@
<style> <style>
.apps { .apps {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px 40px; grid-gap: 20px 40px;
justify-content: start; justify-content: start;
} }

View file

@ -208,16 +208,17 @@
</div> </div>
<div class="footer"> <div class="footer">
{#if $createAppStore.currentStep > 0} {#if $createAppStore.currentStep > 0}
<Button secondary on:click={back}>Back</Button> <Button medium secondary on:click={back}>Back</Button>
{/if} {/if}
{#if $createAppStore.currentStep < steps.length - 1} {#if $createAppStore.currentStep < steps.length - 1}
<Button secondary on:click={next} disabled={!currentStepIsValid}> <Button medium blue on:click={next} disabled={!currentStepIsValid}>
Next Next
</Button> </Button>
{/if} {/if}
{#if $createAppStore.currentStep === steps.length - 1} {#if $createAppStore.currentStep === steps.length - 1}
<Button <Button
secondary medium
blue
on:click={signUp} on:click={signUp}
disabled={!fullFormIsValid || submitting}> disabled={!fullFormIsValid || submitting}>
{submitting ? 'Loading...' : 'Submit'} {submitting ? 'Loading...' : 'Submit'}

View file

@ -5,7 +5,7 @@
let blurred = { appName: false } let blurred = { appName: false }
</script> </script>
<h2>Create your first web app</h2> <h2>Create your web app</h2>
<div class="container"> <div class="container">
<Input <Input
on:input={() => (blurred.appName = true)} on:input={() => (blurred.appName = true)}

View file

@ -21,7 +21,7 @@
placeholder="Password" placeholder="Password"
type="pasword" type="pasword"
error={blurred.password && validationErrors.password} /> error={blurred.password && validationErrors.password} />
<Select name="accessLevelId"> <Select secondary name="accessLevelId">
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</Select> </Select>

View file

@ -433,7 +433,7 @@ export default {
name: "Donut Chart", name: "Donut Chart",
_component: "@budibase/standard-components/donut", _component: "@budibase/standard-components/donut",
description: "Donut chart", description: "Donut chart",
icon: "ri-pie-chart-fill", icon: "ri-pie-chart-line",
properties: { properties: {
settings: [ settings: [
{ {
@ -527,35 +527,6 @@ export default {
}, },
children: [], 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", // name: "Data List",
// _component: "@budibase/standard-components/datalist", // _component: "@budibase/standard-components/datalist",

View file

@ -226,7 +226,7 @@
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
display: grid; display: grid;
width: 100%; width: 260px;
gap: 12px; gap: 12px;
} }

View file

@ -2,17 +2,11 @@
import Modal from "svelte-simple-modal" import Modal from "svelte-simple-modal"
import { Home as Link } from "@budibase/bbui" import { Home as Link } from "@budibase/bbui"
import { import {
SettingsIcon,
AppsIcon, AppsIcon,
UpdatesIcon,
HostingIcon, HostingIcon,
DocumentationIcon, DocumentationIcon,
TutorialsIcon,
CommunityIcon, CommunityIcon,
ContributionIcon,
BugIcon, BugIcon,
EmailIcon,
TwitterIcon,
} from "components/common/Icons/" } from "components/common/Icons/"
</script> </script>
@ -24,16 +18,11 @@
</div> </div>
<div class="nav-section"> <div class="nav-section">
<div class="nav-section-title">Build</div>
<Link icon={AppsIcon} title="Apps" href="/" active /> <Link icon={AppsIcon} title="Apps" href="/" active />
<Link <Link
icon={HostingIcon} icon={HostingIcon}
title="Hosting" title="Hosting"
href="https://portal.budi.live/" /> href="https://portal.budi.live/" />
</div>
<div class="nav-section">
<div class="nav-section-title">Learn</div>
<Link <Link
icon={DocumentationIcon} icon={DocumentationIcon}
title="Documentation" title="Documentation"
@ -42,23 +31,11 @@
icon={CommunityIcon} icon={CommunityIcon}
title="Community" title="Community"
href="https://forum.budibase.com/" /> 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 <Link
icon={BugIcon} icon={BugIcon}
title="Report bug" title="Raise an issue"
href="https://github.com/Budibase/budibase/issues" /> href="https://github.com/Budibase/budibase" />
<Link icon={EmailIcon} title="Email" href="mailto:hi@budibase.com" />
<Link
icon={TwitterIcon}
title="Twitter"
href="https://twitter.com/budibase" />
</div> </div>
</div> </div>
@ -88,6 +65,7 @@
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: var(--border-light);
} }
.home-logo { .home-logo {
@ -105,11 +83,4 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.nav-section-title {
font-size: 20px;
color: var(--ink);
font-weight: 600;
margin-bottom: 12px;
}
</style> </style>

View file

@ -66,7 +66,9 @@
<div class="header"> <div class="header">
<div class="welcome">Welcome to the Budibase Beta</div> <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>
<div class="banner"> <div class="banner">
@ -95,9 +97,9 @@
} }
.welcome { .welcome {
font-size: 42px; font-size: var(--font-size-3xl);
color: var(--ink); color: var(--ink);
font-weight: 700; font-weight: 600;
} }
.banner { .banner {
@ -108,7 +110,7 @@
text-align: center; text-align: center;
color: white; color: white;
margin: 20px 80px 40px 80px; margin: 20px 80px 40px 80px;
border-radius: 10px; border-radius: 16px;
} }
.banner img { .banner img {

View file

@ -783,9 +783,9 @@
sirv-cli "^0.4.6" sirv-cli "^0.4.6"
"@budibase/client@^0.1.1": "@budibase/client@^0.1.1":
version "0.1.1" version "0.1.17"
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc" resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.17.tgz#9ec8848c75711751c9d088361122f181e8eb44e1"
integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA== integrity sha512-6O9iWHkpIWksUMm+/ysN/Yb8QufF3FE4CfxCEFUVWaeYqyIXZifiqZxeAR380JIqwxjHltSC/23wgCWzhhiMUw==
dependencies: dependencies:
"@nx-js/compiler-util" "^2.0.0" "@nx-js/compiler-util" "^2.0.0"
bcryptjs "^2.4.3" bcryptjs "^2.4.3"
@ -7775,9 +7775,9 @@ svelte@3.23.x:
integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw== integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
svelte@^3.9.2: svelte@^3.9.2:
version "3.24.0" version "3.24.1"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw== integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
symbol-observable@1.0.1: symbol-observable@1.0.1:
version "1.0.1" version "1.0.1"