From b10941efe6575534960d192bc9ca49b9ceb44035 Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Tue, 21 Apr 2020 19:15:02 +0200 Subject: [PATCH 1/8] feat: Responsive table --- .../Pages/Tests/DataGridPage.razor | 1 + .../Pages/Tests/TablesPage.razor | 92 +++++++++++++++++++ .../AntDesignClassProvider.cs | 2 + Source/Blazorise.AntDesign/Styles/_table.scss | 11 +++ .../wwwroot/blazorise.antdesign.css | 9 ++ .../BootstrapClassProvider.cs | 4 +- Source/Blazorise.Bulma/BulmaClassProvider.cs | 2 + .../Blazorise.Frolic/FrolicClassProvider.cs | 2 + Source/Blazorise.Frolic/Styles/_table.scss | 13 ++- .../wwwroot/blazorise.frolic.css | 9 ++ Source/Blazorise/ClassProvider.cs | 3 + Source/Blazorise/IClassProvider.cs | 2 + .../Blazorise/Providers/EmptyClassProvider.cs | 2 + Source/Blazorise/Table.razor | 17 +++- Source/Blazorise/Table.razor.cs | 35 +++++++ .../Blazorise.DataGrid/DataGrid.razor | 2 +- .../Blazorise.DataGrid/DataGrid.razor.cs | 5 + 17 files changed, 205 insertions(+), 6 deletions(-) diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor index 4e639dae43..f8f62dcba8 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor @@ -77,6 +77,7 @@ Striped="true" Bordered="true" Hoverable="true" + Responsive="true" CustomFilter="@OnCustomFilter"> diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor index b5c181b567..8fc6c47a65 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor @@ -500,4 +500,96 @@ + + + + + + Responsive + + + Use Responsive for horizontally scrolling tables. + + + + + + # + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + + + + + 1 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + + 2 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + + 3 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + +
+ + + \ No newline at end of file diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs index 67a757ea92..04cf540587 100644 --- a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs +++ b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs @@ -754,6 +754,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"ant-text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "ant-table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.AntDesign/Styles/_table.scss b/Source/Blazorise.AntDesign/Styles/_table.scss index fa5093b6cf..35c741bad9 100644 --- a/Source/Blazorise.AntDesign/Styles/_table.scss +++ b/Source/Blazorise.AntDesign/Styles/_table.scss @@ -51,3 +51,14 @@ .ant-table-row-header { font-weight: bold; } + +.ant-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.ant-table-responsive > .ant-table-bordered { + border: 0; +} diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css index 2104986a38..72a5a356ee 100644 --- a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css +++ b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css @@ -168,6 +168,15 @@ .ant-table-row-header { font-weight: bold; } +.ant-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } + +.ant-table-responsive > .ant-table-bordered { + border: 0; } + .ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow { position: absolute; top: 50%; diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs index cc0142dfd0..15303291b3 100644 --- a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs +++ b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs @@ -574,7 +574,7 @@ public override string Column( ColumnWidth columnWidth, Breakpoint breakpoint, b return $"{baseClass}-{ToBreakpoint( breakpoint )}-{ToColumnWidth( columnWidth )}"; } - + return $"{baseClass}-{ToColumnWidth( columnWidth )}"; } @@ -759,6 +759,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs index ff393cb216..faf03c8cbd 100644 --- a/Source/Blazorise.Bulma/BulmaClassProvider.cs +++ b/Source/Blazorise.Bulma/BulmaClassProvider.cs @@ -762,6 +762,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"has-text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "table-container"; + #endregion #region Badge diff --git a/Source/Blazorise.Frolic/FrolicClassProvider.cs b/Source/Blazorise.Frolic/FrolicClassProvider.cs index 2e97a3d0d2..51d5f7d25c 100644 --- a/Source/Blazorise.Frolic/FrolicClassProvider.cs +++ b/Source/Blazorise.Frolic/FrolicClassProvider.cs @@ -747,6 +747,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "e-table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.Frolic/Styles/_table.scss b/Source/Blazorise.Frolic/Styles/_table.scss index 5028637351..c812a79899 100644 --- a/Source/Blazorise.Frolic/Styles/_table.scss +++ b/Source/Blazorise.Frolic/Styles/_table.scss @@ -21,4 +21,15 @@ table.e-table tbody tr.selected { tr.table-row-selectable:hover { cursor: pointer; -} \ No newline at end of file +} + +.e-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.e-table-responsive > .bordered { + border: 0; +} diff --git a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css index a76bea4d78..b3fc7d602a 100644 --- a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css +++ b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css @@ -219,6 +219,15 @@ table.e-table tbody tr.selected { tr.table-row-selectable:hover { cursor: pointer; } +.e-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } + +.e-table-responsive > .bordered { + border: 0; } + .e-tabs.vertical ul { -webkit-flex-direction: column; flex-direction: column; } diff --git a/Source/Blazorise/ClassProvider.cs b/Source/Blazorise/ClassProvider.cs index 71b0abbd2d..d58443b6d8 100644 --- a/Source/Blazorise/ClassProvider.cs +++ b/Source/Blazorise/ClassProvider.cs @@ -2,6 +2,7 @@ using System; using System.Collections.Generic; using System.Linq; +using System.Threading; using System.Threading.Tasks; #endregion @@ -687,6 +688,8 @@ public virtual string Display( DisplayType displayType, IEnumerable<(Breakpoint public abstract string TableRowCellTextAlignment( TextAlignment textAlignment ); + public abstract string TableResponsive(); + #endregion #region Badge diff --git a/Source/Blazorise/IClassProvider.cs b/Source/Blazorise/IClassProvider.cs index ed49686d93..cc256b7b09 100644 --- a/Source/Blazorise/IClassProvider.cs +++ b/Source/Blazorise/IClassProvider.cs @@ -681,6 +681,8 @@ public interface IClassProvider string TableRowCellTextAlignment( TextAlignment textAlignment ); + string TableResponsive(); + #endregion #region Badge diff --git a/Source/Blazorise/Providers/EmptyClassProvider.cs b/Source/Blazorise/Providers/EmptyClassProvider.cs index 02ba606145..d6afe6871e 100644 --- a/Source/Blazorise/Providers/EmptyClassProvider.cs +++ b/Source/Blazorise/Providers/EmptyClassProvider.cs @@ -689,6 +689,8 @@ class EmptyClassProvider : IClassProvider public string TableRowCellTextAlignment( TextAlignment textAlignment ) => null; + public string TableResponsive() => null; + #endregion #region Badge diff --git a/Source/Blazorise/Table.razor b/Source/Blazorise/Table.razor index e254c75537..2d6ed67e79 100644 --- a/Source/Blazorise/Table.razor +++ b/Source/Blazorise/Table.razor @@ -1,9 +1,20 @@ @inherits BaseComponent @if ( !HasCustomRegistration ) { - - @ChildContent -
+ @if ( Responsive ) + { +
+ + @ChildContent +
+
+ } + else + { + + @ChildContent +
+ } } else { diff --git a/Source/Blazorise/Table.razor.cs b/Source/Blazorise/Table.razor.cs index e5b832aa3f..c58dbde771 100644 --- a/Source/Blazorise/Table.razor.cs +++ b/Source/Blazorise/Table.razor.cs @@ -24,6 +24,17 @@ public partial class Table : BaseComponent private bool borderless; + private bool responsive; + + #endregion + + #region Constructors + + public Table() + { + ResponsiveClassBuilder = new ClassBuilder( BuildResponsiveClasses ); + } + #endregion #region Methods @@ -41,10 +52,19 @@ protected override void BuildClasses( ClassBuilder builder ) base.BuildClasses( builder ); } + private void BuildResponsiveClasses( ClassBuilder builder ) + { + builder.Append( ClassProvider.TableResponsive() ); + } + #endregion #region Properties + protected ClassBuilder ResponsiveClassBuilder { get; private set; } + + protected string ResponsiveClassNames => ResponsiveClassBuilder.Class; + /// /// Makes the table to fill entire horizontal space. /// @@ -135,6 +155,21 @@ public bool Borderless } } + /// + /// Makes table responsive by adding the horizontal scroll bar. + /// + [Parameter] + public bool Responsive + { + get => responsive; + set + { + responsive = value; + + DirtyClasses(); + } + } + [Parameter] public RenderFragment ChildContent { get; set; } #endregion diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor index 77576f4df7..d01bed4f51 100644 --- a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor +++ b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor @@ -3,7 +3,7 @@ @* there are two CascadingValue because one is used only to define columns, and the other is to build rows based on those columns *@ @* This one is to build rows *@ - +
@if ( ShowCaptions ) { diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs index a81d0612dc..1839464821 100644 --- a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs +++ b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs @@ -850,6 +850,11 @@ protected int LastVisiblePage /// [Parameter] public bool Narrow { get; set; } + /// + /// Makes table responsive by adding the horizontal scroll bar. + /// + [Parameter] public bool Responsive { get; set; } + /// /// Custom css classname. /// From abece7afcf5159968cf9ae3f62f90e6dcc396cb8 Mon Sep 17 00:00:00 2001 From: Mitchell Date: Wed, 22 Apr 2020 08:18:30 +1200 Subject: [PATCH 2/8] fix: layout issue for responsive design --- Source/Blazorise/Styles/_layout.scss | 4 ++++ Source/Blazorise/wwwroot/blazorise.css | 2 ++ 2 files changed, 6 insertions(+) diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss index 4c77226223..ac78f6652d 100644 --- a/Source/Blazorise/Styles/_layout.scss +++ b/Source/Blazorise/Styles/_layout.scss @@ -13,6 +13,10 @@ .b-layout { &.b-layout-has-sider { flex-direction: row; + + .b-layout { + overflow-x: hidden; + } } } diff --git a/Source/Blazorise/wwwroot/blazorise.css b/Source/Blazorise/wwwroot/blazorise.css index 129e94ce27..b04a7058ef 100644 --- a/Source/Blazorise/wwwroot/blazorise.css +++ b/Source/Blazorise/wwwroot/blazorise.css @@ -152,6 +152,8 @@ .b-layout.b-layout-has-sider { flex-direction: row; } + .b-layout.b-layout-has-sider .b-layout { + overflow-x: hidden; } .b-layout-header, .b-layout-footer { From 2a84f720f4478c05f6496ce7bf25ba53b23c6c9f Mon Sep 17 00:00:00 2001 From: Mitchell Date: Wed, 22 Apr 2020 15:04:45 +1200 Subject: [PATCH 3/8] fix: position sticky header does not work with overflow --- Source/Blazorise/Layout.razor.cs | 30 -------------------------- Source/Blazorise/Styles/_layout.scss | 8 ++++++- Source/Blazorise/wwwroot/blazorise.css | 11 +++++++--- 3 files changed, 15 insertions(+), 34 deletions(-) diff --git a/Source/Blazorise/Layout.razor.cs b/Source/Blazorise/Layout.razor.cs index 785e3e4958..321bde0388 100644 --- a/Source/Blazorise/Layout.razor.cs +++ b/Source/Blazorise/Layout.razor.cs @@ -28,36 +28,6 @@ protected override void BuildClasses( ClassBuilder builder ) base.BuildClasses( builder ); } - protected override async Task OnAfterRenderAsync( bool firstRender ) - { - if ( firstRender ) - { - if ( ParentLayout == null ) - { - await JSRunner.AddClassToBody( ClassProvider.LayoutBody() ); - - bodyClassApplied = true; - } - } - - await base.OnAfterRenderAsync( firstRender ); - } - - protected override void Dispose( bool disposing ) - { - if ( disposing ) - { - if ( bodyClassApplied ) - { - _ = JSRunner.RemoveClassFromBody( ClassProvider.LayoutBody() ); - - bodyClassApplied = false; - } - } - - base.Dispose( disposing ); - } - #endregion #region Properties diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss index ac78f6652d..33951e70d3 100644 --- a/Source/Blazorise/Styles/_layout.scss +++ b/Source/Blazorise/Styles/_layout.scss @@ -16,6 +16,7 @@ .b-layout { overflow-x: hidden; + margin-top: 64px; } } } @@ -32,9 +33,14 @@ /*background: #001529;*/ /*line-height: 64px;*/ &-fixed { - position: sticky; + position: fixed; z-index: 1; top: 0; + width: calc(100% - 220px); + + @media (min-width:1px) and (max-width:767.98px) { + width: 100%; + } } } diff --git a/Source/Blazorise/wwwroot/blazorise.css b/Source/Blazorise/wwwroot/blazorise.css index b04a7058ef..69b949f0c5 100644 --- a/Source/Blazorise/wwwroot/blazorise.css +++ b/Source/Blazorise/wwwroot/blazorise.css @@ -153,7 +153,8 @@ .b-layout.b-layout-has-sider { flex-direction: row; } .b-layout.b-layout-has-sider .b-layout { - overflow-x: hidden; } + overflow-x: hidden; + margin-top: 64px; } .b-layout-header, .b-layout-footer { @@ -166,9 +167,13 @@ /*background: #001529;*/ /*line-height: 64px;*/ } .b-layout-header-fixed { - position: sticky; + position: fixed; z-index: 1; - top: 0; } + top: 0; + width: calc(100% - 220px); } + @media (min-width: 1px) and (max-width: 767.98px) { + .b-layout-header-fixed { + width: 100%; } } .b-layout-footer { /*padding: 24px 50px;*/ From 4ce69a922834f593a035990a1b1775565486c8a4 Mon Sep 17 00:00:00 2001 From: Mitchell Date: Wed, 22 Apr 2020 15:26:41 +1200 Subject: [PATCH 4/8] wip: remove b-body-layout --- Source/Blazorise.AntDesign/Styles/_layout.scss | 4 ---- Source/Blazorise.Bootstrap/Styles/_layout.scss | 4 +--- Source/Blazorise.Frolic/Styles/_layout.scss | 4 +--- Source/Blazorise.Material/Styles/_layout.scss | 4 +--- Source/Blazorise/ClassProvider.cs | 2 -- Source/Blazorise/IClassProvider.cs | 2 -- 6 files changed, 3 insertions(+), 17 deletions(-) diff --git a/Source/Blazorise.AntDesign/Styles/_layout.scss b/Source/Blazorise.AntDesign/Styles/_layout.scss index 5474f04bb1..1ca66d2631 100644 --- a/Source/Blazorise.AntDesign/Styles/_layout.scss +++ b/Source/Blazorise.AntDesign/Styles/_layout.scss @@ -1,7 +1,3 @@ .b-layout-header { line-height: 64px; } - -.b-body-layout { - overflow-x: hidden; -} diff --git a/Source/Blazorise.Bootstrap/Styles/_layout.scss b/Source/Blazorise.Bootstrap/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Bootstrap/Styles/_layout.scss +++ b/Source/Blazorise.Bootstrap/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise.Frolic/Styles/_layout.scss b/Source/Blazorise.Frolic/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Frolic/Styles/_layout.scss +++ b/Source/Blazorise.Frolic/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise.Material/Styles/_layout.scss b/Source/Blazorise.Material/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Material/Styles/_layout.scss +++ b/Source/Blazorise.Material/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise/ClassProvider.cs b/Source/Blazorise/ClassProvider.cs index d58443b6d8..78f12a5f31 100644 --- a/Source/Blazorise/ClassProvider.cs +++ b/Source/Blazorise/ClassProvider.cs @@ -394,8 +394,6 @@ public abstract class ClassProvider : IClassProvider public virtual string LayoutHasSider() => "b-layout-has-sider"; - public virtual string LayoutBody() => "b-body-layout"; - public virtual string LayoutContent() => "b-layout-content"; public virtual string LayoutHeader() => "b-layout-header"; diff --git a/Source/Blazorise/IClassProvider.cs b/Source/Blazorise/IClassProvider.cs index cc256b7b09..a9f12d5d54 100644 --- a/Source/Blazorise/IClassProvider.cs +++ b/Source/Blazorise/IClassProvider.cs @@ -393,8 +393,6 @@ public interface IClassProvider string LayoutHasSider(); - string LayoutBody(); - string LayoutContent(); string LayoutHeader(); From 499e227c280b625de386fbbe5a7c87d89b6a1075 Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Wed, 22 Apr 2020 11:42:45 +0200 Subject: [PATCH 5/8] Resize layout heaede only of sidebar is used. --- Source/Blazorise/Styles/_layout.scss | 2 +- Source/Blazorise/wwwroot/blazorise.css | 2 +- .../wwwroot/blazorise.sidebar.css | 22 +++++++++++-------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss index 33951e70d3..687e39b67d 100644 --- a/Source/Blazorise/Styles/_layout.scss +++ b/Source/Blazorise/Styles/_layout.scss @@ -36,7 +36,7 @@ position: fixed; z-index: 1; top: 0; - width: calc(100% - 220px); + width: calc(100% - var(--b-sidebar-width, 0px)); @media (min-width:1px) and (max-width:767.98px) { width: 100%; diff --git a/Source/Blazorise/wwwroot/blazorise.css b/Source/Blazorise/wwwroot/blazorise.css index 69b949f0c5..4de871d601 100644 --- a/Source/Blazorise/wwwroot/blazorise.css +++ b/Source/Blazorise/wwwroot/blazorise.css @@ -170,7 +170,7 @@ position: fixed; z-index: 1; top: 0; - width: calc(100% - 220px); } + width: calc(100% - var(--b-sidebar-width, 0px)); } @media (min-width: 1px) and (max-width: 767.98px) { .b-layout-header-fixed { width: 100%; } } diff --git a/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css b/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css index 35b3180ceb..f48e0aba6f 100644 --- a/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css +++ b/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css @@ -1,9 +1,13 @@ -.sidebar { +:root { + --b-sidebar-width: 220px; +} + +.sidebar { --bsb-dark: var(--b-sidebar-background, #343a40); --bsb-dark-dark: var(--b-sidebar-background, #343a40); --bsb-dark-light: var(--b-sidebar-color, #ced4da); - min-width: 220px; - max-width: 220px; + min-width: var(--b-sidebar-width, 220px); + max-width: var(--b-sidebar-width, 220px); min-height: 100vh; transition: margin .4s ease-in-out; z-index: 2; @@ -30,7 +34,7 @@ position: fixed; top: 0; z-index: 2; - width: 220px; + width: var(--b-sidebar-width, 220px); } .sidebar-nav { @@ -141,11 +145,11 @@ } .sidebar:not(.sidebar-collapsed).show { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } .sidebar-collapsed.show { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { @@ -166,8 +170,8 @@ html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { bottom: 0; position: fixed; background: var(--bsb-dark-dark); - min-width: 220px; - max-width: 220px; + min-width: var(--b-sidebar-width, 220px); + max-width: var(--b-sidebar-width, 220px); color: #e9ecef; z-index: 3; } @@ -188,7 +192,7 @@ html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { @media (min-width:1px) and (max-width:767.98px) { .sidebar:not(.sidebar-collapsed) { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } .sidebar:not(.sidebar-collapsed).show { From f5c52b5988dd359d9dac3244b1c2f9b4ffd075a2 Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Wed, 22 Apr 2020 13:32:41 +0200 Subject: [PATCH 6/8] Added sidebar width to theme generator --- Source/Blazorise/Theme.cs | 7 +++++-- Source/Blazorise/ThemeGenerator.cs | 3 +++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/Source/Blazorise/Theme.cs b/Source/Blazorise/Theme.cs index 22239a44f7..9ba199c3f7 100644 --- a/Source/Blazorise/Theme.cs +++ b/Source/Blazorise/Theme.cs @@ -507,9 +507,11 @@ IEnumerator IEnumerable.GetEnumerator() public class ThemeSidebarOptions { - public string BackgroundColor { get; set; } + public string Width { get; set; } = "220px"; - public string Color { get; set; } + public string BackgroundColor { get; set; } = "#343a40"; + + public string Color { get; set; } = "#ced4da"; } public class ThemeSnackbarOptions @@ -591,6 +593,7 @@ public static class ThemeVariables public static string OutlineButtonYiqColor( string variant ) => $"--b-outline-button-{variant}-yiq-shadow"; public static string OutlineButtonBoxShadowColor( string variant ) => $"--b-outline-button-{variant}-box-shadow"; + public const string SidebarWidth = "--b-sidebar-width"; public const string SidebarBackground = "--b-sidebar-background"; public const string SidebarColor = "--b-sidebar-color"; diff --git a/Source/Blazorise/ThemeGenerator.cs b/Source/Blazorise/ThemeGenerator.cs index f0a60b6053..749df09899 100644 --- a/Source/Blazorise/ThemeGenerator.cs +++ b/Source/Blazorise/ThemeGenerator.cs @@ -195,6 +195,9 @@ protected virtual void GenerateTextColorVariables( Theme theme, string variant, protected virtual void GenerateSidebarVariables( ThemeSidebarOptions sidebarOptions ) { + if ( sidebarOptions.Width != null ) + variables[ThemeVariables.SidebarWidth] = sidebarOptions.Width; + if ( sidebarOptions.BackgroundColor != null ) variables[ThemeVariables.SidebarBackground] = ToHex( ParseColor( sidebarOptions.BackgroundColor ) ); From 23aacfabdd50a1eb7df853388c23ba800335e85a Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Wed, 22 Apr 2020 13:36:23 +0200 Subject: [PATCH 7/8] Removed special rule for margin from nested layout --- Demos/Blazorise.Demo/Layouts/MainLayout.razor | 2 +- Source/Blazorise/Styles/_layout.scss | 1 - Source/Blazorise/wwwroot/blazorise.css | 3 +-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/Demos/Blazorise.Demo/Layouts/MainLayout.razor b/Demos/Blazorise.Demo/Layouts/MainLayout.razor index 5ef2ee97c8..b6e3d9d355 100644 --- a/Demos/Blazorise.Demo/Layouts/MainLayout.razor +++ b/Demos/Blazorise.Demo/Layouts/MainLayout.razor @@ -170,7 +170,7 @@ - + @Body diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss index 687e39b67d..aee1b543d4 100644 --- a/Source/Blazorise/Styles/_layout.scss +++ b/Source/Blazorise/Styles/_layout.scss @@ -16,7 +16,6 @@ .b-layout { overflow-x: hidden; - margin-top: 64px; } } } diff --git a/Source/Blazorise/wwwroot/blazorise.css b/Source/Blazorise/wwwroot/blazorise.css index 4de871d601..a06159a696 100644 --- a/Source/Blazorise/wwwroot/blazorise.css +++ b/Source/Blazorise/wwwroot/blazorise.css @@ -153,8 +153,7 @@ .b-layout.b-layout-has-sider { flex-direction: row; } .b-layout.b-layout-has-sider .b-layout { - overflow-x: hidden; - margin-top: 64px; } + overflow-x: hidden; } .b-layout-header, .b-layout-footer { From 5146cbefd6e22bc60a51c549f048b7883a6cbfb8 Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Wed, 22 Apr 2020 15:26:12 +0200 Subject: [PATCH 8/8] Wrapped Bulma table inside of additional grid to make it responsive --- Source/Blazorise.Bulma/Config.cs | 1 + Source/Blazorise.Bulma/Table.razor | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 Source/Blazorise.Bulma/Table.razor diff --git a/Source/Blazorise.Bulma/Config.cs b/Source/Blazorise.Bulma/Config.cs index 09a5efc9a3..c728765e85 100644 --- a/Source/Blazorise.Bulma/Config.cs +++ b/Source/Blazorise.Bulma/Config.cs @@ -50,6 +50,7 @@ private static void RegisterComponents( IComponentMapper componentMapper ) componentMapper.Register( typeof( Blazorise.Select<> ), typeof( Bulma.Select<> ) ); componentMapper.Register( typeof( Blazorise.Switch<> ), typeof( Bulma.Switch<> ) ); componentMapper.Register(); + componentMapper.Register(); componentMapper.Register(); componentMapper.Register(); componentMapper.Register( typeof( Blazorise.TimeEdit<> ), typeof( Bulma.TimeEdit<> ) ); diff --git a/Source/Blazorise.Bulma/Table.razor b/Source/Blazorise.Bulma/Table.razor new file mode 100644 index 0000000000..0d8705a1d8 --- /dev/null +++ b/Source/Blazorise.Bulma/Table.razor @@ -0,0 +1,17 @@ +@inherits Blazorise.Table +@if ( Responsive ) +{ +
+
+
+ @ChildContent +
+ + +} +else +{ + + @ChildContent +
+} \ No newline at end of file