From 23ced6190890c5b751346a59f35835dbc9af4ab1 Mon Sep 17 00:00:00 2001
From: Patrick Neff <odie86@gmail.com>
Date: Sun, 5 May 2019 10:06:20 +0200
Subject: [PATCH] More Theme updates

---
 themes/neff/layouts/_default/single.html      |  4 +-
 themes/neff/layouts/catalog/li.html           |  2 +-
 themes/neff/layouts/catalog/list.html         | 10 ++---
 themes/neff/layouts/catalog/single.html       |  4 +-
 themes/neff/layouts/gallery/li.html           |  4 +-
 themes/neff/layouts/gallery/list.html         | 12 +++---
 themes/neff/layouts/index.html                | 24 ++++++------
 themes/neff/layouts/model/single.html         |  4 +-
 themes/neff/layouts/partials/address.html     |  2 +-
 themes/neff/layouts/partials/banner.html      |  2 +-
 themes/neff/layouts/partials/breadcrumbs.html |  4 +-
 .../layouts/partials/catalog-article.html     |  4 +-
 themes/neff/layouts/partials/gallery.html     |  2 +-
 themes/neff/layouts/partials/header.html      |  2 +
 themes/neff/layouts/partials/news.html        |  2 +-
 themes/neff/layouts/partials/single.html      |  2 +-
 .../neff/layouts/partials/translations.html   |  2 +-
 themes/neff/layouts/shortcodes/gallery.html   |  6 +--
 themes/neff/layouts/shortcodes/image.html     |  2 +-
 themes/neff/src/scss/_flexgrid.scss           | 13 +++----
 themes/neff/src/scss/_grid.scss               |  7 +---
 themes/neff/src/scss/_index.scss              | 13 +------
 themes/neff/src/vue/CatalogArticle.vue        | 38 ++++++++++---------
 themes/neff/src/vue/ModelViewer.vue           |  4 +-
 .../neff/src/vue/components/ModelViewer.vue   |  6 +--
 25 files changed, 83 insertions(+), 92 deletions(-)
 mode change 100755 => 100644 themes/neff/layouts/gallery/list.html

diff --git a/themes/neff/layouts/_default/single.html b/themes/neff/layouts/_default/single.html
index d83c60a..13634e2 100755
--- a/themes/neff/layouts/_default/single.html
+++ b/themes/neff/layouts/_default/single.html
@@ -3,8 +3,8 @@
 {{- end -}}
 
 {{- define "main" -}}
-<main id="single">
-    <article>
+<main class="row" id="single">
+    <article class="col-sm-12">
         {{- partial "single.html" . -}}
     </article>
 </main>
diff --git a/themes/neff/layouts/catalog/li.html b/themes/neff/layouts/catalog/li.html
index 33e116c..ee8d38e 100755
--- a/themes/neff/layouts/catalog/li.html
+++ b/themes/neff/layouts/catalog/li.html
@@ -17,6 +17,6 @@
     {{ $image = index $images 0 }}
 {{ end }}
 {{ with $image }}
