Update description sidebar padding and title

This commit is contained in:
Justin Edmund 2025-09-24 00:45:40 -07:00
parent b564a5e5e0
commit d8eb6b965a
2 changed files with 25 additions and 56 deletions

View file

@ -14,40 +14,25 @@
<div class="description-sidebar">
<div class="content-section">
{#if title}
<div class="party-title">
<h2>{title}</h2>
</div>
{/if}
{#if description}
<div class="description-content">
<DescriptionRenderer content={description} truncate={false} />
</div>
{:else}
<div class="empty-state">
<p>No description available for this party.</p>
{#if canEdit}
<Button
variant="primary"
onclick={onEdit}
>
Add Description
</Button>
{/if}
</div>
{/if}
<div class="content-inner">
{#if description}
<div class="description-content">
<DescriptionRenderer content={description} truncate={false} />
</div>
{:else}
<div class="empty-state">
<p>No description available for this party.</p>
{#if canEdit}
<Button variant="primary" onclick={onEdit}>Add Description</Button>
{/if}
</div>
{/if}
</div>
</div>
{#if canEdit && description}
<div class="actions-section">
<Button
variant="secondary"
onclick={onEdit}
class="edit-button"
>
Edit Description
</Button>
<Button variant="secondary" onclick={onEdit} class="edit-button">Edit Description</Button>
</div>
{/if}
</div>
@ -62,35 +47,14 @@
display: flex;
flex-direction: column;
height: 100%;
padding: $unit-2x;
color: var(--text-primary);
}
.content-section {
flex: 1;
overflow-y: auto;
}
.party-title {
margin-bottom: $unit-3x;
padding-bottom: $unit-2x;
border-bottom: 1px solid var(--button-bg);
h2 {
margin: 0;
font-size: $font-xlarge;
font-weight: $bold;
color: var(--text-primary);
line-height: 1.2;
}
}
.description-content {
// Allow the content to scroll if it's very long
overflow-y: auto;
padding-right: $unit;
// Custom scrollbar styling
// Custom scrollbar styling - on the outer container
&::-webkit-scrollbar {
width: 6px;
}
@ -110,6 +74,10 @@
}
}
.content-inner {
padding: 0 $unit-2x;
}
.empty-state {
display: flex;
flex-direction: column;
@ -128,11 +96,12 @@
.actions-section {
margin-top: $unit-2x;
padding-top: $unit-2x;
padding: $unit-2x;
padding-bottom: $unit-2x;
border-top: 1px solid var(--button-bg);
:global(.edit-button) {
width: 100%;
}
}
</style>
</style>

View file

@ -11,8 +11,8 @@ interface DescriptionSidebarOptions {
export function openDescriptionSidebar(options: DescriptionSidebarOptions) {
const { title, description, canEdit = false, onEdit } = options
// Open the sidebar with the description component
sidebar.openWithComponent('Description', DescriptionSidebar, {
// Open the sidebar with the party title as the header
sidebar.openWithComponent(title, DescriptionSidebar, {
title,
description,
canEdit,