Unify page styling in gw-events database pages
This commit is contained in:
parent
77cb109dd2
commit
9f377d5d01
4 changed files with 17 additions and 28 deletions
|
|
@ -141,7 +141,7 @@
|
|||
@use '$src/themes/typography' as typography;
|
||||
|
||||
.page {
|
||||
padding: spacing.$unit-2x 0;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,14 +118,16 @@
|
|||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/effects' as effects;
|
||||
@use '$src/themes/layout' as layout;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
|
||||
.page {
|
||||
background: white;
|
||||
border-radius: layout.$card-corner;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
||||
border-radius: layout.$page-corner;
|
||||
box-shadow: effects.$page-elevation;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
|
|
|
|||
|
|
@ -67,9 +67,7 @@
|
|||
|
||||
// Validation
|
||||
const canSave = $derived(
|
||||
editData.eventNumber > 0 &&
|
||||
editData.startDate !== '' &&
|
||||
editData.endDate !== ''
|
||||
editData.eventNumber > 0 && editData.startDate !== '' && editData.endDate !== ''
|
||||
)
|
||||
|
||||
// Save changes
|
||||
|
|
@ -116,12 +114,7 @@
|
|||
<Button variant="secondary" size="small" onclick={handleCancel}>Cancel</Button>
|
||||
{/snippet}
|
||||
{#snippet rightAccessory()}
|
||||
<Button
|
||||
variant="primary"
|
||||
size="small"
|
||||
onclick={handleSave}
|
||||
disabled={!canSave || isSaving}
|
||||
>
|
||||
<Button variant="primary" size="small" onclick={handleSave} disabled={!canSave || isSaving}>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
{/snippet}
|
||||
|
|
@ -175,14 +168,16 @@
|
|||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/effects' as effects;
|
||||
@use '$src/themes/layout' as layout;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
|
||||
.page {
|
||||
background: white;
|
||||
border-radius: layout.$card-corner;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
||||
border-radius: layout.$page-corner;
|
||||
box-shadow: effects.$page-elevation;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
|
|
|
|||
|
|
@ -109,32 +109,24 @@
|
|||
type="select"
|
||||
options={elementOptions}
|
||||
/>
|
||||
<DetailItem
|
||||
label="Start date"
|
||||
bind:value={editData.startDate}
|
||||
editable={true}
|
||||
type="date"
|
||||
/>
|
||||
<DetailItem
|
||||
label="End date"
|
||||
bind:value={editData.endDate}
|
||||
editable={true}
|
||||
type="date"
|
||||
/>
|
||||
<DetailItem label="Start date" bind:value={editData.startDate} editable={true} type="date" />
|
||||
<DetailItem label="End date" bind:value={editData.endDate} editable={true} type="date" />
|
||||
</DetailsContainer>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/effects' as effects;
|
||||
@use '$src/themes/layout' as layout;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
|
||||
.page {
|
||||
background: white;
|
||||
border-radius: layout.$card-corner;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
||||
border-radius: layout.$page-corner;
|
||||
box-shadow: effects.$page-elevation;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
|
|
|
|||
Loading…
Reference in a new issue