-<li class="padding"> {{- partial "catalog.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
+<li class="col-xs-6 col-sm-4"> {{- partial "catalog.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
 </li>
 {{ end }}
diff --git a/themes/neff/layouts/catalog/list.html b/themes/neff/layouts/catalog/list.html
index 642b66a..24d48fb 100644
--- a/themes/neff/layouts/catalog/list.html
+++ b/themes/neff/layouts/catalog/list.html
@@ -3,9 +3,9 @@
 {{- end -}}
 
 {{ define "main" }}
-<main id="list">
-    <h1 class="padding">{{ .Title }}</h1>
-    <ul class="list-unstyled flex row gallery">
+<main class="row" id="list">
+    <h1 class="col-xs">{{ .Title }}</h1>
+    <ul class="list-unstyled row">
         {{- range .Sections -}}
             {{- .Render "li" -}}
         {{- end -}}
@@ -14,8 +14,8 @@
         {{- end -}}
     </ul>
     {{- with .Content -}}
-        <div class="content flex column">
-            <div class="padding">
+        <div class="content row">
+            <div class="col-sm-12">
                 {{ . }}
             </div>
         </div>
diff --git a/themes/neff/layouts/catalog/single.html b/themes/neff/layouts/catalog/single.html
index 6db640b..8b35132 100755
--- a/themes/neff/layouts/catalog/single.html
+++ b/themes/neff/layouts/catalog/single.html
@@ -3,8 +3,8 @@
 {{- end -}}
 
 {{- define "main" -}}
-<main class="catalog" id="single">
-    <article id="catalog-article">
+<main class="catalog row" id="single">
+    <article id="catalog-article" class="col-sm-12">
         {{- partial "catalog-article.html" . -}}
     </article>
 </main>
diff --git a/themes/neff/layouts/gallery/li.html b/themes/neff/layouts/gallery/li.html
index 5157d0b..86e4463 100755
--- a/themes/neff/layouts/gallery/li.html
+++ b/themes/neff/layouts/gallery/li.html
@@ -16,7 +16,7 @@
 {{ else }}
     {{ $image = index $images 0 }}
 {{ end }}
-{{ with $images }}
-<li class="padding"> {{- partial "figure.html" (dict "ctx" $ctx "image" $image "class" "gallery" "showTitle" true "showDescription" true) -}}
+{{ with $image }}
+<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
 </li>
 {{ end }}
diff --git a/themes/neff/layouts/gallery/list.html b/themes/neff/layouts/gallery/list.html
old mode 100755
new mode 100644
index 25a8e3d..94bb583
--- a/themes/neff/layouts/gallery/list.html
+++ b/themes/neff/layouts/gallery/list.html
@@ -4,8 +4,10 @@
 
 {{ define "main" }}
 <main id="list">
-    <h1 class="padding">{{ .Title }}</h1>
-    <ul class="list-unstyled flex row gallery">
+    <div class="row">
+      <h1 class="col-xs-12">{{ .Title }}</h1>
+    </div>
+    <ul class="list-unstyled row">
         {{- range .Sections -}}
             {{- .Render "li" -}}
         {{- end -}}
@@ -14,11 +16,11 @@
         {{- end -}}
     </ul>
     {{- with .Content -}}
-        <div class="content flex column">
-            <div class="padding">
+        <div class="content row">
+            <div class="col-sm-12">
                 {{ . }}
             </div>
         </div>
     {{- end -}}
 </main>
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/themes/neff/layouts/index.html b/themes/neff/layouts/index.html
index 4fa3337..34ff22f 100755
--- a/themes/neff/layouts/index.html
+++ b/themes/neff/layouts/index.html
@@ -36,7 +36,7 @@
                 <a class="anchor" id="{{ i18n "about-us" }}"><h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1></a>
                 <div class="row">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "ueber-uns")) -}}
-                        <div class="col-xs-4">
+                        <div class="col-xs-12 col-sm-4">
                             {{- partial "hero.html" . -}}
                         </div>
                     {{- end -}}
@@ -45,8 +45,8 @@
         </div>
 
         <div class="container">
-            <section id="index-contact">
-                <div>
+            <section class="row" id="index-contact">
+                <div class="col-xs-12">
                     <a class="anchor" id="{{ i18n "contact" }}"><h1 class="padding">Kontakt</h1></a>
                     <div class="call-to-action flex row text-center">
                         <div class="padding">
@@ -64,14 +64,14 @@
         </div>
 
         <div class="container">
-            <section id="index-gallery">
-                <h1 class="padding">
+            <section class="row" id="index-gallery">
+                <h1 class="col-xs-12 padding">
                     <a class="anchor" href="/galerie" id="{{ i18n "gallery" }}">{{ i18n "gallery" | title}}</a>
                     <span class="small"></span>
                 </h1>
                 <ul class="row list-unstyled">
                     {{- range .Params.galleries }}
