Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(image-list): Add Masonry Image List #2381

Merged
merged 7 commits into from
Mar 14, 2018
Merged

Conversation

kfranqueiro
Copy link
Contributor

Resolves #2315

Copy link
Contributor

@bonniezhou bonniezhou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some nits, otherwise LGTM!

```html
<ul class="mdc-image-list mdc-image-list--masonry my-masonry-image-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="images/1-1.jpg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Use src="..." to be consistent with above

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh jeez. that's not a nit, that's a "you copypasta'd from the demo you goof." I am ashamed.

@@ -91,12 +124,16 @@ Mixin | Description
--- | ---
`mdc-image-list-aspect($width-height-ratio)` | Styles the aspect container elements within an Image List to conform to the given ratio, where 1 is 1:1, greater than 1 is wider, and less than 1 is taller.
`mdc-image-list-standard-columns($column-count, $gutter-size)` | Styles a Standard Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.
`mdc-image-list-masonry-columns($column-count, $gutter-size)` | Styles a Masonry Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.

> **Note:** Only one of the `-columns` mixins should be used for any given Image List. Use the mixin appropriate to the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Use mdc-image-list-...-columns to be consistent with below.

@kfranqueiro
Copy link
Contributor Author

Ran into a lint error which IMO is due to unwise ordering in our stylelintrc, which I'm fixing in #2395 before merging this.

@codecov-io
Copy link

codecov-io commented Mar 14, 2018

Codecov Report

Merging #2381 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #2381   +/-   ##
=======================================
  Coverage   98.88%   98.88%           
=======================================
  Files         100      100           
  Lines        4144     4144           
  Branches      535      535           
=======================================
  Hits         4098     4098           
  Misses         46       46

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 30a29f6...e595689. Read the comment docs.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants