Update description sidebar padding and title
This commit is contained in:
parent
b564a5e5e0
commit
d8eb6b965a
2 changed files with 25 additions and 56 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue