paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #141 from shamoon/document-list-layout-tweaks

Browse Source 
Document list small card layout adjustments
This commit is contained in:
Jonas Winkler
2020-12-17 22:08:48 +01:00
committed by GitHub
parent f2dd56f78d 05951b6d72
commit 4879dc956d
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@@ -1,4 +1,4 @@
<div class="col p-2 h-100" style="width: 16rem;"> <div class="col p-2 h-100">
<div class="card h-100 shadow-sm"> <div class="card h-100 shadow-sm">
<div class="border-bottom"> <div class="border-bottom">
<img class="card-img doc-img" [src]="getThumbUrl()"> <img class="card-img doc-img" [src]="getThumbUrl()">
@@ -22,7 +22,7 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="d-flex justify-content-between align-items-center ml-n2"> <div class="d-flex justify-content-between align-items-center mx-n2">
<div class="btn-group"> <div class="btn-group">
<a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit"> <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -42,7 +42,7 @@
</svg> </svg>
</a> </a>
</div> </div>
<small class="text-muted">{{document.created | date}}</small> <small class="text-muted pl-1">{{document.created | date}}</small>
</div> </div>
</div> </div>

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

@@ -116,6 +116,6 @@
</table> </table>
<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'"> <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
<app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small> <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
</div> </div>

21
src-ui/src/app/components/document-list/document-list.component.scss
View File

@@ -0,0 +1,21 @@
$paperless-card-breakpoints: (
0: 2, // xs
768px: 3, //md
992px: 4, //lg
1200px: 5, //xl
1400px: 6, // xxl
1600px: 7,
1800px: 8,
2000px: 9
);
.row-cols-paperless-cards {
@each $width, $n_cols in $paperless-card-breakpoints {
@media(min-width: $width) {
> * {
flex: 0 0 auto;
width: 100% / $n_cols;
}
}
}
}