forked from mirrors/bookwyrm
Front-end: New look and behavior for Filters and Result panels
This commit is contained in:
Joachim
parent
0c0bfc046d
commit
4cb520f242
9 changed files with 260 additions and 114 deletions
|
|
@ -124,6 +124,18 @@ button::-moz-focus-inner {
|
|||
border-bottom: 1px solid #ededed;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.is-flex-direction-row-mobile {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.is-flex-direction-column-mobile {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tag.is-small {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.button.is-transparent {
|
||||
|
|
@ -180,7 +192,7 @@ input[type=file]::file-selector-button:hover {
|
|||
/** General `details` element styles
|
||||
******************************************************************************/
|
||||
|
||||
summary {
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -188,22 +200,11 @@ summary::-webkit-details-marker {
|
|||
display: none;
|
||||
}
|
||||
|
||||
summary::marker {
|
||||
details 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;
|
||||
}
|
||||
|
||||
/** Details dropdown
|
||||
/** Dropdown w/ Details element
|
||||
******************************************************************************/
|
||||
|
||||
details.dropdown[open] summary.dropdown-trigger::before {
|
||||
|
|
@ -215,11 +216,11 @@ details.dropdown[open] summary.dropdown-trigger::before {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
details .dropdown-menu {
|
||||
details.dropdown .dropdown-menu {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
details .dropdown-menu button {
|
||||
details.dropdown .dropdown-menu button {
|
||||
/* Fix weird Safari defaults */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -254,6 +255,57 @@ details.dropdown .dropdown-menu a:focus-visible {
|
|||
}
|
||||
}
|
||||
|
||||
details.detail-pinned-button summary {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
details.detail-pinned-button form {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/** Details panel
|
||||
******************************************************************************/
|
||||
|
||||
details.details-panel {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s ease;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
details[open].details-panel,
|
||||
details.details-panel:hover {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
details.details-panel summary {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details.details-panel summary .details-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
details[open].details-panel summary .details-close {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
.details-panel .filters-field:not(:last-child) {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/** Shelving
|
||||
******************************************************************************/
|
||||
|
||||
|
|
@ -1116,3 +1168,93 @@ ol.ordered-list li::before {
|
|||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gaps (for Flexbox and Grid)
|
||||
*
|
||||
* Those are supplementary rules to Bulma’s. They follow the same conventions.
|
||||
* Add those you’ll need.
|
||||
******************************************************************************/
|
||||
|
||||
.is-gap-0 {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.is-gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.is-gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.is-gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.is-gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.is-gap-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.is-gap-6 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.is-row-gap-0 {
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.is-row-gap-1 {
|
||||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.is-row-gap-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.is-row-gap-3 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.is-row-gap-4 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.is-row-gap-5 {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.is-row-gap-6 {
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
.is-column-gap-0 {
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
.is-column-gap-1 {
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.is-column-gap-2 {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.is-column-gap-3 {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.is-column-gap-4 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.is-column-gap-5 {
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.is-column-gap-6 {
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
|
|
|||
4
bookwyrm/static/css/vendor/icons.css
vendored
4
bookwyrm/static/css/vendor/icons.css
vendored
|
|
@ -25,6 +25,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon.is-small {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.icon-book:before {
|
||||
content: "\e901";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,57 +6,22 @@
|
|||
<h1 class="title">
|
||||
{{ tab.name }}
|
||||
</h1>
|
||||
<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="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>
|
||||
</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">
|
||||
<span class="is-flex is-align-items-baseline">
|
||||
<label class="label mt-2 mb-1">Status types</label>
|
||||
{% if settings_saved %}
|
||||
<span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% 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 class="level-right control">
|
||||
<button class="button is-small is-primary is-outlined" type="submit">
|
||||
{{ _("Save settings") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
<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>
|
||||
|
||||
{# feed settings #}
|
||||
{% with "/"|add:tab.key|add:"#feed" as action %}
|
||||
{% include 'feed/feed_filters.html' with size="small" method="post" action=action %}
|
||||
{% endwith %}
|
||||
|
||||
{# announcements and system messages #}
|
||||
{% if not activities.number > 1 %}
|
||||
<a href="{{ request.path }}" class="transition-y is-hidden notification is-primary is-block" data-poll-wrapper>
|
||||
|
|
|
|||
5
bookwyrm/templates/feed/feed_filters.html
Normal file
5
bookwyrm/templates/feed/feed_filters.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{% extends 'snippets/filters_panel/filters_panel.html' %}
|
||||
|
||||
{% block filter_fields %}
|
||||
{% include 'feed/status_types_filter.html' %}
|
||||
{% endblock %}
|
||||
16
bookwyrm/templates/feed/status_types_filter.html
Normal file
16
bookwyrm/templates/feed/status_types_filter.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{% extends 'snippets/filters_panel/filter_field.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block filter %}
|
||||
<label class="label mt-2 mb-1">Status types</label>
|
||||
|
||||
<div class="is-flex is-flex-direction-row is-flex-direction-column-mobile">
|
||||
{% 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>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<ul class="block">
|
||||
{% for result in local_results.results %}
|
||||
<li class="pd-4 mb-5">
|
||||
<div class="columns is-mobile is-gapless">
|
||||
<div class="columns is-mobile is-gapless mb-0">
|
||||
<div class="column is-cover">
|
||||
{% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
|
||||
</div>
|
||||
|
|
@ -34,34 +34,29 @@
|
|||
<div class="block">
|
||||
{% for result_set in results|slice:"1:" %}
|
||||
{% if result_set.results %}
|
||||
<section class="box has-background-white-bis">
|
||||
<section class="mb-5">
|
||||
{% if not result_set.connector.local %}
|
||||
<header class="columns is-mobile">
|
||||
<div class="column">
|
||||
<h3 class="title is-5">
|
||||
<details class="details-panel box" {% if forloop.first %}open{% endif %}>
|
||||
<summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
|
||||
<h3 class="mb-0 title is-5">
|
||||
{% trans 'Results from' %}
|
||||
<a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% trans "Open" as button_text %}
|
||||
{% include 'snippets/toggle/open_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-down" pressed=forloop.first %}
|
||||
{% trans "Close" as button_text %}
|
||||
{% include 'snippets/toggle/close_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-up" pressed=forloop.first %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<span class="details-close icon icon-x" aria-hidden></span>
|
||||
</summary>
|
||||
{% endif %}
|
||||
|
||||
<div class="box has-background-white is-shadowless{% if not forloop.first %} is-hidden{% endif %}" id="more_results_panel_{{ result_set.connector.identifier }}">
|
||||
<div class="mt-5">
|
||||
<div class="is-flex is-flex-direction-row-reverse">
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<ul class="is-flex-grow-1">
|
||||
{% for result in result_set.results %}
|
||||
<li class="mb-5">
|
||||
<li class="{% if not forloop.last %}mb-5{% endif %}">
|
||||
<div class="columns is-mobile is-gapless">
|
||||
<div class="columns is-mobile is-gapless">
|
||||
<div class="column is-1 is-cover">
|
||||
{% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' external_path=True %}
|
||||
</div>
|
||||
<div class="column is-10 ml-3">
|
||||
|
|
@ -91,7 +86,9 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% if not result_set.connector.local %}
|
||||
</details>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<div class="column is-flex">
|
||||
<div class="box is-flex-grow-1">
|
||||
{% block filter %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="filters-field column">
|
||||
{% block filter %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,47 @@
|
|||
{% load i18n %}
|
||||
<div class="notification content">
|
||||
<h2 class="columns is-mobile mb-0">
|
||||
<span class="column pb-0">Filters</span>
|
||||
<details class="details-panel box is-size-{{ size|default:'normal' }}" {% if filters_applied %}open{% endif %}>
|
||||
<summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
|
||||
<h2 class="mb-0 title {% if size == 'small' %}is-6{% else %}is-5{% endif %} is-flex-shrink-0">
|
||||
{% trans "Filters" %}
|
||||
|
||||
<span class="column is-narrow pb-0">
|
||||
{% trans "Show filters" as text %}
|
||||
{% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon_with_text="arrow-down" class="is-small" focus="filters" %}
|
||||
{% trans "Hide filters" as text %}
|
||||
{% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon_with_text="arrow-up" class="is-small" %}
|
||||
</h2>
|
||||
|
||||
{% if filters_applied %}
|
||||
<span class="tag is-success is-light ml-2 mb-0 is-{{ size|default:'normal' }}">
|
||||
{{ _("Filters are applied") }}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<form class="is-hidden mt-3" id="filters" method="get" action="{{ request.path }}" tabindex="0">
|
||||
{% if sort %}
|
||||
<input type="hidden" name="sort" value="{{ sort }}">
|
||||
{% endif %}
|
||||
<div class="columns">
|
||||
{% block filter_fields %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<button class="button is-primary">{% trans "Apply filters" %}</button>
|
||||
</form>
|
||||
|
||||
{% if request.GET %}
|
||||
<a class="help" href="{{ request.path }}">{% trans "Clear filters" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if request.GET %}
|
||||
<div class="mb-0 tags has-addons">
|
||||
<span class="mb-0 tag is-success is-light is-{{ size|default:'normal' }}">
|
||||
{% trans "Filters are applied" %}
|
||||
</span>
|
||||
<a class="mb-0 tag is-success is-{{ size|default:'normal' }}" href="{{ request.path }}">
|
||||
{% trans "Clear filters" %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden></span>
|
||||
</summary>
|
||||
|
||||
<div class="mt-3">
|
||||
<form id="filters" method="{{ method|default:'get' }}" action="{{ action|default:request.path }}" tabindex="0">
|
||||
{% if method == 'post' %}
|
||||
{% csrf_token %}
|
||||
{% endif %}
|
||||
|
||||
{% if sort %}
|
||||
<input type="hidden" name="sort" value="{{ sort }}">
|
||||
{% endif %}
|
||||
<div class="mt-3 columns filters-fields is-align-items-stretch">
|
||||
{% block filter_fields %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<button type="submit" class="button is-primary is-small">
|
||||
{% trans "Apply filters" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -26,15 +26,15 @@ class Feed(View):
|
|||
|
||||
def post(self, request, tab):
|
||||
"""save feed settings form, with a silent validation fail"""
|
||||
settings_saved = False
|
||||
filters_applied = False
|
||||
form = forms.FeedStatusTypesForm(request.POST, instance=request.user)
|
||||
if form.is_valid():
|
||||
form.save()
|
||||
settings_saved = True
|
||||
filters_applied = True
|
||||
|
||||
return self.get(request, tab, settings_saved)
|
||||
return self.get(request, tab, filters_applied)
|
||||
|
||||
def get(self, request, tab, settings_saved=False):
|
||||
def get(self, request, tab, filters_applied=False):
|
||||
"""user's homepage with activity feed"""
|
||||
tab = [s for s in STREAMS if s["key"] == tab]
|
||||
tab = tab[0] if tab else STREAMS[0]
|
||||
|
|
@ -61,7 +61,7 @@ class Feed(View):
|
|||
"goal_form": forms.GoalForm(),
|
||||
"feed_status_types_options": FeedFilterChoices,
|
||||
"allowed_status_types": request.user.feed_status_types,
|
||||
"settings_saved": settings_saved,
|
||||
"filters_applied": filters_applied,
|
||||
"path": f"/{tab['key']}",
|
||||
"annual_summary_year": get_annual_summary_year(),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue