Cleans up show/hide behavior

This commit is contained in:
Mouse Reeve 2021-05-20 11:46:24 -07:00
parent 49916a7498
commit b8e9b9f57e
5 changed files with 21 additions and 14 deletions

View file

@ -88,10 +88,11 @@ body {
.transition-y.is-hidden { .transition-y.is-hidden {
display: block !important; display: block !important;
visibility: hidden !important; visibility: hidden !important;
height: 0; height: 0 !important;
width: 0; width: 0 !important;
margin: 0; margin: 0 !important;
padding: 0; padding: 0 !important;
overflow: auto;
} }
.transition-x, .transition-x,

View file

@ -49,7 +49,3 @@
</div> </div>
{% endblock %} {% endblock %}
{% block scripts %}
<script src="/static/js/localstorage.js"></script>
{% endblock %}

View file

@ -238,6 +238,7 @@
var csrf_token = '{{ csrf_token }}'; var csrf_token = '{{ csrf_token }}';
</script> </script>
<script src="/static/js/bookwyrm.js"></script> <script src="/static/js/bookwyrm.js"></script>
<script src="/static/js/localstorage.js"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>

View file

@ -54,7 +54,7 @@
<hr aria-hidden="true"> <hr aria-hidden="true">
{% include 'snippets/announcement.html' with announcement=announcement pressed=True %} {% include 'snippets/announcement.html' with announcement=announcement pressed=True admin_mode=True %}
</div> </div>
{% endblock %} {% endblock %}

View file

@ -1,22 +1,31 @@
{% load humanize %}{% load i18n %}{% load utilities %} {% load humanize %}{% load i18n %}{% load utilities %}
{% with announcement.id|uuid as uuid %} {% with announcement.id|uuid as uuid %}
<aside class="notification p-3"> <aside class="notification mb-1 p-3 is-hidden transition-y"{% if not admin_mode %} data-hide="hide-announcement-{{ announcement.id }}"{% endif %}>
<div class="columns mb-0"> <div class="columns mb-0">
<div class="column"> <div class="column pb-0">
{% if announcement.event_date %} {% if announcement.event_date %}
<strong>{{ announcement.event_date|naturalday|title }}:</strong> <strong>{{ announcement.event_date|naturalday|title }}:</strong>
{% endif %} {% endif %}
{{ announcement.preview }} {{ announcement.preview }}
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow pb-0">
{% trans "Open" as button_text %} {% trans "Open" as button_text %}
{% include 'snippets/toggle/open_button.html' with text=button_text controls_text="announcement" class="is-small" controls_uid=uuid icon_with_text="arrow-down" %} {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="announcement" class="is-small" controls_uid=uuid icon_with_text="arrow-down" %}
{% trans "Close" as button_text %} {% trans "Close" as button_text %}
{% include 'snippets/toggle/close_button.html' with text=button_text controls_text="announcement" class="is-small" controls_uid=uuid icon_with_text="arrow-up" %} {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="announcement" class="is-small" controls_uid=uuid icon_with_text="arrow-up" %}
</div> </div>
</div> </div>
<div class="box is-shadowless m-0{% if not pressed %} is-hidden{% endif %}" id="announcement-{{ uuid }}"> <div class="mb-2 mt-2 {% if not pressed %}is-hidden{% endif %}" id="announcement-{{ uuid }}">
<div class="box is-shadowless mb-0">
{{ announcement.content|safe }} {{ announcement.content|safe }}
</div> </div>
</div>
<div class="is-flex mt-0 help">
<p>{% blocktrans with user_path=announcement.user.local_path username=announcement.user.display_name %}Posted by <a href="{{ user_path }}">{{ username }}</a>{% endblocktrans %}</p>
{% if not admin_mode %}
<span class="mr-2 ml-2" aria-hidden="true">&middot;</span>
<a class="set-display" data-id="hide-announcement-{{ announcement.id }}" data-value="true">{% trans "Dismiss message" %}</a>
{% endif %}
</div>
</aside> </aside>
{% endwith %} {% endwith %}