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,49 +6,54 @@
<h1 class="title"> <h1 class="title">
{{ tab.name }} {{ tab.name }}
</h1> </h1>
<div class="tabs"> <div class="block is-clipped">
<ul> <div class="is-pulled-left">
{% for stream in streams %} <div class="tabs">
<li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}> <ul>
<a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a> {% for stream in streams %}
</li> <li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
{% endfor %} <a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
</ul> </li>
</div> {% endfor %}
</ul>
</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> <span class="is-sr-only-mobile">{{ _("Feed settings") }}</span>
{% if settings_saved %} </span>
<span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span> {% if settings_saved %}
{% endif %} <span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
</summary> {% endif %}
<form class="level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed"> </summary>
{% csrf_token %} <form class="notification level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
{% csrf_token %}
<div class="level-left"> <div class="level-left">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<label class="label mt-2 mb-1">Status types</label> <label class="label mt-2 mb-1">Status types</label>
{% for name, value in feed_status_types_options %} {% for name, value in feed_status_types_options %}
<label class="mr-2"> <label class="mr-2">
<input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/> <input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
{{ value }} {{ value }}
</label> </label>
{% endfor %} {% endfor %}
</div>
</div> </div>
</div> </div>
</div> <div class="level-right control">
<div class="level-right control"> <button class="button is-small is-primary is-outlined" type="submit">
<button class="button is-small is-primary is-outlined" type="submit"> {{ _("Save settings") }}
{{ _("Save settings") }} </button>
</button> </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 %}