acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-01-12 17:04:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: create persona form - name, pitch, description (#200)

Browse Source
This commit is contained in:
Barbara Gomes 2023-02-16 07:40:24 -05:00 committed by GitHub
parent b3119e2df6
commit 2c7cfa2272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 229 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/src/lib/components/grid.svelte
View File

@ -1,20 +1,18 @@
<script lang="ts">
</script>
<div class="grid">
<slot />
<slot />
</div>
<style lang="scss">
.grid {
display: grid;
grid-auto-columns: auto;
grid-template-columns: 100%;
grid-auto-rows: auto;
margin-inline: auto;
grid-auto-rows: auto;
margin-inline: auto;
// decided to use max-width here to make it easier to match the page headers' width
@media (min-width: 688px) {
padding: 0 var(--spacing-24);
@ -37,6 +35,5 @@
max-width: 2490px;
grid-template-columns: repeat(auto-fit, minmax(min(100%/5, max(350px, 100%/5)), 1fr));
}
}
</style>

9
packages/ui/src/lib/components/header-top.svelte
View File

@ -71,25 +71,24 @@
transition: padding 0.2s;
max-width: 498px;
margin-inline: auto;
@media (min-width: 688px) {
padding: var(--spacing-48);
max-width: 996px;
transition: padding 0.2s;
}
@media (min-width: 1242px) {
max-width: 1494px;
}
@media (min-width: 1640px) {
max-width: 1992px;
}
@media (min-width: 2038px) {
max-width: 2490px;
}
}
.header-title {

4
packages/ui/src/lib/components/persona.svelte
View File

@ -29,11 +29,10 @@
</div>
</div>
</div>
<hr/>
<hr />
</div>
<style lang="scss">
.persona-card-wrapper {
width: 100%;
@ -55,7 +54,6 @@
max-width: 498px;
margin-inline: auto;
@media (min-width: 1242px) {
min-width: 350px;
}

69
packages/ui/src/lib/components/textarea.svelte Normal file
View File

@ -0,0 +1,69 @@
<script lang="ts">
export let value = ''
export let placeholder = ''
export let label = ''
let placeholderHeight: number
</script>
<label>
{label}
<div class="area-placeholder">
<div
bind:clientHeight={placeholderHeight}
class={`placeholder-text ${value != '' ? 'hide' : ''} `}
>
{placeholder}
</div>
<textarea
bind:value
class={value != '' ? 'content' : ''}
style={`${value != '' ? 'min-height: ' + placeholderHeight : ''}px;`}
/>
</div>
</label>
<style lang="scss">
label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-6);
font-size: var(--font-size-sm);
color: var(--color-body-text);
.area-placeholder {
position: relative;
width: 100%;
height: fit-content;
.placeholder-text {
font-size: var(--font-size-lg);
color: var(--grey-300);
width: 100%;
height: fit-content;
&.hide {
display: none;
}
}
textarea {
position: absolute;
inset: 0;
border: none;
background-color: transparent;
transition: background-color 0.2s;
font-size: var(--font-size-lg);
&:focus,
&.content {
background-color: #ffffff;
transition: background-color 0.2s;
outline: none;
}
&.content {
position: static;
width: 100%;
}
}
}
}
</style>

30
packages/ui/src/routes/+page.svelte
View File

