mirror of
https://github.com/simonw/datasette.git
synced 2025-12-10 16:51:24 +01:00
Implemented responsive tables, removed bootstrap
No need for all of bootstrap since we only need to style a few elements. Implemented responsive table pattern from here: https://css-tricks.com/responsive-data-tables/ Refs #16
This commit is contained in:
parent
21c9c04310
commit
7d81083d40
8 changed files with 112 additions and 57 deletions
54
datasette/static/app.css
Normal file
54
datasette/static/app.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
body {
|
||||
margin: 0 1em;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
padding-right: 1em;
|
||||
}
|
||||
@media only screen and (max-width: 576px) {
|
||||
/* Force table to not be like tables anymore */
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide table headers (but not display: none;, for accessibility) */
|
||||
thead tr {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
td {
|
||||
/* Behave like a "row" */
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0;
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
td:before {
|
||||
display: block;
|
||||
margin-left: -10%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue