diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts index 77ce8de1..700d1430 100644 --- a/src/frontend/app/app.module.ts +++ b/src/frontend/app/app.module.ts @@ -184,6 +184,7 @@ import { SortingMethodSettingsEntryComponent } from './ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component'; import {ContentLoaderService} from './ui/gallery/contentLoader.service'; +import {FileDTOToRelativePathPipe} from './pipes/FileDTOToRelativePathPipe'; @Injectable() export class MyHammerConfig extends HammerGestureConfig { @@ -197,7 +198,7 @@ export class MyHammerConfig extends HammerGestureConfig { export class CustomUrlSerializer implements UrlSerializer { private defaultUrlSerializer: DefaultUrlSerializer = - new DefaultUrlSerializer(); + new DefaultUrlSerializer(); parse(url: string): UrlTree { // Encode parentheses @@ -208,9 +209,9 @@ export class CustomUrlSerializer implements UrlSerializer { serialize(tree: UrlTree): string { return this.defaultUrlSerializer - .serialize(tree) - .replace(/%28/g, '(') - .replace(/%29/g, ')'); + .serialize(tree) + .replace(/%28/g, '(') + .replace(/%29/g, ')'); } } @@ -325,6 +326,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon; StringifyEnum, StringifySearchType, FileDTOToPathPipe, + FileDTOToRelativePathPipe, PhotoFilterPipe, ParseIntPipe, UsersComponent, diff --git a/src/frontend/app/pipes/FileDTOToRelativePathPipe.ts b/src/frontend/app/pipes/FileDTOToRelativePathPipe.ts new file mode 100644 index 00000000..1298b6ec --- /dev/null +++ b/src/frontend/app/pipes/FileDTOToRelativePathPipe.ts @@ -0,0 +1,17 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { FileDTO } from '../../../common/entities/FileDTO'; +import { Utils } from '../../../common/Utils'; + +@Pipe({ name: 'toRelativePath' }) +export class FileDTOToRelativePathPipe implements PipeTransform { + transform(metaFile: FileDTO): string | null { + if (!metaFile) { + return null; + } + return Utils.concatUrls( + metaFile.directory.path, + metaFile.directory.name, + metaFile.name + ); + } +} diff --git a/src/frontend/app/ui/gallery/blog/blog.gallery.component.css b/src/frontend/app/ui/gallery/blog/blog.gallery.component.css index 8262532d..73768133 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.css +++ b/src/frontend/app/ui/gallery/blog/blog.gallery.component.css @@ -1,30 +1,34 @@ .btn-blog-details { - position: absolute; - bottom: 0; - border: 0; - width: 100%; + position: absolute; + bottom: 0; + border: 0; + width: 100%; } .btn-blog-details:hover { - background-image: linear-gradient(transparent, rgba(var(--bs-body-color-rgb), 0.5)); + background-image: linear-gradient(transparent, rgba(var(--bs-body-color-rgb), 0.5)); } .blog { - opacity: 0.8; - position: relative; + opacity: 0.8; + position: relative; } .blog:hover { - opacity: 1; + opacity: 1; } .card-body { - overflow: hidden; + overflow: hidden; } .text-preview { - text-overflow: ellipsis; - white-space: nowrap; - display: block; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + overflow: hidden; +} + +hr { + margin: auto 0; } diff --git a/src/frontend/app/ui/gallery/blog/blog.gallery.component.html b/src/frontend/app/ui/gallery/blog/blog.gallery.component.html index 3f975feb..5a209f83 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.html +++ b/src/frontend/app/ui/gallery/blog/blog.gallery.component.html @@ -1,25 +1,29 @@ -
-
-
- - - - +
+
+
+ + +
+
+
{{md.file | toRelativePath}}
+
+ + +
+ + [inline]="true" + [data]="md.textShort"> -
-
-
-
+ +
+
- -
+ +
diff --git a/src/frontend/app/ui/gallery/blog/blog.service.ts b/src/frontend/app/ui/gallery/blog/blog.service.ts index 5b80ac0b..3691a929 100644 --- a/src/frontend/app/ui/gallery/blog/blog.service.ts +++ b/src/frontend/app/ui/gallery/blog/blog.service.ts @@ -16,22 +16,26 @@ 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 { - const markdown = await this.getMarkDown(file); + const markdown = (await this.getMarkDown(file)).trim(); + + if (!markdown) { + return []; + } if (dates.length == 0) { return [{ @@ -101,13 +105,13 @@ export class BlogService { public getMarkDown(file: FileDTO): Promise { 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).then((val: string) => { this.cache[filePath] = val;