Better filter editor wrapping across display sizes

Closes #1299
This commit is contained in:
Michael Shamoon 2022-07-29 14:43:49 -07:00
parent 7752d83781
commit 9a66bd3c34
2 changed files with 8 additions and 4 deletions

View File

@ -1,5 +1,5 @@
<div class="row flex-wrap"> <div class="row flex-wrap">
<div class="col mb-2 mb-xl-0"> <div class="col mb-2 mb-xxl-0">
<div class="form-inline d-flex align-items-center"> <div class="form-inline d-flex align-items-center">
<div class="input-group input-group-sm flex-fill w-auto flex-nowrap"> <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
<div ngbDropdown> <div ngbDropdown>
@ -15,10 +15,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="w-100 d-xxl-none"></div>
<div class="col col-xl-auto"> <div class="col col-xl-auto">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
<div class="d-flex flex-wrap mb-2 mb-lg-0"> <div class="d-flex flex-wrap mb-2 mb-xxl-0">
<app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title <app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
filterPlaceholder="Filter tags" i18n-filterPlaceholder filterPlaceholder="Filter tags" i18n-filterPlaceholder
[items]="tags" [items]="tags"
@ -63,7 +63,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="w-100 d-xxl-none"></div>
<div class="col col-xl-auto ps-0"> <div class="col col-xl-auto ps-0">
<button class="btn btn-link btn-sm px-0" [disabled]="!rulesModified" (click)="resetSelected()"> <button class="btn btn-link btn-sm px-0" [disabled]="!rulesModified" (click)="resetSelected()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

View File

@ -17,3 +17,7 @@
.d-flex.flex-wrap { .d-flex.flex-wrap {
column-gap: 0.7rem; column-gap: 0.7rem;
} }
input[type="text"] {
min-width: 120px;
}