Move counter in Ordered List

This commit is contained in:
Joachim 2021-04-29 21:41:43 +02:00
parent b59b3e294f
commit 0a71fb094f
2 changed files with 39 additions and 3 deletions

View file

@ -346,3 +346,37 @@ body {
display: none;
}
}
/* Book list
******************************************************************************/
ol.ordered-list {
list-style: none;
counter-reset: books;
}
ol.ordered-list li {
counter-increment: books
}
ol.ordered-list li::before {
content: counter(books);
position: absolute;
left: -20px;
width: 20px;
height: 24px;
border: 1px solid #dbdbdb;
border-right: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
color: #888;
font-size: 0.8em;
font-weight: bold;
}

View file

@ -26,7 +26,7 @@
{% if not items.object_list.exists %}
<p>{% trans "This list is currently empty" %}</p>
{% else %}
<ol start="{{ items.start_index }}">
<ol start="{{ items.start_index }}" class="ordered-list">
{% for item in items %}
<li class="block pb-3">
<div class="card">
@ -40,7 +40,7 @@
{% include 'snippets/shelve_button/shelve_button.html' with book=item.book %}
</div>
</div>
<div class="card-footer has-background-white-bis is-align-items-baseline">
<div class="card-footer has-background-white-bis">
<div class="card-footer-item">
<div>
<p>{% blocktrans with username=item.user.display_name user_path=user.local_path %}Added by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>
@ -50,6 +50,9 @@
<div class="card-footer-item">
<form name="set-position" method="post" action="{% url 'list-set-book-position' item.id %}">
<div class="field has-addons mb-0">
<div class="control">
<label for="input-list-position" class="button is-transparent is-small">{% trans "List position" %}</label>
</div>
{% csrf_token %}
<div class="control">
<input id="input-list-position" class="input is-small" type="number" min="1" name="position" value="{{ item.order }}">
@ -58,7 +61,6 @@
<button type="submit" class="button is-info is-small is-tablet">{% trans "Set" %}</button>
</div>
</div>
<label for="input-list-position" class="help">{% trans "List position" %}</label>
</form>
</div>
<form name="add-book" method="post" action="{% url 'list-remove-book' list.id %}" class="card-footer-item">