Refactor grid columns and improve UI styling

Removed fixed column widths in `EnvelopeSenderPage.razor` for dynamic sizing. Added `CellDisplayTemplate` to `Title`, `Status`, and `EnvelopeReceivers` columns for custom data rendering. Fixed gradient typo in progress bar CSS.

Added a new CSS rule to hide empty DevExpress grid cells and updated `sender-page.css` to include this rule while preserving existing styles.
This commit is contained in:
2026-06-16 16:47:11 +02:00
parent 4572e20c51
commit 3302be9348
2 changed files with 14 additions and 9 deletions

View File

@@ -129,13 +129,13 @@
SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
CustomizeElement="OnCustomizeElement">
<Columns>
<DxGridDataColumn FieldName="Id" Caption="ID" Width="80px" />
<DxGridDataColumn FieldName="Title" Caption="Titel" Width="300px">
<DxGridDataColumn FieldName="Id" Caption="ID" />
<DxGridDataColumn FieldName="Title" Caption="Titel">
<CellDisplayTemplate Context="cellContext">
<strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
</CellDisplayTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="Status" Caption="Status" Width="180px">
<DxGridDataColumn FieldName="Status" Caption="Status">
<CellDisplayTemplate Context="cellContext">
@{
var envelope = cellContext.DataItem as EnvelopeDto;
@@ -149,7 +149,7 @@
}
</CellDisplayTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger" Width="250px">
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
<CellDisplayTemplate Context="cellContext">
@{
var envelope = cellContext.DataItem as EnvelopeDto;
@@ -221,13 +221,13 @@
SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
CustomizeElement="OnCustomizeElement">
<Columns>
<DxGridDataColumn FieldName="Id" Caption="ID" Width="80px" />
<DxGridDataColumn FieldName="Title" Caption="Titel" Width="300px">
<DxGridDataColumn FieldName="Id" Caption="ID" />
<DxGridDataColumn FieldName="Title" Caption="Titel">
<CellDisplayTemplate Context="cellContext">
<strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
</CellDisplayTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="Status" Caption="Status" Width="180px">
<DxGridDataColumn FieldName="Status" Caption="Status">
<CellDisplayTemplate Context="cellContext">
@{
var envelope = cellContext.DataItem as EnvelopeDto;
@@ -241,7 +241,7 @@
}
</CellDisplayTemplate>
</DxGridDataColumn>
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger" Width="250px">
<DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
<CellDisplayTemplate Context="cellContext">
@{
var envelope = cellContext.DataItem as EnvelopeDto;
@@ -255,7 +255,7 @@
</span>
@if (total > 0) {
<div style="flex: 1; min-width: 60px; max-width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;">
<div style="height: 100%; background: linear-gradient(90px, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
<div style="height: 100%; background: linear-gradient(90deg, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
</div>
}
</div>

View File

@@ -174,6 +174,11 @@
padding: 1.5rem 2rem 2rem;
}
/* Hide DevExpress empty cells */
.dxbl-grid-empty-cell {
display: none !important;
}
.status-badge {
display: inline-flex;
align-items: center;