From bba60c99e98fc4821736f3d5de4a438d4bad5cb6 Mon Sep 17 00:00:00 2001 From: Fabien Basmaison Date: Wed, 28 Apr 2021 14:48:25 +0200 Subject: [PATCH] cover: Rearrange some CSS rules. --- bookwyrm/static/css/bookwyrm.css | 116 +++++++++++++++++-------------- 1 file changed, 62 insertions(+), 54 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 801c3635f..8f3f15c52 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -43,10 +43,6 @@ body { white-space: nowrap !important; width: 0.01em !important; } - - .m-0-mobile { - margin: 0 !important; - } } .button.is-transparent { @@ -282,6 +278,56 @@ body { 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; + } +} + /* Dimensions * @todo These could be in rem. ******************************************************************************/ @@ -554,6 +600,10 @@ body { justify-content: flex-end !important; } + .align.to-b-mobile { + align-items: flex-end !important; + } + .align.to-l-mobile { justify-content: flex-start !important; } @@ -572,6 +622,10 @@ body { justify-content: flex-end !important; } + .align.to-b-tablet { + align-items: flex-end !important; + } + .align.to-l-tablet { justify-content: flex-start !important; } @@ -589,6 +643,10 @@ body { } @media screen and (max-width: 768px) { + .m-0-mobile { + margin: 0 !important; + } + .mr-auto-mobile { margin-right: auto !important; } @@ -629,53 +687,3 @@ body { margin-left: 0.75rem !important; } } - -/* 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; - } -}