AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor grid columns and improve UI styling

Browse Source 
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:
tekh
2026-06-16 16:47:11 +02:00
parent 4572e20c51
commit 3302be9348
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor
View File

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

5
EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
View File

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