rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

Add Mobile styles

Browse source
This commit is contained in:
Joachim 2021-05-02 21:34:43 +02:00
parent bbac0ad7ab
commit 4c021e6357
2 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
bookwyrm/static/css/bookwyrm.css
View file

@ -47,6 +47,14 @@ body {
.m-0-mobile { .m-0-mobile {
margin: 0 !important; margin: 0 !important;
} }
.card-footer.is-stacked-mobile {
flex-direction: column;
}
.card-footer.is-stacked-mobile .card-footer-item:not(:last-child) {
border-bottom: 1px solid #ededed;
border-right: 0;
}
} }
.button.is-transparent { .button.is-transparent {
@ -352,19 +360,20 @@ body {
ol.ordered-list { ol.ordered-list {
list-style: none; list-style: none;
counter-reset: books; counter-reset: list-counter;
} }
ol.ordered-list li { ol.ordered-list li {
counter-increment: books; counter-increment: list-counter;
} }
ol.ordered-list li::before { ol.ordered-list li::before {
content: counter(books); content: counter(list-counter);
position: absolute; position: absolute;
left: -20px; left: -20px;
width: 20px; width: 20px;
height: 24px; height: 24px;
background-color: #fff;
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
border-right: 0; border-right: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
@ -376,3 +385,15 @@ ol.ordered-list li::before {
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
} }
@media only screen and (max-width: 768px) {
ol.ordered-list li::before {
left: 0;
z-index: 1;
border: 0;
border-right: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
border-radius: 0;
border-bottom-right-radius: 2px;
}
}

2
bookwyrm/templates/lists/list.html
View file

@ -40,7 +40,7 @@
{% include 'snippets/shelve_button/shelve_button.html' with book=item.book %} {% include 'snippets/shelve_button/shelve_button.html' with book=item.book %}
</div> </div>
</div> </div>
<div class="card-footer has-background-white-bis"> <div class="card-footer is-stacked-mobile has-background-white-bis">
<div class="card-footer-item"> <div class="card-footer-item">
<div> <div>
<p>{% blocktrans with username=item.user.display_name user_path=user.local_path %}Added by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p> <p>{% blocktrans with username=item.user.display_name user_path=user.local_path %}Added by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>