Adam
/
AyCode.Blazor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance MgGridInfoPanel with responsive/fixed columns 

Add support for both responsive and fixed column layouts in MgGridInfoPanel via new parameters (TwoColumnBreakpoint, ThreeColumnBreakpoint, FourColumnBreakpoint, FixedColumnCount). Refactor CSS to use variables for breakpoints, add fixed column classes, and update container queries. Move styles to a new global mg-grid-info-panel.css, referenced in App.razor and index.html. Improve view mode styling and accessibility. Add Partner.Country column to GridPartner.razor.
This commit is contained in:
Loretta 2025-12-18 11:41:07 +01:00
parent 739d0fa808
commit 5255917210
4 changed files with 195 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor
View File

@ -2,7 +2,8 @@
@using Microsoft.AspNetCore.Components.Rendering
@using System.Reflection
<div @ref="_panelElement" class="mg-grid-info-panel @(_isEditMode ? "edit-mode" : "view-mode")">
<div @ref="_panelElement" class="mg-grid-info-panel @(_isEditMode ? "edit-mode" : "view-mode") @GetColumnCountClass()"
style="@GetBreakpointStyles()">
@* Header *@
@if (HeaderTemplate != null)
{
@ -90,6 +91,27 @@
/// </summary>
[Parameter] public RenderFragment<object?>? FooterTemplate { get; set; }
private string GetColumnCountClass()
{
if (FixedColumnCount.HasValue)
{
return FixedColumnCount.Value switch
{
1 => "mg-columns-1",
2 => "mg-columns-2",
3 => "mg-columns-3",
4 => "mg-columns-4",
_ => ""
};
}
return "";
}
private string GetBreakpointStyles()
{
return $"--mg-bp-2col: {TwoColumnBreakpoint}px; --mg-bp-3col: {ThreeColumnBreakpoint}px; --mg-bp-4col: {FourColumnBreakpoint}px;";
}
private RenderFragment RenderDefaultColumns() => builder =>
{
var dataItem = GetActiveDataItem()!;
@ -516,8 +538,8 @@
{
var seq = 0;
// View mode: simple text display with DevExpress-like styling (no editors)
builder.OpenElement(seq++, "div");
// View mode: simple span display with DevExpress theme styling
builder.OpenElement(seq++, "span");
builder.AddAttribute(seq++, "class", GetViewModeCssClass(value, settingsType));
builder.AddAttribute(seq++, "title", displayText);
@ -539,7 +561,7 @@
private static string GetViewModeCssClass(object? value, EditSettingsType settingsType)
{
var baseCss = "mg-info-panel-value";
var baseCss = "mg-info-panel-value text-body";
return value switch
{

20
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor.cs
View File

@ -26,6 +26,26 @@ public partial class MgGridInfoPanel : ComponentBase, IAsyncDisposable, IInfoPan
/// </summary>
[Parameter] public bool ShowReadOnlyFieldsInEditMode { get; set; } = false;
/// <summary>
/// Minimum width for 2 columns layout. Default is 500px.
/// </summary>
[Parameter] public int TwoColumnBreakpoint { get; set; } = 400;
/// <summary>
/// Minimum width for 3 columns layout. Default is 800px.
/// </summary>
[Parameter] public int ThreeColumnBreakpoint { get; set; } = 800;
/// <summary>
/// Minimum width for 4 columns layout. Default is 1200px.
/// </summary>
[Parameter] public int FourColumnBreakpoint { get; set; } = 1300;
/// <summary>
/// Fixed column count. If set (1-4), overrides responsive breakpoints. Default is null (responsive).
/// </summary>
[Parameter] public int? FixedColumnCount { get; set; }
/// <summary>
/// Reference to the wrapper component - automatically registers this InfoPanel
/// </summary>

51
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor.css
View File

@ -3,11 +3,6 @@
/* InfoPanel background: #fffbeb (see below .edit-mode) */
/* Border color: #f59e0b */
/* Breakpoint configuration - CHANGE ONLY THESE VALUES */
/* 2 column breakpoint: 500px */
/* 3 column breakpoint: 800px */
/* 4 column breakpoint: 1200px (for 1920px+ screens) */
/* Main panel - contained within splitter pane */
.mg-grid-info-panel {
container-type: inline-size;
@ -20,6 +15,10 @@
/* Prevent panel from pushing out the splitter */
min-height: 0;
max-height: 100%;
/* Default breakpoints - can be overridden via style attribute */
--mg-bp-2col: 500px;
--mg-bp-3col: 800px;
--mg-bp-4col: 1200px;
}
.mg-grid-info-panel.edit-mode {
@ -48,30 +47,43 @@
gap: 0.75rem;
}
/* 1 column for narrow panels (< 500px) */
@container infopanel (max-width: 499px) {
.mg-info-panel-grid {
grid-template-columns: 1fr;
}
/* Fixed column count classes - override responsive behavior */
.mg-columns-1 .mg-info-panel-grid {
grid-template-columns: 1fr !important;
}
/* 2 columns for medium width (500px - 799px) */
@container infopanel (min-width: 500px) and (max-width: 799px) {
.mg-info-panel-grid {
.mg-columns-2 .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.mg-columns-3 .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.mg-columns-4 .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Responsive layouts using container queries (when no fixed column count) */
/* 1 column for narrow panels (< 2col breakpoint) - default above */
/* 2 columns for medium width */
@container infopanel (min-width: 500px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 columns for wider panels (800px - 1199px) */
@container infopanel (min-width: 800px) and (max-width: 1199px) {
.mg-info-panel-grid {
/* 3 columns for wider panels */
@container infopanel (min-width: 800px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 4 columns for very wide panels (>= 1200px, typically on 1920px+ screens) */
/* 4 columns for very wide panels */
@container infopanel (min-width: 1200px) {
.mg-info-panel-grid {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@ -105,13 +117,14 @@
overflow: hidden;
white-space: nowrap;
}
/* View mode value styling - matches DevExpress theme */
.mg-info-panel-value {
padding: 0.375rem 0.75rem;
min-height: 2rem;
display: flex;
align-items: center;
justify-content: flex-start; /* Always align left */
justify-content: flex-start;
background-color: var(--dxbl-bg, #fff);
border: 1px solid var(--dxbl-border-color, #dee2e6);
border-radius: var(--dxbl-border-radius, 0.25rem);

117
AyCode.Blazor.Components/wwwroot/css/mg-grid-info-panel.css Normal file
View File

@ -0,0 +1,117 @@
/* MgGridInfoPanel styles - Global CSS for proper container query support */
/* Main panel - contained within splitter pane */
.mg-grid-info-panel {
container-type: inline-size;
container-name: infopanel;
background-color: var(--dxbl-bg-secondary, #f8f9fa);
transition: background-color 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
max-height: 100%;
}
.mg-grid-info-panel.edit-mode {
background-color: #fffbeb !important;
border-left: 3px solid #f59e0b !important;
}
.mg-grid-info-panel.view-mode {
background-color: #f8f9fa !important;
border-left: 3px solid transparent !important;
}
/* Content area - scrollable, takes remaining space */
.mg-info-panel-content {
flex: 1 1 0;
overflow-y: auto;
overflow-x: hidden;
padding: 1rem;
min-height: 0;
}
/* Grid layout with responsive column wrapping based on panel width */
.mg-info-panel-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
/* Fixed column count classes - override responsive behavior */
.mg-columns-1 .mg-info-panel-grid {
grid-template-columns: 1fr !important;
}
.mg-columns-2 .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.mg-columns-3 .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.mg-columns-4 .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Responsive layouts using container queries */
/* 2 columns for medium width (>= 400px) */
@container infopanel (min-width: 400px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 columns for wider panels (>= 800px) */
@container infopanel (min-width: 800px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 4 columns for very wide panels (>= 1300px) */
@container infopanel (min-width: 1300px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.mg-info-panel-item {
min-width: 0;
}
/* Toolbar styling */
.mg-info-panel-toolbar {
padding: 0.25rem 0.5rem;
background-color: var(--dxbl-bg, #fff);
}
/* View mode value styling - simple span with DevExpress theme */
.mg-info-panel-value {
display: block;
padding: 0.25rem 0;
font-size: var(--dxbl-font-size, 0.875rem);
color: var(--dxbl-text, #212529);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mg-info-panel-value-numeric {
font-variant-numeric: tabular-nums;
}
.mg-info-panel-value-date {
font-variant-numeric: tabular-nums;
}
/* Splitter pane styling */
.mg-grid-with-info-panel {
height: 100%;
}
.mg-info-panel-pane {
background-color: var(--dxbl-bg-secondary, #f8f9fa);
}