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

Fix spacing in manage user page and add first name and last name fields

This commit is contained in:
Andrew Kingston 2021-05-19 10:39:23 +01:00
parent 8049088fa0
commit a6e80da57f
1 changed files with 37 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
View File

@ -56,7 +56,8 @@
} }
</script> </script>
<Layout noPadding gap="XS"> <Layout noPadding>
<Layout gap="XS" noPadding>
<div class="back"> <div class="back">
<ActionButton <ActionButton
on:click={() => $goto("./")} on:click={() => $goto("./")}
@ -67,33 +68,38 @@
Back to users Back to users
</ActionButton> </ActionButton>
</div> </div>
<div class="heading">
<Layout noPadding gap="XS">
<Heading>User: {$roleFetch?.data?.email}</Heading> <Heading>User: {$roleFetch?.data?.email}</Heading>
<Body> <Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro ut
ut nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit
veritatis quos quas laborum magnam tenetur perspiciatis ex hic. veritatis quos quas laborum magnam tenetur perspiciatis ex hic.
</Body> </Body>
</Layout> </Layout>
</div>
<Divider size="S" /> <Divider size="S" />
<div class="general"> <Layout gap="S" noPadding>
<Heading size="S">General</Heading> <Heading size="S">General</Heading>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<Label size="L">Email</Label> <Label size="L">Email</Label>
<Input disabled thin value={$roleFetch?.data?.email} /> <Input disabled thin value={$roleFetch?.data?.email} />
</div> </div>
<div class="field">
<Label size="L">First name</Label>
<Input disabled thin value={$roleFetch?.data?.firstName} />
</div>
<div class="field">
<Label size="L">Last name</Label>
<Input disabled thin value={$roleFetch?.data?.lastName} />
</div>
</div> </div>
<div class="regenerate"> <div class="regenerate">
<ActionButton size="S" icon="Refresh" quiet> <ActionButton size="S" icon="Refresh" quiet>
Regenerate password Regenerate password
</ActionButton> </ActionButton>
</div> </div>
</div> </Layout>
<Divider size="S" /> <Divider size="S" />
<div class="roles"> <Layout gap="S" noPadding>
<Heading size="S">Configure roles</Heading> <Heading size="S">Configure roles</Heading>
<Table <Table
on:click={openUpdateRolesModal} on:click={openUpdateRolesModal}
@ -104,17 +110,15 @@
allowSelectRows={false} allowSelectRows={false}
customRenderers={[{ column: "role", component: TagsRenderer }]} customRenderers={[{ column: "role", component: TagsRenderer }]}
/> />
</div> </Layout>
<Divider size="S" /> <Divider size="S" />
<div class="delete"> <Layout gap="XS" noPadding>
<Layout gap="S" noPadding>
<Heading size="S">Delete user</Heading> <Heading size="S">Delete user</Heading>
<Body>Deleting a user completely removes them from your account.</Body> <Body>Deleting a user completely removes them from your account.</Body>
</Layout>
<div class="delete-button"> <div class="delete-button">
<Button warning on:click={deleteUserModal.show}>Delete user</Button> <Button warning on:click={deleteUserModal.show}>Delete user</Button>
</div> </div>
</Layout>
</div>
</Layout> </Layout>
<Modal bind:this={deleteUserModal}> <Modal bind:this={deleteUserModal}>
@ -143,26 +147,12 @@
.fields { .fields {
display: grid; display: grid;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
margin-top: var(--spacing-xl);
} }
.field { .field {
display: grid; display: grid;
grid-template-columns: 32% 1fr; grid-template-columns: 32% 1fr;
align-items: center; align-items: center;
} }
.heading {
margin-bottom: var(--spacing-xl);
}
.general {
position: relative;
margin: var(--spacing-xl) 0;
}
.roles {
margin: var(--spacing-xl) 0;
}
.delete {
margin-top: var(--spacing-xl);
}
.regenerate { .regenerate {
position: absolute; position: absolute;
top: 0; top: 0;