{"action":"created","issue":{"url":"https://api.github.com/repos/concourse/concourse/issues/2130","repository_url":"https://api.github.com/repos/concourse/concourse","labels_url":"https://api.github.com/repos/concourse/concourse/issues/2130/labels{/name}","comments_url":"https://api.github.com/repos/concourse/concourse/issues/2130/comments","events_url":"https://api.github.com/repos/concourse/concourse/issues/2130/events","html_url":"https://github.com/concourse/concourse/issues/2130","id":311629845,"number":2130,"title":"Concourse Groups bar in the web view should be responsive","user":{"login":"jama-pivotal","id":19274230,"avatar_url":"https://avatars3.githubusercontent.com/u/19274230?v=4","gravatar_id":"","url":"https://api.github.com/users/jama-pivotal","html_url":"https://github.com/jama-pivotal","followers_url":"https://api.github.com/users/jama-pivotal/followers","following_url":"https://api.github.com/users/jama-pivotal/following{/other_user}","gists_url":"https://api.github.com/users/jama-pivotal/gists{/gist_id}","starred_url":"https://api.github.com/users/jama-pivotal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jama-pivotal/subscriptions","organizations_url":"https://api.github.com/users/jama-pivotal/orgs","repos_url":"https://api.github.com/users/jama-pivotal/repos","events_url":"https://api.github.com/users/jama-pivotal/events{/privacy}","received_events_url":"https://api.github.com/users/jama-pivotal/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-05T14:18:05Z","updated_at":"2018-04-05T20:28:57Z","closed_at":null,"author_association":"MEMBER","body":"# The Problem\r\nThis seems to be a long-standing issue but I couldn't find the original for it, so here it goes.\r\n\r\nThe current Concourse Groups bar is very useful but it doesn't behave very nicely once the width of the web view is used up.\r\n\r\nFor example, here is a set of pipeline groupings from the docs team, one of which is used to deploy the official concourse docs. This is how it appears on my 2560x1440 display\r\n\r\n![screen shot 2018-04-05 at 10 19 30 am](https://user-images.githubusercontent.com/19274230/38371598-d981c732-38ba-11e8-9812-b46d639f2b01.png)\r\n\r\nBut as I scale down the width of my screen it starts to get wonky\r\n![screen shot 2018-04-05 at 10 20 34 am](https://user-images.githubusercontent.com/19274230/38371657-ffb3191a-38ba-11e8-8b0b-cd61966e935d.png)\r\n\r\nNot only is it aesthetically ugly, but the overflowing content makes it very difficult, if not impossible to click on certain button. The trigger (+) / Logout / group is all smushed up into one giant mess of HTML\r\n\r\n![screen shot 2018-04-05 at 10 21 45 am](https://user-images.githubusercontent.com/19274230/38371760-36580822-38bb-11e8-93e2-edf79a744c76.png)\r\n\r\n# Proposal\r\nThere's a few options that I can think of:\r\n\r\n1) Just expand the height of the nav bar and push everything down (bad mockup below):\r\n\r\n![screen shot 2018-04-05 at 10 25 13 am](https://user-images.githubusercontent.com/19274230/38371950-b443d4f0-38bb-11e8-936d-743fa12533e0.png)\r\n\r\n2) Hide the full name of the group with ellipses (...) in order to hide the group names and maintain height\r\n\r\n![screen shot 2018-04-05 at 10 27 14 am](https://user-images.githubusercontent.com/19274230/38372056-ee4c4272-38bb-11e8-9468-5d9b4da25c27.png)\r\n\r\n3) some combination of the above?\r\n\r\ncc @Lindsayauchin and @sampeinado for ideation possibilities! \r\n"},"comment":{"url":"https://api.github.com/repos/concourse/concourse/issues/comments/379066370","html_url":"https://github.com/concourse/concourse/issues/2130#issuecomment-379066370","issue_url":"https://api.github.com/repos/concourse/concourse/issues/2130","id":379066370,"user":{"login":"Lindsayauchin","id":27746614,"avatar_url":"https://avatars1.githubusercontent.com/u/27746614?v=4","gravatar_id":"","url":"https://api.github.com/users/Lindsayauchin","html_url":"https://github.com/Lindsayauchin","followers_url":"https://api.github.com/users/Lindsayauchin/followers","following_url":"https://api.github.com/users/Lindsayauchin/following{/other_user}","gists_url":"https://api.github.com/users/Lindsayauchin/gists{/gist_id}","starred_url":"https://api.github.com/users/Lindsayauchin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Lindsayauchin/subscriptions","organizations_url":"https://api.github.com/users/Lindsayauchin/orgs","repos_url":"https://api.github.com/users/Lindsayauchin/repos","events_url":"https://api.github.com/users/Lindsayauchin/events{/privacy}","received_events_url":"https://api.github.com/users/Lindsayauchin/received_events","type":"User","site_admin":false},"created_at":"2018-04-05T20:28:57Z","updated_at":"2018-04-05T20:28:57Z","author_association":"NONE","body":"## **Proposal:**\r\n@sampeinado and I propose a solution that moves groups out of the top navigation bar and into a new subhead that can expand responsively so we can accommodate both long group names and grow and shrink with the browser. This new subhead area will increase as the number of groups grows and flows to the next row. \r\n\r\nAs seen in this example below. \r\n\r\n![pipeline_groups_v1](https://user-images.githubusercontent.com/27746614/38387037-93f6ee52-38e4-11e8-8f2e-d10b5f1cf3a7.png)\r\n\r\n\r\nSelect to display the group in the pipeline view from the group name, unselect group name to hide it from the pipeline view (same as current behaviour). Select ALL groups with the 'all' button. \r\n\r\n![screen shot 2018-04-05 at 3 14 54 pm](https://user-images.githubusercontent.com/27746614/38387057-a387d6ba-38e4-11e8-95e1-82d1ca767205.png)\r\n\r\n- [ ] Button style on select: 1px #979797 border, 10 px padding inside, font 12px #ffffff\r\n- [ ] Subhead background colour:#0C1217\r\n- [ ] Button style unselected: 1px #979797 fill, alpha: 10% with 10 px padding inside,  font 12px #ffffff alpha : 40%\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"Lindsayauchin"}}