From 9a3453409fe4aa1f3d06656004f15dce6ac9c824 Mon Sep 17 00:00:00 2001 From: Elad Bezalel Date: Fri, 13 Nov 2015 14:44:30 +0200 Subject: [PATCH] feat(card): improved to behave as spec Added all functionality as seen in: http://www.google.com/design/spec/components/cards.html#cards-content-blocks fixes #1900 --- src/components/button/button.scss | 9 +- src/components/card/card-theme.scss | 25 +++ src/components/card/card.js | 64 ++++++- src/components/card/card.scss | 172 +++++++++++++++++- .../card/demoActionButtons/index.html | 83 +++++++++ .../card/demoActionButtons/script.js | 6 + src/components/card/demoBasicUsage/index.html | 138 +++++++++----- src/components/card/demoBasicUsage/style.css | 7 +- .../card/demoInCardActions/index.html | 95 ++++++++++ .../card/demoInCardActions/script.js | 6 + src/components/icon/icon.scss | 2 - src/core/style/variables.scss | 2 + 12 files changed, 546 insertions(+), 63 deletions(-) create mode 100644 src/components/card/demoActionButtons/index.html create mode 100644 src/components/card/demoActionButtons/script.js create mode 100644 src/components/card/demoInCardActions/index.html create mode 100644 src/components/card/demoInCardActions/script.js diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 7c09a92bb57..ca5791d2935 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -15,8 +15,8 @@ $button-fab-mini-line-height: rem(4.00) !default; $button-fab-toast-offset: $button-fab-height * 0.75 !default; -$icon-button-height: rem(4.800) !default; -$icon-button-width: rem(4.800) !default; +$icon-button-height: rem(4.000) !default; +$icon-button-width: rem(4.000) !default; $icon-button-margin: rem(0.600) !default; // Fix issue causing buttons in Firefox to be 2px bigger than they should @@ -93,9 +93,8 @@ button.md-button::-moz-focus-inner { margin: 0 $icon-button-margin; height: $icon-button-height; min-width: 0; - line-height: $icon-button-height; - padding-left: 0; - padding-right: 0; + line-height: $icon-size; + padding: $baseline-grid; width: $icon-button-width; border-radius: $button-icon-border-radius; .md-ripple-container { diff --git a/src/components/card/card-theme.scss b/src/components/card/card-theme.scss index e62c5695802..f12378bfa95 100644 --- a/src/components/card/card-theme.scss +++ b/src/components/card/card-theme.scss @@ -7,4 +7,29 @@ md-card.md-THEME_NAME-theme { .md-card-image { border-radius: $card-border-radius $card-border-radius 0 0; } + + md-card-header { + md-card-avatar { + md-icon { + color: '{{background-color}}'; + background-color: '{{foreground-3}}'; + } + } + + md-card-header-text { + .md-subhead { + color: '{{foreground-2}}' + } + } + } + + md-card-title { + md-card-title-text { + &:not(:only-child) { + .md-subhead { + color: '{{foreground-2}}'; + } + } + } + } } diff --git a/src/components/card/card.js b/src/components/card/card.js index 25b4217746d..3cf41aa81b4 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -6,12 +6,11 @@ * Card components. */ angular.module('material.components.card', [ - 'material.core' -]) + 'material.core' + ]) .directive('mdCard', mdCardDirective); - /** * @ngdoc directive * @name mdCard @@ -29,6 +28,28 @@ angular.module('material.components.card', [ * Action buttons can be included in an `` element, similar to ``. * You can then position buttons using layout attributes. * + * Card is built with: + * * `` - Header for the card, holds avatar, text and squared image + * - `` - Card avatar + * - `md-user-avatar` - Class for user image + * - `` + * - `` - Contains elements for the card description + * - `md-title` - Class for the card title + * - `md-subhead` - Class for the card sub header + * * `` - Image for the card + * * `` - Card content title + * - `` + * - `md-headline` - Class for the card content title + * - `md-subhead` - Class for the card content sub header + * - `` - Squared image within the title + * - `md-media-sm` - Class for small image + * - `md-media-md` - Class for medium image + * - `md-media-lg` - Class for large image + * * `` - Card content + * - `md-media-xl` - Class for extra large image + * * `` - Card actions + * - `` - Icon actions + * * Cards have constant width and variable heights; where the maximum height is limited to what can * fit within a single view on a platform, but it can temporarily expand as needed. * @@ -62,11 +83,46 @@ angular.module('material.components.card', [ * * * + * ### Card with header, image, title actions and content + * + * + * + * + * + * + * + * Title + * Sub header + * + * + * image caption + * + * + * Card headline + * Card subheader + * + * + * + * Action 1 + * Action 2 + * + * + * + * + * + * + * + *

