From 37ff04cb6a1ecbad439ebff2a88e5cadd2bb9ebc Mon Sep 17 00:00:00 2001 From: Patrick Neff Date: Fri, 3 May 2019 01:20:04 +0200 Subject: [PATCH] =?UTF-8?q?Katalog=20Kategorie=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.toml | 8 ++-- .../katalog/grabstein/grabstein-01/index.md | 10 ++-- themes/neff/archetypes/katalog/index.md | 9 ++-- themes/neff/layouts/catalog/li.html | 4 +- themes/neff/layouts/catalog/single.html | 16 +++++++ themes/neff/layouts/partials/catalog.html | 45 ++++++++++++++++++ themes/neff/layouts/partials/head.html | 4 ++ themes/neff/layouts/partials/scripts.html | 6 ++- themes/neff/src/js/catalog.js | 45 ++++++++++++++++++ themes/neff/src/js/main.js | 5 +- themes/neff/src/js/modelViewer.js | 9 ++++ themes/neff/src/scss/_grid.scss | 21 ++++++++- themes/neff/src/vue/ModelViewer.vue | 10 ++++ themes/neff/webpack.common.js | 23 ++++++++- themes/neff/webpack.prod.js | 47 ------------------- 15 files changed, 196 insertions(+), 66 deletions(-) create mode 100755 themes/neff/layouts/catalog/single.html create mode 100644 themes/neff/layouts/partials/catalog.html create mode 100644 themes/neff/src/js/catalog.js create mode 100644 themes/neff/src/js/modelViewer.js create mode 100644 themes/neff/src/vue/ModelViewer.vue diff --git a/config.toml b/config.toml index d68abb7..8baf476 100644 --- a/config.toml +++ b/config.toml @@ -34,10 +34,10 @@ googleAnalytics = "UA-12671637-1" weight = -800 [[menu.main]] - identifier = "galerie" - name = "Galerie" - title = "Galerie" - url = "/galerie" + identifier = "katalog" + name = "Katalog" + title = "Katalog" + url = "/katalog" weight = -500 [[menu.main]] diff --git a/content/katalog/grabstein/grabstein-01/index.md b/content/katalog/grabstein/grabstein-01/index.md index 3e07367..e5b287e 100644 --- a/content/katalog/grabstein/grabstein-01/index.md +++ b/content/katalog/grabstein/grabstein-01/index.md @@ -5,7 +5,11 @@ draft = false price = "" type = "catalog" alt = "Bildergalerie für Test" -description = "Bildergalerie für Test" +description = "" +material = "Material, Bearbeitungsart" +ornament = "Ornament" +article_id = "Artikel Nummer" +used_for = ["Doppelgrab", "Einzelgrab"] keywords = [] [[resources]] @@ -13,6 +17,4 @@ keywords = [] src = "bilder/platzhalter.jpg" [resources.params] alt = "Bild von einem Test" -+++ - -{{< gallery "bilder/**.jpg" >}} \ No newline at end of file ++++ \ No newline at end of file diff --git a/themes/neff/archetypes/katalog/index.md b/themes/neff/archetypes/katalog/index.md index c7592bd..dff49df 100755 --- a/themes/neff/archetypes/katalog/index.md +++ b/themes/neff/archetypes/katalog/index.md @@ -1,11 +1,12 @@ +++ title = "{{ replace .Name "-" " " | title }}" -date = "{{ .Date }}" draft = true -price = "" type = "catalog" -alt = "Bildergalerie für {{ replace .Name "-" " " | title }}" -description = "Bildergalerie für {{ replace .Name "-" " " | title }}" +alt = "{{ replace .Name "-" " " | title }}" +description = "Kurzbeschreibung" +material = "Material, Bearbeitungsart" +ornament = "Ornament" +article_id = "Artikel Bezeichnung" keywords = [] [[resources]] diff --git a/themes/neff/layouts/catalog/li.html b/themes/neff/layouts/catalog/li.html index 5157d0b..33e116c 100755 --- a/themes/neff/layouts/catalog/li.html +++ b/themes/neff/layouts/catalog/li.html @@ -16,7 +16,7 @@ {{ else }} {{ $image = index $images 0 }} {{ end }} -{{ with $images }} -
  • {{- partial "figure.html" (dict "ctx" $ctx "image" $image "class" "gallery" "showTitle" true "showDescription" true) -}} +{{ with $image }} +
  • {{- partial "catalog.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
    • {{ end }} diff --git a/themes/neff/layouts/catalog/single.html b/themes/neff/layouts/catalog/single.html new file mode 100755 index 0000000..a5e3464 --- /dev/null +++ b/themes/neff/layouts/catalog/single.html @@ -0,0 +1,16 @@ +{{- define "title" -}} + {{ .Title }} • {{ .Site.Title }} +{{- end -}} + +{{- define "main" -}} +
    +
    + {{- partial "single.html" . -}} +
    +
    + +
    +
    +
    +
    +{{- end -}} diff --git a/themes/neff/layouts/partials/catalog.html b/themes/neff/layouts/partials/catalog.html new file mode 100644 index 0000000..3ddb159 --- /dev/null +++ b/themes/neff/layouts/partials/catalog.html @@ -0,0 +1,45 @@ +{{- $ctx := .ctx }} +{{- $title := .ctx.Title -}} +{{- $alt := .ctx.Params.alt -}} +{{- $description := .ctx.Params.description | markdownify -}} +{{- $class := .class -}} +{{- $href := .ctx.Params.href }} + +
    + {{ with .image }} + {{- $imageSm := .Fill "300x300 Top" -}} + {{- $imageMd := .Fill "500x500 Top" -}} + {{ $alt }} + {{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}} + {{ end }} + + +
    diff --git a/themes/neff/layouts/partials/head.html b/themes/neff/layouts/partials/head.html index 4f4a949..3621ac9 100755 --- a/themes/neff/layouts/partials/head.html +++ b/themes/neff/layouts/partials/head.html @@ -9,8 +9,12 @@ {{- partial "schema/collectionpage.html" . -}} {{- end -}} {{- $css := resources.Get "css/style.css" -}} +{{ if .Site.IsServer }} + +{{ else }} {{- $css = $css | resources.Fingerprint -}} +{{ end }} diff --git a/themes/neff/layouts/partials/scripts.html b/themes/neff/layouts/partials/scripts.html index 896411d..35af2fb 100644 --- a/themes/neff/layouts/partials/scripts.html +++ b/themes/neff/layouts/partials/scripts.html @@ -2,5 +2,9 @@ var $googleAnalytics = '{{ .Site.GoogleAnalytics }}'; {{- $js := resources.Get "js/bundle.js" -}} +{{ if .Site.IsServer }} + +{{ else }} {{- $js = $js | resources.Fingerprint -}} - \ No newline at end of file + +{{ end }} \ No newline at end of file diff --git a/themes/neff/src/js/catalog.js b/themes/neff/src/js/catalog.js new file mode 100644 index 0000000..cb3cde7 --- /dev/null +++ b/themes/neff/src/js/catalog.js @@ -0,0 +1,45 @@ +function showOverlay(el) { + let classes = el.className; + if (classes.indexOf('hidden') !== -1) { + el.className = classes.replace(/ ?hidden ?/, '') + } +} + +function hideOverlay(el) { + let classes = el.className; + if (classes.indexOf('hidden') === -1) { + el.className = classes + ' hidden' + } +} + +function toggleOverlay(el) { + if (el.className.indexOf('hidden') === -1) { + hideOverlay(el) + } else { + showOverlay(el) + } +} + +function addListeners(el, overlay) { + var isTouchSupported = "ontouchend" in document; + if (isTouchSupported) { + el.addEventListener('touchstart', ev => { + ev.preventDefault() + toggleOverlay(overlay) + }) + } else { + el.addEventListener('mouseover', ev => { + ev.preventDefault() + showOverlay(overlay) + }) + el.addEventListener('mouseleave', ev => { + ev.preventDefault() + hideOverlay(overlay) + }) + } +} + +document.querySelectorAll('figure').forEach(figure => { + let overlay = figure.querySelector('.overlay') + addListeners(figure, overlay) +}) diff --git a/themes/neff/src/js/main.js b/themes/neff/src/js/main.js index 722d1ed..3208c70 100644 --- a/themes/neff/src/js/main.js +++ b/themes/neff/src/js/main.js @@ -1,5 +1,6 @@ import "./cookies" import "./lightbox" import "./scrollspy" -import "./catalogSimilar" - +import "./catalog" +//import "./catalogSimilar" +import "./modelViewer" diff --git a/themes/neff/src/js/modelViewer.js b/themes/neff/src/js/modelViewer.js new file mode 100644 index 0000000..0bd3310 --- /dev/null +++ b/themes/neff/src/js/modelViewer.js @@ -0,0 +1,9 @@ +import Vue from "vue" + +import ModelViewer from "../vue/ModelViewer.vue" + +import wrap from '@vue/web-component-wrapper' + +const myModelViewer = wrap(Vue, ModelViewer) + +window.customElements.define('model-viewer', myModelViewer) \ No newline at end of file diff --git a/themes/neff/src/scss/_grid.scss b/themes/neff/src/scss/_grid.scss index d1099d3..ae9a35b 100644 --- a/themes/neff/src/scss/_grid.scss +++ b/themes/neff/src/scss/_grid.scss @@ -292,14 +292,33 @@ img.original { figure { max-width: 100%; + position: relative; img { width: 100%; height: auto; } + figcaption { - color: $font-color; + &.overlay { + &.hidden { + visibility: hidden; + } + + position: absolute; + background-color: rgba(230,230,230,0.85); + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: $border-radius; + text-align: center; + padding: $gutter-width; + text-shadow: 1px 1px 2px white; + } + + color: $font-color; } } diff --git a/themes/neff/src/vue/ModelViewer.vue b/themes/neff/src/vue/ModelViewer.vue new file mode 100644 index 0000000..7802712 --- /dev/null +++ b/themes/neff/src/vue/ModelViewer.vue @@ -0,0 +1,10 @@ + + + diff --git a/themes/neff/webpack.common.js b/themes/neff/webpack.common.js index 3c92f0c..ef4f6bb 100644 --- a/themes/neff/webpack.common.js +++ b/themes/neff/webpack.common.js @@ -1,4 +1,6 @@ const VueLoaderPlugin = require("vue-loader/lib/plugin") +const CleanWebpackPlugin = require("clean-webpack-plugin") +const MiniCssExtractPlugin = require("mini-css-extract-plugin") const path = require("path") module.exports = { @@ -26,6 +28,13 @@ module.exports = { { test: /\.(sa|sc|c)ss$/, use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: "../", + sourceMap: true + } + }, { loader: "css-loader", options: { @@ -129,6 +138,18 @@ module.exports = { ] }, plugins: [ - new VueLoaderPlugin() + new VueLoaderPlugin(), + new CleanWebpackPlugin([ + "assets/css/*", + "assets/js/*", + "static/fonts/*", + "static/img/*" + ]), + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: "css/[name].css", + chunkFilename: "css/[id].css" + }) ], } diff --git a/themes/neff/webpack.prod.js b/themes/neff/webpack.prod.js index b795ff9..a59ca7d 100644 --- a/themes/neff/webpack.prod.js +++ b/themes/neff/webpack.prod.js @@ -1,59 +1,12 @@ const merge = require("webpack-merge") const common = require("./webpack.common.js") -const MiniCssExtractPlugin = require("mini-css-extract-plugin") -const CleanWebpackPlugin = require("clean-webpack-plugin") const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") module.exports = merge(common, { mode: "production", module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: "../", - sourceMap: true - } - }, - { - loader: "css-loader", - options: { - sourceMap: true - } - }, - { - loader: "postcss-loader", - options: { - sourceMap: true - } - }, - { - loader: "sass-loader", - options: { - implementation: require("sass"), - sourceMap: true - } - } - ] - } - ] }, plugins: [ - new CleanWebpackPlugin([ - "assets/css/*", - "assets/js/*", - "static/fonts/*", - "static/img/*" - ]), - new MiniCssExtractPlugin({ - // Options similar to the same options in webpackOptions.output - // both options are optional - filename: "css/[name].css", - chunkFilename: "css/[id].css" - }) ], optimization: { usedExports: true,