gcg/gcg-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bootstrap v5 Migration, Style Cleanups, Formular-Umgestaltung, Layout-Verbesserungen (schließt #222)

Browse Source
This commit is contained in:
Denys Konovalov
2023-04-04 18:34:22 +02:00
parent 0b7cc92bfc
commit 64f85e41c2
35 changed files with 193 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/shortcodes/gallery.html
View File

@ -7,7 +7,7 @@
{{ if $isimg }}
{{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
<div class="col-lg-3 col-md-4 col-sm-6">
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src="{{ $linkURL }}"></a>
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ $linkURL }}"></a>
</div>
{{ end }}
{{ end }}

2
layouts/shortcodes/image.html
View File

@ -1,3 +1,3 @@
<div class="col-lg-3 col-md-4 col-sm-6">
<a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src='{{ .Get "src" }}'></a>
<a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
</div>

117
layouts/shortcodes/slider.html
View File

@ -1,75 +1,44 @@
<div class="img-slider">
{{- with (.Get "dir") -}}
{{- $files := readDir (print "/static/" .) }}
{{- range $index, $file := $files -}}
{{- $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{- if $isimg }}
{{- $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
<div class="is-slide {{if eq $index 0 }}active{{end}}">
<img src="{{ $linkURL }}" alt="">
</div>
{{- end }}
{{- end }}
{{- end }}
<div class="is-navigation">
<div class="is-btn active"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
<div class="carousel carousel-dark slide" data-bs-ride="true" id='slider-{{ md5 (.Get "dir") }}'>
{{ $dir := (.Get "dir") }}
{{ with $dir }}
{{ $files := readDir (print "/static/" .) }}
<div class="carousel-indicators">
{{ range $index, $file := $files }}
{{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{ if $isimg }}
{{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
{{ if eq $index 0 }}
<button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}" class="active"></button>
{{ else }}
<button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}"></button>
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
<script type="text/javascript">
var slides = document.querySelectorAll('.is-slide');
var btns = document.querySelectorAll('.is-btn');
let currentSlide = 1;
// Javascript for image slider manual navigation
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
manualNav(i);
currentSlide = i;
});
});
// Javascript for image slider autoplay navigation
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
}
if(i >= slides.length){
return;
}
repeater();
/// Time in ms
}, 5000);
}
repeater();
}
repeat();
</script>
<div class="carousel-inner">
{{ range $index, $file := $files }}
{{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{ if $isimg }}
{{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
{{ if eq $index 0 }}
<div class="carousel-item active">
<img src="{{ $linkURL }}" class="d-block w-100">
</div>
{{ else }}
<div class="carousel-item">
<img src="{{ $linkURL }}" class="d-block w-100">
</div>
{{ end }}
{{ end }}
{{ end }}
</div>
{{ end }}
<button class="carousel-control-prev" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Zurück</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vor</span>
</button>
</div>

2
layouts/shortcodes/youtube.html
View File

@ -4,7 +4,7 @@
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
<div {{ with $class }}class="{{ . }}" {{ else }} style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
<iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
</div>
{{ end -}}