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

Added "scroll" layout for scrolling tests.

Browse Source 
Added swiperjs rules that fix the height/vertical-scrolling issues of sliders.
This commit is contained in:
Roman Axelrod
2022-12-07 06:38:54 +02:00
parent b58ef27f1e
commit 0d3ae8f03e
5 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scroll.hbs
+16
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>
layouts/styles/_page--view-swiper.scss
+9
View File
@@ -0,0 +1,9 @@
.swiper {
&-slide {
width: initial;
}
&-wrapper {
height: initial;
}
}
layouts/styles/page--view.css
+16 -1
View File
@@ -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 */
layouts/styles/page--view.css.map
+1 -1
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"}
layouts/styles/page--view.scss
+16 -1
View File
@@ -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;
}