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"
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 ""
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");
})
$(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">
<a id="clear-filter-button"
class="btn btn-sm btn-outline-info"
href="#">
{{ $__t('Clear filter') }}
href="#"
data-toggle="tooltip"
title="{{ $__t('Clear filter') }}">
<i class="fa-solid fa-filter-circle-xmark"></i>
</a>
</div>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -118,19 +118,7 @@
&nbsp;<i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip"
data-trigger="hover click"
title="{{ $__t('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"')
}}"></i>
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>
</label>
</div>
<select disabled

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -73,39 +73,7 @@
<i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip"
data-trigger="hover click"
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>
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>
</label>
</div>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -74,19 +74,7 @@
&nbsp;<i class="fa-solid fa-question-circle text-muted"
data-toggle="tooltip"
data-trigger="hover click"
title="{{ $__t('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"')
}}"></i>
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>
</label>
</div>
<select disabled

View File

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

View File

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

View File

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

View File

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