yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #974 from joachimesque/list-table

Browse Source 
Add mobile styles for book preview table
This commit is contained in:
Mouse Reeve
2021-04-25 10:42:27 -07:00
committed by GitHub
parent aa557e4758 e4836bd9b3
commit 2fd8e12b96
2 changed files with 109 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
bookwyrm/static/css/bookwyrm.css
View File

@ -286,3 +286,53 @@ body {
opacity: 0.5;
cursor: not-allowed;
}
/* Book preview table
******************************************************************************/
.book-preview td {
vertical-align: middle;
}
@media only screen and (max-width: 768px) {
table.is-mobile,
table.is-mobile tbody {
display: block;
}
table.is-mobile tr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid #dbdbdb;
}
table.is-mobile td {
display: block;
box-sizing: border-box;
flex: 1 0 100%;
order: 2;
border-bottom: 0;
}
table.is-mobile td.book-preview-top-row {
order: 1;
flex-basis: auto;
}
table.is-mobile td[data-title]:not(:empty)::before {
content: attr(data-title);
display: block;
font-size: 0.75em;
font-weight: bold;
}
table.is-mobile td:empty {
padding: 0;
}
table.is-mobile th,
table.is-mobile thead {
display: none;
}
}