This repository has been archived by the owner on Dec 8, 2022. It is now read-only.
Ported fluid grid component from stache2 #957
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <div id="screenshot-fluid-grid"> | ||
| <sky-row> | ||
| <sky-column screenSmall="4" screenMedium="3" screenLarge="2"> | ||
| small 4 medium 3 large 2 | ||
| </sky-column> | ||
| <sky-column screenSmall="4" screenMedium="9" screenLarge="8"> | ||
| small 4 medium 9 large 8 | ||
| </sky-column> | ||
| <sky-column screenSmall="4" screenMedium="12" screenLarge="2"> | ||
| small 4 medium 12 large 2 | ||
| </sky-column> | ||
| </sky-row> | ||
| </div> | ||
|
|
||
| <div id="screenshot-fluid-grid-reverse"> | ||
| <sky-row [reverseColumnOrder]="true"> | ||
| <sky-column screenSmall="6"> | ||
| should be second/below | ||
| </sky-column> | ||
| <sky-column screenSmall="6"> | ||
| should be first/on top | ||
| </sky-column> | ||
| </sky-row> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { | ||
| Component | ||
| } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fluid-grid-visual', | ||
| templateUrl: './fluid-grid-visual.component.html', | ||
| styles: [` | ||
| .sky-column { | ||
| background-color: #97eced; | ||
| border: 1px solid #56e0e1; | ||
| }`] | ||
| }) | ||
| export class FluidGridVisualComponent { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; | ||
|
|
||
| describe('Fluid grid', () => { | ||
|
|
||
| it('should display all columns on different rows when on a very small screen', () => { | ||
| return SkyVisualTest.setupTest('fluid-grid', 600) | ||
| .then(() => { | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'fluid-grid-screensmallest-differentrows', | ||
| selector: '#screenshot-fluid-grid', | ||
| checkAccessibility: true | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should display all columns evenly split on the same row when on a small screen', () => { | ||
| return SkyVisualTest.setupTest('fluid-grid', 800) | ||
| .then(() => { | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'fluid-grid-screensmall-evenrow', | ||
| selector: '#screenshot-fluid-grid', | ||
| checkAccessibility: true | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should display two on the top row and one on the bottom row when on a medium screen', () => { | ||
| return SkyVisualTest.setupTest('fluid-grid', 1100) | ||
| .then(() => { | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'fluid-grid-screenmedium-tworows', | ||
| selector: '#screenshot-fluid-grid', | ||
| checkAccessibility: true | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should display all columns distributed unevenly when on a large screen', () => { | ||
| return SkyVisualTest.setupTest('fluid-grid', 1400) | ||
| .then(() => { | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'fluid-grid-screenlarge-unevenrow', | ||
| selector: '#screenshot-fluid-grid', | ||
| checkAccessibility: true | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('should reverse column order with reverseColumnOrder applied', () => { | ||
| return SkyVisualTest.setupTest('fluid-grid') | ||
| .then(() => { | ||
| return SkyVisualTest.compareScreenshot({ | ||
| screenshotName: 'fluid-grid-reversecolumnorder', | ||
| selector: '#screenshot-fluid-grid-reverse', | ||
| checkAccessibility: true | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <fluid-grid-visual></fluid-grid-visual> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| <div class="highlight-columns"> | ||
| <sky-row> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="3"> | ||
| small="3" | ||
| </sky-column> | ||
| <sky-column screenSmall="3"> | ||
| small="3" | ||
| </sky-column> | ||
| <sky-column screenSmall="3"> | ||
| small="3" | ||
| </sky-column> | ||
| <sky-column screenSmall="3"> | ||
| small="3" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="4"> | ||
| small="4" | ||
| </sky-column> | ||
| <sky-column screenSmall="4"> | ||
| small="4" | ||
| </sky-column> | ||
| <sky-column screenSmall="4"> | ||
| small="4" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="5"> | ||
| small="5" | ||
| </sky-column> | ||
| <sky-column screenSmall="7"> | ||
| small="7" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="6"> | ||
| small="6" | ||
| </sky-column> | ||
| <sky-column screenSmall="6"> | ||
| small="6" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="8"> | ||
| small="8" | ||
| </sky-column> | ||
| <sky-column screenSmall="4"> | ||
| small="4" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="9"> | ||
| small="9" | ||
| </sky-column> | ||
| <sky-column screenSmall="3"> | ||
| small="3" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="10"> | ||
| small="10" | ||
| </sky-column> | ||
| <sky-column screenSmall="2"> | ||
| small="2" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="11"> | ||
| small="11" | ||
| </sky-column> | ||
| <sky-column screenSmall="1"> | ||
| small="1" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row> | ||
| <sky-column screenSmall="8" screenMedium="9" screenLarge="10"> | ||
| small="8" medium="9" large="10" | ||
| </sky-column> | ||
| <sky-column screenSmall="4" screenMedium="3" screenLarge="2"> | ||
| small="4" medium="3" large="2" | ||
| </sky-column> | ||
| </sky-row> | ||
|
|
||
| <sky-row [reverseColumnOrder]="true"> | ||
| <sky-column screenSmall="4"> | ||
| First column | ||
| </sky-column> | ||
| <sky-column screenSmall="4"> | ||
| Second column | ||
| </sky-column> | ||
| <sky-column screenSmall="4"> | ||
| Third column | ||
| </sky-column> | ||
| </sky-row> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'sky-fluid-grid-demo', | ||
| templateUrl: './fluid-grid-demo.component.html', | ||
| styles: [` | ||
| .highlight-columns .sky-column { | ||
| background-color: #97eced; | ||
| border: 1px solid #56e0e1; | ||
| overflow-wrap: break-word; | ||
| }`] | ||
| }) | ||
| export class SkyFluidGridDemoComponent { | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <sky-demo-page title="Fluid grid"> | ||
| <sky-demo-page-summary> | ||
| The fluid grid component provides a 12-column layout to organize responsive content for all device sizes. The grid consists of <code>sky-row</code> and <code>sky-column</code> tags. Every column must be contained in a row. Each column can specify behavior for different screen sizes. On extra small screens (less than 768px) the grid displays all elements in a single column. | ||
|
There was a problem hiding this comment. I'd change this to "The fluid grid component provides a responsive 12-column layout to organize content for all device sizes. The fluid grid consists of |
||
| </sky-demo-page-summary> | ||
|
|
||
| <sky-demo-page-properties sectionHeading="Sky row properties"> | ||
| <sky-demo-page-property propertyName="reverseColumnOrder" defaultValue="false" isOptional="true"> | ||
| Indicates whether to reverse the display order for columns within this row. | ||
|
There was a problem hiding this comment. I'd change "within this" to "in the." |
||
| </sky-demo-page-property> | ||
|
|
||
| </sky-demo-page-properties> | ||
| <sky-demo-page-properties sectionHeading="Sky column properties"> | ||
| <sky-demo-page-property propertyName="screenSmall" isOptional="true"> | ||
| Specifies the number of columns (1-12) for the element to use on a small screen (768-991px). | ||
|
There was a problem hiding this comment. I'd change this to "Specifies the number of columns (1-12) to use for the element on small screens (768-991px). If you do not specify a value, the fluid grid displays the element vertically across the entire layout." And if we need to call out the recommendation that we discussed about setting screenSmall only, we could add "To use the same value for small, medium and large screens, we recommend setting the screenSmall only." But I don't really think that's necessary. |
||
| </sky-demo-page-property> | ||
| <sky-demo-page-property propertyName="screenMedium" isOptional="true"> | ||
| Specifies the number of columns (1-12) for the element to use on a medium screen (992-1199px). | ||
|
There was a problem hiding this comment. I'd change this to "Specifies the number of columns (1-12) to use for the element on medium screens (992-1199px). If you do not specify a value, the element inherits the screenSmall value." |
||
| </sky-demo-page-property> | ||
| <sky-demo-page-property propertyName="screenLarge" isOptional="true"> | ||
| Specifies the number of columns (1-12) for the element to use on a large screen (greater than 1200px). | ||
|
There was a problem hiding this comment. I'd change this to "Specifies the number of columns (1-12) to use for the element on large screens (greater than 1200px). If you do not specify a value, the element inherits the screenMedium value." |
||
| </sky-demo-page-property> | ||
| </sky-demo-page-properties> | ||
|
|
||
| <sky-demo-page-example> | ||
| <sky-fluid-grid-demo></sky-fluid-grid-demo> | ||
| <sky-demo-page-code demoName="Fluid grid"></sky-demo-page-code> | ||
| </sky-demo-page-example> | ||
|
|
||
| </sky-demo-page> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <ng-content></ng-content> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| @import '../../scss/_variables'; | ||
| @import '../../scss/_mixins'; | ||
|
|
||
| :host.sky-column { | ||
| padding-right: $sky-fluid-grid-gutter; | ||
| padding-left: $sky-fluid-grid-gutter; | ||
| width: 100%; | ||
| min-height: 1px; | ||
| } | ||
|
|
||
| @media (min-width: $sky-screen-sm-min) { | ||
| @include create_columns(sm); | ||
| } | ||
|
|
||
| @media (min-width: $sky-screen-md-min) { | ||
| @include create_columns(md); | ||
| } | ||
|
|
||
| @media (min-width: $sky-screen-lg-min) { | ||
| @include create_columns(lg); | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd change this to "Provides a responsive 12-column layout to organize content for all device sizes."