Update iframe

Dockerfile

@@ -42,8 +42,13 @@ RUN apk --no-cache add \
   libressl \
   yarn
 
-# Install jekyll
-RUN gem install jekyll bundler
+# Install bundle of gems
+WORKDIR /tmp
+COPY Gemfile /tmp/
+COPY Gemfile.lock /tmp/
+RUN gem install bundler \
+  && bundle config --global silence_root_warning 1 \
+  && bundle install
 
 # --
 RUN addgroup -Sg 1000 jekyll

Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'jekyll'

Gemfile.lock

@@ -0,0 +1,63 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.6.0)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.4)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.10.0)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-watch (2.1.2)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.1)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (3.3.0)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.4)
+    sass (3.7.3)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll
+
+BUNDLED WITH
+   2.0.1

_config.yml

@@ -68,16 +68,6 @@ enable:
   app_icon: true
   smart_app_banner: true
 
-#
-# Device
-#
-# Available devices:
-# * iphone-se-silver-vertical
-# * iphone-se-space-gray-vertical
-# * ipod-touch-blue-vertical
-#
-device: iphone-se-silver-vertical # REQUIRED
-
 #
 # Theme Settings
 #

_sass/_devices.scss

@@ -8,72 +8,30 @@
   background-size: cover;
 }
 
-.device .app-screenshot {
-  position: absolute;
-  width: 240px;
-  height: auto;
-}
-
-.device .video-container {
-  position: absolute;
-  width: 240px;
-  height: 426.66px;
-  padding-bottom: 0;
-    margin-left: 24px;
-    margin-top: 90.67px;
-    overflow: hidden;
-}
-// Video
-
-.video-container iframe {
-    position: absolute;
-    top:0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
 //
-// iPhone SE Silver Vertical
+// iPhone X White
 //
 
-.device.iphone-se-silver-vertical {
-  width: 288px;
-  height: 608px;
-  background-image: url(../../images/devices/iphone-se-silver-vertical.png);
-}
-.device.iphone-se-silver-vertical .app-screenshot {
-  top: 91px;
-  left: 25px;
-  width: 240px;
+.device.appetize {
+  width: 426px;
+  height: 859px;
 }
 
-//
-// iPhone SE Space Gray Vertical
-//
-
-.device.iphone-se-space-gray-vertical {
-  width: 288px;
-  height: 608px;
-  background-image: url(../../images/devices/iphone-se-space-gray-vertical.png);
-}
-.device.iphone-se-space-gray-vertical .app-screenshot {
-  top: 91px;
-  left: 25px;
-  width: 240px;
+.device.appetize .frame {
+  position: absolute;
+  width: 100%;
+  height: 100%; 
+  z-index:1;
+  pointer-events: none;
+  background-image: url(../../images/iphonex.png);
+  background-size: 100%;
 }
 
-//
-// iPod Touch Blue Vertical
-//
-
-.device.ipod-touch-blue-vertical {
-  width: 291px;
-  height: 614px;
-  background-image: url(../../images/devices/ipod-touch-blue-vertical.png);
-}
-.device.ipod-touch-blue-vertical .app-screenshot {
-  top: 87px;
-  left: 23px;
-  width: 246px;
+.device.appetize iframe {
+  position: absolute;
+  width: 375px;
+  height: 812px;
+  margin-left: 24px;
+  margin-top: 31px;
+  z-index:0;
 }

themes/default/index.html

@@ -46,25 +46,11 @@
 
         <!-- Appetize -->
       {% if site.app.appetize_key %}
-        <iframe src="https://appetize.io/embed/{{ site.app.appetize_key }}?autoplay=true&orientation=portrait&deviceColor=black&screenOnly=false&disableHome=true&device=iphonex&scale=100" width="409px" height="845px" frameborder="0" scrolling="no">
-        </iframe>
-      {% else %}
-
-        <!-- App Preview or Screenshot(s) -->
-        <div class="device {{ site.device }}">
-          {% if site.app.video %}
-               <div class="video-container">
-                <iframe src="{{ site.app.video }}" height="426.66" width="240" allowfullscreen="" frameborder="0">
-                </iframe>
-              </div>
-          {% else %}
-               <img
-                class="app-screenshot"
-                {% if site.app.screenshot %}src="{{ site.app.screenshot }}"{% endif %}
-               />
-          {% endif %}
+        <div class="device appetize">
+          <div class="frame"></div>
+          <iframe src="https://appetize.io/embed/{{ site.app.appetize_key }}?autoplay=false&useLastFrame=true&orientation=portrait&deviceColor=black&screenOnly=true&disableHome=true&device=iphonex&scale=100" frameborder="0" scrolling="no"></iframe>
         </div>
-        {% endif %}
+      {% endif %}
       </div>
     </div>