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> | ||
| should be second/below | ||
| </sky-column> | ||
| <sky-column> | ||
| 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,9 @@ | ||
| import { | ||
| Component | ||
| } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fluid-grid-visual', | ||
| templateUrl: './fluid-grid-visual.component.html' | ||
| }) | ||
| 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,61 @@ | ||
| import { SkyVisualTest } from '../../../config/utils/visual-test-commands'; | ||
|
|
||
| import { element, by, browser } from 'protractor'; | ||
|
|
||
| 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', 1500) | ||
| .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,160 @@ | ||
| <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="9"> | ||
| First column | ||
| </sky-column> | ||
| <sky-column screenSmall="3"> | ||
| Second 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 Grid components provide a 12 column layout grid for organizing 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 have multiple properties specified in order to handle different behavior for each screen size. Below the width of 768px (small screen) all elements will be displayed in a single row. | ||
| </sky-demo-page-summary> | ||
|
|
||
| <sky-demo-page-properties sectionHeading="Sky row properties"> | ||
| <sky-demo-page-property propertyName="reverseColumnOrder" defaultValue="false" isOptional="true"> | ||
| Reverses the display order for the child columns when set to <code>true</code>. | ||
|
There was a problem hiding this comment. What designates a column as a child column? I feel like I'm missing something here. I thought this property would change the order (from left to right) of the columns in the grid so that whatever would have been last (far right) will be first (far left) with the other columns changing likewise (with the middle column staying right where it was if you have an odd number of columns). But the fact that we are referring to child columns makes me wonder if this property applies to some subset of the columns or if I'm just not following this at all. Also, how is the original display order determined? Is there a default order? If so, should we specify that here? If not, should we explain how the unreversed display order is determined? On a more minor wording note, I'd tweak the description slightly to follow the wording pattern we usually use with Boolean properties: "Indicates whether to reverse the display for for the child columns." |
||
| </sky-demo-page-property> | ||
|
|
||
| </sky-demo-page-properties> | ||
| <sky-demo-page-properties sectionHeading="Sky column properties"> | ||
| <sky-demo-page-property propertyName="screenSmall" isOptional="true"> | ||
| The number of columns (1-12) the element will use on a small screen (768px) | ||
| </sky-demo-page-property> | ||
| <sky-demo-page-property propertyName="screenMedium" isOptional="true"> | ||
| The number of columns (1-12) the element will use on a medium screen (992px). | ||
| </sky-demo-page-property> | ||
| <sky-demo-page-property propertyName="screenLarge" isOptional="true"> | ||
| The number of columns (1-12) the element will use on a large screen (1200px). | ||
| </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.
Is this name property displayed as a header anywhere in the docs? If so, "G" should be lowercase.