Style article page

content/katalog/urnengrabanlage/abdeckung/index.md

@@ -6,6 +6,9 @@ type = "catalog"
 alt = "Urnengrababdeckung mit Umrandung"
 material = "PP4, poliert"
 article_id = "0001"
+ornament = "Kreuz"
+description = "Hallo Welt"
+offer = "/aktionen/preisbeispiel-urnengrab-2019/"
 used_for = ["Urnengrab"]
 keywords = []
 

themes/neff/layouts/catalog/single.html

@@ -3,16 +3,9 @@
 {{- end -}}
 
 {{- define "main" -}}
-<main id="single">
+<main class="catalog" id="single">
     <article>
-        {{- partial "single.html" . -}}
-        <div class="flex column">
-            <div class="padding">
-            {{ with .Resources.GetMatch "model/*.glb" }}
-                <model-viewer model-url="{{ .RelPermalink }}"></model-viewer>
-                {{ end }}
-            </div>
-        </div>
+        {{- partial "catalog-article.html" . -}}
     </article>
 </main>
 {{- end -}}

themes/neff/layouts/partials/catalog-article.html

@@ -0,0 +1,26 @@
+<header class="flex column padding">
+    <h1>{{ .Title }}</h1>
+</header>
+<div class="content flex column">
+  <div class="padding">
+    {{ with .Resources.GetMatch "model/*.glb" }}
+      <div class="left" id="model-viewer">
+        <model-viewer model-url="{{ .RelPermalink }}"></model-viewer>
+    </div>
+    {{ else }}
+    {{- with .Resources.GetMatch "bilder/*" -}}
+      {{- $orig := . -}}
+      {{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left" "showTitle" false "showDescription" false)}}
+    {{- end -}}
+    {{- 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.offer }}<p class="offer"><a href="{{ . }}">Angebot</a></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 }}
+    {{ . }}
+    {{ end }}
+  </div>
+</div>

themes/neff/src/scss/_grid.scss

@@ -270,9 +270,13 @@ figure.small {
     }
 }
 
-figure.left {
+.left {
     float: left;
     margin-right: $gutter-width;
+}
+
+figure.left {
+    margin-right: $gutter-width;
     max-width: $min-column-width;
     padding: 0.5rem 0;
     float: left
@@ -420,3 +424,15 @@ a.btn-primary {
 canvas {
   background: white;
 }
+
+#model-viewer{
+  width: $min-column-width;
+  height: $min-column-width;
+}
+
+@media screen and (min-width: 500px) {
+    #model-viewer{
+      width: $min-column-width-desktop;
+      height: $min-column-width-desktop;
+    }
+}

themes/neff/src/scss/_single.scss

@@ -54,3 +54,18 @@
         max-width: $min-column-width-desktop;
     }
 }
+
+.catalog {
+  p {
+    font-size: 1.2rem;
+    &.material {
+      font-weight: bold
+    }
+    &.type {
+      font-style: italic;
+    }
+    &.article-id {
+      font-size: 1rem;
+    }
+  }
+}

themes/neff/src/vue/ModelViewer.vue

@@ -1,7 +1,5 @@
 <template>
-<div>
-    <canvas id="model-viewer" ref="renderer"></canvas>
-</div>
+    <canvas ref="renderer"></canvas>
 </template>
 
 <script>