-                        <li class="col-xs-4">
+                        <li class="col-xs-12 col-sm-4">
                             {{- $section := $.Site.GetPage "section" "galerie" -}} 
                             {{- $page := $section.GetPage . -}} 
                             {{- $image := ((index $page.Pages 0).Resources.GetMatch "**.jpg") -}} 
@@ -79,8 +79,8 @@
                         </li>
                     {{- end -}}
                 </ul>
-                <div class="padding">
-                    <p class="text-right">
+                <div class="col-xs-12 end-sm">
+                    <p>
                         <a href="/galerie"><strong>Alle Galerien</strong></a>                       
                     </p>
                 </div>
@@ -88,15 +88,15 @@
         </div>
 
         <div class="container">
-            <section id="index-news">
-                <h1 class="padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
+            <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>
                 <ul class="list-unstyled row">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
                         {{- partial "news.html" . -}}
                     {{- end -}}
                 </ul>
-                <div class="padding">
-                    <p class="text-right">
+                <div class="col-xs-12 end-sm">
+                    <p>
                         <a href="/neuigkeiten"><strong>Alle Neuigkeiten</strong></a>
                     </p>
                 </div>
diff --git a/themes/neff/layouts/model/single.html b/themes/neff/layouts/model/single.html
index 745a6e0..ccb68f0 100644
--- a/themes/neff/layouts/model/single.html
+++ b/themes/neff/layouts/model/single.html
@@ -3,8 +3,8 @@
 {{- end -}}
 
 {{- define "main" -}}
-<main class="model" id="single">
-    <article id="model">
+<main class="model row" id="single">
+    <article id="model" class="col-sm-12">
         <div id="model-viewer-root"></div>
     </article>
 </main>
diff --git a/themes/neff/layouts/partials/address.html b/themes/neff/layouts/partials/address.html
index ca0b8dd..53ff955 100755
--- a/themes/neff/layouts/partials/address.html
+++ b/themes/neff/layouts/partials/address.html
@@ -1,4 +1,4 @@
-<section class="address col-xs-4">
+<section class="address col-xs-12 col-sm-4">
     <header>
         <h3>{{ .address.address.addressLocality }}</h3>
     </header>
diff --git a/themes/neff/layouts/partials/banner.html b/themes/neff/layouts/partials/banner.html
index 03f231f..5953dbe 100644
--- a/themes/neff/layouts/partials/banner.html
+++ b/themes/neff/layouts/partials/banner.html
@@ -6,7 +6,7 @@
 {{- with $page -}}
     <section id="banner">
         <div class="container">
-            <div id="banner-container" class="padding">
+            <div id="banner-container" class="col-xs-12">
                 <h1>{{ .Title }}</h1>
                 <p>{{ .Params.description }}</p>
                 <p><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "more-info" }}</a></p>
