Skip to content

Commit

Permalink
💄 Fix up the resource editor to match themeing (#172)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhinodavid
rhinodavid authored Dec 6, 2019
1 parent 992b27c commit febfb08
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 64 deletions.
118 changes: 78 additions & 40 deletions packages/upswyng-server/src/components/ResourceEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,47 +356,85 @@
<CloseScheduleInput bind:value={resource.closeSchedule} />
</p>

<p>
<label for="latitude">Latitude</label>
<input name="latitude" type="latitude" bind:value={resource.latitude} />
{#if $resourceForm.latitude.errors.length}
<p>Invalid Latitude.</p>
{/if}
<label for="longitude">Longitude</label>
<input
name="longitude"
type="longitude"
bind:value={resource.longitude} />
{#if $resourceForm.longitude.errors.length}
<p>Invalid Longitude.</p>
{/if}
</p>
<p>
<SubcategoryInput bind:value={resource.subcategories} {subcategories} />
</p>
<div class="buttons is-right">
<button
type="button"
class="button is-success"
class:is-loading={isSaving}
preventDefault
on:click={() => dispatchSaveResource('dispatchSaveResource', resource)}
disabled={!$resourceForm.valid}>
<span class="icon is-small">
<i class="fas fa-check" />
</span>
<span>{saveButtonLabel}</span>
</button>
</div>
{#if errorText}
<div class="content">
<div class="notification is-danger">
<button
class="delete"
on:click={() => dispatchClearErrorText('clearErrorText')} />
{errorText}
<div class="field">
<label class="label">Location</label>
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label" for="latitude">Latitude</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-right">
<input
class="input"
class:is-danger={$resourceForm.latitude.errors.length}
name="latitude"
type="latitude"
bind:value={resource.latitude} />
{#if $resourceForm.latitude.errors.length}
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle" />
</span>
{/if}
</div>
{#if $resourceForm.latitude.errors.length}
<p class="help is-danger">Invalid Latitude</p>
{/if}
</div>
</div>
</div>
{/if}
<div class="field is-horizontal">
<div class="field-label is-small">
<label class="label" for="longitude">Longitude</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-right">
<input
class="input"
class:is-danger={$resourceForm.longitude.errors.length}
name="longitude"
type="longitude"
bind:value={resource.longitude} />
{#if $resourceForm.longitude.errors.length}
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle" />
</span>
{/if}
</div>
{#if $resourceForm.longitude.errors.length}
<p class="help is-danger">Invalid Longitude</p>
{/if}
</div>
</div>
</div>
<p>
<SubcategoryInput bind:value={resource.subcategories} {subcategories} />
</p>
<div class="buttons is-right">
<button
type="button"
class="button is-success"
class:is-loading={isSaving}
preventDefault
on:click={() => dispatchSaveResource('dispatchSaveResource', resource)}
disabled={!$resourceForm.valid}>
<span class="icon">
<i class="fas fa-check is-small" />
</span>
<span>{saveButtonLabel}</span>
</button>
</div>
{#if errorText}
<div class="content">
<div class="notification is-danger">
<button
class="delete"
on:click={() => dispatchClearErrorText('clearErrorText')} />
{errorText}
</div>
</div>
{/if}
</div>
</form>
</div>
78 changes: 54 additions & 24 deletions packages/upswyng-server/src/components/SubcategoryInput.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,41 +30,71 @@
width: 0.75em;
height: 0.75em;
border-radius: 100%;
margin-right: 1em;
}
.subcategories {
list-style: none;
}
.subcategories > li > div {
display: flex;
align-items: center;
}
.subcategory-name {
margin-right: 1em;
}
</style>

<h1>Categories</h1>
<ul>
{#each value as subcategory}
<h1 class="title is-2">Categories</h1>
<ul class="subcategories">
{#each value as subcategory (subcategory._id)}
<li>
<div
class="bullet"
style={`background-color: ${subcategory.parentCategory.color || 'gray'}`} />
{subcategory.parentCategory.name} | {subcategory.name}
<button
type="button"
preventDefault
on:click={() => removeSubcategory(subcategory)}>
Remove
</button>
</li>
{/each}
</ul>
<fieldset>
<h2>Add Category</h2>
<ul>
{#each unselectedSubcategories as subcategory}
<li>
<div>
<div
class="bullet"
style={`background-color: ${subcategory.parentCategory.color || 'gray'}`} />
{subcategory.parentCategory.name} | {subcategory.name}
<div class="is-size-6 has-text-weight-semibold subcategory-name">
{subcategory.parentCategory.name} | {subcategory.name}
</div>
<button
class="button is-danger is-rounded is-small"
type="button"
preventDefault
on:click={() => addSubcategory(subcategory)}>
Add
on:click={() => removeSubcategory(subcategory)}>
<span class="icon is-small">
<i class="fas fa-trash" aria-hidden="true" />
</span>
<span>Remove</span>
</button>
</div>
</li>
{/each}
</ul>
<fieldset>
<h2 class="subtitle is-3">Add Resource to Category</h2>
<ul class="subcategories">
{#each unselectedSubcategories as subcategory (subcategory._id)}
<li>
<div>
<div
class="bullet"
style={`background-color: ${subcategory.parentCategory.color || 'gray'}`} />
<div class="is-size-6 has-text-weight-semibold subcategory-name">
{subcategory.parentCategory.name} | {subcategory.name}
</div>
<button
class="button is-success is-rounded is-small"
type="button"
preventDefault
on:click={() => addSubcategory(subcategory)}>
<span class="icon is-small">
<i class="fas fa-plus" />
</span>
<span>Add</span>
</button>
</div>
</li>
{/each}
</ul>
Expand Down

0 comments on commit febfb08

Please sign in to comment.