Added "scroll" layout for scrolling tests.

Added swiperjs rules that fix the height/vertical-scrolling issues of sliders.
3 years ago · 0d3ae8f03e
5 changed files with 58 additions and 3 deletions
--- a/layouts/scroll.hbs
+++ b/layouts/scroll.hbs
@ -0,0 +1,16 @@
+<html lang="en">
+
+{{> (include_partial "layouts/partials/head") }}
+
+<body class="{{#if iframeMode}}body--iframe{{/if}}">
+
+<main>
+  <section class="fullscreen_layout"></section>
+  {{> (include_block_template) }}
+  <section class="fullscreen_layout"></section>
+</main>
+
+{{> (include_partial "layouts/partials/scripts") }}
+
+</body>
+</html>
--- a/layouts/styles/_page--view-swiper.scss
+++ b/layouts/styles/_page--view-swiper.scss
@ -0,0 +1,9 @@
+.swiper {
+  &-slide {
+    width: initial;
+  }
+
+  &-wrapper {
+    height: initial;
+  }
+}
--- a/layouts/styles/page--view.css
+++ b/layouts/styles/page--view.css
@ -5,13 +5,28 @@ body {
 main {
  margin-left: auto;
  margin-right: auto;
+  min-height: 100%;
+  overflow-x: hidden;
+}
+main .swiper-slide {
+  width: initial;
+}
+main .swiper-wrapper {
+  height: initial;
 }

 .body--iframe {
  overflow-y: hidden;
 }
 .body--iframe main {
-  overflow: auto;
+  overflow-y: auto;
+}
+
+.fullscreen_layout {
+  background-color: #9cc3ff;
+  min-height: 100%;
+  background-image: url("https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg");
+  background-size: cover;
 }

 /*# sourceMappingURL=page--view.css.map */
--- a/layouts/styles/page--view.css.map
+++ b/layouts/styles/page--view.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;AAEA;EACE","file":"page--view.css"}
+{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"}
--- a/layouts/styles/page--view.scss
+++ b/layouts/styles/page--view.scss
@ -5,6 +5,11 @@ body {
 main {
  margin-left: auto;
  margin-right: auto;
+  min-height: 100%;
+  overflow-x: hidden;
+
+  // Fixes scrolling issues of swiperJS. Should be included in all projects.
+  @import "page--view-swiper";
 }

 // iFrame mode
@ -12,6 +17,16 @@ main {
  overflow-y: hidden;

  main {
-    overflow: auto;
+    // If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included.
+    // Test on fresh block setup where heading has margin-top.
+    overflow-y: auto;
+  }
 }
+
+.fullscreen_layout {
+  background-color: #9cc3ff;
+  min-height: 100%;
+  background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
+  background-size: cover;
 }
+