From 71c823a6537f11dda1171fcb44756cf2ae7e4911 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Wed, 25 Oct 2023 14:38:54 +0200 Subject: [PATCH] Create main parts of short codes --- themes/tsc_vfl/assets/css/main.scss | 97 +++++++++++++++++-- themes/tsc_vfl/layouts/_default/baseof.html | 14 +++ themes/tsc_vfl/layouts/_default/home.html | 23 +++-- .../tsc_vfl/layouts/partials/page/head.html | 1 + .../shortcodes/tsc/news/gallery-image.html | 27 ++++++ .../layouts/shortcodes/tsc/news/gallery.html | 8 +- .../shortcodes/tsc/news/inline-float.html | 19 ++++ .../shortcodes/tsc/news/internal-video.html | 10 ++ .../shortcodes/tsc/news/youtube-video.html | 9 ++ themes/tsc_vfl/static/js/gallery.js | 18 ++++ 10 files changed, 209 insertions(+), 17 deletions(-) create mode 100644 themes/tsc_vfl/layouts/shortcodes/tsc/news/internal-video.html create mode 100644 themes/tsc_vfl/static/js/gallery.js diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss index a98b191..00d917d 100644 --- a/themes/tsc_vfl/assets/css/main.scss +++ b/themes/tsc_vfl/assets/css/main.scss @@ -25,6 +25,7 @@ body { margin: 0px; background-color: #ececec; font: 90% 'Open Sans', sans-serif; + height: 100vh; } h1, h2, h3, h4, h5, h6 { @@ -44,7 +45,8 @@ h1 { max-width: 1280px; margin: auto; background-color: #fcfcfc; - + overflow: auto; + #header { border-bottom: 2px solid rgba(173,173,173,.5); margin: 0 auto 30px; @@ -63,6 +65,7 @@ h1 { > .slider { width: calc(100% - 60px); + // visibility: hidden; // height: 250px; display: flex; padding: 0 10px; @@ -264,6 +267,46 @@ h1 { } } +#overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + z-index: 10; + + &.hidden { + display: none; + } + + .background { + width: 100%; + height: 100%; + position: absolute; + z-index: -10; + background-color: lightgrey; + opacity: 50%; + } + + .spacer { + flex: auto 1 0; + } + .dialog-column { + flex: 0 1 1; + + display: flex; + flex-direction: column; + justify-content: center; + .dialog { + background-color: white; + padding: 10px; + flex: 30% 0 0; + // height: 30%; + } + } +} + .person-list { display: flex; flex-wrap: wrap; @@ -306,28 +349,48 @@ h1 { .news-blog { .blog-entry { .header { + + margin: 5px 0 10px; a { - &::before { - content: '' !important; - } font-size: larger; } } .details { display: flex; - min-height: 240px; + // min-height: 240px; + margin-right: 2px; .teaser-image { flex: 33% 1 0; background-color: lightcyan; + + img { + width: 90%; + height: 190px; + object-fit: contain; + object-position: left top; + } } - .intro { + .right-side { flex: 66% 1 1; + display: flex; + flex-direction: column; + + .intro { + padding-right: 40px; + } + .more { + // float: right; + margin-top: 20px; + text-align: right; + } } - .teaser-image, .intro { + // .teaser-image, .intro { // display: ; - } + // } + } + } .pagination { @@ -347,6 +410,24 @@ h1 { } } +.tsc-gallery { + display: grid; + + &.cols-2 { + grid-template-columns: 1fr 1fr; + } + &.cols-3 { + grid-template-columns: 1fr 1fr 1fr; + } + &.cols-4 { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + + .tsc-gallery-img { + margin: none; + } +} + @font-face{ font-family: 'Open Sans Condensed'; font-style: normal; diff --git a/themes/tsc_vfl/layouts/_default/baseof.html b/themes/tsc_vfl/layouts/_default/baseof.html index dae6839..539d2d1 100644 --- a/themes/tsc_vfl/layouts/_default/baseof.html +++ b/themes/tsc_vfl/layouts/_default/baseof.html @@ -16,5 +16,19 @@ {{- partial "page/footer.html" . -}} + diff --git a/themes/tsc_vfl/layouts/_default/home.html b/themes/tsc_vfl/layouts/_default/home.html index 189fd65..84a11b3 100644 --- a/themes/tsc_vfl/layouts/_default/home.html +++ b/themes/tsc_vfl/layouts/_default/home.html @@ -3,23 +3,31 @@

{{ .Title }}

- {{ range (.Paginate (first 10 ( where .Site.RegularPages "Section" "==" "news")) 5 ).Pages }} + {{ range (.Paginate (first 200 ( where .Site.RegularPages "Section" "==" "news")) 10 ).Pages }} + {{ $urlBlogEntry := .RelPermalink}}
{{ .Date.Format "02.01.2006" }} - {{ .Title }} + {{ .Title }}
{{ $page := . }} {{ if .Params.Image }} - + {{ with (.Resources.GetMatch (.Params.Image)).Fit "290x190 webp" }} + + + + {{ end }} {{ end }}
-
- {{ with .Summary }} - {{ . }} - {{ end }} +
+
+ {{ with .Summary }} + {{ . }} + {{ end }} +
+
MEHR...
@@ -30,4 +38,3 @@ {{ partial "totop" }} {{ end }} -{{ define "left" }}{{ end }} diff --git a/themes/tsc_vfl/layouts/partials/page/head.html b/themes/tsc_vfl/layouts/partials/page/head.html index 69edb1d..bd38f70 100644 --- a/themes/tsc_vfl/layouts/partials/page/head.html +++ b/themes/tsc_vfl/layouts/partials/page/head.html @@ -9,4 +9,5 @@ {{ $title }} + diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery-image.html b/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery-image.html index e69de29..9bf13fa 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery-image.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery-image.html @@ -0,0 +1,27 @@ +{{ $cols := .Parent.Get "columns" }} +{{ $imgOriginal := .Page.Resources.GetMatch (.Get "src") }} +{{ $img := $imgOriginal }} +{{ if eq $cols "2" }} +{{ $img = $imgOriginal.Fit "500x1000 webp" }} +{{ else if eq $cols "3" }} +{{ $img = $imgOriginal.Fit "333x800 webp" }} +{{ else if eq $cols "4" }} +{{ $img = $imgOriginal.Fit "250x500 webp" }} +{{ else }} +{{ $img = $imgOriginal.Fit "800x1000 webp" }} +{{ end }} +{{ $imgFitted := $imgOriginal.Fit "850x1000 webp" }} +
+ + + +
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery.html b/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery.html index 59448a1..a34899c 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/news/gallery.html @@ -1 +1,7 @@ -{{ .Inner }} +{{ $colClass := "" }} +{{- with .Get "columns" }} +{{ $colClass = (print "cols-" .) }} +{{ end -}} +
+ {{ .Inner }} +
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/news/inline-float.html b/themes/tsc_vfl/layouts/shortcodes/tsc/news/inline-float.html index e69de29..718119e 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/news/inline-float.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/news/inline-float.html @@ -0,0 +1,19 @@ +
+ {{ with .Get "href" }} + + {{ end }} + + {{ with .Get "href" }} + + {{ end }} + {{ with .Get "caption" }} +
+ {{ . }} +
+ {{ end }} +
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/news/internal-video.html b/themes/tsc_vfl/layouts/shortcodes/tsc/news/internal-video.html new file mode 100644 index 0000000..5cdd47c --- /dev/null +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/news/internal-video.html @@ -0,0 +1,10 @@ + diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/news/youtube-video.html b/themes/tsc_vfl/layouts/shortcodes/tsc/news/youtube-video.html index e69de29..26e5792 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/news/youtube-video.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/news/youtube-video.html @@ -0,0 +1,9 @@ + diff --git a/themes/tsc_vfl/static/js/gallery.js b/themes/tsc_vfl/static/js/gallery.js new file mode 100644 index 0000000..aaeacee --- /dev/null +++ b/themes/tsc_vfl/static/js/gallery.js @@ -0,0 +1,18 @@ +$(function() { + $(".tsc-gallery-img a").click(function(ev){ + // console.debug(ev) + const url = ev.currentTarget.dataset.url + console.debug(url) + $('#overlay').removeClass('hidden') + $('#overlay .img img').attr('src', url) + }) + $('#overlay .background, #overlay .spacer').click(function(ev) { + $('#overlay').addClass('hidden') + $('#overlay .img img').attr('src', '') + }) + // $('#overlay').on('keydown', function(ev){ + // if(ev.keyCode === 27) { + // console.log('closing') + // } + // }) +})