polymerelements / paper-card Goto Github PK

View Code? Open in Web Editor NEW

98.0 19.0 62.0 20.94 MB

A Material Design piece of paper with unique related data

Home Page: https://www.webcomponents.org/element/PolymerElements/paper-card

HTML 48.31% JavaScript 51.69%

paper-card's Introduction

<paper-card>

paper-card is a container with a drop shadow.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-card

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-card/paper-card.js';
      import '@polymer/paper-button/paper-button.js';
    </script>
  </head>
  <body>
    <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
      <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
      <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
      <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
      <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-card
cd paper-card
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

paper-card's People

Contributors

Stargazers

Watchers

paper-card's Issues

After `polymer init` (create app), "Unable to find a suitable version for polymer" and then `"undefined" is not a valid custom element name`

Description

Right now doing...

npm install -g polymer-cli
mkdir demo
cd demo
polymer init # pick option 2, the blank app
bower install paper-card # all unsuitable versions of polymer lead to the same error
vim src/demo-app/demo-app.html # Import paper-card and use it in the template
polymer serve # now you see "undefined" is not a valid custom element name" in browser console

Expected outcome

Expected to see a paper card.

Actual outcome

No paper card.

Browsers Affected

Chrome

add "overflow: hidden" as anything without card-content class hides the border-radius

paper-material { border-radius: inherit; width: 100%; height: 100%; overflow: hidden; }

Expose iron-image position and sizing properties

There is currently no means of styling the position of image in the card due to iron-image properties not exposed.

These properties should be exposed to give developers better control of the content presented to the user.

Allow set width/height of iron-image?

I'm making a Pinterest-like grid (paper-cards with variable heights). I get the images urls from a database and have its dimensions. But, as I'm not able to change iron-image directly, I can't set the dimensions.

If the images aren't cached by the browser, it makes the page to break, because the grid structure is calculated by Javascript using clientWidth and clientHeight of each item (in this case, paper-card).

I don't know if there's another way to do that as simple as adding imageWidth and imageHeight properties to paper-card.

I can make a PR later today. 😊

paper-card is not found in bower

paper-card is not found in bower, tried searching from https://bower.io/search/ , the one listed is not from PolymerElements

The generated HTML is not sematic

