Creates consistent styling for details element

This commit is contained in:
Mouse Reeve 2021-12-04 10:41:42 -08:00
parent 2ae8cdaa88
commit c813ce1144
2 changed files with 57 additions and 39 deletions

View file

@ -115,6 +115,19 @@ input[type=file]::file-selector-button:hover {
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
******************************************************************************/

View file

@ -6,49 +6,54 @@
<h1 class="title">
{{ tab.name }}
</h1>
<div class="tabs">
<ul>
{% for stream in streams %}
<li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
<a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="block is-clipped">
<div class="is-pulled-left">
<div class="tabs">
<ul>
{% for stream in streams %}
<li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
<a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{# feed settings #}
<details class="mb-5" {% if settings_saved %}open{% endif %}>
<summary>
<span class="has-text-weight-bold">
{{ _("Feed settings") }}
</span>
{% if settings_saved %}
<span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
{% endif %}
</summary>
<form class="level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
{% csrf_token %}
{# feed settings #}
<details class="detail-pinned-button" {% if settings_saved %}open{% endif %}>
<summary class="control">
<span class="button">
<span class="icon icon-dots-three m-0-mobile" aria-hidden="true"></span>
<span class="is-sr-only-mobile">{{ _("Feed settings") }}</span>
</span>
{% if settings_saved %}
<span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
{% endif %}
</summary>
<form class="notification level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
{% csrf_token %}
<div class="level-left">
<div class="field">
<div class="control">
<label class="label mt-2 mb-1">Status types</label>
{% for name, value in feed_status_types_options %}
<label class="mr-2">
<input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
{{ value }}
</label>
{% endfor %}
<div class="level-left">
<div class="field">
<div class="control">
<label class="label mt-2 mb-1">Status types</label>
{% for name, value in feed_status_types_options %}
<label class="mr-2">
<input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
{{ value }}
</label>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="level-right control">
<button class="button is-small is-primary is-outlined" type="submit">
{{ _("Save settings") }}
</button>
</div>
</form>
</details>
<div class="level-right control">
<button class="button is-small is-primary is-outlined" type="submit">
{{ _("Save settings") }}
</button>
</div>
</form>
</details>
</div>
{# announcements and system messages #}
{% if not activities.number > 1 %}