MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Minor responsive design updates and formatting

This commit is contained in:
Joe 2020-05-25 20:26:48 +01:00
parent 1c35836834
commit 939e2dc68c
2 changed files with 94 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/builder/src/components/start/AppList.svelte
View File

@ -12,7 +12,7 @@ function myFunction() {
<div class="inner"> <div class="inner">
<div> <div>
<div> <div>
<h2 class="app-section-title">Your Web Apps</h2> <div class="app-section-title">Your Web Apps</div>
{#each apps as app} {#each apps as app}
<div class="apps-card"> <div class="apps-card">
<h3 class="app-title">{app.name}</h3> <h3 class="app-title">{app.name}</h3>
@ -30,12 +30,14 @@ function myFunction() {
<style> <style>
.root { .root {
margin: 80px 80px; margin: 40px 80px;
} }
.app-section-title { .app-section-title {
font-size: 24px; font-size: 20px;
color: var(--ink); color: var(--ink);
font-weight: 700;
margin-bottom: 20px;
} }
.apps { .apps {
@ -45,26 +47,13 @@ function myFunction() {
} }
.apps-card { .apps-card {
background-color: var(--white); background-color: var(--white);
padding: 40px; padding: 20px;
max-width: 400px; max-width: 400px;
max-height: 150px; max-height: 150px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-dark);
} }
.app-button {
background-color: var(--white);
color: var(--ink);
padding: 12px 20px;
border-radius: 5px;
border: 1px var(--grey) solid;
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
.app-button:hover { .app-button:hover {
background-color: var(--grey-light); background-color: var(--grey-light);
text-decoration: none; text-decoration: none;
@ -81,15 +70,30 @@ function myFunction() {
color: var(--ink-light); color: var(--ink-light);
} }
.modified-date {
font-size: 14px;
color: var(--ink-light);
}
.card-footer { .card-footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
} }
.modified-date {
font-size: 14px;
color: var(--ink-light);
}
.app-button {
background-color: var(--white);
color: var(--ink);
padding: 12px 20px;
border-radius: 5px;
border: 1px var(--grey) solid;
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
}
</style> </style>

113
packages/builder/src/pages/index.svelte
View File

@ -4,19 +4,19 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import { import {
SettingsIcon, SettingsIcon,
AppsIcon, AppsIcon,
UpdatesIcon, UpdatesIcon,
HostingIcon, HostingIcon,
DocumentationIcon, DocumentationIcon,
TutorialsIcon, TutorialsIcon,
CommunityIcon, CommunityIcon,
ContributionIcon, ContributionIcon,
BugIcon, BugIcon,
EmailIcon, EmailIcon,
TwitterIcon, TwitterIcon,
} from "components/common/Icons/" } from "components/common/Icons/"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
let promise = getApps() let promise = getApps()
@ -31,7 +31,6 @@
throw new Error(json) throw new Error(json)
} }
} }
</script> </script>
<div class="root"> <div class="root">
@ -54,13 +53,13 @@
</span> </span>
<div class="nav-item-title">Settings</div> <div class="nav-item-title">Settings</div>
</div> </div>
<a href="https://budibase.con/login" target="_blank" class="nav-item"> <a href="https://budibase.con/login" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<UpdatesIcon /> <UpdatesIcon />
</span> </span>
<div class="nav-item-title">Updates</div> <div class="nav-item-title">Updates</div>
</a> </a>
<a href="https://budibase.con/login" target="_blank" class="nav-item"> <a href="https://budibase.con/login" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<HostingIcon /> <HostingIcon />
</span> </span>
@ -70,19 +69,22 @@
<div class="nav-section"> <div class="nav-section">
<div class="nav-section-title">Learn</div> <div class="nav-section-title">Learn</div>
<a href="https://docs.budibase.com/" target="_blank" class="nav-item"> <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<DocumentationIcon /> <DocumentationIcon />
</span> </span>
<div class="nav-item-title">Documentation</div> <div class="nav-item-title">Documentation</div>
</a> </a>
<a href="https://docs.budibase.com/tutorial/quick-start" target="_blank" class="nav-item"> <a
<span class="nav-item-icon"> href="https://docs.budibase.com/tutorial/quick-start"
target="_blank"
class="nav-item">
<span class="nav-item-icon">
<TutorialsIcon /> <TutorialsIcon />
</span> </span>
<div class="nav-item-title">Tutorials</div> <div class="nav-item-title">Tutorials</div>
</a> </a>
<a href="https://forum.budibase.com/" target="_blank" class="nav-item"> <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<CommunityIcon /> <CommunityIcon />
</span> </span>
@ -92,25 +94,31 @@
<div class="nav-section"> <div class="nav-section">
<div class="nav-section-title">Contact</div> <div class="nav-section-title">Contact</div>
<a href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md" target="_blank" class="nav-item"> <a
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
target="_blank"
class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<ContributionIcon /> <ContributionIcon />
</span> </span>
<div class="nav-item-title">Contribute to our product</div> <div class="nav-item-title">Contribute to our product</div>
</a> </a>
<a href="https://github.com/Budibase/budibase/issues" target="_blank" class="nav-item"> <a
href="https://github.com/Budibase/budibase/issues"
target="_blank"
class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<BugIcon /> <BugIcon />
</span> </span>
<div class="nav-item-title">Report bug</div> <div class="nav-item-title">Report bug</div>
</a> </a>
<a href="mailto:support@budibase.com" target="_blank" class="nav-item"> <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<EmailIcon /> <EmailIcon />
</span> </span>
<div class="nav-item-title">Email</div> <div class="nav-item-title">Email</div>
</a> </a>
<a href="https://twitter.com/budibase" target="_blank" class="nav-item"> <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
<span class="nav-item-icon"> <span class="nav-item-icon">
<TwitterIcon /> <TwitterIcon />
</span> </span>
@ -120,30 +128,31 @@
</div> </div>
<div class="main"> <div class="main">
<div class="welcome">Welcome to Budibase</div> <div class="welcome">Welcome to Budibase</div>
<div class="banner"> <div class="banner">
<div class="banner-content"> <div class="banner-content">
<div class="banner-header"> <div class="banner-header">
Every accomplishment starts with a decision to try. Every accomplishment starts with a decision to try.
</div> </div>
<button class="banner-button" type="button"><i class="ri-add-circle-fill"></i> <button class="banner-button" type="button">
Create New Web App <i class="ri-add-circle-fill" />
Create New Web App
</button> </button>
</div> </div>
<div class="banner-image"> <div class="banner-image">
<img src="/_builder/assets/banner-image.png" alt="Bannerimage" /> <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
</div> </div>
</div> </div>
{#await promise} {#await promise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner /> <Spinner />
</div> </div>
{:then result} {:then result}
<AppList apps={result} /> <AppList apps={result} />
{:catch err} {:catch err}
<h1 style="color:red">{err}</h1> <h1 style="color:red">{err}</h1>
{/await} {/await}
</div> </div>
</div> </div>
<style> <style>
@ -175,7 +184,7 @@
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid var(--grey-dark) border-right: 1px solid var(--grey-dark);
} }
.home-logo { .home-logo {
@ -255,24 +264,38 @@
.banner { .banner {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin: 20px 80px 40px 80px; margin: 20px 80px 40px 80px;
background-image: linear-gradient(-45deg, #7F9CEB, #1D2F77); background-image: linear-gradient(-45deg, #7f9ceb, #1d2f77);
border-radius: 10px; border-radius: 10px;
max-height: 280px; max-height: 280px;
} }
.banner-content { .banner-content {
padding: 80px; padding: 60px;
} }
@media only screen and (min-width: 1800px) {
.banner-content {
padding: 80px;
}
}
.banner-header { .banner-header {
font-size: 36px; font-size: 24px;
color: var(--white); color: var(--white);
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media only screen and (min-width: 1800px) {
.banner-header {
font-size: 36px;
color: var(--white);
font-weight: 500;
margin-bottom: 20px;
}
}
.banner-image { .banner-image {
z-index: 1; z-index: 1;
} }
@ -303,7 +326,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
} }
.ri-add-circle-fill { .ri-add-circle-fill {
margin-right: 4px; margin-right: 4px;
font-size: 24px; font-size: 24px;