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

Refactor receiver row layout in CreateEnvelopeWizard

Browse Source 
Refactor the structure and class names in `CreateEnvelopeWizardPopup.razor` to improve the layout and alignment of receiver rows:
- Replace `sender-create-wizard__receiver-item` with `sender-create-wizard__receiver-row`.
- Replace `sender-create-wizard__form-grid` with `sender-create-wizard__receiver-fields-stack`.

Update `sender-page.css` to introduce new classes:
- Add `.sender-create-wizard__receiver-row` for flex layout with proper alignment and spacing.
- Add `.sender-create-wizard__receiver-fields-stack` for grid-based field organization.

Adjust styles for responsiveness, including column layouts for smaller contexts. These changes enhance the visual structure and responsiveness of the receiver rows.
This commit is contained in:
tekh
2026-11-09 16:16:08 +01:00
parent 18c1adb68a
commit ed9ea0ac54
2 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
View File

@@ -296,8 +296,8 @@
var rowIndex = i;
var receiver = _receivers[rowIndex];
<div class="sender-create-wizard__receiver-item" role="row">
<div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
<div class="sender-create-wizard__receiver-row" role="row">
<div class="sender-create-wizard__receiver-fields-stack sender-create-wizard__field--full">
<div class="sender-create-wizard__field">
<DxTextBox Text="@receiver.FullName"
TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
@@ -329,8 +329,8 @@
</div>
}
<div class="sender-create-wizard__receiver-item sender-create-wizard__receiver-item--new" role="row">
<div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
<div class="sender-create-wizard__receiver-row" role="row">
<div class="sender-create-wizard__receiver-fields-stack sender-create-wizard__field--full">
<div class="sender-create-wizard__field">
<DxTextBox Text="@_receiverName"
TextChanged="OnReceiverNameChanged"

23
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
View File

@@ -1502,6 +1502,20 @@
gap: 0.5rem;
}
.sender-create-wizard__receiver-row {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.sender-create-wizard__receiver-fields-stack {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.35rem;
}
.sender-create-wizard__receiver-item {
display: flex;
align-items: center;
@@ -1757,6 +1771,15 @@
align-items: flex-start;
}
.sender-create-wizard__receiver-row {
flex-direction: column;
align-items: stretch;
}
.sender-create-wizard__receiver-fields-stack {
grid-template-columns: 1fr;
}
.sender-create-wizard__receiver-remove {
width: 100%;
}