Make clear filter buttons more compact

This commit is contained in:
Bernd Bestel 2022-04-04 21:07:14 +02:00
parent e336f24225
commit cca35a302c
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
31 changed files with 134 additions and 130 deletions

View File

@ -826,7 +826,7 @@ msgstr ""
msgid "Use a specific stock item" msgid "Use a specific stock item"
msgstr "" msgstr ""
msgid "The first item in this list would be picked by the default rule which is \"Opened first, then first due first, then first in first out\"" msgid "The first item in this list would be picked by the default rule consume rule (Opened first, then first due first, then first in first out)"
msgstr "" msgstr ""
msgid "Mark %1$s of %2$s as open" msgid "Mark %1$s of %2$s as open"

View File

@ -1186,3 +1186,11 @@ $('[data-toggle="tooltip"][data-html="true"]').on("shown.bs.tooltip", function()
{ {
RefreshLocaleNumberDisplay(".tooltip"); RefreshLocaleNumberDisplay(".tooltip");
}) })
$(document).on("click", "#clear-filter-button", function(e)
{
// Remove the focus from the current button
// to prevent that the tooltip stays until clicked anywhere else
document.activeElement.blur();
console.log("x")
});

View File

@ -68,8 +68,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -13,7 +13,7 @@
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
data-target="#table-filter-row"> data-target="#table-filter-row">
<i class="fa-solid fa-filter"></i> <i class="fas fa-filter"></i>
</button> </button>
</div> </div>
</div> </div>
@ -26,7 +26,7 @@
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-search"></i></span> <span class="input-group-text"><i class="fas fa-search"></i></span>
</div> </div>
<input type="text" <input type="text"
id="search" id="search"
@ -37,7 +37,7 @@
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Battery') }}</span> <span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Battery') }}</span>
</div> </div>
<select class="custom-control custom-select" <select class="custom-control custom-select"
id="battery-filter"> id="battery-filter">
@ -51,7 +51,7 @@
<div class="col-12 col-md-6 col-xl-3"> <div class="col-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span> <span class="input-group-text"><i class="fas fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span>
</div> </div>
<select class="custom-control custom-select" <select class="custom-control custom-select"
id="daterange-filter"> id="daterange-filter">
@ -68,8 +68,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>
@ -86,7 +88,7 @@
data-toggle="tooltip" data-toggle="tooltip"
title="{{ $__t('Table options') }}" title="{{ $__t('Table options') }}"
data-table-selector="#batteries-journal-table" data-table-selector="#batteries-journal-table"
href="#"><i class="fa-solid fa-eye"></i></a> href="#"><i class="fas fa-eye"></i></a>
</th> </th>
<th class="allow-grouping">{{ $__t('Battery') }}</th> <th class="allow-grouping">{{ $__t('Battery') }}</th>
<th>{{ $__t('Tracked time') }}</th> <th>{{ $__t('Tracked time') }}</th>
@ -103,7 +105,7 @@
data-toggle="tooltip" data-toggle="tooltip"
data-placement="left" data-placement="left"
title="{{ $__t('Undo charge cycle') }}"> title="{{ $__t('Undo charge cycle') }}">
<i class="fa-solid fa-undo"></i> <i class="fas fa-undo"></i>
</a> </a>
</td> </td>
<td> <td>

View File

@ -39,17 +39,19 @@
data-status-filter="duesoon" data-status-filter="duesoon"
data-next-x-days="{{ $nextXDays }}" data-next-x-days="{{ $nextXDays }}"
class="warning-message status-filter-message responsive-button @if($nextXDays == 0) d-none @endif"></div> class="warning-message status-filter-message responsive-button @if($nextXDays == 0) d-none @endif"></div>
<div class="float-right"> <div class="float-right mt-1">
<a class="btn btn-sm btn-outline-info d-md-none mt-1" <a class="btn btn-sm btn-outline-info d-md-none"
data-toggle="collapse" data-toggle="collapse"
href="#table-filter-row" href="#table-filter-row"
role="button"> role="button">
<i class="fa-solid fa-filter"></i> <i class="fa-solid fa-filter"></i>
</a> </a>
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info mt-1" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -68,8 +68,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -68,8 +68,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -44,17 +44,19 @@
data-user-filter="xx{{ GROCY_USER_ID }}xx" data-user-filter="xx{{ GROCY_USER_ID }}xx"
class="secondary-message user-filter-message responsive-button"></div> class="secondary-message user-filter-message responsive-button"></div>
@endif @endif
<div class="float-right"> <div class="float-right mt-1">
<a class="btn btn-sm btn-outline-info d-md-none mt-1" <a class="btn btn-sm btn-outline-info d-md-none"
data-toggle="collapse" data-toggle="collapse"
href="#table-filter-row" href="#table-filter-row"
role="button"> role="button">
<i class="fa-solid fa-filter"></i> <i class="fa-solid fa-filter"></i>
</a> </a>
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info mt-1" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -118,19 +118,7 @@
&nbsp;<i class="fa-solid fa-question-circle text-muted" &nbsp;<i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip" data-toggle="tooltip"
data-trigger="hover click" data-trigger="hover click"
title="{{ $__t('The first item in this list would be picked by the default rule which is " title="{{ $__t('The first item in this list would be picked by the default rule consume rule (Opened first, then first due first, then first in first out)') }}"></i>
Opened
first,
then
first
due
first,
then
first
in
first
out"')
}}"></i>
</label> </label>
</div> </div>
<select disabled <select disabled

