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

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

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