@ -46,7 +46,7 @@
{#if $personas.draft.length !== 0 && $profile.signer !== undefined}
<div class="section-wrapper">
<div class="subtitle">Draft personas</div>
<hr/>
<hr />
<Button icon={Add} label="Create persona" on:click={() => goto(ROUTES.PERSONA_NEW)} />
<Grid>
{#each $personas.draft as draftPersona, index}
@ -65,8 +65,8 @@
{#if $personas.favorite.size !== 0 && $profile.signer !== undefined}
<div class="section-wrapper">
<div class="subtitle">Favorites</div>
<hr/>
<Grid>
<hr />
<Grid>
{#each [...$personas.favorite] as [name, data]}
<Persona
{name}
@ -76,7 +76,7 @@
picture={data.picture}
/>
{/each}
</Grid>
</Grid>
</div>
{/if}
@ -86,7 +86,11 @@
<div class="personas-title">All personas</div>
<div class="btns">
{#if $profile.signer !== undefined}
<Button icon={Add} label="Create persona" on:click={() => goto(ROUTES.PERSONA_NEW)} />
<Button
icon={Add}
label="Create persona"
on:click={() => goto(ROUTES.PERSONA_NEW)}
/>
{/if}
<Button icon={SettingsView} />
</div>
@ -132,7 +136,6 @@
}
.section-wrapper {
@media (min-width: 688px) {
padding-block: var(--spacing-24);
border-bottom: 1px solid var(--grey-200);
@ -150,7 +153,7 @@
transition: padding 0.2s;
max-width: 498px;
margin-inline: auto;
@media (min-width: 688px) {
max-width: 996px;
transition: padding 0.2s;
@ -167,7 +170,7 @@
@media (min-width: 2038px) {
max-width: 2490px;
}
}
}
hr {
@ -237,17 +240,17 @@
}
}
.personas-wrap {
.personas-wrap {
border-bottom: 1px solid var(--grey-200);
padding: var(--spacing-24);
padding: var(--spacing-24);
transition: padding 0.2s;
&.border-top {
border-top: 1px solid var(--grey-200);
}
> div {
max-width: 450px;
max-width: 450px;
margin-inline: auto;
@media (min-width: 688px) {
@ -324,7 +327,4 @@
}
}
}
</style>

157
packages/ui/src/routes/persona/new/+page.svelte
View File

@ -1,35 +1,150 @@
<script lang="ts">
import Undo from '$lib/components/icons/undo.svelte'
import Close from '$lib/components/icons/close.svelte'
import ArrowRight from '$lib/components/icons/arrow-right.svelte'
import Button from '$lib/components/button.svelte'
import Textarea from '$lib/components/textarea.svelte'
import { personas } from '$lib/stores/persona'
let name = ''
let pitch = ''
let description = ''
let y: number
</script>
<Button icon={Undo} on:click={() => history.back()} />
<span>Create persona</span>
<svelte:window bind:scrollY={y} />
<label>
Persona name
<input type="text" bind:value={name} placeholder="Enter a short memorable name…" />
</label>
<header class={y > 0 ? 'scrolled' : ''}>
<div class="header-content">
<div class="btn-undo">
<Button icon={Undo} on:click={() => history.back()} />
</div>
<h1>Create persona</h1>
</div>
</header>
<label>
Persona pitch
<textarea bind:value={pitch} />
</label>
<form>
<Textarea placeholder="Enter a short memorable name…" label="Persona name" bind:value={name} />
<Textarea
placeholder="Pitch the persona in one sentence, this should serve as a brief introduction…"
label="Persona pitch"
bind:value={pitch}
/>
<Textarea
placeholder="Describe the persona in more details, provide additional context and help anyone understand the concept of this persona…"
label="Persona description"
bind:value={description}
/>
<label>
Persona description
<textarea bind:value={description} />
</label>
<div class="btns">
<Button label="Cancel" icon={Close} on:click={() => history.back()} />
<Button label="Cancel" on:click={() => history.back()} />
<Button
label="Proceed"
on:click={() => {
$personas.draft
}}
/>
<!-- NEEDS CONDITION TO DISABLE/ENABLE -->
<Button
label="Proceed"
icon={ArrowRight}
variant="primary"
disabled
on:click={() => {
$personas.draft
}}
/>
</div>
</form>
<style lang="scss">
header {
position: sticky;
top: 0;
left: 0;
right: 0;
background-color: rgba(var(--color-body-bg-rgb), 0.93);
backdrop-filter: blur(3px);
z-index: 100;
padding: var(--spacing-24);
transition: padding 0.2s, box-shadow 0.2s;
@media (prefers-color-scheme: dark) {
box-shadow: 0 1px 5px 0 rgba(var(--color-body-bg-rgb), 0.75);
}
@media (min-width: 688px) {
padding: var(--spacing-48);
transition: padding 0.2s;
}
.header-content {
position: relative;
max-width: 450px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
transition: max-width 0.2s;
@media (min-width: 688px) {
max-width: 996px;
transition: max-width 0.2s;
}
@media (min-width: 1242px) {
max-width: 1494px;
}
@media (min-width: 1640px) {
max-width: 1992px;
}
@media (min-width: 2038px) {
max-width: 2490px;
}
}
.btn-undo {
position: absolute;
inset: 0 0 auto 0;
}
h1 {
font-family: var(--font-body);
font-weight: 600;
font-size: 18px;
font-style: normal;
text-align: center;
line-height: 44px;
}
&.scrolled {
box-shadow: 0 1px 5px 0 rgba(var(--color-body-text-rgb), 0.25);
transition: box-shadow 0.2s;
@media (min-width: 688px) {
padding-block: var(--spacing-24);
transition: padding 0.2s;
}
}
}
form {
min-height: calc(100dvh - 92px);
min-height: calc(100vh - 92px);
display: flex;
align-items: stretch;
justify-content: center;
flex-direction: column;
gap: var(--spacing-48);
max-width: 498px;
margin-inline: auto;
padding: var(--spacing-24);
.btns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--spacing-12);
padding-top: var(--spacing-48);
}
}
</style>