You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
6.5 KiB
127 lines
6.5 KiB
{{ define "main" }}
|
|
<main class="post py-5">
|
|
<div class="container-fluid">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-10 col-lg-10 col-md-12 col-12">
|
|
<h1 class="post-title mb-3">{{ .Title }}</h1>
|
|
|
|
{{- if .Content }}
|
|
<div class="content mb-5">{{ .Content }}</div>
|
|
{{- end }}
|
|
|
|
<div id="work-filter" class="tab pb-4" role="tablist" aria-multiselectable="true">
|
|
<button type="button" role="tab" class="button-filter" aria-controls="allworks"
|
|
onclick="service(event, 'allworks')" id="firstopen" aria-selected="true">
|
|
{{ i18n "allWorks" }}</button>
|
|
{{ range (where .Site.RegularPages "Type" "filters") }}
|
|
<button type="button" role="tab" class="button-filter" aria-controls="{{ .Page.Params.id }}"
|
|
onclick="service(event, '{{ .Page.Params.id }}')" aria-selected="false">{{
|
|
.Page.Params.title }}</button>
|
|
{{ end }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
{{ $work := where .Pages "Type" "work" }}
|
|
|
|
<div class="allworks tabcontentservice mt-5">
|
|
|
|
<div class="row">
|
|
{{ range first 2 ($work) }}
|
|
<div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-5 work">
|
|
<a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
|
|
<img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="636px" height="357px" alt="">
|
|
<img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
|
|
</a>
|
|
<a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
|
|
<p class="mb-0">
|
|
{{ range $i, $e := .Params.categories -}}
|
|
{{- if $i -}}, {{ end -}}
|
|
{{ $category := substr (replace $e " " "") 0 }}
|
|
<a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="{{ i18n "workTagged" }} {{ i18n . }}">{{ i18n $category }}</a>
|
|
{{- end -}}
|
|
</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="row pt-lg-5 pt-0 pb-5">
|
|
{{ range after 2 ($work) }}
|
|
<div class="col-xl-4 col-lg-12 col-12 pb-5 work">
|
|
<a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
|
|
<img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="416px" height="234px" alt="">
|
|
<img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
|
|
</a>
|
|
<a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
|
|
<p class="mb-0">
|
|
{{ range $i, $e := .Params.categories -}}
|
|
{{- if $i -}}, {{ end -}}
|
|
{{ $category := substr (replace $e " " "") 0 }}
|
|
<a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="{{ i18n "workTagged" }} {{ i18n . }}">{{ i18n $category }}</a>
|
|
{{- end -}}
|
|
</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row py-5">
|
|
{{ range ($work) }}
|
|
<div class="col-xl-4 col-lg-12 col-12 mb-4 mt-0 work tabcontentservice {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ replaceRE " " "-" $e | lower }}{{- end -}}">
|
|
<a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
|
|
<img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="416px" height="234px" alt="">
|
|
<img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
|
|
</a>
|
|
<a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
|
|
<p class="mb-0">
|
|
{{ range $i, $e := .Params.categories -}}
|
|
{{- if $i -}}, {{ end -}}
|
|
{{ $category := substr (replace $e " " "") 0 }}
|
|
<a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="{{ i18n "workTagged" }} {{ i18n . }}">{{ i18n $category }}</a>
|
|
{{- end -}}
|
|
</p>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<script>
|
|
document.getElementById("firstopen").click();
|
|
|
|
function service(evt, type) {
|
|
// Declare all variables
|
|
var i, tabcontentservice, tablinkservice;
|
|
|
|
// Get all elements with class="tabcontentservice" and hide them
|
|
tabcontentservice = document.getElementsByClassName("tabcontentservice");
|
|
for (i = 0; i < tabcontentservice.length; i++) {
|
|
tabcontentservice[i].style.display = "none";
|
|
}
|
|
|
|
// Get all elements with class="button-filter" and remove the class "active"
|
|
tablinkservice = document.getElementsByClassName("button-filter");
|
|
for (i = 0; i < tablinkservice.length; i++) {
|
|
tablinkservice[i].className = tablinkservice[i].className.replace(" selected", "");
|
|
tablinkservice[i].setAttribute("aria-selected", "false");
|
|
}
|
|
|
|
// Show the current tab, and add an "active" class to the button that opened the tab
|
|
// document.dataset(type).style.display = "block";
|
|
const className = "" + '.' + type + "";
|
|
const selectedItems = document.querySelectorAll(className);
|
|
console.log(selectedItems);
|
|
selectedItems.forEach(selectedItem => {
|
|
selectedItem.style.display = "block"
|
|
});
|
|
|
|
evt.currentTarget.className += " selected";
|
|
evt.currentTarget.setAttribute("aria-selected", "true");
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{{ end }}
|