{"action":"created","issue":{"url":"https://api.github.com/repos/noopkat/electric-io/issues/42","repository_url":"https://api.github.com/repos/noopkat/electric-io","labels_url":"https://api.github.com/repos/noopkat/electric-io/issues/42/labels{/name}","comments_url":"https://api.github.com/repos/noopkat/electric-io/issues/42/comments","events_url":"https://api.github.com/repos/noopkat/electric-io/issues/42/events","html_url":"https://github.com/noopkat/electric-io/pull/42","id":326847156,"node_id":"MDExOlB1bGxSZXF1ZXN0MTkwODA1MTQ3","number":42,"title":"Add show/hide functionality to Settings pane","user":{"login":"escherina","id":14368631,"node_id":"MDQ6VXNlcjE0MzY4NjMx","avatar_url":"https://avatars1.githubusercontent.com/u/14368631?v=4","gravatar_id":"","url":"https://api.github.com/users/escherina","html_url":"https://github.com/escherina","followers_url":"https://api.github.com/users/escherina/followers","following_url":"https://api.github.com/users/escherina/following{/other_user}","gists_url":"https://api.github.com/users/escherina/gists{/gist_id}","starred_url":"https://api.github.com/users/escherina/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/escherina/subscriptions","organizations_url":"https://api.github.com/users/escherina/orgs","repos_url":"https://api.github.com/users/escherina/repos","events_url":"https://api.github.com/users/escherina/events{/privacy}","received_events_url":"https://api.github.com/users/escherina/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-05-27T20:21:04Z","updated_at":"2018-06-10T09:15:24Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/noopkat/electric-io/pulls/42","html_url":"https://github.com/noopkat/electric-io/pull/42","diff_url":"https://github.com/noopkat/electric-io/pull/42.diff","patch_url":"https://github.com/noopkat/electric-io/pull/42.patch"},"body":"Addresses #11: Support hiding of settings pane.\r\n\r\nI've added a toggle button to the Settings pane that allows the user to show and hide the card at will.\r\n\r\n**Accessibility**\r\n- I'm using `aria-expanded` to let screen-readers know if the pane is expanded or collapsed.\r\n- The button is labelled with `aria-labelledby` which points to a screen-reader-only element inside the button, which reads either \"Close settings panel\" or \"Open settings panel\".\r\n- The icons are completely hidden from screen-readers with `aria-hidden`.\r\n- For keyboard-only users, the title of the pane (\"Settings\") appears when the button is focused. It also shows on hover. This does mean that immediately after closing the pane, the title is shown until the user clicks/tabs away, as the button is still focused.\r\n\r\n**Note on animation**\r\nIt would be nice to animate the opening and closing of the card, and I considered animating the size of the pane using the `scale()` transform, but this would also animate the scale of anything inside the card. There are ways to work around this, but rather than putting a lot of effort in, I thought it would be better to discuss animation and to add it later if needed.\r\n\r\n**Minor style refactor**\r\nI've removed `id=\"settings\"` from the pane and instead moved everything into class-based styling, to make it easier to override in future. I've also moved all the settings-related styling into its own section in the `style.css` file. I've added a couple of wrapper `<div>` elements and some additional classes inside the template t\r\n\r\n**Other thoughts:**\r\n- The styling may need some work - e.g. I've left the original button focus style (2px black border) in place.\r\n- For the icons, I've used the gear emoji (⚙️) and the `&rarr;` right arrow symbol (&rarr;). However, we could use svg icons, which might look better. We could also use a &times; symbol rather than an arrow - but since the pane isn't completely dismissed, I thought that might be confusing."},"comment":{"url":"https://api.github.com/repos/noopkat/electric-io/issues/comments/396033854","html_url":"https://github.com/noopkat/electric-io/pull/42#issuecomment-396033854","issue_url":"https://api.github.com/repos/noopkat/electric-io/issues/42","id":396033854,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NjAzMzg1NA==","user":{"login":"escherina","id":14368631,"node_id":"MDQ6VXNlcjE0MzY4NjMx","avatar_url":"https://avatars1.githubusercontent.com/u/14368631?v=4","gravatar_id":"","url":"https://api.github.com/users/escherina","html_url":"https://github.com/escherina","followers_url":"https://api.github.com/users/escherina/followers","following_url":"https://api.github.com/users/escherina/following{/other_user}","gists_url":"https://api.github.com/users/escherina/gists{/gist_id}","starred_url":"https://api.github.com/users/escherina/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/escherina/subscriptions","organizations_url":"https://api.github.com/users/escherina/orgs","repos_url":"https://api.github.com/users/escherina/repos","events_url":"https://api.github.com/users/escherina/events{/privacy}","received_events_url":"https://api.github.com/users/escherina/received_events","type":"User","site_admin":false},"created_at":"2018-06-10T09:15:24Z","updated_at":"2018-06-10T09:15:24Z","author_association":"COLLABORATOR","body":"Merging this in now - it was primarily whitespace, but also needed to add in the new App Title field.\r\n\r\n![bitmoji](https://render.bitstrips.com/v2/cpanel/8ff73750-c6d3-470e-afee-904080b9dfe9-fe2b87c9-121a-46aa-8177-02221b1823cc-v1.png?transparent=1&palette=1&width=246)"}}
{"actor":{"display_login":"escherina"}}