final Fix IPhone scrolling // added spacer div to content-expanded

tschuhmacher · Aug 22, 2019 · 6af657e · 6af657e
1 parent 1c6d05d
commit 6af657e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -156,10 +156,13 @@ a {
   text-decoration: none;
 }
 
-html,
-body {
+html {
   background-color: black;
-  height: 100%;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  position: relative;
   width: 100%;
 }
 

diff --git a/src/components/Slider.vue b/src/components/Slider.vue
@@ -28,6 +28,7 @@
               <v-img :src="slide.image" aspect-ratio="1.3" class="grey lighten-2 card__image"/>
               <p>{{slide.imageSubtitle}}</p>
               <p>{{slide.secondContent}}</p>
+              <div class="overflowSpacer"></div>
             </div>
 
             <div v-if="!isExpanded">
@@ -342,13 +343,16 @@ header {
 
 /* expanded content wrapper to allow scroll if the text reach over 70% of the viewport height */
 .content-expanded {
-  max-height: 70vh;
-  overflow-y: scroll;
-  /* additional margin for the last content item */
-  p:last-child {
-    margin-bottom: 5em;
-  }
+  max-height: 64vh;
+  padding-bottom: 1px;
+  overflow: auto;
+}
+
+/* additional margin for the last content item */
+.overflowSpacer{
+  height: 64px;
 }
+
 /* specific rules for mobile/tablet devices */
 @media (max-width: 768px) {
   /* Offset for non active slides */

diff --git a/src/views/Model.vue b/src/views/Model.vue
@@ -66,7 +66,7 @@ export default {
     const infoPoints = model.infoPoints;
 
     return {
-    publicPath: process.env.BASE_URL,
+      publicPath: process.env.BASE_URL,
 
       config,
       languageVersion,
@@ -241,13 +241,13 @@ export default {
   z-index: 8;
   p {
     margin-bottom: 0px;
-    :first-child {
-      width: 10px;
-      height: 20px;
-    }
+    // :first-child {
+    //   width: 10px;
+    //   height: 20px;
+    // }
   }
   h3 {
-    margin-bottom: 5px;
+    // margin-bottom: 5px;
   }
 }