diff --git a/themes/neff/layouts/partials/breadcrumbs.html b/themes/neff/layouts/partials/breadcrumbs.html
index fcffd99..5243dd7 100644
--- a/themes/neff/layouts/partials/breadcrumbs.html
+++ b/themes/neff/layouts/partials/breadcrumbs.html
@@ -1,5 +1,5 @@
-<nav class="breadcrumbs">
-  <ol  class="nav navbar-nav">
+<nav class="breadcrumbs row">
+  <ol  class="nav navbar-nav col-xs-12">
     {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
   </ol>
   {{ define "breadcrumbnav" }}
diff --git a/themes/neff/layouts/partials/catalog-article.html b/themes/neff/layouts/partials/catalog-article.html
index 16df810..e042fd1 100755
--- a/themes/neff/layouts/partials/catalog-article.html
+++ b/themes/neff/layouts/partials/catalog-article.html
@@ -1,7 +1,7 @@
-<header class="flex column padding">
+<header class="flex padding">
     <h1>{{ .Title }}</h1>
 </header>
-<div class="content flex column">
+<div class="content flex">
   <div class="padding">
     {{- with .Resources.GetMatch "bilder/*" -}}
       {{- $orig := . -}}
diff --git a/themes/neff/layouts/partials/gallery.html b/themes/neff/layouts/partials/gallery.html
index bd3d1fa..496b55a 100755
--- a/themes/neff/layouts/partials/gallery.html
+++ b/themes/neff/layouts/partials/gallery.html
@@ -1,7 +1,7 @@
 <div class="clearfix"></div>
 <ul class="list-unstyled flex row gallery">
     {{- range .Resources.ByType "image" -}} 
-        <li class="padding">
+        <li class="col-xs-12 col-sm-4 padding">
             {{- partial "figure.html" (dict "image" . "ctx" . "lightbox" true "class" "gallery" "showTitle" true "showDescription" true) }}
         </li>
     {{- end -}}
diff --git a/themes/neff/layouts/partials/header.html b/themes/neff/layouts/partials/header.html
index 7bfe38d..d494638 100755
--- a/themes/neff/layouts/partials/header.html
+++ b/themes/neff/layouts/partials/header.html
@@ -1,4 +1,5 @@
 <div class="flex row">
+  <div class="col-xs-12">
     <div class="navbar-logo padding">
         <a href="{{.Site.BaseURL }}">
             <picture>
@@ -35,4 +36,5 @@
             </nav>
         </div>
     </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/themes/neff/layouts/partials/news.html b/themes/neff/layouts/partials/news.html
index 36bc317..91e2628 100755
--- a/themes/neff/layouts/partials/news.html
+++ b/themes/neff/layouts/partials/news.html
@@ -1,4 +1,4 @@
-<li class="col-xs-4">
+<li class="col-xs-12 col-sm-4">
     <div>
         {{- $site := . -}}
         {{- range .Resources.ByType "image" -}}
diff --git a/themes/neff/layouts/partials/single.html b/themes/neff/layouts/partials/single.html
index 8952dfd..6a79df0 100755
--- a/themes/neff/layouts/partials/single.html
+++ b/themes/neff/layouts/partials/single.html
@@ -1,4 +1,4 @@
-<header class="flex column padding">
+<header class="flex padding">
     <h1>{{ .Title }}</h1>
 </header>
 {{- $resources := .Resources -}}
diff --git a/themes/neff/layouts/partials/translations.html b/themes/neff/layouts/partials/translations.html
index 588467a..be0c77a 100755
--- a/themes/neff/layouts/partials/translations.html
+++ b/themes/neff/layouts/partials/translations.html
@@ -1,5 +1,5 @@
 <h4>{{ i18n "translations" | title }}</h4>
-<ul>
+<ul class="col-xs-12">
     {{- range .Translations -}}
         <li>
             <a href="{{ .Permalink }}" hreflang="{{ .Language.Lang }}">{{ .Language.LanguageName }}: {{ .Title }}</a>
diff --git a/themes/neff/layouts/shortcodes/gallery.html b/themes/neff/layouts/shortcodes/gallery.html
index b96e944..e350bf0 100644
--- a/themes/neff/layouts/shortcodes/gallery.html
+++ b/themes/neff/layouts/shortcodes/gallery.html
@@ -39,14 +39,14 @@
 
 <div class="clearfix"></div>
 {{ with .Inner }}
-    <ul class="list-unstyled flex row gallery neg-margin">
+    <ul class="list-unstyled row gallery">
         {{ . }}
     </ul>
 {{ else }}
-    <ul class="list-unstyled flex row gallery neg-margin">
+    <ul class="list-unstyled row gallery">
             {{ range $.Page.Resources.Match $search }}
                 {{- if (ne .Params.featured true) -}}
-                    <li class="padding">
+                    <li class="col-xs-6 col-sm-4">
                         {{- partial "figure.html" (dict "image" . "ctx" . "lightbox" $lightbox "class" "gallery" "showTitle" $title "showDescription" $description "keepOriginal" $keep) -}}
                     </li>
                 {{- end -}}
diff --git a/themes/neff/layouts/shortcodes/image.html b/themes/neff/layouts/shortcodes/image.html
index 944de65..783d1ab 100644
--- a/themes/neff/layouts/shortcodes/image.html
+++ b/themes/neff/layouts/shortcodes/image.html
@@ -47,7 +47,7 @@
 {{ end }}
 {{ $image := $.Page.Resources.GetMatch $search }}
 {{ if $list }}
-    <li class="padding">
+    <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 }}
diff --git a/themes/neff/src/scss/_flexgrid.scss b/themes/neff/src/scss/_flexgrid.scss
index 0abee45..eb6087a 100644
--- a/themes/neff/src/scss/_flexgrid.scss
+++ b/themes/neff/src/scss/_flexgrid.scss
@@ -1,7 +1,7 @@
 /* VARIABLES */
 
 $gutter-width: 0.5rem !default;
