From f2cba37d6d4c4844555dbe4fafcce1fa7465e5dc Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Thu, 13 Jan 2022 23:25:36 +0100 Subject: [PATCH] improving markdown design --- README.md | 4 +- demo/images/index.md | 86 +++++++++++++++++++ docs/index.html | 5 ++ .../gallery/blog/blog.gallery.component.css | 7 ++ .../gallery/blog/blog.gallery.component.html | 4 +- .../ui/gallery/blog/blog.gallery.component.ts | 7 ++ .../app/ui/gallery/gallery.component.css | 19 +++- .../app/ui/gallery/gallery.component.html | 5 +- 8 files changed, 129 insertions(+), 8 deletions(-) create mode 100644 demo/images/index.md diff --git a/README.md b/README.md index c8a1f1ad..29286c71 100644 --- a/README.md +++ b/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` diff --git a/demo/images/index.md b/demo/images/index.md new file mode 100644 index 00000000..42fb551f --- /dev/null +++ b/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 + + diff --git a/docs/index.html b/docs/index.html index ff82bf95..5621dc13 100644 --- a/docs/index.html +++ b/docs/index.html @@ -298,6 +298,11 @@
  • uses ffmpeg and ffprobe to generate video thumbnails
    • +
  • Markdown based blogging support + +
    • 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 24ad1c34..a3e2be62 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.css +++ b/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; +} 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 5bca521c..37a0788c 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.html +++ b/src/frontend/app/ui/gallery/blog/blog.gallery.component.html @@ -1,12 +1,12 @@
    -
    +
    - + {{md}}
    diff --git a/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts b/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts index b5705fc0..a86f925b 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts +++ b/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 { } diff --git a/src/frontend/app/ui/gallery/gallery.component.css b/src/frontend/app/ui/gallery/gallery.component.css index b3ac592d..cf0a52ef 100644 --- a/src/frontend/app/ui/gallery/gallery.component.css +++ b/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%; diff --git a/src/frontend/app/ui/gallery/gallery.component.html b/src/frontend/app/ui/gallery/gallery.component.html index e63156f4..b83cea63 100644 --- a/src/frontend/app/ui/gallery/gallery.component.html +++ b/src/frontend/app/ui/gallery/gallery.component.html @@ -48,7 +48,8 @@
    - @@ -57,7 +58,7 @@ - +