+ * Card content + *

+ * + * + * */ function mdCardDirective($mdTheming) { return { restrict: 'E', - link: function($scope, $element, $attr) { + link: function ($scope, $element) { $mdTheming($element); } }; diff --git a/src/components/card/card.scss b/src/components/card/card.scss index e64f3a5c096..1f6fd3bc6f5 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -9,6 +9,56 @@ md-card { box-shadow: $card-box-shadow; + md-card-header { + padding: $card-padding; + display: flex; + flex-direction: row; + + &:first-child { + md-card-avatar { + margin-right: 12px; + } + } + + &:last-child { + md-card-avatar { + margin-left: 12px; + } + } + + md-card-avatar { + width: 40px; + height: 40px; + + .md-user-avatar, + md-icon{ + border-radius: 50%; + } + + md-icon { + padding: 8px; + } + + & + md-card-header-text { + max-height: 40px; + + .md-title { + font-size: 14px; + } + } + } + + md-card-header-text { + display: flex; + flex: 1; + flex-direction: column; + + .md-subhead { + font-size: 14px; + } + } + } + > img, > :not(md-card-content) img { display: flex; @@ -17,21 +67,131 @@ md-card { height: auto; } + md-card-title { + padding: 3 * $card-padding / 2 $card-padding $card-padding; + display: flex; + flex: 1; + flex-direction: row; + + & + md-card-content { + padding-top: 0; + } + + md-card-title-text { + flex: 1; + flex-direction: column; + display: flex; + + .md-subhead { + padding-top: 0; + font-size: 14px; + } + + &:only-child { + .md-subhead { + padding-top: 3 * $card-padding / 4; + } + } + } + + md-card-title-media { + margin-top: - $card-padding / 2; + + .md-media-sm { + height: 80px; + width: 80px; + } + .md-media-md { + height: 112px; + width: 112px; + } + .md-media-lg { + height: 152px; + width: 152px; + } + } + } + md-card-content { display: block; padding: $card-padding; + + & > p { + margin: 0; + } + + .md-media-xl { + height: 240px; + width: 240px; + } } .md-actions, md-card-actions { - margin: 0; + margin: $baseline-grid; + + &.layout-column { + .md-button { + &:not(.md-icon-button) { + margin: $baseline-grid / 4 0; + + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } - .md-button { - margin-bottom: $baseline-grid; - margin-top: $baseline-grid; - margin-right: $baseline-grid * .5; - margin-left: $baseline-grid * .5; + &.md-icon-button { + margin-top: 3 * $baseline-grid / 4; + margin-bottom: 3 * $baseline-grid / 4; + } + } + } + + md-card-icon-actions { + flex: 1; + justify-content: flex-start; + display: flex; + flex-direction: row; + } + + &:not(.layout-column) .md-button { + &:not(.md-icon-button) { + margin: 0 $baseline-grid * .5; + + &:first-of-type { + margin-left: 0; + } + + &:last-of-type { + margin-right: 0; + } + } + + &.md-icon-button { + margin-left: 3 * $baseline-grid / 4; + margin-right: 3 * $baseline-grid / 4; + + &:first-of-type { + margin-left: 3 * $baseline-grid / 2; + } + + &:last-of-type { + margin-right: 3 * $baseline-grid / 2; + } + } + + & + md-card-icon-actions { + flex: 1; + justify-content: flex-end; + display: flex; + flex-direction: row; + } } } + md-card-footer { margin-top: auto; padding: $card-padding; diff --git a/src/components/card/demoActionButtons/index.html b/src/components/card/demoActionButtons/index.html new file mode 100644 index 00000000000..79826761e17 --- /dev/null +++ b/src/components/card/demoActionButtons/index.html @@ -0,0 +1,83 @@ +
+ +
+ + Washed Out + + + Action buttons + + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + + Action 1 + Action 2 + + + + Washed Out + + + Vertical action buttons + + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + + Action 1 + Action 2 + + +
+
+ + Washed Out + + + Icon action buttons + + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + + + + + + + + + + + + + + Washed Out + + + + + + + + + + + + +
+ +
diff --git a/src/components/card/demoActionButtons/script.js b/src/components/card/demoActionButtons/script.js new file mode 100644 index 00000000000..03dcba49cd5 --- /dev/null +++ b/src/components/card/demoActionButtons/script.js @@ -0,0 +1,6 @@ + +angular.module('cardDemo1', ['ngMaterial']) + +.controller('AppCtrl', function($scope) { + $scope.imagePath = 'img/washedout.png'; +}); diff --git a/src/components/card/demoBasicUsage/index.html b/src/components/card/demoBasicUsage/index.html index 1b45f212c6d..54841793baa 100644 --- a/src/components/card/demoBasicUsage/index.html +++ b/src/components/card/demoBasicUsage/index.html @@ -1,45 +1,99 @@ +
+ +
+ + + + Card with image + Large + + +
+ + + + Action 1 + Action 2 + + + + + + Card with image + Extra Large + + + +
-
- - - - - Washed Out - -

Paracosm

-

- The titles of Washed Out's breakthrough song and the first single from Paracosm share the - two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... -

- - - Action 1 - Action 2 - - -
- - - Washed Out - -

Paracosm

-

- The titles of Washed Out's breakthrough song and the first single from Paracosm share the - two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... -

- - -
- - - Washed Out - -

Paracosm

-

- The titles of Washed Out's breakthrough song and the first single from Paracosm share the - two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... -

- - + + + + + + + + + + + + + +
+
+ + + + Card with image + Small + + +
+ + + + Action 1 + Action 2 + + + + + + Card with image + Medium + + +
+ + + + Action 1 + Action 2 + + + + + + + + + Angular + Material + + + Washed Out + + + Card header + + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + +
diff --git a/src/components/card/demoBasicUsage/style.css b/src/components/card/demoBasicUsage/style.css index dec8b72f6c3..e5c08576adf 100644 --- a/src/components/card/demoBasicUsage/style.css +++ b/src/components/card/demoBasicUsage/style.css @@ -1,4 +1,3 @@ - -md-card { - min-height: 150px; -} +.card-media { + background-color: #999999; +} \ No newline at end of file diff --git a/src/components/card/demoInCardActions/index.html b/src/components/card/demoInCardActions/index.html new file mode 100644 index 00000000000..2c4343ab47a --- /dev/null +++ b/src/components/card/demoInCardActions/index.html @@ -0,0 +1,95 @@ +
+ +
+ + Washed Out + + + In-card mixed actions + + + + + + + + + + + + Action 1 + Action 2 + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + + + + + + + + User + subhead + + + Washed Out + + + In-card mixed actions + Reversed + + + + Action 1 + Action 2 + + + + + + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + +
+
+ + + + + + + Title + subhead + + + Washed Out + + + In-card actions + Description + + + + Action 1 + Action 2 + + +

+ The titles of Washed Out's breakthrough song and the first single from Paracosm share the + two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well... +

+ + +
+ +
diff --git a/src/components/card/demoInCardActions/script.js b/src/components/card/demoInCardActions/script.js new file mode 100644 index 00000000000..03dcba49cd5 --- /dev/null +++ b/src/components/card/demoInCardActions/script.js @@ -0,0 +1,6 @@ + +angular.module('cardDemo1', ['ngMaterial']) + +.controller('AppCtrl', function($scope) { + $scope.imagePath = 'img/washedout.png'; +}); diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index d25a4ef0fe4..fc666668c25 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -1,5 +1,3 @@ -$icon-size: rem(2.4); - md-icon { margin: auto; background-repeat: no-repeat no-repeat; diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss index 6bb6759482e..0ec9ad414c6 100644 --- a/src/core/style/variables.scss +++ b/src/core/style/variables.scss @@ -30,6 +30,8 @@ $layout-breakpoint-md: 960px !default; $layout-breakpoint-lg: 1200px !default; $layout-gutter-width: ($baseline-grid * 2) !default; +// Icon +$icon-size: rem(2.400) !default; // App bar variables $app-bar-height: 64px;