@@ -22,47 +20,79 @@ export default {
     data() {
       return {
         renderer: null,
-        size: {
-          w: 800,
-          h: 600,
+      }
     },
+    computed: {
+      size() {
+        return {
+          w: document.getElementById('model-viewer').offsetWidth,
+          h: document.getElementById('model-viewer').offsetHeight,
+        }
       }
     },
     mounted() {
-      var scene, camera, renderer
-      renderer = this.renderer = new WebGLRenderer({canvas: this.$refs.renderer, antialias: true})
-      this.renderer.setClearColor(0xffffff)
-      this.renderer.setSize(this.size.w, this.size.h)
-      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;
-      scene = this.scene = new Scene()
+      this.setup()
+      this.loadGltf(this.modelUrl)
+    },
+    methods: {
+      setup() {
+        this.setupCamera()
+        this.setupScene()
+        this.setupRenderer()
+        this.setupLight()
+        this.setupControls()
+      },
+      setupControls() {
+        var controls = new OrbitControls( this.camera, this.renderer.domElement );
+        controls.addEventListener( 'change', this.render ); // call this only in static scenes (i.e., if there is no animation loop)
+        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+        controls.dampingFactor = 0.25;
+        controls.screenSpacePanning = false;
+        controls.minDistance = 1.1;
+        controls.maxDistance = 1.1;
+        controls.minPolarAngle = Math.PI / 4;
+        controls.maxPolarAngle = Math.PI - Math.PI / 4;
+        controls.minAzimuthAngle = -(Math.PI / 4);
+        controls.maxAzimuthAngle = Math.PI / 4;
+      },
+      setupScene() {
+        this.scene = new Scene()
+      },
+      getWidth() {
+        return document.getElementById('model-viewer').offsetWidth
+      },
+      getHeight() {
+        return document.getElementById('model-viewer').offsetHeight
+      },
+      getAspectRatio() {
+        return this.getWidth() / this.getHeight()
+      },
+      setupCamera() {
+        this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300)
+        this.camera.position.z = 1.1;
+        this.camera.position.y = .3
+      },
+      setupLight() {
         var directionalLight = new DirectionalLight(0xffffff, 1)
         directionalLight.position.set(-3, 20 ,-1000)
         this.scene.add(directionalLight)
         var directionalLight2 = new DirectionalLight(0xffffff, 1)
         directionalLight2.position.set(-3, 20 ,100)
         this.scene.add(directionalLight2)
-      camera = this.camera = new PerspectiveCamera(60, this.size.w/this.size.h, 0.1, 300)
-      this.camera.position.z = 1.1;
-      this.camera.position.y = .3
-      this.loadGltf(this.modelUrl)
-      var controls = new OrbitControls( camera, renderer.domElement );
-      controls.addEventListener( 'change', this.render ); // call this only in static scenes (i.e., if there is no animation loop)
-      controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
-      controls.dampingFactor = 0.25;
-      controls.screenSpacePanning = false;
-      controls.minDistance = 1.1;
-      controls.maxDistance = 2;
-      controls.minPolarAngle = Math.PI / 4;
-      controls.maxPolarAngle = Math.PI - Math.PI / 4;
-      controls.minAzimuthAngle = -(Math.PI / 4);
-      controls.maxAzimuthAngle = Math.PI / 4;
       },
-    methods: {
+      setupRenderer() {
+        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.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;
+        window.addEventListener('resize', this.setCanvasSize)
+      },
       loadObjMtl(objPath, mtlPath) {
         var objLoader = new OBJLoader()
         objLoader.setPath('/')
@@ -83,21 +113,26 @@ export default {
         var gltfLoader = new GLTFLoader()
         new Promise((resolve, reject) => {
           gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error => reject(error))
-        }).then(gltf => {
-          console.log(gltf)
+        })
+          .then(gltf => {
+            this.readGLTF(gltf)
+          })
+          .catch(error => console.log(error))
+      },
+      readGLTF(gltf) {
         gltf.scene.position.x = -0.5
         gltf.scene.rotation.set(0, 0, 0)
         this.scene.add(gltf.scene)
         this.render()
-          }).catch(error => console.log(error))
-      },
-      addObject(object) {
-        this.scene.add(object)
       },
       readGLB(gltf) {
         this.addObject(gltf.scene)
         this.render()
       },
+      setCanvasSize() {
+        this.renderer.setSize(this.getWidth(), this.getHeight())
+        this.camera.aspepct = this.getAspectRatio()
+      },
       render() {
         requestAnimationFrame(this.render)
         this.renderer.render(this.scene, this.camera)