Various minor UI updates including the settings modal
Settings modal update includies, improved spacing, element sizing. Working with this part of the platform felt a little brittle. It might be the fact it's a modal. The frontend component section had a different layout that the block section in the backend and workflow section - updated to follow suit. Dataform button updated and improved. Settings button color updated Additonal data blocks added which are pretty popular (not essential but took me mew a seconds to add and will save me a decent bit in the future)
This commit is contained in:
Joe
parent
28c42016cc
commit
70050332e6
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
.budibase__nav-item.selected {
|
||||
color: var(--ink);
|
||||
background: var(--blue-light);
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.budibase__nav-item:hover {
|
||||
|
|
|
|||
|
|
@ -28,12 +28,15 @@
|
|||
}
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
font-size: 24px;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { store, backendUiStore } from "builderStore"
|
||||
import { notifier } from "builderStore/store/notifications"
|
||||
import { compose, map, get, flatten } from "lodash/fp"
|
||||
import { Button } from "@budibase/bbui"
|
||||
import { Input, TextArea, Button } from "@budibase/bbui"
|
||||
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
|
||||
import Select from "components/common/Select.svelte"
|
||||
import RecordFieldControl from "./RecordFieldControl.svelte"
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<div class="actions">
|
||||
<header>
|
||||
<i class="ri-file-user-fill" />
|
||||
<h4 class="budibase__title--4">Create / Edit Record</h4>
|
||||
<h4>Create / Edit Record</h4>
|
||||
</header>
|
||||
<ErrorsBox {errors} />
|
||||
<form on:submit|preventDefault class="uk-form-stacked">
|
||||
|
|
@ -117,15 +117,16 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--blue-light);
|
||||
color: var(--ink);
|
||||
color: var(--grey-7);
|
||||
font-size: 20px;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,17 +52,28 @@
|
|||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
padding: 0px 16px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
color: var(--ink-lighter);
|
||||
background: #ffffff;
|
||||
color: var(--grey-7);
|
||||
border-radius: 5px;
|
||||
font-family: inter;
|
||||
font-size: 14px;
|
||||
background: var(--grey-1);
|
||||
font-weight: 400;
|
||||
transition: all 0.3s;
|
||||
text-rendering: optimizeLegibility;
|
||||
border: none !important;
|
||||
transition: 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background: var(--blue-light);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--blue-light);
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
|
||||
div:hover {
|
||||
background-color: var(--blue-light);
|
||||
background-color: var(--grey-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
margin: 0px 20px 0px 0px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
height: 36rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
|
|
@ -88,9 +89,10 @@
|
|||
width: 20px;
|
||||
padding: 10px;
|
||||
background-color: var(--blue-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
.body {
|
||||
padding: 40px 40px 80px 40px;
|
||||
padding: 40px 40px 40px 40px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Input, Button } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import api from "builderStore/api"
|
||||
import Title from "../TabTitle.svelte"
|
||||
|
||||
let keys = { budibase: "", sendGrid: "" }
|
||||
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
fetchKeys()
|
||||
</script>
|
||||
|
||||
<Title>API Keys</Title>
|
||||
<div class="container">
|
||||
<div class="background">
|
||||
<Input
|
||||
|
|
@ -49,7 +47,6 @@
|
|||
}
|
||||
.background {
|
||||
border-radius: 5px;
|
||||
background-color: var(--light-grey);
|
||||
padding: 12px 12px 18px 12px;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { params, goto } from "@sveltech/routify"
|
||||
import { Input, TextArea, Button } from "@budibase/bbui"
|
||||
import Title from "../TabTitle.svelte"
|
||||
import { del } from "builderStore/api"
|
||||
|
||||
let value = ""
|
||||
|
|
@ -23,20 +22,21 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Title>Danger Zone</Title>
|
||||
<div class="background">
|
||||
<p>
|
||||
Type DELETE into the textbox, then click the following button to delete your
|
||||
web app:
|
||||
</p>
|
||||
<Input
|
||||
on:change={e => (value = e.target.value)}
|
||||
on:input={e => (value = e.target.value)}
|
||||
thin
|
||||
disabled={loading}
|
||||
placeholder=""
|
||||
label="Type DELETE into the textbox, then click the following button to
|
||||
delete your web app:" />
|
||||
placeholder="" />
|
||||
|
||||
<Button
|
||||
disabled={value !== 'DELETE' || loading}
|
||||
primary
|
||||
red
|
||||
wide
|
||||
on:click={deleteApp}>
|
||||
Delete Entire Web App
|
||||
|
|
@ -48,8 +48,10 @@
|
|||
display: grid;
|
||||
grid-gap: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--light-grey);
|
||||
padding: 12px 12px 18px 12px;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.background :global(button) {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Input, TextArea, Button } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import api from "builderStore/api"
|
||||
import Title from "../TabTitle.svelte"
|
||||
|
||||
async function updateApplication(data) {
|
||||
const response = await api.put(`/api/${$store.appId}`, data)
|
||||
|
|
@ -17,34 +16,25 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Title>General</Title>
|
||||
<div class="container">
|
||||
<div class="background">
|
||||
<Input
|
||||
on:save={e => updateApplication({ name: e.detail })}
|
||||
thin
|
||||
edit
|
||||
value={$store.name}
|
||||
label="Name" />
|
||||
</div>
|
||||
<div class="background">
|
||||
<TextArea
|
||||
on:save={e => updateApplication({ description: e.detail })}
|
||||
thin
|
||||
edit
|
||||
value={$store.description}
|
||||
label="Name" />
|
||||
</div>
|
||||
<Input
|
||||
on:save={e => updateApplication({ name: e.detail })}
|
||||
thin
|
||||
edit
|
||||
value={$store.name}
|
||||
label="Name" />
|
||||
<TextArea
|
||||
on:save={e => updateApplication({ description: e.detail })}
|
||||
thin
|
||||
edit
|
||||
value={$store.description}
|
||||
label="Description" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
}
|
||||
.background {
|
||||
border-radius: 5px;
|
||||
background-color: var(--grey-1);
|
||||
padding: 12px 12px 18px 12px;
|
||||
grid-gap: 32px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { Input, Select, Button } from "@budibase/bbui"
|
||||
import Title from "../TabTitle.svelte"
|
||||
import UserRow from "../UserRow.svelte"
|
||||
|
||||
import { store, backendUiStore } from "builderStore"
|
||||
|
|
@ -52,9 +51,8 @@
|
|||
let fetchUsersPromise = fetchUsers()
|
||||
</script>
|
||||
|
||||
<Title>Users</Title>
|
||||
<div class="container">
|
||||
<div class="background create">
|
||||
<div class="background">
|
||||
<div class="title">Create new user</div>
|
||||
<div class="inputs">
|
||||
<Input thin bind:value={username} name="Name" placeholder="Username" />
|
||||
|
|
@ -69,10 +67,10 @@
|
|||
</Select>
|
||||
</div>
|
||||
<div class="create-button">
|
||||
<Button on:click={createUser} small blue>Create</Button>
|
||||
<Button on:click={createUser} small primary>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="background">
|
||||
<div class="background-users">
|
||||
<div class="title">Current Users</div>
|
||||
{#await fetchUsersPromise}
|
||||
Loading state!
|
||||
|
|
@ -96,23 +94,27 @@
|
|||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 14px;
|
||||
grid-gap: 32px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.background {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-gap: 12px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--grey-1);
|
||||
padding: 12px 12px 18px 12px;
|
||||
}
|
||||
.background.create {
|
||||
background-color: var(--blue-light);
|
||||
|
||||
.background-users {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-gap: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.create-button :global(button) {
|
||||
font-size: var(--font-size-sm);
|
||||
|
|
@ -125,6 +127,7 @@
|
|||
}
|
||||
.inputs {
|
||||
display: grid;
|
||||
margin-top: 12px;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
|
@ -133,13 +136,15 @@
|
|||
border-radius: var(--rounded-small);
|
||||
}
|
||||
.inputs :global(select) {
|
||||
padding: 9px 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--rounded-small);
|
||||
background-color: var(--grey-2);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,18 +10,19 @@
|
|||
<h3 class="app-title">{name}</h3>
|
||||
<p class="app-desc">{description}</p>
|
||||
<div class="card-footer">
|
||||
<a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
|
||||
<a href={`/_builder/${_id}`} class="app-button">Open {name}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.apps-card {
|
||||
background-color: var(--white);
|
||||
padding: 20px 20px 30px 20px;
|
||||
padding: 20px 20px 20px 20px;
|
||||
max-width: 400px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--grey-4);
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
.app-button:hover {
|
||||
|
|
@ -34,12 +35,15 @@
|
|||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
color: var(--grey-7);
|
||||
font-family: Inter;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
text: "Screenslot",
|
||||
text: "Screen Slot",
|
||||
type: "h1",
|
||||
_instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
|
||||
_instanceName: "Heading",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default `<html>
|
|||
<style>
|
||||
body, html {
|
||||
height: 100%!important;
|
||||
font-family: Roboto !important;
|
||||
font-family: Inter !important;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -26,13 +26,16 @@ export default `<html>
|
|||
}
|
||||
|
||||
.container-screenslot-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-style: dashed !important;
|
||||
border-width: 1px;
|
||||
color: #806fde;
|
||||
background: #e9e6ff44;
|
||||
height: 100%;
|
||||
color: #000000;
|
||||
background: #fafafa;
|
||||
height: 94%;
|
||||
}
|
||||
|
||||
.container-screenslot-placeholder span {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
input {
|
||||
width: 175px;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
background: #f1f3f4;
|
||||
border-radius: 8px;
|
||||
height: 20px;
|
||||
|
|
@ -24,5 +24,6 @@
|
|||
text-align: center;
|
||||
border: 1px solid #dadada;
|
||||
font-weight: 550;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,8 +61,9 @@
|
|||
|
||||
<style>
|
||||
.panel {
|
||||
padding: 20px 0px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
grid-template-columns: 1fr auto auto auto;
|
||||
padding: 0px 5px 0px 15px;
|
||||
margin: auto 0px;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,21 +21,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 0px 16px 0px;
|
||||
width: 110px;
|
||||
padding: 12px 16px 16px 16px;
|
||||
height: 80px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
background-color: var(--grey-1);
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.item-item:hover {
|
||||
background: var(--grey-2);
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
|
|
@ -51,6 +47,7 @@
|
|||
.item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -23,21 +23,26 @@
|
|||
{#if !list.isCategory}
|
||||
<button class="back-button" on:click={() => (list = category)}>Back</button>
|
||||
{/if}
|
||||
|
||||
{#each list.children as item}
|
||||
<Item {item} on:click={() => handleClick(item)} />
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.back-button {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
grid-column: 1 / span 2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
border: solid 1px #e8e8ef;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px var(--grey-3);
|
||||
background: white;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: Inter;
|
||||
transition: all 0.3ms;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: var(--grey-1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -472,7 +472,7 @@ export default {
|
|||
children: [
|
||||
{
|
||||
_component: "##builtin/screenslot",
|
||||
name: "Screenslot",
|
||||
name: "Screen Slot",
|
||||
description:
|
||||
"This component is a placeholder for the rendering of a screen within a page.",
|
||||
icon: "ri-crop-2-fill",
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
}
|
||||
|
||||
.workflow-item.selected {
|
||||
background: var(--blue-light);
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.new-workflow-button {
|
||||
|
|
|
|||
|
|
@ -87,8 +87,38 @@ export const BLOCKS = {
|
|||
presence: false,
|
||||
},
|
||||
},
|
||||
COMPANY: {
|
||||
name: "Company",
|
||||
icon: "ri-text",
|
||||
type: "string",
|
||||
constraints: {
|
||||
type: "string",
|
||||
length: {},
|
||||
presence: false,
|
||||
},
|
||||
},
|
||||
EMAIL: {
|
||||
name: "Email",
|
||||
icon: "ri-text",
|
||||
type: "string",
|
||||
constraints: {
|
||||
type: "string",
|
||||
length: {},
|
||||
presence: false,
|
||||
},
|
||||
},
|
||||
PHONE_NUMBER: {
|
||||
name: "Phone Number",
|
||||
name: "Phone No.",
|
||||
icon: "ri-number-1",
|
||||
type: "number",
|
||||
constraints: {
|
||||
type: "number",
|
||||
presence: false,
|
||||
numericality: {},
|
||||
},
|
||||
},
|
||||
VALUE: {
|
||||
name: "Value",
|
||||
icon: "ri-number-1",
|
||||
type: "number",
|
||||
constraints: {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,13 @@ body {
|
|||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -166,9 +166,7 @@
|
|||
<button on:click={save} class:saved>
|
||||
{#if saved}
|
||||
<div in:fade>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>
|
||||
Success
|
||||
<span class:saved style="margin-left: 5px">🎉</span>
|
||||
<span class:saved>Success</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>{buttonText || 'Submit Form'}</div>
|
||||
|
|
@ -187,14 +185,13 @@
|
|||
|
||||
.form-content {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 6px 12px 6px 12px;
|
||||
padding: 1rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -244,7 +241,8 @@
|
|||
}
|
||||
|
||||
button.saved {
|
||||
background-color: green;
|
||||
background-color: #84c991;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
|
|||
|
|
@ -166,9 +166,7 @@
|
|||
<button on:click={save} class:saved>
|
||||
{#if saved}
|
||||
<div in:fade>
|
||||
<span class:saved style="margin-right: 5px">🎉</span>
|
||||
Success
|
||||
<span class:saved style="margin-left: 5px">🎉</span>
|
||||
<span class:saved>Success</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div>{buttonText || 'Submit Form'}</div>
|
||||
|
|
@ -235,7 +233,8 @@
|
|||
}
|
||||
|
||||
button.saved {
|
||||
background-color: green;
|
||||
background-color: #84c991;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
|
||||
let containerElement
|
||||
|
||||
$: containerElement && !text && _bb.props.children && _bb.props.children.length && _bb.attachChildren(containerElement)
|
||||
$: containerElement &&
|
||||
!text &&
|
||||
_bb.props.children &&
|
||||
_bb.props.children.length &&
|
||||
_bb.attachChildren(containerElement)
|
||||
</script>
|
||||
|
||||
{#if type === 'h1'}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<nav use:cssVars={cssVariables}>
|
||||
<a href="/">
|
||||
<img class="logo" alt="logo" src={logoUrl} height="30" />
|
||||
<img class="logo" alt="logo" src={logoUrl} height="48" />
|
||||
<span>{title}</span>
|
||||
</a>
|
||||
<div class="menu-items" bind:this={itemContainer} />
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0 20px 40px;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
|
|
@ -63,8 +63,7 @@
|
|||
}
|
||||
|
||||
nav a img {
|
||||
border-radius: 15px;
|
||||
margin-right: 15px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.menu-items {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue