From 74ccf166a5be395ea4f0ca7cd016b5247fdae873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Tue, 2 Feb 2016 17:21:08 +0000 Subject: [PATCH] Improves the list to bring it closer to spec. --- docs/_pages/components.md | 14 ++-- src/_variables.scss | 21 ++++-- src/list/README.md | 1 + src/list/_list.scss | 107 +++++++++++++++++++++------- src/list/snippets/action.html | 23 +++--- src/list/snippets/icon.html | 6 +- src/list/snippets/list-control.html | 2 +- src/list/snippets/list-item.html | 2 +- src/list/snippets/three-line.html | 17 ++--- src/list/snippets/two-line.html | 18 +++-- 10 files changed, 133 insertions(+), 78 deletions(-) diff --git a/docs/_pages/components.md b/docs/_pages/components.md index aeb446a12..fdd699828 100644 --- a/docs/_pages/components.md +++ b/docs/_pages/components.md @@ -193,17 +193,17 @@ categories: class: mdl-list snippets: - snippet_group: - - caption: Action - file: action.html + - caption: Simple list + file: list-item.html - snippet_group: - - caption: Icon + - caption: Icons file: icon.html - snippet_group: - - caption: List control - file: list-control.html + - caption: Avatars and actions + file: action.html - snippet_group: - - caption: List item - file: list-item.html + - caption: Avatars and controls + file: list-control.html - snippet_group: - caption: Two line file: two-line.html diff --git a/src/_variables.scss b/src/_variables.scss index 823e2a9e0..317661322 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -271,9 +271,10 @@ $progress-image-path: $image_path; /* ========== List ========== */ -$list-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default; -$list-container-view-background: unquote("rgb(#{$color-white})") !default; +$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default; $list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default; +$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default; +$list-avatar-color: white !default; /* ========== Item ========== */ @@ -364,10 +365,18 @@ $menu-fade-duration: 0.2s !default; /* LIST */ -$list-container-height: 500px !default; -$list-container-width: 400px !default; -$list-container-item-height: 70px !default; -// $list__item-hover-color: unquote("rgb(#{$palette-grey-300})") !default; +$list-border: 8px !default; +$list-min-height: 48px !default; +$list-min-padding: 16px !default; +$list-bottom-padding: 20px !default; +$list-avatar-text-left-distance: 72px !default; +$list-icon-text-left-distance: 72px !default; + +$list-avatar-size: 40px !default; +$list-icon-size: 24px !default; + +$list-two-line-height: 72px !default; +$list-three-line-height: 88px !default; /* LAYOUT */ diff --git a/src/list/README.md b/src/list/README.md index 2fe8ee2f1..f844a2904 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -47,6 +47,7 @@ The MDL CSS classes apply various predefined visual enhancements to the list. Th | .mdl-list__item-three-line | Defines the List's Items as a Three Line | Optional Three Line List Variant | | .mdl-list__item-primary-content | Defines the primary content sub-division |-| | .mdl-list__item-avatar | Defines the avatar sub-division |-| +| .mdl-list__item-icon | Defines the icon sub-division |-| | .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` | | .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` | | .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` | diff --git a/src/list/_list.scss b/src/list/_list.scss index 45b3ce362..980ef3814 100644 --- a/src/list/_list.scss +++ b/src/list/_list.scss @@ -20,31 +20,38 @@ .mdl-list { display: block; - padding: 8px 0 ; + padding: $list-border 0; list-style: none; } .mdl-list__item { - @include typo-body-1(); + @include typo-subhead(); + line-height: 1; display: flex; + min-height: $list-min-height; box-sizing: border-box; - height: 48px; flex-direction: row; flex-wrap: nowrap; align-items: center; - padding : 16px 16px 20px 16px; + padding: $list-min-padding; cursor: default; + color: $list-main-text-text-color; + overflow: hidden; + & .mdl-list__item-primary-content { - order:0; + order: 0; flex-grow: 2; text-decoration: none; + box-sizing: border-box; + display: flex; + align-items: center; + + & .mdl-list__item-icon { + margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding; + } - & .material-icons { - font-size: 40px; - line-height: 0; - vertical-align: middle; - padding: 0 12px 0 0; - display: inline; + & .mdl-list__item-avatar { + margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding; } } @@ -52,53 +59,99 @@ display: flex; flex-flow: column; align-items: flex-end; + margin-left: $list-min-padding; + & .mdl-list__item-secondary-action label { display: inline; } & .mdl-list__item-secondary-info { @include typo-caption(); - margin-bottom: 10px; color: $list-supporting-text-text-color; } & .mdl-list__item-sub-header { - padding: 0 0 0 16px; + padding: 0 0 0 $list-min-padding; } } } -.mdl-list__item-avatar { - height: 56px; +.mdl-list__item-icon, +.mdl-list__item-icon.material-icons { + height: $list-icon-size; + width: $list-icon-size; + font-size: $list-icon-size; + box-sizing: border-box; + color: $list-icon-color; +} + +.mdl-list__item-avatar, +.mdl-list__item-avatar.material-icons { + height: $list-avatar-size; + width: $list-avatar-size; + box-sizing: border-box; + border-radius: 50%; + // Set a background colour in case the user doesn't provide an image. + background-color: $list-icon-color; + // Set a font size and color in case the user provides a Material Icon. + font-size: $list-avatar-size; + color: $list-avatar-color; } .mdl-list__item--two-line { - height: 72px; + height: $list-two-line-height; & .mdl-list__item-primary-content { - & .material-icons { - vertical-align: text-bottom; + height: $list-two-line-height - $list-min-padding - $list-bottom-padding; + line-height: 20px; + display: block; + + & .mdl-list__item-avatar{ + float: left; + } + + & .mdl-list__item-icon { + float: left; + // Icons are aligned to center of text in a two line list. + margin-top: + ($list-two-line-height - $list-min-padding - $list-bottom-padding - + $list-icon-size) / 2; + } + + & .mdl-list__item-secondary-content { + height: $list-two-line-height - $list-min-padding - $list-bottom-padding; } & .mdl-list__item-sub-title { - @include typo-caption(); + @include typo-body-1(); + line-height: 18px; + color: $list-supporting-text-text-color; display: block; - padding : 0 0 0 56px; + padding: 0; } } } .mdl-list__item--three-line { - height: 88px; + height: $list-three-line-height; & .mdl-list__item-primary-content { - & .material-icons { - vertical-align: text-bottom; + height: $list-three-line-height - $list-min-padding - $list-bottom-padding; + line-height: 20px; + display: block; + + & .mdl-list__item-avatar, + & .mdl-list__item-icon { + float: left; } } + & .mdl-list__item-secondary-content { + height: $list-three-line-height - $list-min-padding - $list-bottom-padding; + } + & .mdl-list__item-text-body { - @include typo-caption(); + @include typo-body-1(); + line-height: 18px; + height: $list-three-line-height - $list-min-padding - $list-bottom-padding; color: $list-supporting-text-text-color; display: block; - height: 24px; - padding: 0 0 0 56px; - overflow: hidden; + padding: 0; } } diff --git a/src/list/snippets/action.html b/src/list/snippets/action.html index 2a0650fcb..62447cbda 100644 --- a/src/list/snippets/action.html +++ b/src/list/snippets/action.html @@ -1,4 +1,4 @@ - +
-
+
- person + person Bryan Cranston - 62 Episodes - star + star
-
+
- person + person Aaron Paul - 62 Episodes - star + star
-
+
- person + person Bob Odenkirk - 43 Episodes - star + star
diff --git a/src/list/snippets/icon.html b/src/list/snippets/icon.html index e75a41a9a..fca89ab84 100644 --- a/src/list/snippets/icon.html +++ b/src/list/snippets/icon.html @@ -8,19 +8,19 @@
  • - person + person Bryan Cranston
  • - person + person Aaron Paul
  • - person + person Bob Odenkirk
    • diff --git a/src/list/snippets/list-control.html b/src/list/snippets/list-control.html index 5af39e1e1..72fd28d11 100644 --- a/src/list/snippets/list-control.html +++ b/src/list/snippets/list-control.html @@ -1,4 +1,4 @@ - + @@ -11,13 +11,12 @@ person Bryan Cranston - Bryan Cranston played the role of Bryan Cranston in Breaking Bad, he is also know + Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. - Actor - star + star
  • @@ -25,13 +24,12 @@ person Aaron Paul - Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featured in + Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie. - Actor - star + star
  • @@ -39,13 +37,12 @@ person Bob Odenkirk - Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad. Due to public fondness for the + Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul". - Actor - star + star
diff --git a/src/list/snippets/two-line.html b/src/list/snippets/two-line.html index 6f3312ce5..b130ababa 100644 --- a/src/list/snippets/two-line.html +++ b/src/list/snippets/two-line.html @@ -9,34 +9,32 @@
  • person - Bryan Cranston + Bryan Cranston 62 Episodes Actor - star + star
  • - person - Aaron Paul + person + Aaron Paul 62 Episodes - Actor - star + star
  • - person - Bob Odenkirk + person + Bob Odenkirk 62 Episodes - Actor - star + star