{"action":"created","issue":{"url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/31","labels_url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/31/comments","events_url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/31/events","html_url":"https://github.com/FirehoseCommunity/LightningTalkTopics/pull/31","id":112822271,"number":31,"title":"Styling for cards on index page","user":{"login":"cynrick","id":7232696,"avatar_url":"https://avatars.githubusercontent.com/u/7232696?v=3","gravatar_id":"","url":"https://api.github.com/users/cynrick","html_url":"https://github.com/cynrick","followers_url":"https://api.github.com/users/cynrick/followers","following_url":"https://api.github.com/users/cynrick/following{/other_user}","gists_url":"https://api.github.com/users/cynrick/gists{/gist_id}","starred_url":"https://api.github.com/users/cynrick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cynrick/subscriptions","organizations_url":"https://api.github.com/users/cynrick/orgs","repos_url":"https://api.github.com/users/cynrick/repos","events_url":"https://api.github.com/users/cynrick/events{/privacy}","received_events_url":"https://api.github.com/users/cynrick/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-10-22T14:59:12Z","updated_at":"2015-10-24T14:03:38Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/pulls/31","html_url":"https://github.com/FirehoseCommunity/LightningTalkTopics/pull/31","diff_url":"https://github.com/FirehoseCommunity/LightningTalkTopics/pull/31.diff","patch_url":"https://github.com/FirehoseCommunity/LightningTalkTopics/pull/31.patch"},"body":"I followed the suggested layout for the cards shown for issue #3 and did the following:\r\n\r\n- Edited the structure in _talk.html.erb\r\n  - the previous \"votes\" text and \"+1\" button is now a thumbs up button with a badge showing the total number of votes\r\n  - the previous \"assigned\" link is now a button on the bottom right with the same functionality\r\n- Edited main.scss\r\n  - kept original ice class as that is also used in show.html.erb\r\n  - new styles declared for index.html.erb in ice-index class\r\n\r\nScreenshot of the new index cards:\r\n![indexcardsample](https://cloud.githubusercontent.com/assets/7232696/10668657/e7ebe05e-790f-11e5-818e-7c2c0dc70e38.png)\r\n"},"comment":{"url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/comments/150815382","html_url":"https://github.com/FirehoseCommunity/LightningTalkTopics/pull/31#issuecomment-150815382","issue_url":"https://api.github.com/repos/FirehoseCommunity/LightningTalkTopics/issues/31","id":150815382,"user":{"login":"cynrick","id":7232696,"avatar_url":"https://avatars.githubusercontent.com/u/7232696?v=3","gravatar_id":"","url":"https://api.github.com/users/cynrick","html_url":"https://github.com/cynrick","followers_url":"https://api.github.com/users/cynrick/followers","following_url":"https://api.github.com/users/cynrick/following{/other_user}","gists_url":"https://api.github.com/users/cynrick/gists{/gist_id}","starred_url":"https://api.github.com/users/cynrick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cynrick/subscriptions","organizations_url":"https://api.github.com/users/cynrick/orgs","repos_url":"https://api.github.com/users/cynrick/repos","events_url":"https://api.github.com/users/cynrick/events{/privacy}","received_events_url":"https://api.github.com/users/cynrick/received_events","type":"User","site_admin":false},"created_at":"2015-10-24T14:03:38Z","updated_at":"2015-10-24T14:03:38Z","body":"Here are a few adjustments I made to the CSS:\r\n- adjusted the bootstrap col widths as suggested and removed overflow: scroll\r\n- added col-sm to the div with ice-index class to cover for tablets (two cards per row)\r\n- removed flexbox properties\r\n- buttons now stack on top of each other for xs size viewports\r\n- button size is reduced to 75% for smaller screen widths (when one card per row)\r\n\r\nDesign is a weakness of mine (trying to improve), but I thought that it might be easier to view the cards if they were aligned sided by side rather than like Pinterest since the cards don't contain any images. Thus said, I tried several ways to get the cards to align properly purely in CSS, but everything I tried was of no avail.\r\n\r\nI ended up creating a JS file (index_cards.js) to help with the styling and functionality:\r\n- when the index page is loaded, the height of the largest card (containing most content) is applied to all cards for horizontal alignment\r\n- when the browser is resized, the height property of each card is reverted to the default of auto to take care of overflow problems during resizing\r\n- the height of each card is readjusted for horizontal alignment again after browser resizing event ends\r\n\r\nI left the overall design of the cards the same for now, and mainly dealt with the alignment of the elements. As always, feedback is most welcome!"}}