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

init receiver UI web project using devexpress template

Browse Source
This commit is contained in:
tekh
2026-05-13 10:39:55 +02:00
parent 8d9480ed71
commit 48bbadc906
58 changed files with 1988 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Pages/Index/Index.razor Normal file
View File

@@ -0,0 +1,27 @@
@page "/"
<PageTitle>Welcome</PageTitle>
<div class="main-content">
<DxGridLayout CssClass="index-gridlayout">
<Rows>
<DxGridLayoutRow Height="auto" Areas="header"></DxGridLayoutRow>
<DxGridLayoutRow Height="auto" Areas="tiles"></DxGridLayoutRow>
</Rows>
<Items>
<DxGridLayoutItem Area="header" CssClass="title">
<Template>
<div class="title-header-text">Hello World!</div>
<div class="title-content-text">Welcome to your new DevExpress Blazor Application</div>
</Template>
</DxGridLayoutItem>
<DxGridLayoutItem Area="tiles" CssClass="tiles">
<Template>
<IndexTile NavigateUrl="/counter" Title="Counter" Description="Count mouse clicks and track the total." IconCssClass="icon-counter" />
<IndexTile NavigateUrl="/weather" Title="Weather" Description="See a 5-day temperature and weather conditions forecast." IconCssClass="icon-weather" />
<IndexTile NavigateUrl="/pdfviewer" Title="PDF Viewer" Description="Load PDF files and view them in the web browser." IconCssClass="icon-pdf-viewer" />
</Template>
</DxGridLayoutItem>
</Items>
</DxGridLayout>
</div>

31
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Pages/Index/Index.razor.css Normal file
View File

@@ -0,0 +1,31 @@
::deep .index-gridlayout {
container-type: inline-size;
height: auto;
margin-top: auto;
margin-bottom: auto;
padding-bottom: 9rem;
}
::deep .title {
padding-bottom: 3rem;
text-align: center;
}
::deep .tiles {
--tile-column-count: 4;
display: grid;
gap: 1rem;
grid-template-columns: repeat(var(--tile-column-count), max-content);
justify-content: center;
@container (max-width: 60.5rem) {
--tile-column-count: 3;
}
@container (max-width: 45.125rem) {
--tile-column-count: 2;
}
@container (max-width: 29.75rem) {
--tile-column-count: 1;
}
}

40
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Pages/Index/IndexTile.razor Normal file
View File

@@ -0,0 +1,40 @@
@inherits DrawerStateComponentBase
<div class="tile">
<NavLink href="@AddDrawerStateToUrl(NavigateUrl)">
<DxGridLayout CssClass="tile-content" ColumnSpacing="0.75rem" RowSpacing="0.75rem">
<Rows>
<DxGridLayoutRow Areas="icon title" Height="auto" />
<DxGridLayoutRow Areas="description description" Height="auto" />
</Rows>
<Columns>
<DxGridLayoutColumn Width="auto" />
<DxGridLayoutColumn />
</Columns>
<Items>
<DxGridLayoutItem Area="icon" CssClass="tile-icon">
<Template>
<div class="@("icon " + IconCssClass)" aria-hidden="true"></div>
</Template>
</DxGridLayoutItem>
<DxGridLayoutItem Area="title" CssClass="tile-title">
<Template>
@Title
</Template>
</DxGridLayoutItem>
<DxGridLayoutItem Area="description" CssClass="tile-description">
<Template>
@Description
</Template>
</DxGridLayoutItem>
</Items>
</DxGridLayout>
</NavLink>
</div>
@code {
[Parameter] public string NavigateUrl { get; set; } = string.Empty;
[Parameter] public string? Title { get; set; }
[Parameter] public string? Description { get; set; }
[Parameter] public string? IconCssClass { get; set; }
}

44
receiverUI/EnvelopeGenerator.ReceiverUI.Web/EnvelopeGenerator.ReceiverUI.Web.Client/Pages/Index/IndexTile.razor.css Normal file
View File

@@ -0,0 +1,44 @@
.tile {
border-radius: 0.75rem;
height: 7.5rem;
transition: box-shadow 0.2s;
width: 14.375rem;
border: 1px solid var(--dxds-color-border-neutral-default-rest);
}
.tile:hover {
box-shadow: 0 4px 8px 0 rgba(170, 170, 170, 0.24), 0 0 2px 0 rgba(170, 170, 170, 0.2);
}
.tile ::deep > a {
text-decoration: none;
}
::deep .tile-content {
padding: 1rem;
}
::deep .tile-icon {
border-radius: 0.375rem;
height: 2.75rem;
padding: 0.75rem;
width: 2.75rem;
border: 1px solid var(--dxds-color-border-neutral-default-rest);
}
::deep .tile-title {
align-self: center;
color: var(--dxds-color-content-neutral-default-rest);
font-size: var(--dxds-font-size-base-md);
font-weight: var(--dxds-font-weight-base-strong);
letter-spacing: var(--dxds-letter-spacing-base-md);
line-height: var(--dxds-line-height-base-md);
}
::deep .tile-description {
color: var(--dxds-color-content-neutral-subdued-rest);
font-size: var(--dxds-font-size-base-sm);
font-weight: var(--dxds-font-weight-base-default);
letter-spacing: var(--dxds-letter-spacing-base-sm);
line-height: var(--dxds-line-height-base-sm);
}