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

Minor responsive design updates and formatting

pull/4023/head
Joe 6 years ago
parent
c8e9178b63
commit
e4da8a546d
2 changed files with 94 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      packages/builder/src/components/start/AppList.svelte
  2. 113
      packages/builder/src/pages/index.svelte

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

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

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

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

Write Preview
Loading…
Cancel
Save