Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: PolymerElements/paper-card
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: mutovkin/paper-card
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 6 commits
  • 3 files changed
  • 1 contributor

Commits on Mar 9, 2016

  1. Updating gitignore to ignore IntelliJ IDEA project files

    @mutovkin
    mutovkin committed Mar 9, 2016
    Copy the full SHA
    777ac70 View commit details

  2. Added a mode (advanced), where the header can be custom defined. 

    - Backwards compatible mode to allow using custom header.
- To use, set property 'advanced' to true and set content class to be card-header
    @mutovkin
    mutovkin committed Mar 9, 2016
    Copy the full SHA
    a415225 View commit details

  3. Demo of advanced property functionality

    @mutovkin
    mutovkin committed Mar 9, 2016
    Copy the full SHA
    2e9176b View commit details

Commits on Mar 11, 2016

  1. Fixing double styling issue in the header

    @mutovkin
    mutovkin committed Mar 11, 2016
    Copy the full SHA
    b33c23a View commit details

Commits on Mar 12, 2016

  1. New properties for iron-image and new mid-level iron image in advance… 

    …d mode.
    @mutovkin
    mutovkin committed Mar 12, 2016
    Copy the full SHA
    0da3cda View commit details

Commits on Apr 26, 2016

  1. Making image adhere to aspect ratio

    @mutovkin
    mutovkin committed Apr 26, 2016
    Copy the full SHA
    dca5cd4 View commit details
Showing with 195 additions and 7 deletions.
  1. +4 −0 .gitignore
  2. +66 −0 demo/index.html
  3. +125 −7 paper-card.html
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
bower_components/

#IntelliJ Idea Project folder and file
.idea
*.iml
66 changes: 66 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@
<link rel="import" href="../../iron-icons/communication-icons.html">
<link rel="import" href="../../iron-icons/hardware-icons.html">
<link rel="import" href="../../iron-icons/social-icons.html">
<link rel="import" href="../../iron-icons/maps-icons.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
@@ -162,6 +163,71 @@ <h3>Paper-cards can contain advanced content</h3>
</template>
</demo-snippet>


<h3>Paper-card in "advanced" mode</h3>
<demo-snippet>
<template>
<style is="custom-style">
.card-header {
padding: 16px;
}
.card-header iron-icon.primary {
--iron-icon-width: 32px;
--iron-icon-height: 32px;
}
.cafe-header { @apply(--paper-font-headline); }
.cafe-light { color: var(--paper-grey-600); }
.cafe-location {
float: right;
font-size: 15px;
vertical-align: middle;
}
.cafe-reserve { color: var(--google-blue-500); }
iron-icon.star {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
color: var(--paper-amber-500);
}
iron-icon.star:last-of-type { color: var(--paper-grey-500); }
</style>
<paper-card advanced="true">
<div class="card-header">

<div class="cafe-header">
<iron-icon class="primary" icon="maps:local-cafe"></iron-icon>
Cafe Basilico
<div class="cafe-location cafe-light">
<iron-icon icon="communication:location-on"></iron-icon>
<span>250ft</span>
</div>
</div>
</div>

<div class="card-content">
<div class="cafe-rating">
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
</div>
<p>$・Italian, Cafe</p>
<p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting with 12 indoor seats plus patio seating.</p>
</div>
<div class="card-actions">
<p>Tonight's availability</p>
<div class="horizontal justified">
<paper-icon-button icon="icons:event"></paper-icon-button>
<paper-button>5:30PM</paper-button>
<paper-button>7:30PM</paper-button>
<paper-button>9:00PM</paper-button>
</div>
<paper-button class="cafe-reserve">Reserve</paper-button>
</div>
</paper-card>
</template>
</demo-snippet>

<h3>Paper-cards can have a horizontal image</h3>
<demo-snippet>
<template>
132 changes: 125 additions & 7 deletions paper-card.html
View file
Original file line number Diff line number Diff line change
@@ -91,7 +91,6 @@
width: 100%;
--iron-image-width: 100%;
pointer-events: none;

@apply(--paper-card-header-image);
}

