Merge pull request #1651 from bookwyrm-social/feed-settings-style

Creates consistent styling for details element
This commit is contained in:
Mouse Reeve 2021-12-04 11:29:20 -08:00 committed by GitHub
commit 18f7863eac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 39 deletions

View file

@ -115,6 +115,21 @@ input[type=file]::file-selector-button:hover {
color: #363636; color: #363636;
} }
summary::marker {
content: none;
}
.detail-pinned-button summary {
position: absolute;
right: 0;
}
.detail-pinned-button form {
float: left;
width: -webkit-fill-available;
margin-top: 1em;
}
/** Shelving /** Shelving
******************************************************************************/ ******************************************************************************/

View file

@ -6,6 +6,8 @@
<h1 class="title"> <h1 class="title">
{{ tab.name }} {{ tab.name }}
</h1> </h1>
<div class="block is-clipped">
<div class="is-pulled-left">
<div class="tabs"> <div class="tabs">
<ul> <ul>
{% for stream in streams %} {% for stream in streams %}
@ -15,18 +17,20 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div>
{# feed settings #} {# feed settings #}
<details class="mb-5" {% if settings_saved %}open{% endif %}> <details class="detail-pinned-button" {% if settings_saved %}open{% endif %}>
<summary> <summary class="control">
<span class="has-text-weight-bold"> <span class="button">
{{ _("Feed settings") }} <span class="icon icon-dots-three m-0-mobile" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{{ _("Feed settings") }}</span>
</span> </span>
{% if settings_saved %} {% if settings_saved %}
<span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span> <span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
{% endif %} {% endif %}
</summary> </summary>
<form class="level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed"> <form class="notification level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
{% csrf_token %} {% csrf_token %}
<div class="level-left"> <div class="level-left">
@ -49,6 +53,7 @@
</div> </div>
</form> </form>
</details> </details>
</div>
{# announcements and system messages #} {# announcements and system messages #}
{% if not activities.number > 1 %} {% if not activities.number > 1 %}