{"action":"created","issue":{"url":"https://api.github.com/repos/SAP/techne/issues/754","repository_url":"https://api.github.com/repos/SAP/techne","labels_url":"https://api.github.com/repos/SAP/techne/issues/754/labels{/name}","comments_url":"https://api.github.com/repos/SAP/techne/issues/754/comments","events_url":"https://api.github.com/repos/SAP/techne/issues/754/events","html_url":"https://github.com/SAP/techne/issues/754","id":238057596,"number":754,"title":"Review Cards Implementation","user":{"login":"joseegm","id":22662903,"avatar_url":"https://avatars2.githubusercontent.com/u/22662903?v=3","gravatar_id":"","url":"https://api.github.com/users/joseegm","html_url":"https://github.com/joseegm","followers_url":"https://api.github.com/users/joseegm/followers","following_url":"https://api.github.com/users/joseegm/following{/other_user}","gists_url":"https://api.github.com/users/joseegm/gists{/gist_id}","starred_url":"https://api.github.com/users/joseegm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joseegm/subscriptions","organizations_url":"https://api.github.com/users/joseegm/orgs","repos_url":"https://api.github.com/users/joseegm/repos","events_url":"https://api.github.com/users/joseegm/events{/privacy}","received_events_url":"https://api.github.com/users/joseegm/received_events","type":"User","site_admin":false},"labels":[{"id":573577180,"url":"https://api.github.com/repos/SAP/techne/labels/library","name":"library","color":"0e8a16","default":false},{"id":629703026,"url":"https://api.github.com/repos/SAP/techne/labels/review","name":"review","color":"0052cc","default":false}],"state":"open","locked":false,"assignee":{"login":"xak","id":424119,"avatar_url":"https://avatars2.githubusercontent.com/u/424119?v=3","gravatar_id":"","url":"https://api.github.com/users/xak","html_url":"https://github.com/xak","followers_url":"https://api.github.com/users/xak/followers","following_url":"https://api.github.com/users/xak/following{/other_user}","gists_url":"https://api.github.com/users/xak/gists{/gist_id}","starred_url":"https://api.github.com/users/xak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xak/subscriptions","organizations_url":"https://api.github.com/users/xak/orgs","repos_url":"https://api.github.com/users/xak/repos","events_url":"https://api.github.com/users/xak/events{/privacy}","received_events_url":"https://api.github.com/users/xak/received_events","type":"User","site_admin":false},"assignees":[{"login":"xak","id":424119,"avatar_url":"https://avatars2.githubusercontent.com/u/424119?v=3","gravatar_id":"","url":"https://api.github.com/users/xak","html_url":"https://github.com/xak","followers_url":"https://api.github.com/users/xak/followers","following_url":"https://api.github.com/users/xak/following{/other_user}","gists_url":"https://api.github.com/users/xak/gists{/gist_id}","starred_url":"https://api.github.com/users/xak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xak/subscriptions","organizations_url":"https://api.github.com/users/xak/orgs","repos_url":"https://api.github.com/users/xak/repos","events_url":"https://api.github.com/users/xak/events{/privacy}","received_events_url":"https://api.github.com/users/xak/received_events","type":"User","site_admin":false},{"login":"joseegm","id":22662903,"avatar_url":"https://avatars2.githubusercontent.com/u/22662903?v=3","gravatar_id":"","url":"https://api.github.com/users/joseegm","html_url":"https://github.com/joseegm","followers_url":"https://api.github.com/users/joseegm/followers","following_url":"https://api.github.com/users/joseegm/following{/other_user}","gists_url":"https://api.github.com/users/joseegm/gists{/gist_id}","starred_url":"https://api.github.com/users/joseegm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joseegm/subscriptions","organizations_url":"https://api.github.com/users/joseegm/orgs","repos_url":"https://api.github.com/users/joseegm/repos","events_url":"https://api.github.com/users/joseegm/events{/privacy}","received_events_url":"https://api.github.com/users/joseegm/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2017-06-23T07:00:53Z","updated_at":"2017-06-29T22:07:21Z","closed_at":null,"body":"Goal: Check for the deployed result of the Cards implementation against the design\r\n\r\n**Cards Design implementation**: #678\r\n**Cards implementation details**: #709\r\nDeployed: http://sap.github.io/techne/www/components/cards.html - stand June 23th. \r\n\r\n### Results\r\n**Commons cards**: https://github.com/SAP/techne/issues/678#issuecomment-305724490\r\n  1. Label on the read only card: color don't match the design\r\n\r\n| Design | Implementation |\r\n|---|---|\r\n| ![screen shot 2017-06-23 at 09 19 56](https://user-images.githubusercontent.com/22662903/27470656-498d05f2-57f5-11e7-916d-900c03f0cde2.png)  | ![screen shot 2017-06-23 at 09 20 13](https://user-images.githubusercontent.com/22662903/27470663-529d3658-57f5-11e7-94e0-fbb49177359e.png) |\r\n  2. Card showcasing a different layout is missing\r\n  ![screen shot 2017-06-23 at 09 11 54](https://user-images.githubusercontent.com/22662903/27470421-154d3d30-57f4-11e7-923f-371dda70270b.png)\r\n  3. When reducing the card width to 370px. The labels dont's wrap correctly\r\n\r\n  | Design | Implementation |\r\n  |---|---|\r\n  |  ![screen shot 2017-06-23 at 09 17 01](https://user-images.githubusercontent.com/22662903/27470561-d9860f60-57f4-11e7-9a96-edcb02ca3bbe.png)  | ![screen shot 2017-06-23 at 09 15 10](https://user-images.githubusercontent.com/22662903/27470546-ce78114a-57f4-11e7-9d7e-26b199f8ecd0.png)  |\r\n   \r\n**Cards With Media**\r\n1. Media element is not square\r\n\r\n | Design | Implementation |\r\n  |---|---|\r\n  | ![screen shot 2017-06-23 at 09 25 08](https://user-images.githubusercontent.com/22662903/27470883-2f403d6c-57f6-11e7-9dc6-b40bc3731849.png) | ![screen shot 2017-06-23 at 09 26 18](https://user-images.githubusercontent.com/22662903/27470906-39bd22a0-57f6-11e7-9aaa-a93b1c10bbc0.png) |\r\n\r\n2. Missing Card with image on top\r\n3. Missing Example where the image is smaller than the place holder element\r\n  ![screen shot 2017-06-23 at 09 32 24](https://user-images.githubusercontent.com/22662903/27471103-e7fb088c-57f6-11e7-8b29-acb9ca8b67b0.png)\r\n4. For the implementation please use these Hybris stock images to test the implementation\r\n    - **Square**: https://techne.yaas.io/images/product-thumbnail.png\r\n    - **Portrait**: https://techne.yaas.io/images/product-thumbnail-tall.png\r\n    - **Landscape**: https://techne.yaas.io/images/product-thumbnail-wide.png\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/SAP/techne/issues/comments/312121957","html_url":"https://github.com/SAP/techne/issues/754#issuecomment-312121957","issue_url":"https://api.github.com/repos/SAP/techne/issues/754","id":312121957,"user":{"login":"xak","id":424119,"avatar_url":"https://avatars2.githubusercontent.com/u/424119?v=3","gravatar_id":"","url":"https://api.github.com/users/xak","html_url":"https://github.com/xak","followers_url":"https://api.github.com/users/xak/followers","following_url":"https://api.github.com/users/xak/following{/other_user}","gists_url":"https://api.github.com/users/xak/gists{/gist_id}","starred_url":"https://api.github.com/users/xak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xak/subscriptions","organizations_url":"https://api.github.com/users/xak/orgs","repos_url":"https://api.github.com/users/xak/repos","events_url":"https://api.github.com/users/xak/events{/privacy}","received_events_url":"https://api.github.com/users/xak/received_events","type":"User","site_admin":false},"created_at":"2017-06-29T22:07:21Z","updated_at":"2017-06-29T22:07:21Z","body":"The applicable changes have been implemented ... see #776 \r\n\r\n## Overall changes\r\nAfter looking at the current card implementation and at the [\"alternate\" use case](https://sapse.invisionapp.com/d/main#/projects/boards/5484242/165700287) for Cards, I decided to make the button option required just as the current cards require `cardRow cardRowClickable` to enable the effects. So now the static/readonly card becomes the base component.\r\n\r\nCommon card\r\n- Label has been adjusted to match the design. A colored label here, however, would be allowed. Note, there is nothing coded in the Cards for to indicate status, a dev would need to use the appropriate `label` to indicate status. I'm just simulating the colors with helper classes. This will be changed once we complete `label`s\r\n- The \"alternate\" card layout is now included. I'm viewing this as a custom usage of cards. As long as you include the `__content` element you get the padding but you can bring your own custom HTML to the body of the card. The content shown looks close to a \"readonly\" form field, once those are complete this markup example can change from the simulated code.\r\n- Leo and I have discussed the labels for the Cards and decided against using a formal divider. Devs will be able to use a pipe `|` between the statuses. It is hard to enforce presentational dividers ([see comments](https://sapse.invisionapp.com/d/main#/console/11153756/239183941/comments/82884798)). The `__status` element is just a container so labels inside will be independent.  If this is a very common use case, we can revisit it with the Card groups when we see responsive behavior.\r\n\r\n## Cards with media\r\n- Only the icon card was part of this implementation task — https://sapse.invisionapp.com/share/DTBXJCSJW#/screens/239183942\r\n- Updated with Hybris stock image.\r\n\r\n"}}
{"actor":{"display_login":"xak"}}