@@ -111,6 +110,15 @@
@apply(--paper-card-header-image-text);
}

:host ::content .card-header {
position: relative;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
overflow: hidden;

@apply(--paper-card-header);
}

:host ::content .card-content {
padding: 16px;
position:relative;
@@ -125,21 +133,77 @@

@apply(--paper-card-actions);
}
</style>

<div class="header">
<iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image>
<div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div>
</div>
.aspect-ratio iron-image {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
/* padding: 0 24px; Optional padding for content area */
}

.image-box-wrapper {
position: relative;
width: 100%; /* <-- just a default, can be anything. */
}

<content></content>
.seven-by-one.aspect-ratio {
padding-bottom: 14.2857%;
}

.sixteen-by-nine.aspect-ratio {
padding-bottom: 56.25%
}

.three-by-two.aspect-ratio {
padding-bottom: 66.666%
}

.four-by-three.aspect-ratio {
padding-bottom: 75%
}

.custom.aspect-ratio {
padding-bottom: var(--paper-card-image-aspect-ratio, 100%);
}
</style>

<template is="dom-if" if="[[advanced]]" restamp="true">
<content select=".card-header"></content>
<div hidden$="[[!image]]" class="image-box-wrapper">
<div class$="[[imageAspectRatio]] aspect-ratio">
<iron-image id="advancedImage" hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]"
fade$="[[fadeImage]]" sizing="[[imageSizing]]" position="[[imagePosition]]" width="[[imageWidth]]"
height="[[imageHeight]]"></iron-image>
</div>
</div>
<content select=".card-content"></content>
<content select=".card-actions"></content>
</template>
<template is="dom-if" if="[[!advanced]]" restamp="true">
<div class$="header [[imageAspectRatio]] aspect-ratio">
<iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"
sizing="[[imageSizing]]" position="[[imagePosition]]" width="[[imageWidth]]"
height="[[imageHeight]]"></iron-image>
<div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div>
</div>
<content></content>
</template>
</template>

<script>
Polymer({
is: 'paper-card',

properties: {
/**
* Informs element to treat content as separate header and body areas, instead of default header behaviour,
* with property set it is possible to override header as complex as required. Card image related properties
* 'image', 'fadeImage' and 'preloadImage' are ignored if advanced mode is set.
*/
advanced: {
type: Boolean,
value: false
},

/**
* The title of the card.
*/
@@ -157,6 +221,56 @@
value: ''
},

/**
* `iron-image`, sizing option, applies to both advanced media area and header image
* From `iron-image` documentation:
* Valid values are `contain` (full aspect ratio of the image is contained within the element and
* letterboxed) or `cover` (image is cropped in order to fully cover the
* bounds of the element), or `null` (default: image takes natural size).
*/
imageSizing: {
type: String,
value: 'null'
},

/**
* `iron-image`, `position` property
* From `iron-image` documentation:
* When a `imageSizing` option is used (`cover` or `contain`), this determines
* how the image is aligned within the element bounds (default: `center`)
*/
imagePosition: {
type: String,
value: 'center'
},

/**
* In `advanced` mode only, `iron-image` will be limited by this aspect ratio depending on the card width
* Supported values are `sixteen-by-nine`, `three-by-two`, `four-by-three` or `seven-by-one`, finally if
* `--paper-card-image-aspect-ratio` variable is set you can use `custom` value
*/
imageAspectRatio: {
type: String,
value: 'sixteen-by-nine',
observer: '_switchImageRatio'
},

/**
* `iron-image`, `width` property
*/
imageWidth: {
type: Number,
value: null
},

/**
* `iron-image`, `height` property
*/
imageHeight: {
type: Number,
value: null
},

/**
* When `true`, any change to the image url property will cause the
* `placeholder` image to be shown until the image is fully rendered.
@@ -205,6 +319,10 @@
}
},

_switchImageRatio: function(newAR, oldAR) {
this.updateStyles();
},

_headingChanged: function(heading) {
var label = this.getAttribute('aria-label');
this.setAttribute('aria-label', heading);