Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-04 03:27:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile filter editor layout with long languages

Browse Source
This commit is contained in:
Michael Shamoon 2022-05-11 23:09:22 -07:00
parent c126cf2bc1
commit b391dd6a3f
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src-ui/src/app/components/document-list/document-list.component.html
View File

@ -1,10 +1,11 @@
<app-page-header [title]="getTitle()">
<div ngbDropdown class="me-2 flex-fill d-flex">
<button class="btn btn-sm btn-outline-primary flex-fill" id="dropdownSelect" ngbDropdownToggle>
<div ngbDropdown class="me-2 d-flex">
<button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
</svg>&nbsp;<ng-container i18n>Select</ng-container>
</svg>
<div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
<button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
@ -75,7 +76,7 @@
</app-page-header>
<div class="row sticky-top pt-4 pb-2 pb-lg-4 bg-body">
<div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
<app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
<app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
</div>

14
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
View File

@ -13,9 +13,9 @@
</div>
</div>
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<div class="d-flex">
<app-filterable-dropdown class="me-2 flex-fill" title="Tags" icon="tag-fill" i18n-title
<div class="col col-xl-auto">
<div class="d-flex flex-wrap">
<app-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
filterPlaceholder="Filter tags" i18n-filterPlaceholder
[items]="tags"
[(selectionModel)]="tagSelectionModel"
@ -23,26 +23,26 @@
[multiple]="true"
(open)="onTagsDropdownOpen()"
[allowSelectNone]="true"></app-filterable-dropdown>
<app-filterable-dropdown class="me-2 flex-fill" title="Correspondent" icon="person-fill" i18n-title
<app-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
[items]="correspondents"
[(selectionModel)]="correspondentSelectionModel"
(selectionModelChange)="updateRules()"
(open)="onCorrespondentDropdownOpen()"
[allowSelectNone]="true"></app-filterable-dropdown>
<app-filterable-dropdown class="me-2 flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
<app-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
filterPlaceholder="Filter document types" i18n-filterPlaceholder
[items]="documentTypes"
[(selectionModel)]="documentTypeSelectionModel"
(open)="onDocumentTypeDropdownOpen()"
(selectionModelChange)="updateRules()"
[allowSelectNone]="true"></app-filterable-dropdown>
<app-date-dropdown class="me-2"
<app-date-dropdown class="mb-2 mb-xl-0"
title="Created" i18n-title
(datesSet)="updateRules()"
[(dateBefore)]="dateCreatedBefore"
[(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
<app-date-dropdown
<app-date-dropdown class="mb-2 mb-xl-0"
[(dateBefore)]="dateAddedBefore"
[(dateAfter)]="dateAddedAfter"
title="Added" i18n-title

4
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
View File

@ -14,6 +14,6 @@
border-bottom-right-radius: 0;
}
.me-2 {
margin-right: 0.7rem !important; // tweak to make room for badges
.d-flex.flex-wrap {
column-gap: 0.7rem;
}