Container breakpoints (#2867)

* Add Breakpoint on Container component * Document Breakpoint attribute
Megabit · Sep 3, 2021 · 9091a0d · 9091a0d
1 parent af58f4c
commit 9091a0d
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 17 deletions.
diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor
@@ -405,8 +405,8 @@
                 </BarMenu>
             </Bar>
         </LayoutHeader>
-        <LayoutContent Padding="Padding.Is0.OnX.Is4.OnY.Is4.OnDesktop">
-            <Container>
+        <LayoutContent Padding="Padding.Is0.OnX.Is4.OnY.Is4.OnWidescreen">
+            <Container Breakpoint="Breakpoint.Widescreen">
                 @Body
             </Container>
         </LayoutContent>

diff --git a/...ation/Blazorise.Docs/Pages/Docs/Components/Grids/Code/ContainerBreakpointExampleCode.html b/...ation/Blazorise.Docs/Pages/Docs/Components/Grids/Code/ContainerBreakpointExampleCode.html
@@ -0,0 +1,24 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Container</span> <span class="htmlAttributeName">Breakpoint</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Breakpoint</span><span class="enumValue">.Tablet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">true</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        100% wide until tablet breakpoint
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Container</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Container</span> <span class="htmlAttributeName">Breakpoint</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Breakpoint</span><span class="enumValue">.Desktop</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">true</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        100% wide until desktop breakpoint
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Container</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Container</span> <span class="htmlAttributeName">Breakpoint</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Breakpoint</span><span class="enumValue">.Widescreen</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">true</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        100% wide until widescreen breakpoint
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Container</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Container</span> <span class="htmlAttributeName">Breakpoint</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Breakpoint</span><span class="enumValue">.FullHD</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Primary</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">true</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        100% wide until full-hd breakpoint
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Container</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...tion/Blazorise.Docs/Pages/Docs/Components/Grids/Examples/ContainerBreakpointExample.razor b/...tion/Blazorise.Docs/Pages/Docs/Components/Grids/Examples/ContainerBreakpointExample.razor
@@ -0,0 +1,22 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<Container Breakpoint="Breakpoint.Tablet">
+    <Alert Color="Color.Primary" Visible="true">
+        100% wide until tablet breakpoint
+    </Alert>
+</Container>
+<Container Breakpoint="Breakpoint.Desktop">
+    <Alert Color="Color.Primary" Visible="true">
+        100% wide until desktop breakpoint
+    </Alert>
+</Container>
+<Container Breakpoint="Breakpoint.Widescreen">
+    <Alert Color="Color.Primary" Visible="true">
+        100% wide until widescreen breakpoint
+    </Alert>
+</Container>
+<Container Breakpoint="Breakpoint.FullHD">
+    <Alert Color="Color.Primary" Visible="true">
+        100% wide until full-hd breakpoint
+    </Alert>
+</Container>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Grids/GridPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Grids/GridPage.razor
@@ -84,6 +84,19 @@
     <DocsPageSectionSource Code="ContainerFluidExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Responsive">
+        Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached,
+        after which we apply <Code>max-widths</Code> for each of the higher breakpoints. For example, <Code>Breakpoint.Tablet</Code>
+        is 100% wide to start until the <Code>Tablet</Code> breakpoint is reached, where it will scale up
+        with <Code>Desktop</Code>, <Code>Widescreen</Code>, and <Code>FullHD</Code>.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <ContainerBreakpointExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="ContainerBreakpointExample" />
+</DocsPageSection>
+
 <DocsPageSubtitle>
     Attributes
 </DocsPageSubtitle>
@@ -101,6 +114,9 @@
 </DocsAttributes>
 
 <DocsAttributes Title="Container">
+    <DocsAttributesItem Name="Breakpoint" Type="Breakpoint" Default="None">
+        Makes a full width container that is 100% wide until the specified breakpoint is reached.
+    </DocsAttributesItem>
     <DocsAttributesItem Name="Fluid" Type="bool" Default="false">
         Makes a full width container, spanning the entire width of the viewport.
     </DocsAttributesItem>

diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -571,7 +571,8 @@ public override string DropdownDirection( Direction direction )
 
         #region Container
 
-        public override string Container() => "ant-container";
+        public override string Container( Breakpoint breakpoint )
+            => breakpoint != Breakpoint.None && breakpoint != Breakpoint.Mobile ? $"ant-container-{ToBreakpoint( breakpoint )}" : "ant-container";
 
         public override string ContainerFluid() => "ant-container-fluid";
 

diff --git a/Source/Blazorise.AntDesign/Styles/_grid.scss b/Source/Blazorise.AntDesign/Styles/_grid.scss
@@ -22,25 +22,25 @@
 }
 
 @media (min-width: 576px) {
-    .ant-container {
+    .ant-container, .ant-container-sm {
         max-width: 540px;
     }
 }
 
 @media (min-width: 768px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md {
         max-width: 720px;
     }
 }
 
 @media (min-width: 992px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md, .ant-container-lg {
         max-width: 960px;
     }
 }
 
 @media (min-width: 1200px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md, .ant-container-lg, .ant-container-xl {
         max-width: 1140px;
     }
 }

diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css
@@ -1497,19 +1497,19 @@
     margin-left: auto; }
 
 @media (min-width: 576px) {
-    .ant-container {
+    .ant-container, .ant-container-sm {
         max-width: 540px; } }
 
 @media (min-width: 768px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md {
         max-width: 720px; } }
 
 @media (min-width: 992px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md, .ant-container-lg {
         max-width: 960px; } }
 
 @media (min-width: 1200px) {
-    .ant-container {
+    .ant-container, .ant-container-sm, .ant-container-md, .ant-container-lg, .ant-container-xl {
         max-width: 1140px; } }
 
 .ant-container-fluid {

diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -564,7 +564,8 @@ public override string DropdownDirection( Direction direction )
 
         #region Container
 
-        public override string Container() => "container";
+        public override string Container( Breakpoint breakpoint )
+            => breakpoint != Breakpoint.None && breakpoint != Breakpoint.Mobile ? $"container-{ToBreakpoint( breakpoint )}" : "container";
 
         public override string ContainerFluid() => "container-fluid";
 

diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -574,7 +574,8 @@ public override string DropdownDirection( Direction direction )
 
         #region Container
 
-        public override string Container() => "container";
+        public override string Container( Breakpoint breakpoint )
+            => breakpoint > Breakpoint.Desktop ? $"container is-{ToBreakpoint( breakpoint )}" : "container";
 
         public override string ContainerFluid() => "container-fluid";
 

diff --git a/Source/Blazorise/Components/Container/Container.razor.cs b/Source/Blazorise/Components/Container/Container.razor.cs
@@ -12,6 +12,8 @@ public partial class Container : BaseComponent
     {
         #region Members
 
+        private Breakpoint breakpoint;
+
         private bool fluid;
 
         #endregion
@@ -24,7 +26,7 @@ protected override void BuildClasses( ClassBuilder builder )
             if ( Fluid )
                 builder.Append( ClassProvider.ContainerFluid() );
             else
-                builder.Append( ClassProvider.Container() );
+                builder.Append( ClassProvider.Container( Breakpoint ) );
 
             base.BuildClasses( builder );
         }
@@ -33,6 +35,21 @@ protected override void BuildClasses( ClassBuilder builder )
 
         #region Properties
 
+        /// <summary>
+        /// Makes a full width container that is 100% wide until the specified breakpoint is reached.
+        /// </summary>
+        [Parameter]
+        public Breakpoint Breakpoint
+        {
+            get => breakpoint;
+            set
+            {
+                breakpoint = value;
+
+                DirtyClasses();
+            }
+        }
+
         /// <summary>
         /// Makes a full width container, spanning the entire width of the viewport.
         /// </summary>

diff --git a/Source/Blazorise/Interfaces/IClassProvider.cs b/Source/Blazorise/Interfaces/IClassProvider.cs
@@ -549,7 +549,7 @@ public interface IClassProvider
 
         #region Container
 
-        string Container();
+        string Container( Breakpoint breakpoint );
 
         string ContainerFluid();
 

diff --git a/Source/Blazorise/Providers/ClassProvider.cs b/Source/Blazorise/Providers/ClassProvider.cs
@@ -550,7 +550,7 @@ public abstract class ClassProvider : IClassProvider
 
         #region Container
 
-        public abstract string Container();
+        public abstract string Container( Breakpoint breakpoint );
 
         public abstract string ContainerFluid();
 

diff --git a/Source/Blazorise/Providers/EmptyClassProvider.cs b/Source/Blazorise/Providers/EmptyClassProvider.cs
@@ -553,7 +553,7 @@ class EmptyClassProvider : IClassProvider
 
         #region Container
 
-        public string Container() => null;
+        public string Container( Breakpoint breakpoint ) => null;
 
         public string ContainerFluid() => null;