Improve blog UI #711

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 {
@@ -325,6 +326,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     StringifyEnum,
     StringifySearchType,
     FileDTOToPathPipe,
+    FileDTOToRelativePathPipe,
     PhotoFilterPipe,
     ParseIntPipe,
     UsersComponent,

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
+    );
+  }
+}

src/frontend/app/ui/gallery/blog/blog.gallery.component.css

@@ -28,3 +28,7 @@
     display: block;
     overflow: hidden;
 }
+
+hr {
+    margin: auto 0;
+}

src/frontend/app/ui/gallery/blog/blog.gallery.component.html

@@ -3,17 +3,21 @@
         <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
-            *ngIf="open"
                                 [data]="md.text">
                         </markdown>
+                    </ng-container>
                     <span *ngIf="!open && first" class="text-preview">
             <markdown
                     [inline]="true"
                     [data]="md.textShort">
             </markdown>
           </span>
-          <hr *ngIf="open && !last">
                 </ng-container>
             </div>
         </div>

src/frontend/app/ui/gallery/blog/blog.service.ts

@@ -31,7 +31,11 @@ export class BlogService {
   }
 
   private async splitMarkDown(file: FileDTO, dates: number[]): Promise<GroupedMarkdown[]> {
-    const markdown = await this.getMarkDown(file);
+    const markdown = (await this.getMarkDown(file)).trim();
+
+    if (!markdown) {
+      return [];
+    }
 
     if (dates.length == 0) {
       return [{