View File

@ -49,8 +49,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -62,8 +62,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -53,8 +53,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -97,8 +97,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -73,39 +73,7 @@
<i class="fa-solid fa-question-circle text-muted" <i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip" data-toggle="tooltip"
data-trigger="hover click" data-trigger="hover click"
title="{{ $__t('By default the amount to be added to the shopping list is " title="{{ $__t('By default the amount to be added to the shopping list is \"needed amount - stock amount - shopping list amount\" - when this is enabled, it is only checked against the stock amount, not against what is already on the shopping list') }}"></i>
needed
amount
-
stock
amount
-
shopping
list
amount"
-
when
this
is
enabled,
it
is
only
checked
against
the
stock
amount,
not
against
what
is
already
on
the
shopping
list')
}}"></i>
</label> </label>
</div> </div>
</div> </div>

View File

@ -80,8 +80,10 @@
<div class="float-right mt-1"> <div class="float-right mt-1">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -149,8 +149,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -59,8 +59,10 @@
<div class="float-right mt-3"> <div class="float-right mt-3">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -123,8 +123,10 @@
<div class="float-right mt-1"> <div class="float-right mt-1">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -80,8 +80,10 @@
<div class="float-right mt-1"> <div class="float-right mt-1">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -64,17 +64,19 @@
<div id="info-missing-products" <div id="info-missing-products"
data-status-filter="belowminstockamount" data-status-filter="belowminstockamount"
class="normal-message status-filter-message responsive-button"></div> class="normal-message status-filter-message responsive-button"></div>
<div class="float-right"> <div class="float-right mt-1">
<a class="btn btn-sm btn-outline-info d-md-none mt-1" <a class="btn btn-sm btn-outline-info d-md-none"
data-toggle="collapse" data-toggle="collapse"
href="#table-filter-row" href="#table-filter-row"
role="button"> role="button">
<i class="fa-solid fa-filter"></i> <i class="fa-solid fa-filter"></i>
</a> </a>
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info mt-1" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -39,17 +39,19 @@
data-status-filter="duesoon" data-status-filter="duesoon"
data-next-x-days="{{ $nextXDays }}" data-next-x-days="{{ $nextXDays }}"
class="warning-message status-filter-message responsive-button @if($nextXDays == 0) d-none @endif"></div> class="warning-message status-filter-message responsive-button @if($nextXDays == 0) d-none @endif"></div>
<div class="float-right"> <div class="float-right mt-1">
<a class="btn btn-sm btn-outline-info d-md-none mt-1" <a class="btn btn-sm btn-outline-info d-md-none"
data-toggle="collapse" data-toggle="collapse"
href="#table-filter-row" href="#table-filter-row"
role="button"> role="button">
<i class="fa-solid fa-filter"></i> <i class="fa-solid fa-filter"></i>
</a> </a>
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info mt-1" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -74,19 +74,7 @@
&nbsp;<i class="fa-solid fa-question-circle text-muted" &nbsp;<i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip" data-toggle="tooltip"
data-trigger="hover click" data-trigger="hover click"
title="{{ $__t('The first item in this list would be picked by the default rule which is " title="{{ $__t('The first item in this list would be picked by the default rule consume rule (Opened first, then first due first, then first in first out)') }}"></i>
Opened
first,
then
first
due
first,
then
first
in
first
out"')
}}"></i>
</label> </label>
</div> </div>
<select disabled <select disabled

View File

@ -53,8 +53,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -68,8 +68,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -62,8 +62,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -57,8 +57,10 @@
<div class="float-right"> <div class="float-right">
<a id="clear-filter-button" <a id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
href="#"> href="#"
{{ $__t('Clear filter') }} data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a> </a>
</div> </div>
</div> </div>