AXE-WEB
/
block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added "scroll" layout for scrolling tests. 

Added swiperjs rules that fix the height/vertical-scrolling issues of sliders.
pull/6/head
Roman Axelrod 3 years ago
parent
b58ef27f1e
commit
0d3ae8f03e
5 changed files with 58 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      layouts/scroll.hbs
  2. 9
      layouts/styles/_page--view-swiper.scss
  3. 17
      layouts/styles/page--view.css
  4. 2
      layouts/styles/page--view.css.map
  5. 17
      layouts/styles/page--view.scss

16
layouts/scroll.hbs
View File

@ -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>

9
layouts/styles/_page--view-swiper.scss
View File

@ -0,0 +1,9 @@
.swiper {
&-slide {
width: initial;
}
&-wrapper {
height: initial;
}
}

17
layouts/styles/page--view.css
View File

@ -5,13 +5,28 @@ body {
main { main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-height: 100%;
overflow-x: hidden;
}
main .swiper-slide {
width: initial;
}
main .swiper-wrapper {
height: initial;
} }
.body--iframe { .body--iframe {
overflow-y: hidden; overflow-y: hidden;
} }
.body--iframe main { .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 */ /*# sourceMappingURL=page--view.css.map */

2
layouts/styles/page--view.css.map
View File

@ -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"}

17
layouts/styles/page--view.scss
View File

@ -5,6 +5,11 @@ body {
main { main {
margin-left: auto; margin-left: auto;
margin-right: 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 // iFrame mode
@ -12,6 +17,16 @@ main {
overflow-y: hidden; overflow-y: hidden;
main { 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;
}

Write Preview
Loading…
Cancel
Save