-$outer-margin: 2rem !default;
+$outer-margin: 1rem !default;
 
 $xs-min: 30rem !default;
 $sm-min: 48rem !default;
@@ -36,16 +36,13 @@ $gutter-compensation: $half-gutter-width * -1;
 .container,
 .container-fluid {
     margin: 0 auto;
-}
-
-.container-fluid {
     padding: 0 $outer-margin;
 }
 
 .row {
     @include flex();
     flex-direction: row;
-    margin: $gutter-compensation 0;
+    margin: 0 $gutter-compensation;
 
     &.reverse {
         flex-direction: row-reverse;
@@ -180,7 +177,7 @@ $gutter-compensation: $half-gutter-width * -1;
     .col-offset-sm-12 {
         box-sizing: border-box;
         flex: 0 0 auto;
-        padding: $half-gutter-width 0;
+    padding: 0 $half-gutter-width;
     }
 
     .col-sm {
@@ -271,7 +268,7 @@ $gutter-compensation: $half-gutter-width * -1;
     .col-offset-lg-12 {
         box-sizing: border-box;
         flex: 0 0 auto;
-        padding: $half-gutter-width 0;
+    padding: 0 $half-gutter-width;
     }
 
     .col-lg {
@@ -362,7 +359,7 @@ $gutter-compensation: $half-gutter-width * -1;
     .col-offset-xl-12 {
         box-sizing: border-box;
         flex: 0 0 auto;
-        padding: $half-gutter-width 0;
+    padding: 0 $half-gutter-width;
     }
 
     .col-xl {
diff --git a/themes/neff/src/scss/_grid.scss b/themes/neff/src/scss/_grid.scss
index 2bb3142..e60a7ff 100644
--- a/themes/neff/src/scss/_grid.scss
+++ b/themes/neff/src/scss/_grid.scss
@@ -184,6 +184,7 @@ table {
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: $border-radius;
   margin-bottom: $gutter-width;
+  padding: $gutter-width * 0.5 $gutter-width;
 
     &.transparent {
         background-color: transparent;
@@ -220,7 +221,6 @@ table {
 
 .list-unstyled {
     list-style: none;
-    margin: 0;
     padding: 0;
 }
 
@@ -343,6 +343,7 @@ figure {
     border-radius: $border-radius;
     color: black
     margin 0 1rem;
+    line-height: 3rem;
      
     &.btn-small {
       padding: .3rem 1rem;
@@ -418,13 +419,9 @@ a.btn-primary {
 nav.breadcrumbs {
   ol {
     list-style: none;
-    padding: 0;
-    margin: 0;
 
     li {
       display: inline-block;
-      padding: 0;
-      margin: 0;
 
       &.active {
         font-weight: bold;
diff --git a/themes/neff/src/scss/_index.scss b/themes/neff/src/scss/_index.scss
index be734a3..cc72504 100644
--- a/themes/neff/src/scss/_index.scss
+++ b/themes/neff/src/scss/_index.scss
@@ -24,19 +24,10 @@
         font-size: 1.1rem;
         align-items: flex-start;
         background-color: rgba(255, 255, 255, 0.9);
-        height: 90px;
         border-radius: $border-radius;
-        padding: $gutter-width;
-        margin: calc(100vh - 310px) -$gutter-width 0 -$gutter-width;
+        margin: calc(100vh - 280px) -$half-gutter-width 0 auto;
+        padding: $half-gutter-width $gutter-width;
         overflow: hidden;
-        min-width: 100%;
-
-        @media only screen and (min-width: $sm-min) {
-            margin-top: calc(100vh - 285px);
-            margin-bottom: -$gutter-width;
-            margin-right: -$gutter-width;
-            padding-right: $gutter-width;
-        }
 
         ul {
             list-style: none;
diff --git a/themes/neff/src/vue/CatalogArticle.vue b/themes/neff/src/vue/CatalogArticle.vue
index 5ccb876..b9c6bfe 100644
--- a/themes/neff/src/vue/CatalogArticle.vue
+++ b/themes/neff/src/vue/CatalogArticle.vue
@@ -1,28 +1,30 @@
 <template>
-  <article v-if="articleData">
-    <header class="flex column padding">
+  <article class="row"v-if="articleData">
+    <header class="col-xs-12">
       <h1>{{ articleData.title }}</h1>
     </header>
-    <div class="content flex column">
-      <div class="padding">
-        <div v-if="hasWebGl && articleData.model" class="featured left wide">
+    <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>
-        <figure v-else class="featured left wide">
+        <figure v-else class="featured col-xs-12 col-sm-8">
           <img alt="" title="" class="" srcset="" sizes="" src="">
         </figure>
-        <p v-if="hasWebGl && articleData.model && articleData.model.textures.length > 1">
-          <strong>Material ändern</strong>
-          <material-switcher :modelData="articleData.model"/>
-        </p>
-        <p class="offer">
-          <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="article-id">Art. Nr.: {{ articleData.article_id }}</p>
+        <div class="col-sm-4 col-xs-12">
+          <p v-if="hasWebGl && articleData.model && articleData.model.textures.length > 1">
+            <strong>Material ändern</strong>
+            <material-switcher :modelData="articleData.model"/>
+          </p>
+          <p class="offer">
+            <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="article-id">Art. Nr.: {{ articleData.article_id }}</p>
+        </div>
       </div>
     </div>
   </article>
diff --git a/themes/neff/src/vue/ModelViewer.vue b/themes/neff/src/vue/ModelViewer.vue
index 1b1ed8c..ca2ff12 100644
--- a/themes/neff/src/vue/ModelViewer.vue
+++ b/themes/neff/src/vue/ModelViewer.vue
@@ -1,9 +1,9 @@
 <template>
   <article v-if="articleData">
-    <header class="flex column padding">
+    <header class="flex  padding">
       <h1>{{ articleData.title }}</h1>
     </header>
-    <div class="content flex column">
+    <div class="content flex">
       <div class="padding">
         <div v-if="articleData.model" class="featured left wide">
           <model-viewer class="model-viewer" :modelData="articleData.model"/>
diff --git a/themes/neff/src/vue/components/ModelViewer.vue b/themes/neff/src/vue/components/ModelViewer.vue
index dcbcbcc..43c0544 100644
--- a/themes/neff/src/vue/components/ModelViewer.vue
+++ b/themes/neff/src/vue/components/ModelViewer.vue
@@ -58,16 +58,16 @@ export default {
         this.scene = new Scene()
       },
       getWidth() {
-        let el = document.getElementById('model-viewer') || 0
+        let el = this.$el.parentElement || 0
         if (el) {
           return el.offsetWidth
         }
         return 0
       },
       getHeight() {
-        let el = document.getElementById('model-viewer') || 0
+        let el = this.$el.parentElement || 0
         if (el) {
-          return el.offsetHeight
+          return el.offsetWidth / 1.333333;
         }
         return 0
       },