From abd915397df8882f3a1eaf7a23bd8c807430f7ca Mon Sep 17 00:00:00 2001 From: Yiran Mao Date: Tue, 13 Jun 2017 10:57:41 -0400 Subject: [PATCH] feat(layout-grid): Add fixed column width layout grid modifier. Closes #748. --- demos/layout-grid.html | 57 +++++++++++++++++++ packages/mdc-layout-grid/README.md | 43 ++++++++++++-- packages/mdc-layout-grid/_mixins.scss | 14 +++++ packages/mdc-layout-grid/_variables.scss | 6 ++ packages/mdc-layout-grid/mdc-layout-grid.scss | 13 +++++ packages/mdc-toolbar/foundation.js | 5 +- 6 files changed, 130 insertions(+), 8 deletions(-) diff --git a/demos/layout-grid.html b/demos/layout-grid.html index 8c09513a3cc..91eff0a9232 100644 --- a/demos/layout-grid.html +++ b/demos/layout-grid.html @@ -306,6 +306,46 @@ +
Fixed column width layout grid
+
+
+
+
+ Desktop Column Width: + +
+
+
+
+ Tablet Column Width: + +
+
+
+
+ Phone Column Width: + +
+
+
+
+
+
+
+
+
+
+
+
@@ -323,6 +363,7 @@ gutterSelectDesktop.addEventListener('change', function() { document.documentElement.style.setProperty('--mdc-layout-grid-gutter-desktop', gutterSelectDesktop.value); }); + var marginSelectTablet = document.querySelector('#tablet-margin'); marginSelectTablet.addEventListener('change', function() { document.documentElement.style.setProperty('--mdc-layout-grid-margin-tablet', marginSelectTablet.value); @@ -332,6 +373,7 @@ gutterSelectTablet.addEventListener('change', function() { document.documentElement.style.setProperty('--mdc-layout-grid-gutter-tablet', gutterSelectTablet.value); }); + var marginSelectPhone = document.querySelector('#phone-margin'); marginSelectPhone.addEventListener('change', function() { document.documentElement.style.setProperty('--mdc-layout-grid-margin-phone', marginSelectPhone.value); @@ -342,6 +384,21 @@ document.documentElement.style.setProperty('--mdc-layout-grid-gutter-phone', gutterSelectPhone.value); }); + var ColumnWidthSelectDesktop = document.querySelector('#desktop-column-width'); + ColumnWidthSelectDesktop.addEventListener('change', function() { + document.documentElement.style.setProperty('--mdc-layout-grid-column-width-desktop', ColumnWidthSelectDesktop.value); + }); + + var ColumnWidthSelectTablet = document.querySelector('#tablet-column-width'); + ColumnWidthSelectTablet.addEventListener('change', function() { + document.documentElement.style.setProperty('--mdc-layout-grid-column-width-tablet', ColumnWidthSelectTablet.value); + }); + + var ColumnWidthSelectPhone = document.querySelector('#phone-column-width'); + ColumnWidthSelectPhone.addEventListener('change', function() { + document.documentElement.style.setProperty('--mdc-layout-grid-column-width-phone', ColumnWidthSelectPhone.value); + }); + var current = document.querySelector('#current'); var update = function() { var size = '(phone)'; diff --git a/packages/mdc-layout-grid/README.md b/packages/mdc-layout-grid/README.md index aa27053db64..d0d66239cc2 100644 --- a/packages/mdc-layout-grid/README.md +++ b/packages/mdc-layout-grid/README.md @@ -41,14 +41,12 @@ npm install --save @material/layout-grid ## The layout grid -A grid consists of a group of cells, which get positioned in sequence according to a predefined number of columns. -Cells specify how many columns to span (the default being 4), and get placed side by side while there is room. When -there isn't enough room for a cell, it gets moved to the beginning of the next row, and placement continues as usual. +A grid is a container that consists of a group of cells. The grids can define its own max-width or designate its column to be a certain width. Cells get positioned in sequence according to a predefined number of columns. The grid has 12 columns in desktop mode (>= 840px), 8 columns in tablet mode (>= 480px), and 4 columns in phone mode -(< 480px). Column widths are variable; margins and gutters are fixed, with columns taking up the remainder of the space. +(< 480px). Cells specify how many columns to span (the default being 4), and get placed side by side while there is room. When there isn't enough room for a cell, it gets moved to the beginning of the next row, and placement continues as usual. -Margins (the space between the edge of the grid and the edge of the first cell) and gutters (the space between edges of adjacent cells) can be customized on different devices respectively based on design needs. Layout grids set default margins and gutters to 24px on desktop, 16px on tablet and phone, according to the Material Design spec. + Margins (the space between the edge of the grid and the edge of the first cell) and gutters (the space between edges of adjacent cells) can be customized on different devices respectively based on design needs. The columns are evenly distributed after container minus all margin and gutter width. Layout grids set default margins and gutters to 24px on desktop, 16px on tablet and phone, according to the Material Design spec. The grid and cells are not styled in any way, serving only for alignment and positioning of elements. @@ -67,6 +65,8 @@ The grid and cells are not styled in any way, serving only for alignment and pos The grid should have the `mdc-layout-grid` class. Every cell should have the `mdc-layout-grid__cell` class and must be wrapped by `mdc-layout-grid__inner` for proper alignment. Behavior for grids containing direct children without the `mdc-layout-grid__cell` class is undefined. +By default, `mdc-layout-grid` behaves like a fluid container, which takes up its parents container's available space. You can change the behavior using [max-width](#max-width) or [fixed column width layout grid](#fixed-column-width-grid). + ### Margins and gutters @@ -137,6 +137,26 @@ columns wide. MDC layout grids take up the parent element space by default. However, user can set `$mdc-layout-grid-max-width` to restrict the max-width of the layout grid. +### Fixed column width grid + +You can designate each column to have a certain width by using `mdc-layout-grid--fixed-column-width` modifier. The column width can be specified through sass map `$mdc-layout-grid-column-width` or css custom properties `--mdc-layout-grid-column-width-{screen_size}`. The column width is set to 72px on all devices by default. + +``` + + +
+
+
+
+
+
+``` + + ### Nested grid When your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, add a new `mdc-layout-grid__inner` to wrap around nested `mdc-layout-grid__cell` within an existing `mdc-layout-grid__cell`. @@ -160,7 +180,6 @@ However, Material guideline do not recommend have a deeply nested grid since it ``` - ### Reordering By default, items are positioned in the source order. However, you can reorder them by using the @@ -235,6 +254,18 @@ behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment > Note even though size is passed in as one of the arguments, it won't apply any `media-query` rules. It is set for using the correct CSS custom properties to overriden the margin and gutter at runtime (See [Margins and gutters](#margins-and-gutters) section for detail). +### mdc-layout-grid-fixed-column-width + +```scss +@include mdc-layout-grid-fixed-column-width(desktop, 24px, 24px, 72px); +``` + +`mdc-layout-grid-fixed-column-width` defines the container by width designated column width. The mixin takes four parameters: +- `$size`: the target platform: `desktop`, `tablet` or `phone`. +- `$margin`: the size of the grid margin. +- `$gutter`: the size of the gutter between cells. +- `$column-width`: the width of the column within the grid. + ### mdc-layout-grid-cell-order diff --git a/packages/mdc-layout-grid/_mixins.scss b/packages/mdc-layout-grid/_mixins.scss index c174808f613..fbd7e844fb7 100644 --- a/packages/mdc-layout-grid/_mixins.scss +++ b/packages/mdc-layout-grid/_mixins.scss @@ -122,3 +122,17 @@ align-self: stretch; } } + +@mixin mdc-layout-grid-fixed-column-width($size, $margin, $gutter, $column-width) { + $columns: map-get($mdc-layout-grid-columns, $size); + $gutter-number: $columns - 1; + $margin-number: 2; + + width: $column-width * $columns + $gutter * $gutter-number + $margin * $margin-number; + width: + calc( + var(--mdc-layout-grid-column-width-#{$size}, #{$column-width}) * #{$columns} + + var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) * #{$gutter-number} + + var(--mdc-layout-grid-margin-#{$size}, #{$margin}) * #{$margin-number} + ); +} diff --git a/packages/mdc-layout-grid/_variables.scss b/packages/mdc-layout-grid/_variables.scss index 854b6ad169b..be838f472e8 100644 --- a/packages/mdc-layout-grid/_variables.scss +++ b/packages/mdc-layout-grid/_variables.scss @@ -36,6 +36,12 @@ $mdc-layout-grid-default-gutter: ( phone: 16px ) !default; +$mdc-layout-grid-column-width: ( + desktop: 72px, + tablet: 72px, + phone: 72px +) !default; + $mdc-layout-grid-default-column-span: 4 !default; $mdc-layout-grid-max-width: null; diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss index 30dca75bc41..df768cf90fa 100644 --- a/packages/mdc-layout-grid/mdc-layout-grid.scss +++ b/packages/mdc-layout-grid/mdc-layout-grid.scss @@ -19,6 +19,7 @@ @each $size in map-keys($mdc-layout-grid-columns) { --mdc-layout-grid-margin-#{$size}: map-get($mdc-layout-grid-default-margin, $size); --mdc-layout-grid-gutter-#{$size}: map-get($mdc-layout-grid-default-gutter, $size); + --mdc-layout-grid-column-width-#{$size}: map-get($mdc-layout-grid-column-width, $size); } } @@ -84,4 +85,16 @@ } } +.mdc-layout-grid--fixed-column-width { + @each $size in map-keys($mdc-layout-grid-columns) { + @include mdc-layout-grid-media-query_($size) { + $margin: map-get($mdc-layout-grid-default-margin, $size); + $gutter: map-get($mdc-layout-grid-default-gutter, $size); + $column-width: map-get($mdc-layout-grid-column-width, $size); + + @include mdc-layout-grid-fixed-column-width($size, $margin, $gutter, $column-width); + } + } +} + // postcss-bem-linter: end diff --git a/packages/mdc-toolbar/foundation.js b/packages/mdc-toolbar/foundation.js index 3fe71e7853c..8263ddfa4be 100644 --- a/packages/mdc-toolbar/foundation.js +++ b/packages/mdc-toolbar/foundation.js @@ -90,7 +90,7 @@ export default class MDCToolbarFoundation extends MDCFoundation { if (this.hasFlexibleRow_) { this.useFlexDefaultBehavior_ = this.adapter_.hasClass(MDCToolbarFoundation.cssClasses.FLEXIBLE_DEFAULT_BEHAVIOR); } - this.initKeyRatio_(); + // this.initKeyRatio_(); this.setKeyHeights_(); this.adapter_.registerResizeHandler(this.resizeHandler_); this.adapter_.registerScrollHandler(this.scrollHandler_); @@ -122,6 +122,7 @@ export default class MDCToolbarFoundation extends MDCFoundation { const newToolbarRowHeight = this.getRowHeight_(); if (newToolbarRowHeight !== this.calculations_.toolbarRowHeight) { this.calculations_.toolbarRowHeight = newToolbarRowHeight; + this.initKeyRatio_(); this.calculations_.toolbarHeight = this.calculations_.toolbarRatio * this.calculations_.toolbarRowHeight; this.calculations_.flexibleExpansionHeight = this.calculations_.flexibleExpansionRatio * this.calculations_.toolbarRowHeight; @@ -163,7 +164,7 @@ export default class MDCToolbarFoundation extends MDCFoundation { } initKeyRatio_() { - const toolbarRowHeight = this.getRowHeight_(); + const toolbarRowHeight = this.calculations_.toolbarRowHeight; const firstRowMaxRatio = this.adapter_.getFirstRowElementOffsetHeight() / toolbarRowHeight; this.calculations_.toolbarRatio = this.adapter_.getOffsetHeight() / toolbarRowHeight; this.calculations_.flexibleExpansionRatio = firstRowMaxRatio - 1;