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>
<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>

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

@ -31,7 +31,6 @@
throw new Error(json)
}
}
</script>
<div class="root">
@ -76,7 +75,10 @@
</span>
<div class="nav-item-title">Documentation</div>
</a>
<a href="https://docs.budibase.com/tutorial/quick-start" target="_blank" class="nav-item">
<a
href="https://docs.budibase.com/tutorial/quick-start"
target="_blank"
class="nav-item">
<span class="nav-item-icon">
<TutorialsIcon />
</span>
@ -92,13 +94,19 @@
<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>
@ -126,7 +134,8 @@
<div class="banner-header">
Every accomplishment starts with a decision to try.
</div>
<button class="banner-button" type="button"><i class="ri-add-circle-fill"></i>
<button class="banner-button" type="button">
<i class="ri-add-circle-fill" />
Create New Web App
</button>
</div>
@ -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,23 +264,37 @@
.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: 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;