Improve Catalogs page layout with spacing and styling
Added CSS classes for better spacing between form and grid. Wrapped form in .action-panel and grid in .grid-section divs to enhance visual separation. No functional changes made.
This commit is contained in:
@@ -1,6 +1,11 @@
|
|||||||
@page "/catalogs"
|
@page "/catalogs"
|
||||||
@inject CatalogApiClient Api
|
@inject CatalogApiClient Api
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.action-panel { margin-bottom: 16px; }
|
||||||
|
.grid-section { margin-top: 12px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
<PageTitle>Catalogs</PageTitle>
|
<PageTitle>Catalogs</PageTitle>
|
||||||
|
|
||||||
<h1>Catalogs</h1>
|
<h1>Catalogs</h1>
|
||||||
@@ -20,6 +25,7 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
|
|||||||
|
|
||||||
@if (showForm)
|
@if (showForm)
|
||||||
{
|
{
|
||||||
|
<div class="action-panel">
|
||||||
<EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
|
<EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
|
||||||
<DxFormLayout ColCount="2">
|
<DxFormLayout ColCount="2">
|
||||||
<DxFormLayoutItem Caption="Titel" Context="itemCtx">
|
<DxFormLayoutItem Caption="Titel" Context="itemCtx">
|
||||||
@@ -45,6 +51,7 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
|
|||||||
</DxFormLayoutItem>
|
</DxFormLayoutItem>
|
||||||
</DxFormLayout>
|
</DxFormLayout>
|
||||||
</EditForm>
|
</EditForm>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (isLoading)
|
@if (isLoading)
|
||||||
@@ -57,6 +64,7 @@ else if (items.Count == 0)
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
<div class="grid-section">
|
||||||
<DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
|
<DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
|
||||||
<Columns>
|
<Columns>
|
||||||
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
|
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
|
||||||
@@ -77,6 +85,7 @@ else
|
|||||||
</DxGridDataColumn>
|
</DxGridDataColumn>
|
||||||
</Columns>
|
</Columns>
|
||||||
</DxGrid>
|
</DxGrid>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|||||||
Reference in New Issue
Block a user