Reformat documents
This commit is contained in:
Patrick Neff
parent
81bcbbb92f
commit
a4f3ae2e52
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
trailingComma: "es5",
|
||||
tabWidth: 2,
|
||||
useTabs: false,
|
||||
semi: false,
|
||||
singleQuote: true
|
||||
};
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
{{- partial "schema/article.html" . -}}
|
||||
{{- end -}}
|
||||
{{- if (eq .Kind "section") -}}
|
||||
{{- partial "schema/collectionpage.html" . -}}
|
||||
{{- partial "schema/collectionPage.html" . -}}
|
||||
{{- end -}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
|
||||
<link rel="shortcut icon" href="/img/favicon.ico">
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
<meta name="msapplication-TileBackground" content="#000000">
|
||||
<meta name="msapplication-TileImage" content="/img/ms-tile.png">
|
||||
{{- block "head" . -}}{{- end -}}
|
||||
|
||||
<body>
|
||||
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
|
||||
<div id="header" class="large">
|
||||
|
|
@ -33,14 +34,16 @@
|
|||
<div class="navbar-logo padding">
|
||||
<a href="{{.Site.BaseURL }}">
|
||||
<picture>
|
||||
<source srcset="/img/logo.svg"
|
||||
media="(min-width: 48rem)">
|
||||
<source srcset="/img/logo.svg" media="(min-width: 48rem)">
|
||||
<img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar small">
|
||||
<input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span class="toggler"><span class="line"></span><span class="line"></span><span class="line"></span></span></label>
|
||||
<input type="checkbox" class="hamburger" id="top-navigation-checkbox"
|
||||
name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span
|
||||
class="toggler"><span class="line"></span><span class="line"></span><span
|
||||
class="line"></span></span></label>
|
||||
<div class="navbar-container">
|
||||
<nav>
|
||||
<ul>
|
||||
|
|
@ -164,4 +167,5 @@
|
|||
{{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
|
||||
{{- block "scripts" . -}}{{- end -}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -8,13 +8,16 @@
|
|||
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<a href="{{ .RelPermalink }}"><h4>{{ .Title }}</h4></a>
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<h4>{{ .Title }}</h4>
|
||||
</a>
|
||||
{{ .Summary }}
|
||||
{{- if .Truncated -}}
|
||||
<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}…</a>
|
||||
{{- end -}}
|
||||
<footer>
|
||||
<time class="list-item-lastmod" datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
<time class="list-item-lastmod"
|
||||
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
|
|
@ -24,7 +24,8 @@
|
|||
{{- end -}}
|
||||
<footer class="single-footer padding">
|
||||
<p>
|
||||
<i class="fa fa-calendar"></i> <time datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
<i class="fa fa-calendar"></i> <time
|
||||
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@
|
|||
{{- $images = .Resources.ByType "image" -}}
|
||||
{{- end -}}
|
||||
{{- range $images -}}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $image }}
|
||||
{{ else }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ end }}
|
||||
{{ with $image }}
|
||||
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}}
|
||||
<li class="col-xs-6 col-sm-4">
|
||||
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}}
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
|
|
@ -14,11 +14,15 @@
|
|||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
|
||||
{{- end -}}
|
||||
{{ with .Params.offer }}<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }}
|
||||
{{ with .Params.offer }}
|
||||
<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }}
|
||||
<p class="type">Typ: {{ range $index, $value := .Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
|
||||
{{ with .Params.material }}<p class="material">Material: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.ornament }}<p class="ornament">Ornament: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.description }}<p class="description">{{ . }}</p>{{ end }}
|
||||
{{ with .Params.material }}
|
||||
<p class="material">Material: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.ornament }}
|
||||
<p class="ornament">Ornament: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.description }}
|
||||
<p class="description">{{ . }}</p>{{ end }}
|
||||
<p class="article-id">Art. Nr.: {{ .Params.article_id }}</p>
|
||||
{{ with .Content }}
|
||||
{{ . }}
|
||||
|
|
@ -30,11 +34,11 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- define "head" -}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "scripts" -}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
|
||||
{{- end -}}
|
||||
|
|
@ -8,15 +8,16 @@
|
|||
{{- $images = .Resources.ByType "image" -}}
|
||||
{{- end -}}
|
||||
{{- range $images -}}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $image }}
|
||||
{{ else }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ end }}
|
||||
{{ with $image }}
|
||||
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
|
||||
<li class="col-xs-6 col-sm-4">
|
||||
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "content" }}
|
||||
<div id="index">
|
||||
<div id="index">
|
||||
<div class="container transparent">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact">
|
||||
|
|
@ -33,7 +33,9 @@
|
|||
|
||||
<div class="container">
|
||||
<section id="index-hero">
|
||||
<a class="anchor" id="{{ i18n "about-us" }}"><h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1></a>
|
||||
<a class="anchor" id="{{ i18n "about-us" }}">
|
||||
<h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1>
|
||||
</a>
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Params.about_us }}
|
||||
<li class="col-xs-12 col-sm-4">
|
||||
|
|
@ -50,7 +52,9 @@
|
|||
<div class="container">
|
||||
<section class="row" id="index-contact">
|
||||
<div class="col-xs-12">
|
||||
<a class="anchor" id="{{ i18n "contact" }}"><h1 class="padding">Kontakt</h1></a>
|
||||
<a class="anchor" id="{{ i18n "contact" }}">
|
||||
<h1 class="padding">Kontakt</h1>
|
||||
</a>
|
||||
<div class="call-to-action flex row text-center">
|
||||
<div class="padding">
|
||||
<a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
|
||||
|
|
@ -95,7 +99,8 @@
|
|||
|
||||
<div class="container">
|
||||
<section class="row" id="index-news">
|
||||
<h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
|
||||
<h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten"
|
||||
id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
|
||||
<div class="col-xs-12">
|
||||
<ul class="list-unstyled row">
|
||||
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
|
||||
|
|
@ -126,6 +131,6 @@
|
|||
</section>
|
||||
</div>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -44,5 +44,7 @@
|
|||
{{- end -}}
|
||||
{{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
|
||||
</address>
|
||||
<a href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i class="fa fa-map"></i> Zum Routenplaner</a>
|
||||
<a
|
||||
href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i
|
||||
class="fa fa-map"></i> Zum Routenplaner</a>
|
||||
</section>
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||
{{ end }}
|
||||
<li class="{{ if eq .p1 .p2 }} active{{ end }}">
|
||||
<a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }} <i class="fa fa-chevron-right"></i>{{ end }}
|
||||
<a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }}
|
||||
<i class="fa fa-chevron-right"></i>{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
@ -8,8 +8,9 @@
|
|||
{{- $imgClass := .imgClass -}}
|
||||
{{- $href := .ctx.Params.href }}
|
||||
|
||||
<figure {{- with .class }} class="{{ . }}"{{- end -}}>
|
||||
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}"{{- with .lightbox }} data-lightbox{{- end -}}>
|
||||
<figure {{- with .class }} class="{{ . }}" {{- end -}}>
|
||||
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}" {{- with .lightbox }}
|
||||
data-lightbox{{- end -}}>
|
||||
{{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}}
|
||||
</a>
|
||||
{{ with .ctx.Params.offer }}
|
||||
|
|
@ -22,7 +23,9 @@
|
|||
<figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}">
|
||||
{{- if .showTitle -}}
|
||||
{{- if $href -}}
|
||||
<a href="{{$href}}"><h3>{{ $title }}</h3></a>
|
||||
<a href="{{$href}}">
|
||||
<h3>{{ $title }}</h3>
|
||||
</a>
|
||||
{{- else -}}
|
||||
<h3>{{ $title }}</h3>
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,25 @@
|
|||
{{ $keep := .keepOriginal}}
|
||||
{{- $title := .ctx.Name -}}
|
||||
{{- with .ctx.Title -}}
|
||||
{{- $title = . -}}
|
||||
{{- $title = . -}}
|
||||
{{- end -}}
|
||||
{{- $alt := $title -}}
|
||||
{{- with .ctx.Params.alt -}}
|
||||
{{- $alt = . -}}
|
||||
{{- $alt = . -}}
|
||||
{{- end -}}
|
||||
{{ $class := "" }}
|
||||
{{- with .class -}}
|
||||
{{- $class = . -}}
|
||||
{{- $class = . -}}
|
||||
{{- end -}}
|
||||
{{- $ctx := .ctx -}}
|
||||
{{ with .image }}
|
||||
{{ if eq $keep true }}
|
||||
<img alt="{{ $alt }}"
|
||||
title="{{ $title }}"
|
||||
class="original {{ $class }}"
|
||||
src="{{ .RelPermalink }}" />
|
||||
<img alt="{{ $alt }}" title="{{ $title }}" class="original {{ $class }}" src="{{ .RelPermalink }}" />
|
||||
{{ else }}
|
||||
{{- $imageSm := .Fill "300x300 Top" -}}
|
||||
{{- $imageMd := .Fill "500x500 Top" -}}
|
||||
<img alt="{{ $alt }}"
|
||||
title="{{ $title }}"
|
||||
class="{{ $class }}"
|
||||
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
|
||||
sizes="(min-width: 48rem) 300px, 500px"
|
||||
{{- $imageSm := .Fill "300x300 Top" -}}
|
||||
{{- $imageMd := .Fill "500x500 Top" -}}
|
||||
<img alt="{{ $alt }}" title="{{ $title }}" class="{{ $class }}"
|
||||
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w" sizes="(min-width: 48rem) 300px, 500px"
|
||||
src="{{ $imageMd.RelPermalink }}" />
|
||||
{{ end }}
|
||||
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
{{- $currentPage := .ctx -}}
|
||||
{{- $link := .item -}}
|
||||
{{- if (eq .item.Identifier "copyright") -}}
|
||||
<li>
|
||||
<li>
|
||||
<a href="{{ .item.URL }}">
|
||||
<span>© {{ $currentPage.Site.Copyright }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
{{- else -}}
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
||||
{{- if ne .item.Title "" -}}
|
||||
<a href="{{ .item.URL }}">
|
||||
{{ $link.Pre }}
|
||||
<span>{{ $link.Name }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
</li>
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{{- $js := resources.Get .path -}}
|
||||
{{ if .ctx.Site.IsServer }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
{{ else }}
|
||||
{{- $js = $js | resources.Fingerprint -}}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ if .ctx.Site.IsServer }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
{{ else }}
|
||||
{{- $js = $js | resources.Fingerprint -}}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ end }}
|
||||
|
|
@ -4,46 +4,46 @@
|
|||
{{- $description := true -}}
|
||||
{{- $lightbox := true -}}
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- with .Get "search" -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get "original" -}}
|
||||
{{- $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "title" -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- $description := true -}}
|
||||
{{ with .Get "description" -}}
|
||||
{{- end -}}
|
||||
{{- with .Get "lightbox" -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "search" -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get "original" -}}
|
||||
{{- $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "title" -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- $description := true -}}
|
||||
{{ with .Get "description" -}}
|
||||
{{- end -}}
|
||||
{{- with .Get "lightbox" -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- with .Get 0 -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 1 -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 2 -}}
|
||||
{{ $description = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 3 -}}
|
||||
{{ $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 4 -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 0 -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 1 -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 2 -}}
|
||||
{{ $description = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 3 -}}
|
||||
{{ $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 4 -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="clearfix"></div>
|
||||
{{ with .Inner }}
|
||||
<ul class="list-unstyled row gallery">
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ . }}
|
||||
</ul>
|
||||
</ul>
|
||||
{{ else }}
|
||||
<ul class="list-unstyled row gallery">
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ range $.Page.Resources.Match $search }}
|
||||
{{- if (ne .Params.featured true) -}}
|
||||
<li class="col-xs-6 col-sm-4">
|
||||
|
|
@ -51,5 +51,5 @@
|
|||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</ul>
|
||||
{{- end -}}
|
||||
|
|
@ -8,48 +8,48 @@
|
|||
{{ $showDescription := true }}
|
||||
{{ $list := false }}
|
||||
{{ if .IsNamedParams }}
|
||||
{{ with .Get "search" }}
|
||||
{{ $search = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "class" }}
|
||||
{{ $class = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "title" }}
|
||||
{{ $title = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "description" }}
|
||||
{{ $description = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "alt" }}
|
||||
{{ $alt = .}}
|
||||
{{ else }}
|
||||
{{ $alt = $description}}
|
||||
{{ end }}
|
||||
{{ with .Get "lightbox" }}
|
||||
{{ $lightbox = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "showTitle" }}
|
||||
{{ $showTitle = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "showDescription" }}
|
||||
{{ $showTitle = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "list" }}
|
||||
{{ $list = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "search" }}
|
||||
{{ $search = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "class" }}
|
||||
{{ $class = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "title" }}
|
||||
{{ $title = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "description" }}
|
||||
{{ $description = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "alt" }}
|
||||
{{ $alt = .}}
|
||||
{{ else }}
|
||||
{{ with .Get 0 }}
|
||||
{{ $search = . }}
|
||||
{{ end }}
|
||||
{{ with .Get 1 }}
|
||||
{{ $class = . }}
|
||||
{{ end }}
|
||||
{{ $alt = $description}}
|
||||
{{ end }}
|
||||
{{ with .Get "lightbox" }}
|
||||
{{ $lightbox = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "showTitle" }}
|
||||
{{ $showTitle = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "showDescription" }}
|
||||
{{ $showTitle = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "list" }}
|
||||
{{ $list = .}}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Get 0 }}
|
||||
{{ $search = . }}
|
||||
{{ end }}
|
||||
{{ with .Get 1 }}
|
||||
{{ $class = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $image := $.Page.Resources.GetMatch $search }}
|
||||
{{ if $list }}
|
||||
<li class="col-xs-6 col-sm-4 padding">
|
||||
{{ end }}
|
||||
<li class="col-xs-6 col-sm-4 padding">
|
||||
{{ end }}
|
||||
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
|
||||
{{ if $list }}
|
||||
</li>
|
||||
{{ if $list }}
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import Vue from "vue"
|
||||
import Vue from 'vue'
|
||||
|
||||
import CatalogArticle from "../vue/CatalogArticle.vue"
|
||||
import ModelViewer from "../vue/ModelViewer.vue"
|
||||
import CatalogArticle from '../vue/CatalogArticle.vue'
|
||||
import ModelViewer from '../vue/ModelViewer.vue'
|
||||
|
||||
import store from "../vue/catalogArticle.store.js"
|
||||
import store from '../vue/catalogArticle.store.js'
|
||||
|
||||
let modelViewerRoot = document.getElementById('model-viewer-root')
|
||||
if (modelViewerRoot) {
|
||||
if (modelViewerRoot) {
|
||||
new Vue({
|
||||
store,
|
||||
render: function(h) {
|
||||
|
|
@ -14,11 +14,10 @@ let modelViewerRoot = document.getElementById('model-viewer-root')
|
|||
},
|
||||
beforeMount() {
|
||||
this.modelUrl = this.$el.dataset.url
|
||||
}
|
||||
},
|
||||
}).$mount(modelViewerRoot)
|
||||
}
|
||||
|
||||
|
||||
let catalogArticle = document.getElementById('catalog-article')
|
||||
if (catalogArticle) {
|
||||
new Vue({
|
||||
|
|
@ -28,6 +27,6 @@ if (catalogArticle) {
|
|||
},
|
||||
beforeMount() {
|
||||
this.modelUrl = this.$el.dataset.url
|
||||
}
|
||||
},
|
||||
}).$mount(catalogArticle)
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import Vue from "vue"
|
||||
|
||||
import CatalogSimilar from "../vue/CatalogSimilar.vue"
|
||||
|
||||
import wrap from '@vue/web-component-wrapper'
|
||||
|
||||
const myCatalogSimilar = wrap(Vue, CatalogSimilar)
|
||||
|
||||
window.customElements.define('my-catalog-similar', myCatalogSimilar)
|
||||
|
|
@ -1,86 +1,102 @@
|
|||
import 'cookieconsent'
|
||||
|
||||
|
||||
var gaDisableStr = 'ga-disable-' + $googleAnalytics;
|
||||
var gaDisableStr = 'ga-disable-' + $googleAnalytics
|
||||
|
||||
function disableGoogleAnalytics() {
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = true;
|
||||
window[gaDisableStr] = true
|
||||
}
|
||||
|
||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||||
window[gaDisableStr] = true;
|
||||
document.cookie =
|
||||
gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'
|
||||
window[gaDisableStr] = true
|
||||
}
|
||||
|
||||
function enableGoogleAnalytics() {
|
||||
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
|
||||
var doNotTrack = (dnt == "1" || dnt == "yes");
|
||||
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
|
||||
var doNotTrack = dnt == '1' || dnt == 'yes'
|
||||
if (!doNotTrack) {
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', $googleAnalytics, 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
;(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r
|
||||
;(i[r] =
|
||||
i[r] ||
|
||||
function() {
|
||||
;(i[r].q = i[r].q || []).push(arguments)
|
||||
}),
|
||||
(i[r].l = 1 * new Date())
|
||||
;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
|
||||
a.async = 1
|
||||
a.src = g
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(
|
||||
window,
|
||||
document,
|
||||
'script',
|
||||
'https://www.google-analytics.com/analytics.js',
|
||||
'ga'
|
||||
)
|
||||
ga('create', $googleAnalytics, 'auto')
|
||||
ga('set', 'anonymizeIp', true)
|
||||
ga('send', 'pageview')
|
||||
}
|
||||
}
|
||||
|
||||
function setupGoogleAnalytics(status) {
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
enableGoogleAnalytics();
|
||||
enableGoogleAnalytics()
|
||||
}
|
||||
if (status === 'deny') {
|
||||
disableGoogleAnalytics();
|
||||
disableGoogleAnalytics()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
window.addEventListener('load', function() {
|
||||
window.cookieconsent.initialise({
|
||||
palette: {
|
||||
popup: {
|
||||
background: "#efefef",
|
||||
text: "#000"
|
||||
background: '#efefef',
|
||||
text: '#000',
|
||||
},
|
||||
button: {
|
||||
background: "#2d763a",
|
||||
text: "#ffffff"
|
||||
}
|
||||
background: '#2d763a',
|
||||
text: '#ffffff',
|
||||
},
|
||||
theme: "classic",
|
||||
type: "opt-out",
|
||||
},
|
||||
theme: 'classic',
|
||||
type: 'opt-out',
|
||||
content: {
|
||||
message: "Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.",
|
||||
dismiss: "OK",
|
||||
allow: "Erlauben",
|
||||
deny: "Verbieten",
|
||||
href: "/datenschutz",
|
||||
link: "Datenschutzbestimmung",
|
||||
policy: "Cookie Vereinbarung"
|
||||
message:
|
||||
'Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.',
|
||||
dismiss: 'OK',
|
||||
allow: 'Erlauben',
|
||||
deny: 'Verbieten',
|
||||
href: '/datenschutz',
|
||||
link: 'Datenschutzbestimmung',
|
||||
policy: 'Cookie Vereinbarung',
|
||||
},
|
||||
dismissOnScroll: 600,
|
||||
onInitialise: function (status) {
|
||||
onInitialise: function(status) {
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
onStatusChange: function (status) {
|
||||
onStatusChange: function(status) {
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = false;
|
||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/';
|
||||
window[gaDisableStr] = false
|
||||
document.cookie =
|
||||
gaDisableStr +
|
||||
'=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/'
|
||||
}
|
||||
}
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
var gaOptOut = document.querySelector('a.ga-optout')
|
||||
|
||||
if (gaOptOut !== null) {
|
||||
gaOptOut.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
disableGoogleAnalytics();
|
||||
gaOptOut.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
disableGoogleAnalytics()
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
function showOverlay(el) {
|
||||
if (el) {
|
||||
let classes = el.className;
|
||||
let classes = el.className
|
||||
if (classes.indexOf('hidden') !== -1) {
|
||||
el.className = classes.replace(/ ?hidden ?/, '')
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ function showOverlay(el) {
|
|||
|
||||
function hideOverlay(el) {
|
||||
if (el) {
|
||||
let classes = el.className;
|
||||
let classes = el.className
|
||||
if (classes.indexOf('hidden') === -1) {
|
||||
el.className = classes + ' hidden'
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ function toggleOverlay(el) {
|
|||
}
|
||||
|
||||
function addListeners(el, overlay) {
|
||||
var isTouchSupported = "ontouchend" in document;
|
||||
var isTouchSupported = 'ontouchend' in document
|
||||
if (isTouchSupported) {
|
||||
el.addEventListener('touchstart', ev => {
|
||||
ev.preventDefault()
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
function requireAll(r) { r.keys().forEach(r); }
|
||||
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/));
|
||||
function requireAll(r) {
|
||||
r.keys().forEach(r)
|
||||
}
|
||||
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/))
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
const container = document.querySelector('#lightbox-section');
|
||||
const container = document.querySelector('#lightbox-section')
|
||||
const template = document.querySelector('#lightbox-template')
|
||||
|
||||
const images = document.querySelectorAll('a[data-lightbox]')
|
||||
|
||||
const lightboxes = [];
|
||||
const lightboxes = []
|
||||
|
||||
class Lightbox {
|
||||
constructor(idx) {
|
||||
this.idx = idx
|
||||
this.element = images[idx];
|
||||
this.figure = this.element.parentElement;
|
||||
this.image = this.figure.querySelector('img');
|
||||
if(this.image === null) {
|
||||
this.figure = this.element.parentElement.parentElement;
|
||||
this.image = this.figure.querySelector('img');
|
||||
this.element = images[idx]
|
||||
this.figure = this.element.parentElement
|
||||
this.image = this.figure.querySelector('img')
|
||||
if (this.image === null) {
|
||||
this.figure = this.element.parentElement.parentElement
|
||||
this.image = this.figure.querySelector('img')
|
||||
}
|
||||
this.title = this.figure.querySelector('h3')
|
||||
this.title = this.image.getAttribute('title')
|
||||
|
|
@ -24,7 +24,7 @@ class Lightbox {
|
|||
|
||||
this.href = this.element.getAttribute('href')
|
||||
this.alt = this.image.getAttribute('alt')
|
||||
this.template = template.cloneNode(true);
|
||||
this.template = template.cloneNode(true)
|
||||
}
|
||||
|
||||
update() {
|
||||
|
|
@ -35,66 +35,67 @@ class Lightbox {
|
|||
|
||||
calcSurrounding() {
|
||||
if (images.length > 1) {
|
||||
this.prev = this.idx - 1;
|
||||
this.next = this.idx + 1;
|
||||
this.prev = this.idx - 1
|
||||
this.next = this.idx + 1
|
||||
if (this.prev === -1) {
|
||||
this.prev = images.length - 1;
|
||||
this.prev = images.length - 1
|
||||
}
|
||||
if (this.next === images.length) {
|
||||
this.next = 0;
|
||||
this.next = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateTemplate() {
|
||||
// Update template
|
||||
container.innerHTML = this.template.innerHTML;
|
||||
let lightbox = container.querySelector('#lightbox');
|
||||
let img = lightbox.querySelector('img');
|
||||
img.setAttribute('src', this.href);
|
||||
img.setAttribute('alt', this.alt);
|
||||
let title = lightbox.querySelector('.lightbox-title');
|
||||
let description = lightbox.querySelector('.lightbox-footer');
|
||||
container.innerHTML = this.template.innerHTML
|
||||
let lightbox = container.querySelector('#lightbox')
|
||||
let img = lightbox.querySelector('img')
|
||||
img.setAttribute('src', this.href)
|
||||
img.setAttribute('alt', this.alt)
|
||||
let title = lightbox.querySelector('.lightbox-title')
|
||||
let description = lightbox.querySelector('.lightbox-footer')
|
||||
if (this.title !== null) {
|
||||
title.innerHTML = this.title;
|
||||
}
|
||||
else {
|
||||
title.innerHtml = this.alt;
|
||||
title.innerHTML = this.title
|
||||
} else {
|
||||
title.innerHtml = this.alt
|
||||
}
|
||||
if (this.description !== null) {
|
||||
description.innerHTML = this.description;
|
||||
}
|
||||
else {
|
||||
description.innerHTML = this.alt;
|
||||
description.innerHTML = this.description
|
||||
} else {
|
||||
description.innerHTML = this.alt
|
||||
}
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
// Close with click outside of .lightbox-container
|
||||
let lightboxContainer = lightbox.querySelector('div.lightbox-container');
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
let lightboxContainer = lightbox.querySelector('div.lightbox-container')
|
||||
lightbox.addEventListener('click', e => {
|
||||
if (!lightboxContainer.contains(e.target)) {
|
||||
container.innerHTML = '';
|
||||
container.innerHTML = ''
|
||||
}
|
||||
})
|
||||
// Close with click on .lightbox-close link
|
||||
let lightboxClose = lightbox.querySelector('a.lightbox-close');
|
||||
let lightboxClose = lightbox.querySelector('a.lightbox-close')
|
||||
lightboxClose.addEventListener('click', () => {
|
||||
container.innerHTML = '';
|
||||
container.innerHTML = ''
|
||||
})
|
||||
|
||||
|
||||
// Previous image with click on .lightbox-prev link
|
||||
let lightboxPrev = lightbox.querySelectorAll('a.lightbox-prev').forEach((el) => {
|
||||
let lightboxPrev = lightbox
|
||||
.querySelectorAll('a.lightbox-prev')
|
||||
.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
lightboxes[this.prev].update();
|
||||
lightboxes[this.prev].update()
|
||||
})
|
||||
})
|
||||
|
||||
// Next image with click on .lightbox-next link
|
||||
let lightboxNext = lightbox.querySelectorAll('a.lightbox-next').forEach((el) => {
|
||||
let lightboxNext = lightbox
|
||||
.querySelectorAll('a.lightbox-next')
|
||||
.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
lightboxes[this.next].update();
|
||||
lightboxes[this.next].update()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -104,11 +105,11 @@ function main() {
|
|||
for (let i = 0; i < images.length; i++) {
|
||||
lightboxes.push(new Lightbox(i))
|
||||
|
||||
images[i].addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
lightboxes[i].update();
|
||||
images[i].addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
lightboxes[i].update()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
main()
|
||||
|
|
|
|||
|
|
@ -1,45 +1,44 @@
|
|||
const header = document.querySelector('#header');
|
||||
const scrollPosition = 50;
|
||||
const header = document.querySelector('#header')
|
||||
const scrollPosition = 50
|
||||
|
||||
const menuLinks = document.querySelectorAll('.menu-list li a');
|
||||
const checkbox = document.querySelector('#top-navigation-checkbox');
|
||||
const banner = document.querySelector('#banner');
|
||||
const menuLinks = document.querySelectorAll('.menu-list li a')
|
||||
const checkbox = document.querySelector('#top-navigation-checkbox')
|
||||
const banner = document.querySelector('#banner')
|
||||
|
||||
let lastScrollPosition = 0;
|
||||
let lastScrollPosition = 0
|
||||
|
||||
window.addEventListener('scroll', (e) => {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
window.addEventListener('scroll', e => {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop
|
||||
if (st > lastScrollPosition && st > scrollPosition) {
|
||||
header.classList.add('small')
|
||||
header.classList.remove('large')
|
||||
header.classList.add('hidden')
|
||||
if(banner !== null) {
|
||||
if (banner !== null) {
|
||||
banner.classList.add('hidden')
|
||||
}
|
||||
checkbox.checked = false;
|
||||
}
|
||||
else {
|
||||
checkbox.checked = false
|
||||
} else {
|
||||
if (st < scrollPosition) {
|
||||
header.classList.add('large')
|
||||
header.classList.remove('small')
|
||||
if(banner !== null) {
|
||||
if (banner !== null) {
|
||||
banner.classList.remove('hidden')
|
||||
}
|
||||
}
|
||||
if (st < lastScrollPosition) {
|
||||
setTimeout(() => {
|
||||
header.classList.remove('hidden')
|
||||
}, 500);
|
||||
}, 500)
|
||||
}
|
||||
if (st > lastScrollPosition && st > scrollPosition) {
|
||||
header.classList.add('hidden')
|
||||
}
|
||||
}
|
||||
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
});
|
||||
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop
|
||||
})
|
||||
|
||||
menuLinks.forEach((el) => {
|
||||
menuLinks.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
checkbox.checked = false;
|
||||
checkbox.checked = false
|
||||
})
|
||||
})
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/* BASE STYLES */
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
@ -23,7 +22,7 @@ body {
|
|||
.fixed-background {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
|
|
@ -33,9 +32,14 @@ p {
|
|||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.2em;
|
||||
margin: .2em auto;
|
||||
margin: 0.2em auto;
|
||||
font-family: $heading-font-family;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -80,8 +84,10 @@ ol {
|
|||
|
||||
table {
|
||||
tr {
|
||||
th, td {
|
||||
padding: calc(#{$gutter-width} / 2) calc(#{$gutter-width * 2}) calc(#{$gutter-width} / 2) 0;
|
||||
th,
|
||||
td {
|
||||
padding: calc(#{$gutter-width} / 2) calc(#{$gutter-width * 2})
|
||||
calc(#{$gutter-width} / 2) 0;
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -98,8 +104,6 @@ em {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
body {
|
||||
padding: calc(9rem + #{$gutter-width}) 0 0;
|
||||
|
|
@ -180,8 +184,8 @@ table {
|
|||
left: 0;
|
||||
z-index: -1000;
|
||||
|
||||
@include background("default");
|
||||
@include background("bau");
|
||||
@include background('default');
|
||||
@include background('bau');
|
||||
}
|
||||
|
||||
/* CONTAINER */
|
||||
|
|
@ -219,7 +223,7 @@ table {
|
|||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +243,6 @@ table {
|
|||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
|
||||
figure {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -291,11 +294,10 @@ figure {
|
|||
|
||||
&.original {
|
||||
width: auto !important;
|
||||
max-width: 100%
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
figcaption {
|
||||
&.overlay {
|
||||
&.hidden {
|
||||
|
|
@ -312,7 +314,7 @@ figure {
|
|||
}
|
||||
|
||||
position: absolute;
|
||||
background-color: rgba(230,230,230,0.85);
|
||||
background-color: rgba(230, 230, 230, 0.85);
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
|
|
@ -333,41 +335,44 @@ figure {
|
|||
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
right: 0px; top: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
width: 75px; height: 75px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #d7c9aa;
|
||||
text-align: center;
|
||||
font-weight: bold; line-height: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
transform: rotate(45deg);
|
||||
width: 100px; display: block;
|
||||
width: 100px;
|
||||
display: block;
|
||||
background: $secondary-color;
|
||||
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
top: 19px; right: -21px;
|
||||
top: 19px;
|
||||
right: -21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .5rem 2rem;
|
||||
padding: 0.5rem 2rem;
|
||||
border: 1px solid black;
|
||||
border-radius: $border-radius;
|
||||
color: black
|
||||
margin 0 1rem;
|
||||
color: black margin 0 1rem;
|
||||
line-height: 3rem;
|
||||
|
||||
&.btn-small {
|
||||
padding: .3rem 1rem;
|
||||
padding: 0.3rem 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-primary {
|
||||
background-color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
|
|
@ -428,7 +433,7 @@ a.btn-primary {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border:0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -452,7 +457,6 @@ nav {
|
|||
|
||||
/* CONTENT */
|
||||
|
||||
|
||||
/* HEADER */
|
||||
|
||||
#header {
|
||||
|
|
@ -543,7 +547,7 @@ nav {
|
|||
max-width: none;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
& + label {
|
||||
|
|
@ -589,15 +593,15 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked+.hamburger .line:nth-child(1) {
|
||||
input[type='checkbox']:checked + .hamburger .line:nth-child(1) {
|
||||
transform: translateY(10px) rotate(-45deg);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked+.hamburger .line:nth-child(2) {
|
||||
input[type='checkbox']:checked + .hamburger .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked+.hamburger .line:nth-child(3) {
|
||||
input[type='checkbox']:checked + .hamburger .line:nth-child(3) {
|
||||
transform: translateY(-10px) rotate(45deg);
|
||||
}
|
||||
|
||||
|
|
@ -605,7 +609,7 @@ nav {
|
|||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .navbar-container nav {
|
||||
input[type='checkbox']:checked ~ .navbar-container nav {
|
||||
ul {
|
||||
@include menu-list(column);
|
||||
|
||||
|
|
@ -652,7 +656,7 @@ nav {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
input[type=checkbox] {
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
& + label {
|
||||
|
|
@ -756,7 +760,8 @@ nav {
|
|||
overflow: hidden;
|
||||
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
margin: calc(100vh - calc(19rem - #{$gutter-width})) -$half-gutter-width 0 auto;
|
||||
margin: calc(100vh - calc(19rem - #{$gutter-width})) -$half-gutter-width 0
|
||||
auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -789,9 +794,9 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
/* SINGLE */
|
||||
/* SINGLE */
|
||||
|
||||
#single {
|
||||
#single {
|
||||
.single-footer {
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -826,11 +831,10 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
&.material {
|
||||
font-weight: bold
|
||||
font-weight: bold;
|
||||
}
|
||||
&.type {
|
||||
font-style: italic;
|
||||
|
|
@ -845,15 +849,15 @@ nav {
|
|||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* LIST */
|
||||
/* LIST */
|
||||
|
||||
#list {
|
||||
#list {
|
||||
footer {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BANNER */
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ $xl-min: 75rem !default;
|
|||
|
||||
/* CALCULATED VARIABLES */
|
||||
|
||||
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%, 5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%, 11 91.66666667%, 12 100%;
|
||||
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%,
|
||||
5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%,
|
||||
11 91.66666667%, 12 100%;
|
||||
|
||||
$half-gutter-width: $gutter-width * 0.5;
|
||||
$gutter-compensation: $half-gutter-width * -1;
|
||||
|
|
|
|||
|
|
@ -4,18 +4,13 @@
|
|||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-regular.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-italic - latin */
|
||||
|
|
@ -24,18 +19,14 @@
|
|||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-italic.eot');
|
||||
/* IE9 Compat Modes */
|
||||
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-italic.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-700 - latin */
|
||||
|
|
@ -44,18 +35,12 @@
|
|||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-700italic - latin */
|
||||
|
|
@ -64,18 +49,14 @@
|
|||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700italic.eot');
|
||||
/* IE9 Compat Modes */
|
||||
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
||||
url('../fonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-700italic.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-slab-regular - latin */
|
||||
|
|
@ -84,18 +65,13 @@
|
|||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-slab-v7-latin-regular.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* roboto-slab-700 - latin */
|
||||
|
|
@ -104,16 +80,12 @@
|
|||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-slab-v7-latin-700.eot');
|
||||
/* IE9 Compat Modes */
|
||||
|
||||
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg');
|
||||
/* Legacy iOS */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
@mixin background($class) {
|
||||
$background-image: "/img/background/" + $class + ".jpg";
|
||||
$background-image: '/img/background/' + $class + '.jpg';
|
||||
|
||||
& {
|
||||
background-position: center;
|
||||
|
|
@ -44,4 +44,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ $gutter-width: 1rem;
|
|||
$base-font-size: 16px;
|
||||
$base-line-height: 1.4em;
|
||||
$base-font-family: Roboto, sans-serif;
|
||||
$heading-font-family: "Roboto Slab", sans-serif;
|
||||
$heading-font-family: 'Roboto Slab', sans-serif;
|
||||
|
||||
$font-color: black;
|
||||
$background-color: white;
|
||||
|
|
@ -12,8 +12,7 @@ $secondary-color: #720026;
|
|||
|
||||
$border-radius: 5px;
|
||||
|
||||
$background-default: 'grabmal';
|
||||
$background-bau: 'bau';
|
||||
|
||||
$background-default: "grabmal";
|
||||
$background-bau: "bau";
|
||||
|
||||
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
|
||||
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import "_reset.scss";
|
||||
@import "_variables.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
||||
@import "~cookieconsent/src/styles/animation.css";
|
||||
@import "~cookieconsent/src/styles/base.css";
|
||||
@import "~cookieconsent/src/styles/layout.css";
|
||||
@import "~cookieconsent/src/styles/media.css";
|
||||
@import "~cookieconsent/src/styles/themes/classic.css";
|
||||
@import "_fonts.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_flexgrid.scss";
|
||||
@import "_app.scss";
|
||||
@import "_lightbox.scss";
|
||||
@import '_reset.scss';
|
||||
@import '_variables.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
|
||||
@import '~cookieconsent/src/styles/animation.css';
|
||||
@import '~cookieconsent/src/styles/base.css';
|
||||
@import '~cookieconsent/src/styles/layout.css';
|
||||
@import '~cookieconsent/src/styles/media.css';
|
||||
@import '~cookieconsent/src/styles/themes/classic.css';
|
||||
@import '_fonts.scss';
|
||||
@import '_mixins.scss';
|
||||
@import '_flexgrid.scss';
|
||||
@import '_app.scss';
|
||||
@import '_lightbox.scss';
|
||||
|
|
|
|||
|
|
@ -1,28 +1,46 @@
|
|||
<template>
|
||||
<article class="row"v-if="articleData">
|
||||
<article class="row" v-if="articleData">
|
||||
<header class="col-xs-12">
|
||||
<h1>{{ articleData.title }}</h1>
|
||||
</header>
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div v-if="hasWebGl && articleData.model" class="featured col-xs-12 col-sm-8">
|
||||
<model-viewer :modelData="articleData.model"/>
|
||||
<div
|
||||
v-if="hasWebGl && articleData.model"
|
||||
class="featured col-xs-12 col-sm-8"
|
||||
>
|
||||
<model-viewer :modelData="articleData.model" />
|
||||
</div>
|
||||
<figure v-else class="featured col-xs-12 col-sm-8">
|
||||
<img alt="" title="" class="" srcset="" sizes="" src="">
|
||||
<img alt="" title="" class="" srcset="" sizes="" src="" />
|
||||
</figure>
|
||||
<div class="col-sm-4 col-xs-12">
|
||||
<p v-if="hasWebGl && articleData.model && articleData.model.textures.length > 1">
|
||||
<p
|
||||
v-if="
|
||||
hasWebGl &&
|
||||
articleData.model &&
|
||||
articleData.model.textures.length > 1
|
||||
"
|
||||
>
|
||||
<strong>Material ändern</strong>
|
||||
<material-switcher :modelData="articleData.model"/>
|
||||
<material-switcher :modelData="articleData.model" />
|
||||
</p>
|
||||
<p class="offer">
|
||||
<a class="btn btn-secondary" v-if="articleData.offer" :href="articleData.offer">Angebot</a>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
v-if="articleData.offer"
|
||||
:href="articleData.offer"
|
||||
>Angebot</a
|
||||
>
|
||||
</p>
|
||||
<p class="type">Typ: {{ types }}</p>
|
||||
<p class="material">Material: {{ material }}</p>
|
||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</p>
|
||||
<p class="ornament" v-if="articleData.ornament">
|
||||
Ornament: {{ articleData.ornament }}
|
||||
</p>
|
||||
<p class="description" v-if="articleData.description">
|
||||
{{ articleData.description }}
|
||||
</p>
|
||||
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,18 +52,21 @@
|
|||
import ModelViewer from './components/ModelViewer.vue'
|
||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||
import * as WebGL from 'three/examples/js/WebGL.js'
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hasWebGl: false
|
||||
hasWebGl: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('fetchArticleData')
|
||||
console.log(WebGL)
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
if ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ) {
|
||||
var canvas = document.createElement('canvas')
|
||||
if (
|
||||
window.WebGLRenderingContext &&
|
||||
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
||||
) {
|
||||
this.hasWebGl = true
|
||||
} else {
|
||||
this.hasWebGl = false
|
||||
|
|
@ -54,22 +75,22 @@ export default {
|
|||
computed: {
|
||||
...mapState(['articleData', 'activeTexture']),
|
||||
types() {
|
||||
if(this.articleData.article_type) {
|
||||
if (this.articleData.article_type) {
|
||||
return this.articleData.article_type.join(', ')
|
||||
}
|
||||
return ""
|
||||
return ''
|
||||
},
|
||||
material() {
|
||||
if(this.activeTexture) {
|
||||
if (this.activeTexture) {
|
||||
return this.activeTexture.name
|
||||
}
|
||||
return this.articleData.material
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ModelViewer,
|
||||
MaterialSwitcher
|
||||
}
|
||||
MaterialSwitcher,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,17 +6,23 @@
|
|||
<div class="content flex">
|
||||
<div class="padding">
|
||||
<div v-if="articleData.model" class="featured left wide">
|
||||
<model-viewer class="model-viewer" :modelData="articleData.model"/>
|
||||
<model-viewer class="model-viewer" :modelData="articleData.model" />
|
||||
</div>
|
||||
<p>
|
||||
<strong>Material ändern</strong>
|
||||
<material-switcher :modelData="articleData.model"/>
|
||||
<material-switcher :modelData="articleData.model" />
|
||||
</p>
|
||||
<p class="type">Typ: {{ types }}</p>
|
||||
<p class="material">Material: {{ material }}</p>
|
||||
<p class="offer" v-if="articleData.offer"><a :href="articleData.offer">Angebot</a></p>
|
||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</p>
|
||||
<p class="offer" v-if="articleData.offer">
|
||||
<a :href="articleData.offer">Angebot</a>
|
||||
</p>
|
||||
<p class="ornament" v-if="articleData.ornament">
|
||||
Ornament: {{ articleData.ornament }}
|
||||
</p>
|
||||
<p class="description" v-if="articleData.description">
|
||||
{{ articleData.description }}
|
||||
</p>
|
||||
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
<script>
|
||||
import ModelViewer from './components/ModelViewer.vue'
|
||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
mounted() {
|
||||
this.$store.dispatch('fetchArticleData')
|
||||
|
|
@ -34,21 +40,21 @@ export default {
|
|||
computed: {
|
||||
...mapState(['articleData', 'activeTexture']),
|
||||
types() {
|
||||
if(this.articleData.article_type) {
|
||||
if (this.articleData.article_type) {
|
||||
return this.articleData.article_type.join(', ')
|
||||
}
|
||||
return ""
|
||||
return ''
|
||||
},
|
||||
material() {
|
||||
if(this.activeTexture) {
|
||||
if (this.activeTexture) {
|
||||
return this.activeTexture.name
|
||||
}
|
||||
return this.articleData.material
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ModelViewer,
|
||||
MaterialSwitcher
|
||||
}
|
||||
MaterialSwitcher,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import axios from "axios";
|
||||
import axios from 'axios'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
articleData: {},
|
||||
activeTexture: undefined
|
||||
activeTexture: undefined,
|
||||
},
|
||||
mutations: {
|
||||
setArticleData(store, data) {
|
||||
|
|
@ -15,17 +15,20 @@ export default new Vuex.Store({
|
|||
},
|
||||
setActiveTexture(store, data) {
|
||||
store.activeTexture = data
|
||||
}
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
fetchArticleData({ commit }) {
|
||||
let path = window.location.pathname
|
||||
axios.get(path.replace(/modell\//, '') + 'index.json').then(response => {
|
||||
axios
|
||||
.get(path.replace(/modell\//, '') + 'index.json')
|
||||
.then(response => {
|
||||
commit('setArticleData', response.data)
|
||||
}).catch(error => console.log(error))
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
updateActiveTexture({commit}, data) {
|
||||
updateActiveTexture({ commit }, data) {
|
||||
commit('setActiveTexture', data)
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
Hello World
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<ul class="list-unstyled material-switcher" v-if="modelData">
|
||||
<material-switcher-item v-for="texture of modelData.textures" :key="texture.url" :texture="texture"/>
|
||||
<material-switcher-item
|
||||
v-for="texture of modelData.textures"
|
||||
:key="texture.url"
|
||||
:texture="texture"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,12 +12,12 @@
|
|||
import MaterialSwitcherItem from './MaterialSwitcherItem.vue'
|
||||
export default {
|
||||
components: {
|
||||
materialSwitcherItem: MaterialSwitcherItem
|
||||
materialSwitcherItem: MaterialSwitcherItem,
|
||||
},
|
||||
props: {
|
||||
modelData: {
|
||||
type: Object,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<li><img class="texture-preview" :src="texture.url" :alt="texture.name" @click="applyTexture"></li>
|
||||
<li>
|
||||
<img
|
||||
class="texture-preview"
|
||||
:src="texture.url"
|
||||
:alt="texture.name"
|
||||
@click="applyTexture"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,14 +14,14 @@ export default {
|
|||
props: {
|
||||
texture: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
applyTexture() {
|
||||
this.$store.dispatch('updateActiveTexture', this.texture)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -29,7 +36,7 @@ export default {
|
|||
}
|
||||
|
||||
li:last-child {
|
||||
padding: 0 0 0 2px
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, PCFShadowMap, LinearToneMapping, TextureLoader } from 'three'
|
||||
import {
|
||||
WebGLRenderer,
|
||||
PerspectiveCamera,
|
||||
Scene,
|
||||
AmbientLight,
|
||||
DirectionalLight,
|
||||
PCFShadowMap,
|
||||
LinearToneMapping,
|
||||
TextureLoader,
|
||||
} from 'three'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
|
||||
|
|
@ -23,7 +32,7 @@ export default {
|
|||
}
|
||||
},
|
||||
props: {
|
||||
modelData: Object
|
||||
modelData: Object,
|
||||
},
|
||||
mounted() {
|
||||
this.setup()
|
||||
|
|
@ -40,18 +49,18 @@ export default {
|
|||
this.setupControls()
|
||||
},
|
||||
setupControls() {
|
||||
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
|
||||
this.controls.addEventListener( 'change', this.render );
|
||||
this.controls.addEventListener( 'touchstart', this.render );
|
||||
this.controls.enableDamping = false;
|
||||
this.controls.dampingFactor = 1.5;
|
||||
this.controls.screenSpacePanning = false;
|
||||
this.controls.enableZoom = false;
|
||||
this.controls.enablePan = false;
|
||||
this.controls.minPolarAngle = Math.PI / 8;
|
||||
this.controls.maxPolarAngle = Math.PI - Math.PI / 4;
|
||||
this.controls.minAzimuthAngle = -(Math.PI / 4);
|
||||
this.controls.maxAzimuthAngle = Math.PI / 4;
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
||||
this.controls.addEventListener('change', this.render)
|
||||
this.controls.addEventListener('touchstart', this.render)
|
||||
this.controls.enableDamping = false
|
||||
this.controls.dampingFactor = 1.5
|
||||
this.controls.screenSpacePanning = false
|
||||
this.controls.enableZoom = false
|
||||
this.controls.enablePan = false
|
||||
this.controls.minPolarAngle = Math.PI / 8
|
||||
this.controls.maxPolarAngle = Math.PI - Math.PI / 4
|
||||
this.controls.minAzimuthAngle = -(Math.PI / 4)
|
||||
this.controls.maxAzimuthAngle = Math.PI / 4
|
||||
this.controls.update()
|
||||
},
|
||||
setupScene() {
|
||||
|
|
@ -68,7 +77,7 @@ export default {
|
|||
getHeight() {
|
||||
let el = this.$el.parentElement || 0
|
||||
if (el) {
|
||||
return el.offsetWidth / 1.333333;
|
||||
return el.offsetWidth / 1.333333
|
||||
}
|
||||
return 0
|
||||
},
|
||||
|
|
@ -77,28 +86,32 @@ export default {
|
|||
},
|
||||
setupCamera() {
|
||||
this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300)
|
||||
this.camera.position.z = 0.9;
|
||||
this.camera.position.z = 0.9
|
||||
this.camera.position.y = 0.3
|
||||
},
|
||||
setupLight() {
|
||||
var directionalLight = new DirectionalLight(0xffffff, 0.5)
|
||||
directionalLight.position.set(-30, -30 ,-30)
|
||||
directionalLight.position.set(-30, -30, -30)
|
||||
this.scene.add(directionalLight)
|
||||
var directionalLight2 = new DirectionalLight(0xffffff, 1.6)
|
||||
directionalLight2.position.set(3, 10 ,10)
|
||||
directionalLight2.position.set(3, 10, 10)
|
||||
this.scene.add(directionalLight2)
|
||||
},
|
||||
setupRenderer() {
|
||||
this.renderer = new WebGLRenderer({canvas: this.$refs.renderer, antialias: true, alpha: true})
|
||||
this.renderer = new WebGLRenderer({
|
||||
canvas: this.$refs.renderer,
|
||||
antialias: true,
|
||||
alpha: true,
|
||||
})
|
||||
this.renderer.setClearColor(0xffffff)
|
||||
this.renderer.setClearAlpha(0)
|
||||
this.renderer.setSize(this.getWidth(), this.getHeight())
|
||||
this.renderer.gammaOutput = true;
|
||||
this.renderer.gammaOutput = true
|
||||
this.renderer.gammaFactor = 2.2
|
||||
this.renderer.toneMapping = LinearToneMapping;
|
||||
this.renderer.toneMappingExposure = Math.pow( 0.94, 5.0 );
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = PCFShadowMap;
|
||||
this.renderer.toneMapping = LinearToneMapping
|
||||
this.renderer.toneMappingExposure = Math.pow(0.94, 5.0)
|
||||
this.renderer.shadowMap.enabled = true
|
||||
this.renderer.shadowMap.type = PCFShadowMap
|
||||
window.addEventListener('resize', this.setCanvasSize)
|
||||
},
|
||||
loadObjMtl(objPath, mtlPath) {
|
||||
|
|
@ -107,20 +120,28 @@ export default {
|
|||
var mtlLoader = new MTLLoader()
|
||||
mtlLoader.setPath('/')
|
||||
|
||||
|
||||
new Promise((resolve, reject) => {
|
||||
mtlLoader.load(mtlPath, materials => resolve(materials), undefined, error => reject(error))
|
||||
}).then((materials) => {
|
||||
mtlLoader.load(
|
||||
mtlPath,
|
||||
materials => resolve(materials),
|
||||
undefined,
|
||||
error => reject(error)
|
||||
)
|
||||
})
|
||||
.then(materials => {
|
||||
materials.preload()
|
||||
objLoader.setMaterials(materials)
|
||||
objLoader.load(objPath, this.addObject)
|
||||
this.render()
|
||||
}).catch(error => console.log(error))
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
loadGltf(gltfPath) {
|
||||
var gltfLoader = new GLTFLoader()
|
||||
new Promise((resolve, reject) => {
|
||||
gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error => reject(error))
|
||||
gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error =>
|
||||
reject(error)
|
||||
)
|
||||
})
|
||||
.then(gltf => {
|
||||
this.readGLTF(gltf)
|
||||
|
|
@ -129,7 +150,7 @@ export default {
|
|||
},
|
||||
changeTexture(texture) {
|
||||
new Promise(resolve => {
|
||||
new TextureLoader().load(texture.url, (data) => resolve(data));
|
||||
new TextureLoader().load(texture.url, data => resolve(data))
|
||||
}).then(data => {
|
||||
this.$store.dispatch('updateActiveTexture', texture)
|
||||
this.model.material.map = data
|
||||
|
|
@ -157,17 +178,17 @@ export default {
|
|||
update() {
|
||||
this.controls.update()
|
||||
this.render()
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeTexture'])
|
||||
...mapState(['activeTexture']),
|
||||
},
|
||||
watch: {
|
||||
activeTexture(value) {
|
||||
console.log('hello', value)
|
||||
this.changeTexture(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -176,12 +197,12 @@ export default {
|
|||
position: relative;
|
||||
|
||||
canvas {
|
||||
background: rgba(0,0,0,0)
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.mouseover {
|
||||
position: absolute;
|
||||
top:0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-weight: bold;
|
||||
|
||||
|
|
@ -190,5 +211,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import Hello from './Hello.vue'
|
||||
|
||||
export default {
|
||||
hello: Hello
|
||||
}
|
||||
Loading…
Reference in New Issue