When looking at the header for e.g. the paper-card component (https://elements.polymer-project.org/elements/paper-card) it does not use a h1 tag for the header. I would expect a section tag and a h1 in a card but all I can see are div tags. Is there a good reason for this or was it missed out on by accident?

Styling is not being applied

Polymer 1.1

--paper-card-header-color: is not being applied to the header in:

    .header {
      color: var(--paper-pink-500);
      --paper-card-header-color: var(--paper-pink-500);
    }

<paper-card heading="Cloud Image Share" class="header" image="../img/cloud-share-image.jpg">

However, to prove that I do have the paper-styles colors working, the color: var(--paper-pink-500) does work successfully.

I am using the .pink example in index.html demo to go by.

Update:

it seems none of the styling is being applied other than the shadow. For instance, class="card-actions" is not being applied ether:

Here is more of the code:

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 50%;
     }

    paper-card {
      max-width: 400px;
      margin-bottom: 16px;
    }

    section {
      width: 100%;
      background-color: var(--paper-grey-50);
    }

    .header {
      --paper-card-header-color: var(--paper-pink-500);
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }
  </style>

  <template>
      <section>
        <div nclick="page('/')"
          class="vertical layout">
          <paper-card heading="Cloud Image Share" class="header" image="../img/cloud-share-image.jpg">
            <div class="card-content">
              blah blah blah
            </div>
            <div class="card-actions">
              <paper-button>No</paper-button>
              <paper-button>Yes</paper-button>
            </div>
          </paper-card>`
        </div>
      </section>
  </template>

  <script>
    Polymer({
      is: "portfolio-page",
      properties: {
      ///NOTE: old code...I used to have it in a dom-if but I stripped the conditional out to trouble shoot
                    this  
      show: {
          type: Boolean,
          reflectToAttribute: true,
          value: true
        }
      },
      toggleShow: function() {
        this.show = !this.show;
      }
    });
  </script>
</dom-module>

paper-material does not render correctly when paper-card is sized with css

Sizing the card with css doesn't size the material correctly:

paper-card {
  width: 600px;
  height: 400px;
}

Vertical images are being turned

Description

When having a vertical iimage (width < height) the image in the paper card is being turned.

Expected outcome

Image scales normally

Actual outcome

image is turned so that it is on the side

Live Demo

Steps to reproduce

Insert this pic

Browsers Affected

Cards with heading images have extra space between image and card content

Using an image in the heading of a paper card causes a few extra pixels to be placed between the heading and the card content. This can be seen in the paper-card demo.

Heading Div added regardless

I've added a custom <div class="header paper-card"> and left out the "heading" attribute, but the original heading div is still added to the layout.

Example:
http://jsbin.com/kihatukegi/edit?html,console,output

The div is still taken into account for positioning, and has occasionally caused issues when I tried positioning other elements.
I had issues with styling elements within the paper-card until I used:

paper-card .header {
  display: none;
}

Consider adding <img>-like `width` and `height` attributes

iron-image could support width and height attributes to more closely mirror the API of <img> and allow these properties to be bindable / computed.

paper-card-action area is not sticking to the bottom of paper-card

HTML

 <paper-card class="media-responsive" heading="Nearest customers">
     <div class="card-content">
          <nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
     </div>
     <div class="card-actions card-footer">
          <div style="float:right;text-align:right">
               <a data-route="allcustomers" href="/full-customer-list">Full customer list&nbsp;
                     <iron-icon class="iron-icon-12" icon="fa:arrow-right"></iron-icon></a>
          </div>
          <div class="clear"></div>
     </div>
</paper-card>

CSS

paper-card {
     position: relative !important;
     width: 100%;
     margin-bottom: 10px;
     height: auto !important;
}
.card-actions {
     position: relative !important;
     bottom: 0 !important;
}

Custom Style:

<style is="custom-style">
     paper-card {
            --paper-card-header-color: #000000;
            --paper-card-header-text:{
                font-size:15px;
                margin:0 auto;
            };
            --paper-card-header: {
                /*@apply(--layout-horizontal);
                @apply(--layout-center);*/
                margin:0 auto;
                border-bottom:1px solid #dddddd !important;
                padding:0;
                margin-bottom:0px !important;
            };

            --paper-card-actions {
                border-top: 1px solid #e8e8e8;
                padding: 5px 16px;
                position:relative !important;
                @apply(--paper-card-actions);
            }
        }
</style>

Output (please see attached image)

How can I achieve this?

placeholder images are not showing

I have an same issue where placeholder images are not showing, i've tried different combinations of the paper-card attributes below (based on another github issue) but nothing works. and still nothing shows the place holder i even embeded it as a base 64 URI. any idea?

<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>paper-card</title>

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="./paper-card.html">
</head>
<body>
  <img src="./demo/cafe.png" />
  <paper-card heading="header"
    image="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=1350&h=1350"    fadeImage    preload-image    preloadImage    preload    placeholder="./demo/cafe.png"    placeholderImage="./demo/cafe.png">
    <div class="card-content"><p>Sample content</p></div>
  </paper-card>
</body>
</html>

placeholder-image creates background-repeat

Description

placeholder-image creates background-repeat and tiles image

Expected outcome

Single place holder image should cover area instead of repeat image in a tiled fashion.

Actual outcome

Tiny place holder image repeats

Live Demo

Steps to reproduce

 placeholder-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAHAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAIRAAAQQBAwUAAAAAAAAAAAAAAQACAxEEBQYhEhMzcYH/xAAVAQEBAAAAAAAAAAAAAAAAAAADBf/EABsRAAIBBQAAAAAAAAAAAAAAAAABADAMBAAIRAxEAPwCtOxsmbQ8pskUXbicBTwCHWbv2LJ+rKO2cN5LutvPPjCIot7PXEliPzo//2Q=="

Browsers Affected

Remove old branches

I think that we can remove the old branches:

wrong-readme (already merged)

aria-label cannot be set explicitly on paper-card

Description

The Accessibility section of README.md says the aria-label will be set to the value of the heading attribute by default. However, setting the heading always sets the aria-label whether the aria-label attribute is already defined or not, making it impossible to explicitly define an aria-label for the card.

Expected outcome

The aria-label attribute keeps the value set by the programmer.

Actual outcome

The aria-label attribute is set to the value of the heading attribute.

Live Demo

http://jsbin.com/qisubakiwi/1/edit?html,output

Steps to reproduce

Create a paper-card with a heading attribute and an aria-label attribute (or go to the above url)
Open the page in a web browser.
Inspect the paper-card.
Observe the aria-label attribute is set to the value of the heading attribute (the-heading) instead of the explicitly set aria-label attribute (the-aria-label).

paper-card header looks bolder than in the MD spec

Compare the font-weight of the paper-card in the demo page: https://elements.polymer-project.org/elements/paper-card?view=demo:demo/index.html&active=paper-card

With the font-weight in the Material Design spec: http://www.google.com/design/spec/components/cards.html#cards-usage

Consider optimizing performance

Since users often create many instances of this element, it will especially benefit from performance optimizations. Consider lazily creating optional or user initiated functionality (e.g. paper-material), leveraging behaviors over composition (e.g. paper-material), streamlining styling, and eliminating or simplifying features (e.g. behaviors).

Paper Card's heading is duplicated when dragged

When using paper-card with kendo sortable
http://demos.telerik.com/kendo-ui/sortable/index

The header is somehow duplicated when I drag it

<div class="content">
    <div class="vertical-section-container centered">
        <ul class="container">
            <li class="list-item">
                <paper-card heading="">
                    <div class="card-content">Some content</div><div class="card-actions">
                        <paper-button>Some action</paper-button>
                    </div>
                </paper-card>
            </li>
            <li class="list-item"> <paper-card heading="Me too!"><div class="card-content">Some content</div></paper-card></li>
        </ul>
    </div>
</div>

It's not happening if you keep heading empty or you use image on paper-card

Support Mini-cards

The current paper-card uses a large amount of screen real-estate to display a card. It would be useful if there was a mini-card version similar to what you see in Google Newsstand.

styles not right under native Shadow DOM

bower installing paper-elements doesn't include paper-card

I have the following line in my bower.json file

"paper-elements": "PolymerElements/paper-elements#1.0.1",

despite trying to both bower install and bower update I don't have a paper-card directory in my bower_components directory.

Bower version for 2.0-preview branch

Description

I am trying to use the new 2.0-preview version of Polymer. The paper-card project has a 2.0 branch but it cannot be installed via bower.

Expected outcome

Ability to run bower install [email protected]

Actual outcome

Package not found

Steps to reproduce

Open command line
Run: bower install [email protected]

Browsers Affected

N/A

Workaround

cd bower_components
git clone -b 2.0-preview https://github.com/PolymerElements/paper-card.git

Problem with horizontal align

I use version "1.0.8".
And insert paper-card element and activate developers tools i can see

two blocs of paper card style

paper-card {
display: block;
position: relative;
}

paper-card {
display: inline-block;
position: relative;
box-sizing: border-box;
background: #fff;
border-radius: 2px;
}

And last display style block is overwrite "display:block" and this prevent to align card in center
P.S. I use theme "technology"

Question: <style> inside <template>

I noticed that paper-card has it's <style> tag inside the outermost <template> tag and I'm trying to understand the significance of doing this specifically when the very first paragraph on styling explicitly says don't do this. What effect does this have in the case of paper-card?

ChromeVox reads "image" when traversing over a paper-card in rare circumstances.

Description

ChromeVox reads "image" is rare circumstances when there is no image.

Expected outcome

Image should not be spoken.

Steps to reproduce

This seems to occur when using alt+down to traverse over nested paper-card elements.

Browsers Affected

Add --paper-card-header-background-color variable

Would it be possible to add a variable to control the background-color of .header?
This would be similar to --paper-card-header-color or --paper-card-background-color.

My guess would be adding the following to the .header block styles:

background-color: var(--paper-card-header-background-color, var(--primary-background-color));

I am fairly new to Polymer, so I'm a bit hesitant to rush into making a PR myself without clarifying any extra considerations.

add style customisation over header image

Hi all

I'm using paper-card element in my mobile app.

I needed to customise header image, is it possible adding a custom CSS property to allow this ?

Example

 .header img {
    pointer-events: none;
    @apply(--paper-card-header-image);

Optimize Demo png files

@notwaldorf / @addyosmani look at optimizing donuts.png and home.png. Paper-card went from 28.4 KB to 11.5 MB to download.

issue with php partial reloading and css

If you have a php file that pulls in a card from another file via ajax and injects it into the DOM, the header color will be black, despite what its set to be.

for reference, I've used this method to color the header: --paper-card-header-color: var(--default-primary-color);

edit: i've created a small example explaining the issue better than I can. http://www.mandworks.com/ajaxexample/Home.php . Feel free to go back and forth between the two pages.

Can't set an alt on the header image

Go to: http://output.jsbin.com/muhuru.
The header image does not have any alt text.

Problem with mixin --paper-card-header-image and media queries

I changed the content-fit from the header image inside the card to adjust the content depending of the viewport width, I put the mixin --paper-card-header-image inside of the media query but is applied always.
I know is necessary call the method this.updateStyles() to update the elements on the page, therefore i must create a match media listener to call this.updateStyles().
My simple and reusable solution was fork the repository and add several style class in the paper-card.html, I think is necessary the adding the properties to create an adjustable header image in next updates.

Cannot set placeholder image

<paper-card preload placeholder="/images/placeholder.png" image="/images/[[id]].png" class="flex"> <div class="card-content"> <div class="header">[[name]] </div> <p class='light'>by [[author]]</p> </div> </paper-card>
Despite setting the preload and placeholder properties, if 'image' fails to load, there is still no placeholder shown.

Question: Is there a way to control font-size of headline?

My code looks like :

<paper-card heading="0 Live Campaigns">
	<div class="card-actions">
		<div>
			....
			{{model.CampaignsStats}}
			....
		</div>									  
	</div>
</paper-card>

but I want to increase/decrease the header font size depending on its content size, and also want to center allign the header. I tried to find some reference in your code examples, but couldn't find it.
Any sort of help would be really appreciated.
Thanks in advance :)

Suggestion: the possibility of creating an link to the iron image of the element

I would like to make a suggestion to improve the paper-card element. I think it would be great to make possible create a link to the image inside the element.

Suppose I'm using the paper-card to list options of products to be purchased, I would have to put the link to the product's details in the header or in a button and it would be great to be able to also put the link in the image of the product to make even easier to the user go the the products page.

I believe it wouldn't hard to make this change. Maybe create a element property like "image-link" so you can use it like:

<paper-card image="./images/image1.jpg" image-link="./products/[[computeProductLink(product)]]>

I hope this suggestion will be useful :)

OSX Safari - demo: scrolling of page does not happen

really weird

How to set different header color for nested paper-card?

Hi,

How to set different header color for nested paper-card?
It is always same as parent paper-card header color.

See example: http://jsbin.com/lohogu/edit?html,output

polymer version 1.8 install fail use bower

detail info :::: CONFLICT Unable to find suitable version for polymer

Image collapsed while sizing="cover" with --iron-image-height set, why?

Iron image gets collapsed while the mixin --iron-image-height is set (say 300px) inside paper-card. The image displays correctly only if I set the height inline, but than why the mixin exists (or do I miss something)?

stock paper-card code:

  .header iron-image {
        display: block;
        width: 100%;
        --iron-image-width: 100%;
        --iron-image-height: 300px;
        pointer-events: none;

        @apply --paper-card-header-image;
      }
...

  <div class="header">
      <iron-image
          hidden$="[[!image]]"
          aria-hidden$="[[_isHidden(image)]]"
          src="[[image]]"
          alt="[[alt]]"
          placeholder="[[placeholderImage]]"
          preload="[[preloadImage]]"
          fade="[[fadeImage]]"
          sizing="cover">
        </iron-image>
      <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
    </div>

works only if I set the height inline:

 <div class="header">
      <iron-image
          hidden$="[[!image]]"
          aria-hidden$="[[_isHidden(image)]]"
          src="[[image]]"
          alt="[[alt]]"
          placeholder="[[placeholderImage]]"
          preload="[[preloadImage]]"
          fade="[[fadeImage]]"
          sizing="cover"
          style="height:300px;">
        </iron-image>
      <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
    </div>

As normal behaviour I expect the image to fill the iron-image element with height and width set explicitly and sizing="cover"

Thanks!

Feature request- expand arrow in paper-card

According to Google Design, paper-cards should not contain to much information. In their examples, they show an expand arrow for more information.

This would be a nice feature to have in paper-card. Also, there is no paper expand arrow like the one they use available. I checked iron icons and did not see one similar.

When upgrade to 2.0, `/paper-styles/element-styles/paper-material-styles.html` Not Found

Description

When upgrading to paper-card 2.0, /paper-styles/element-styles/paper-material-styles.html Not Found.

Expected outcome

No error

Actual outcome

GET http://localhost:8081/bower_components/paper-styles/element-styles/paper-material-styles.html 404 (Not Found)
polymer.html:2654 Could not find style data in module named paper-material-styles

Live Demo

N/A

Steps to reproduce

Upgrade from

"paper-card": "PolymerElements/paper-card#^1.1.0",

"paper-card": "PolymerElements/paper-card#^2.0.0",

Browsers Affected

Consider iron-image instead of img

Consider iron-image instead of img. Because we would have the
option to "preload" the image etc.

swipe functionality?

Is swipe functionality being considered for this element? Much like Google Now where you can swipe the card to dismiss

Bug with preloadImage?

Here is my element:

<paper-card preload-image id="card" image="./cdn/default.png">#some stuff</paper-card>

Here is my changeImage function:

imageChange: function(){
                    this.$.card.preloadImage = true;
                    if(this.imageId.length > 0){
                        var self = this
                        setTimeout(function () {
                            self.$.card.image = 'https://xxxx-xxxx-xxxx.c9users.io/image/'+self.imageId+'.png'
                    }, 5000);  
                    }
                }

and here is the result:

Paper-card tries to load image even when not specified

Well, I'm experiencing this problem on Ruby on Rails.
Here's what I've done (if I didn't forget something)

Added the gem "polimer-rails".
Ran rails g polymer:install (after bundling, of course)
Installed paper-card via bower (it's put inside vendor/assets/components)
Added Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components', '**') to config/initializers/assets.rb.

.bowerrc:

{
  "directory": "vendor/assets/components"
}

bower.json:

"dependencies": {
    "paper-card": "PolymerElements/paper-card#~1.0.3"
  }

Inside app/assets/components/application.html.erb:

//= require paper-card/paper-card

The above file is included on application's layout file.

app/assets/javascripts/application.js:

//= require webcomponentsjs/webcomponents.min
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

In my view I use:

paper-card heading="paper card test"
  .card-content Card test

It's written using slim.

As you can see, I did't specify an image. I just inserted some text.

The card gets rendered:

But, I get this when watching the server:

Started GET "/assets/%5B%5Bimage%5D%5D" for 127.0.0.1 at 2015-09-01 04:16:59 -0300

ActionController::RoutingError (No route matches [GET] "/assets/%5B%5Bimage%5D%5D"):
  actionpack (4.2.4) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  web-console (2.2.1) lib/web_console/middleware.rb:39:in `call'
  actionpack (4.2.4) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.2.4) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.2.4) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.2.4) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.2.4) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.2.4) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.2.4) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.2.4) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
  rack (1.6.4) lib/rack/runtime.rb:18:in `call'
  activesupport (4.2.4) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
  rack (1.6.4) lib/rack/lock.rb:17:in `call'
  actionpack (4.2.4) lib/action_dispatch/middleware/static.rb:116:in `call'
  rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
  railties (4.2.4) lib/rails/engine.rb:518:in `call'
  railties (4.2.4) lib/rails/application.rb:165:in `call'
  rack (1.6.4) lib/rack/content_length.rb:15:in `call'
  puma (2.13.4) lib/puma/server.rb:541:in `handle_request'
  puma (2.13.4) lib/puma/server.rb:388:in `process_client'
  puma (2.13.4) lib/puma/server.rb:270:in `block in run'
  puma (2.13.4) lib/puma/thread_pool.rb:106:in `call'
  puma (2.13.4) lib/puma/thread_pool.rb:106:in `block in spawn_thread'


  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (1.3ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/routes/_route.html.erb (0.9ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/routes/_table.html.erb (1.2ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.1ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/rescues/routing_error.html.erb within rescues/layout (24.7ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/_markup.html.erb (0.4ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/_inner_console_markup.html.erb within layouts/inlined_string (0.2ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/_prompt_box_markup.html.erb within layouts/inlined_string (0.3ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/style.css.erb within layouts/inlined_string (0.3ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/console.js.erb within layouts/javascript (17.7ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/main.js.erb within layouts/javascript (0.2ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/error_page.js.erb within layouts/javascript (0.4ms)
  Rendered /home/leonardo/.rvm/gems/ruby-2.2.1/gems/web-console-2.2.1/lib/web_console/templates/index.html.erb (34.3ms)

Problem with mixins in production builds

Not sure if this is the right place to post this. There is a problem when minifying polymer mixins like in polymer starter kit that those with

    width: 100%;
   --iron-image-width: 100%;

will result to a mess like this

    width: 100% --iron-image-width: 100%;

example can be found on https://github.com/PolymerElements/paper-card/blob/master/paper-card.html#L87

[ERROR] :host ::content in 'card-action' and 'card-content'

I have bower installed paper-card library but i have met the padding issue and classes are not included as tried according to docs of element-polymer-project.org.

Error Screenshot as below:

I managed to make workaround fix by removing :host ::content in both classes in paper-card.html

Tested with another colleague's site yet met same problem. Did someone manage replicate the issue?

Thanks

Rounder corners

According to the spec cards should have rounded corners. Border radius is set for the host:

:host {
    border-radius: 2px;
}

However paper-material#shadow element prevents them from actually being rounded.

### Before

### After

2.0-preview throw an error Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

Description

As using 2.0-preview branch, paper-card doesn't work on Chrome. It seems to due to adding class paper-material in created callback. If we do so in ready callback, any error is not thrown.

For paper-button, the same error appears.

Expected outcome

It should not throw any error.

Actual outcome

It outputs error message

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

in console.

Steps to reproduce

Use paper-card in any document.

polymerelements / paper-card Goto Github PK

paper-card's Introduction

<paper-card>

Usage

Installation

In an html file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

paper-card's People

Contributors

Stargazers

Watchers

Forkers

paper-card's Issues

Description

Expected outcome

Actual outcome

Browsers Affected

Polymer 1.1

Update:

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Description

Expected outcome

Actual outcome

Steps to reproduce

Browsers Affected

Workaround

Description

Expected outcome

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Steps to reproduce

Browsers Affected

Recommend Projects

Recommend Topics

Recommend Org

Jobs