xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Improve blog UI and fix missing short text #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-09-08 00:04:24 +02:00
parent 131af1f4f4
commit 9d13cff002
2 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/frontend/app/ui/gallery/blog/blog.gallery.component.html
View File

@ -1,29 +1,29 @@
<ng-container *ngIf="mkObservable | async as markdowns">
<div class="blog" *ngIf="markdowns.length > 0">
<div class="card">
<div class="card-body" style="min-height: 77px" [style.height]="!open ? '77px':''">
<ng-container *ngFor="let md of markdowns; let last = last; let first = first">
<ng-container *ngIf="open">
<div *ngIf="markdowns.length > 1" class="row">
<hr class="col">
<div class="col-auto">{{md.file | toRelativePath}}</div>
</div>
<markdown
[data]="md.text">
</markdown>
</ng-container>
<span *ngIf="!open && first" class="text-preview">
<div class="blog" *ngIf="markdowns.length > 0">
<div class="card">
<div class="card-body" style="min-height: 77px" [style.height]="!open ? '77px':''">
<ng-container *ngFor="let md of markdowns; let last = last; let first = first">
<ng-container *ngIf="open">
<div *ngIf="markdowns.length > 1" class="row">
<hr class="col">
<div class="col-auto small fst-italic">{{md.file | toRelativePath}}</div>
</div>
<markdown
[inline]="true"
[data]="md.textShort">
[data]="md.text">
</markdown>
</ng-container>
<span *ngIf="!open && first" class="text-preview">
<markdown
[inline]="true"
[data]="md.textShort">
</markdown>
</span>
</ng-container>
</div>
</div>
<button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
<ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
</button>
</ng-container>
</div>
</div>
<button class="btn btn-blog-details text-body" (click)="toggleCollapsed()">
<ng-icon [name]="open ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
</button>
</div>
</ng-container>

36
src/frontend/app/ui/gallery/blog/blog.service.ts
View File

@ -16,18 +16,18 @@ export class BlogService {
private mdFilesFilterPipe: MDFilesFilterPipe) {
this.groupedMarkdowns = this.galleryService.sortedFilteredContent.pipe(
mergeMap(async content => {
if (!content) {
return [];
}
const dates = content.mediaGroups.map(g => g.date)
.filter(d => !!d).map(d => d.getTime());
mergeMap(async content => {
if (!content) {
return [];
}
const dates = content.mediaGroups.map(g => g.date)
.filter(d => !!d).map(d => d.getTime());
const files = this.mdFilesFilterPipe.transform(content.metaFile)
.map(f => this.splitMarkDown(f, dates));
const files = this.mdFilesFilterPipe.transform(content.metaFile)
.map(f => this.splitMarkDown(f, dates));
return (await Promise.all(files)).flat();
}), shareReplay(1));
return (await Promise.all(files)).flat();
}), shareReplay(1));
}
private async splitMarkDown(file: FileDTO, dates: number[]): Promise<GroupedMarkdown[]> {
@ -40,7 +40,8 @@ export class BlogService {
if (dates.length == 0) {
return [{
text: markdown,
file: file
file: file,
textShort: markdown.substring(0, 200)
}];
}
@ -55,7 +56,8 @@ export class BlogService {
if (matches.length == 0) {
return [{
text: markdown,
file: file
file: file,
textShort: markdown.substring(0, 200)
}];
}
@ -99,19 +101,19 @@ export class BlogService {
}
ret.forEach(md => md.textShort = md.text.substring(0, 200));
console.log(ret);
return ret;
}
public getMarkDown(file: FileDTO): Promise<string> {
const filePath = Utils.concatUrls(
file.directory.path,
file.directory.name,
file.name
file.directory.path,
file.directory.name,
file.name
);
if (!this.cache[filePath]) {
this.cache[filePath] = this.networkService.getText(
'/gallery/content/' + filePath
'/gallery/content/' + filePath
);
(this.cache[filePath] as Promise<string>).then((val: string) => {
this.cache[filePath] = val;