{"action":"created","issue":{"url":"https://api.github.com/repos/distantnative/panel-bar/issues/130","labels_url":"https://api.github.com/repos/distantnative/panel-bar/issues/130/labels{/name}","comments_url":"https://api.github.com/repos/distantnative/panel-bar/issues/130/comments","events_url":"https://api.github.com/repos/distantnative/panel-bar/issues/130/events","html_url":"https://github.com/distantnative/panel-bar/issues/130","id":111772021,"number":130,"title":"Solution - Controlling gallery width with pure CSS","user":{"login":"jenstornell","id":927011,"avatar_url":"https://avatars.githubusercontent.com/u/927011?v=3","gravatar_id":"","url":"https://api.github.com/users/jenstornell","html_url":"https://github.com/jenstornell","followers_url":"https://api.github.com/users/jenstornell/followers","following_url":"https://api.github.com/users/jenstornell/following{/other_user}","gists_url":"https://api.github.com/users/jenstornell/gists{/gist_id}","starred_url":"https://api.github.com/users/jenstornell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jenstornell/subscriptions","organizations_url":"https://api.github.com/users/jenstornell/orgs","repos_url":"https://api.github.com/users/jenstornell/repos","events_url":"https://api.github.com/users/jenstornell/events{/privacy}","received_events_url":"https://api.github.com/users/jenstornell/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/distantnative/panel-bar/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/distantnative/panel-bar/milestones/2","html_url":"https://github.com/distantnative/panel-bar/milestones/v1.0%20-%20Polishing%20a%20first%20complete%20state","labels_url":"https://api.github.com/repos/distantnative/panel-bar/milestones/2/labels","id":1290556,"number":2,"title":"v1.0 - Polishing a first complete state","description":"","creator":{"login":"distantnative","id":3788865,"avatar_url":"https://avatars.githubusercontent.com/u/3788865?v=3","gravatar_id":"","url":"https://api.github.com/users/distantnative","html_url":"https://github.com/distantnative","followers_url":"https://api.github.com/users/distantnative/followers","following_url":"https://api.github.com/users/distantnative/following{/other_user}","gists_url":"https://api.github.com/users/distantnative/gists{/gist_id}","starred_url":"https://api.github.com/users/distantnative/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/distantnative/subscriptions","organizations_url":"https://api.github.com/users/distantnative/orgs","repos_url":"https://api.github.com/users/distantnative/repos","events_url":"https://api.github.com/users/distantnative/events{/privacy}","received_events_url":"https://api.github.com/users/distantnative/received_events","type":"User","site_admin":false},"open_issues":10,"closed_issues":4,"state":"open","created_at":"2015-09-04T14:50:09Z","updated_at":"2015-10-16T11:32:32Z","due_on":null,"closed_at":null},"comments":14,"created_at":"2015-10-16T06:46:52Z","updated_at":"2015-10-16T12:46:13Z","closed_at":null,"body":"I have done some testing to see if it's possible to make the gallery container \"feel\" how many images there are and adapt to that and I succeeded.\r\n\r\n### Autoadapt 3 images\r\n\r\n![image](https://cloud.githubusercontent.com/assets/927011/10535244/63a9ce24-73e1-11e5-83ed-9abb4ca18c03.png)\r\n\r\n### Autoadapt 4 images\r\n\r\nWe don't have 4 images in a row. Just tried out the concept.\r\n\r\n![image](https://cloud.githubusercontent.com/assets/927011/10535250/70c83bcc-73e1-11e5-954f-e12b9c61452b.png)\r\n\r\n### Solution explained\r\n\r\nThree dots means that keep what's inside, just add.\r\n\r\n```\r\n.panelbar-fileviewer__grid--default {\r\n    ...\r\n    white-space: nowrap;\r\n}\r\n\r\n.panelbar-fileviewer__grid--default .panelbar-fileviewer__item {\r\n    width: 150px;\r\n    display: inline-block;\r\n}\r\n```\r\n\r\n### Breaking at 3 images\r\n\r\nWe want to break with 3 images in a row and that is done with a nth-child(3) or what it would be.\r\n\r\n### Benefits\r\n\r\n- What can be done with just CSS should probably be done with just pure CSS.\r\n- Less PHP code and not so much more CSS code.\r\n- Better separation between PHP and CSS.\r\n- Easier to search for CSS errors in the DOM. No more fiddling with classes."},"comment":{"url":"https://api.github.com/repos/distantnative/panel-bar/issues/comments/148707267","html_url":"https://github.com/distantnative/panel-bar/issues/130#issuecomment-148707267","issue_url":"https://api.github.com/repos/distantnative/panel-bar/issues/130","id":148707267,"user":{"login":"distantnative","id":3788865,"avatar_url":"https://avatars.githubusercontent.com/u/3788865?v=3","gravatar_id":"","url":"https://api.github.com/users/distantnative","html_url":"https://github.com/distantnative","followers_url":"https://api.github.com/users/distantnative/followers","following_url":"https://api.github.com/users/distantnative/following{/other_user}","gists_url":"https://api.github.com/users/distantnative/gists{/gist_id}","starred_url":"https://api.github.com/users/distantnative/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/distantnative/subscriptions","organizations_url":"https://api.github.com/users/distantnative/orgs","repos_url":"https://api.github.com/users/distantnative/repos","events_url":"https://api.github.com/users/distantnative/events{/privacy}","received_events_url":"https://api.github.com/users/distantnative/received_events","type":"User","site_admin":false},"created_at":"2015-10-16T12:46:13Z","updated_at":"2015-10-16T12:46:13Z","body":"Atm I think best bet would be to find a way with floating elements that expands the parent's width. Cause then I could say e.g. every 4th element `clear: left`."}}