{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-338768860", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 338768860, "node_id": "MDEyOklzc3VlQ29tbWVudDMzODc2ODg2MA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-10-23T19:23:29Z", "updated_at": "2017-10-23T19:23:29Z", "author_association": "OWNER", "body": "I could use the table-reflow mechanism demonstrated here: http://demos.jquerymobile.com/1.4.3/table-reflow/", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-339420462", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 339420462, "node_id": "MDEyOklzc3VlQ29tbWVudDMzOTQyMDQ2Mg==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-10-25T18:10:51Z", "updated_at": "2017-10-25T18:10:51Z", "author_association": "OWNER", "body": "https://sitesforprofit.com/responsive-table-plugins-and-patterns has some useful links.\r\n\r\nI really like the pattern from https://css-tricks.com/responsive-data-tables/\r\n\r\n    /* \r\n    Max width before this PARTICULAR table gets nasty\r\n    This query will take effect for any screen smaller than 760px\r\n    and also iPads specifically.\r\n    */\r\n    @media \r\n    only screen and (max-width: 760px),\r\n    (min-device-width: 768px) and (max-device-width: 1024px)  {\r\n\r\n        /* Force table to not be like tables anymore */\r\n        table, thead, tbody, th, td, tr { \r\n            display: block; \r\n        }\r\n        \r\n        /* Hide table headers (but not display: none;, for accessibility) */\r\n        thead tr { \r\n            position: absolute;\r\n            top: -9999px;\r\n            left: -9999px;\r\n        }\r\n        \r\n        tr { border: 1px solid #ccc; }\r\n        \r\n        td { \r\n            /* Behave  like a \"row\" */\r\n            border: none;\r\n            border-bottom: 1px solid #eee; \r\n            position: relative;\r\n            padding-left: 50%; \r\n        }\r\n        \r\n        td:before { \r\n            /* Now like a table header */\r\n            position: absolute;\r\n            /* Top/left values mimic padding */\r\n            top: 6px;\r\n            left: 6px;\r\n            width: 45%; \r\n            padding-right: 10px; \r\n            white-space: nowrap;\r\n        }\r\n        \r\n        /*\r\n        Label the data\r\n        */\r\n        td:nth-of-type(1):before { content: \"First Name\"; }\r\n        td:nth-of-type(2):before { content: \"Last Name\"; }\r\n        td:nth-of-type(3):before { content: \"Job Title\"; }\r\n        td:nth-of-type(4):before { content: \"Favorite Color\"; }\r\n        td:nth-of-type(5):before { content: \"Wars of Trek?\"; }\r\n        td:nth-of-type(6):before { content: \"Porn Name\"; }\r\n        td:nth-of-type(7):before { content: \"Date of Birth\"; }\r\n        td:nth-of-type(8):before { content: \"Dream Vacation City\"; }\r\n        td:nth-of-type(9):before { content: \"GPA\"; }\r\n        td:nth-of-type(10):before { content: \"Arbitrary Data\"; }\r\n    }", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-342032943", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 342032943, "node_id": "MDEyOklzc3VlQ29tbWVudDM0MjAzMjk0Mw==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-11-06T02:50:07Z", "updated_at": "2017-11-06T02:50:07Z", "author_association": "OWNER", "body": "Default look with Bootstrap 4 looks like this:\r\n<img width=\"871\" alt=\"flights\" src=\"https://user-images.githubusercontent.com/9599/32423242-1b4458ce-c25a-11e7-910f-2dc1de909b8f.png\">\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-343643332", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 343643332, "node_id": "MDEyOklzc3VlQ29tbWVudDM0MzY0MzMzMg==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-11-11T06:00:04Z", "updated_at": "2017-11-11T06:00:04Z", "author_association": "OWNER", "body": "Here's what a table looks like now at a smaller screen size:\r\n\r\n<img width=\"496\" alt=\"parlgov-development__info_data_source\" src=\"https://user-images.githubusercontent.com/9599/32686818-7ffa691e-c662-11e7-964d-201fce0694e4.png\">\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-343647300", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 343647300, "node_id": "MDEyOklzc3VlQ29tbWVudDM0MzY0NzMwMA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-11-11T07:41:19Z", "updated_at": "2017-11-11T07:53:09Z", "author_association": "OWNER", "body": "Still needed:\r\n\r\n- [ ] A link to the homepage from some kind of navigation bar in the header\r\n- [ ] link to github.com/simonw/datasette in the footer\r\n- [ ] Slightly better titles (maybe ditch the visited link colours for titles only? should keep those for primary key links)\r\n- [ ] Links to the .json and .jsono versions of every view", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/16#issuecomment-343691342", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/16", "id": 343691342, "node_id": "MDEyOklzc3VlQ29tbWVudDM0MzY5MTM0Mg==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2017-11-11T20:19:07Z", "updated_at": "2017-11-11T20:19:07Z", "author_association": "OWNER", "body": "Closing this, opening a fresh ticket for the navigation stuff.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 267726219, "label": "Default HTML/CSS needs to look reasonable and be responsive"}, "performed_via_github_app": null}