{"action":"created","issue":{"url":"https://api.github.com/repos/teusbenschop/bibledit/issues/99","repository_url":"https://api.github.com/repos/teusbenschop/bibledit","labels_url":"https://api.github.com/repos/teusbenschop/bibledit/issues/99/labels{/name}","comments_url":"https://api.github.com/repos/teusbenschop/bibledit/issues/99/comments","events_url":"https://api.github.com/repos/teusbenschop/bibledit/issues/99/events","html_url":"https://github.com/teusbenschop/bibledit/pull/99","id":143693585,"number":99,"title":"[WIP] Refactor layout code using border-box sizing","user":{"login":"alerque","id":173595,"avatar_url":"https://avatars.githubusercontent.com/u/173595?v=3","gravatar_id":"","url":"https://api.github.com/users/alerque","html_url":"https://github.com/alerque","followers_url":"https://api.github.com/users/alerque/followers","following_url":"https://api.github.com/users/alerque/following{/other_user}","gists_url":"https://api.github.com/users/alerque/gists{/gist_id}","starred_url":"https://api.github.com/users/alerque/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alerque/subscriptions","organizations_url":"https://api.github.com/users/alerque/orgs","repos_url":"https://api.github.com/users/alerque/repos","events_url":"https://api.github.com/users/alerque/events{/privacy}","received_events_url":"https://api.github.com/users/alerque/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":22,"created_at":"2016-03-26T11:39:13Z","updated_at":"2016-03-26T16:17:10Z","closed_at":"2016-03-26T11:52:27Z","pull_request":{"url":"https://api.github.com/repos/teusbenschop/bibledit/pulls/99","html_url":"https://github.com/teusbenschop/bibledit/pull/99","diff_url":"https://github.com/teusbenschop/bibledit/pull/99.diff","patch_url":"https://github.com/teusbenschop/bibledit/pull/99.patch"},"body":"There was a time we had to fight 100% of anything being wider than its parent. That time has past. The CSS box sizing model [has been fixed](https://css-tricks.com/box-sizing/) for a while now. Switching to it makes all sorts of things easier and obsoletes a lot of assorted layout and style hacks.\r\n\r\nThis is a work in progress, but I thought I'd  open the conversation now because I don't know what all I need to test for. So far this set of fixes does more than one thing:\r\n\r\n1. It switches to a border-box model. This means that 100% of a container is 100% of its parent, not of the window.  Margins, borders and padding are _inside_ the box not outside.\r\n\r\n   In order to make good use this, all the workbench sizes need to be refactored so that all the sizes add up to 100% instead of  something arbitrarily less than that.\r\n\r\n1. It switches to a fixed height top bar so that the page doesn't change layout as items in the menu change.\r\n\r\n   This isn't finished as I would like to cleanup the menu system using CSS instead of page rebuilds. Right now the menu is a royal pain to use and look around the app. If you know what you want already it works, but if you are exploring it's confusing as can be.\r\n\r\n   I would like to refactor it so that the whole menu structure is always loaded in the page and CSS rules highlight the active item, show/hide the right child menus, and obsolete the breadcrumbs system. The layout changes here are just a band-aid to stay functional until those changes make it look and work better.\r\n\r\n1. Cleanup other odds and ends like how the splash is composed, what containers generate margins so they  are more consistent overall, etc.\r\n\r\nKnown todo items before merging:\r\n\r\n - [x] Fix default workbench layouts\r\n - [x] Check print layout\r\n - [x] Check mobile layouts\r\n - [x] Fix font size jump increments\r\n - [ ] Make sure scrolling works across all platforms\r\n - [x] Purge any remaining height/width hacks\r\n\r\nWhat else needs to be considered to roll this out?"},"comment":{"url":"https://api.github.com/repos/teusbenschop/bibledit/issues/comments/201879131","html_url":"https://github.com/teusbenschop/bibledit/pull/99#issuecomment-201879131","issue_url":"https://api.github.com/repos/teusbenschop/bibledit/issues/99","id":201879131,"user":{"login":"alerque","id":173595,"avatar_url":"https://avatars.githubusercontent.com/u/173595?v=3","gravatar_id":"","url":"https://api.github.com/users/alerque","html_url":"https://github.com/alerque","followers_url":"https://api.github.com/users/alerque/followers","following_url":"https://api.github.com/users/alerque/following{/other_user}","gists_url":"https://api.github.com/users/alerque/gists{/gist_id}","starred_url":"https://api.github.com/users/alerque/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alerque/subscriptions","organizations_url":"https://api.github.com/users/alerque/orgs","repos_url":"https://api.github.com/users/alerque/repos","events_url":"https://api.github.com/users/alerque/events{/privacy}","received_events_url":"https://api.github.com/users/alerque/received_events","type":"User","site_admin":false},"created_at":"2016-03-26T16:17:10Z","updated_at":"2016-03-26T16:17:10Z","body":"My suggestion is that optimal font sizes for each device is typically set by the device already. I would only use viewport sized typography in order to fit a specific graphic design element: for example in headers, menus, lightboxes, or other things that also scale at  width.  Using it for body text railroads users into something that could be a less than ideal reading experience. The flexible with + varying font size at different widths creates a uncomfortable (and unexpected) dissonance."}}