improving markdown design

README.md

@@ -213,8 +213,8 @@ apt-get install build-essential  libkrb5-dev gcc g++
     * List of these files are passed down to the UI modify its behaviour.
     * Currently, supported custom, per folder sorting.
  * Dockerized 
- * **Markdown based blogging support** - `future plan`
-   * you can write some note in the blog.md for every directory
+ * **Markdown based blogging support** 
+   * you can write some note in the *.md files for every directory
  * bug free :) - `In progress`
  
  

demo/images/index.md

@@ -0,0 +1,86 @@
+# Blog
+
+You can use this feature to create index.md files to your folders and render them in your gallery. 
+
+Here are some examples how to format the text:
+ 
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+ 

docs/index.html

@@ -298,6 +298,11 @@
           <li>uses ffmpeg and ffprobe to generate video thumbnails</li>
         </ul>
       </li>
+      <li>Markdown based blogging support
+        <ul>
+          <li>You can write some note in the *.md files for every directory</li>
+        </ul>
+      </li>
     </ul>
 
   </main>

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

@@ -4,3 +4,10 @@
 .card-body {
   overflow: hidden;
 }
+
+.text-preview{
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  overflow: hidden;
+}

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

@@ -1,12 +1,12 @@
 <div class="blog">
   <div class="card">
-    <div class="card-body" style="min-height: 112px" [style.height]="collapsed ? '112px':''">
+    <div class="card-body" style="min-height: 77px" [style.height]="collapsed ? '77px':''">
       <ng-container *ngFor="let md of markdowns; let i = index">
         <markdown
           *ngIf="!collapsed"
           [data]="md">
         </markdown>
-        <span *ngIf="collapsed">
+        <span *ngIf="collapsed" class="text-preview">
         {{md}}
       </span>
         <hr *ngIf="i != markdowns.length-1">

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

@@ -17,6 +17,13 @@ export class GalleryBlogComponent implements OnChanges {
   constructor(public blogService: BlogService) {
   }
 
+  get SampleText(): string {
+    if (!this.markdowns || this.markdowns.length < 1) {
+      return '';
+    }
+    return this.markdowns[0].length < 203 ? this.markdowns[0] : this.markdowns[0].substr(0, 200) + '...';
+  }
+
   onError($event: string): void {
 
   }

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

@@ -4,12 +4,22 @@
   margin-top: -20px;
 }
 
+.blog-wrapper {
+  opacity: 0.8;
+  display: flex;
+  position: relative;
+}
+
+.blog-wrapper:hover {
+  opacity: 1;
+}
+
 .blog-map-row {
   width: 100%;
   display: flex;
+  position: relative;
   margin-top: 0.2em;
   margin-bottom: 0.2em;
-  position: relative;
   min-height: 80px;
 }
 
@@ -19,10 +29,15 @@
   bottom: 0;
   margin-left: 2px;
   margin-right: 2px;
-  background-image: linear-gradient(transparent, #aaa);
+  color: #333;
   border: 0;
 }
 
+.btn-blog-details:hover {
+  color: #000;
+  background-image: linear-gradient(transparent, #ccc);
+}
+
 app-gallery-blog {
   float: left;
   width: 100%;

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

@@ -48,7 +48,8 @@
       <app-gallery-directories class="directories" [directories]="directories"></app-gallery-directories>
 
       <div class="blog-map-row">
-        <ng-container
+        <div class="blog-wrapper"
+          [style.width]="blogOpen ?  '100%' : 'calc(100% - 100px)'"
           *ngIf="config.Client.MetaFile.markdown && Content.metaFile && (Content.metaFile | mdFiles).length>0">
           <app-gallery-blog [collapsed]="!blogOpen"
                             [mdFiles]="Content.metaFile | mdFiles"></app-gallery-blog>
@@ -57,7 +58,7 @@
           <button class="btn btn-blog-details" (click)="blogOpen=!blogOpen"><span
             class="oi oi-chevron-{{blogOpen ? 'top' : 'bottom'}}"></span>
           </button>
-        </ng-container>
+        </div>
         <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
                          [photos]="Content.media | photosOnly"
                          [gpxFiles]="Content.metaFile | gpxFiles"></app-gallery-map>