axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed Responsive Sizes issues - 414px is not really 414 because of scrollbars.

Browse Source
This commit is contained in:
Roman Axelrod
2022-10-21 08:52:23 +03:00
parent c570cd9c75
commit 7d168b27ee
15 changed files with 81 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/index.hbs
+3
View File
@@ -16,7 +16,10 @@
previewFrameUrl: '{{ previewFrameUrl }}',
};
</script>
<div class="preview">
<iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe>
</div>
<script src="/scripts/dist/index.min.js"></script>
</body>
layouts/partials/scripts.hbs
+1
View File
@@ -1,3 +1,4 @@
<script src="/scripts/frame-index.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
{{#each config.jsUrl }}<script src="{{ this }}"></script>
layouts/scripts/dist/index.min.js
Vendored
+15 -6
View File
@@ -9486,8 +9486,7 @@ function Responsive(props = {}) {
function updateController() {
let frameBreakpoint = breakpoint;
if (typeof frameBreakpoint !== 'string') {
const browserGap = 17; // Scrollbars + Borders
frameBreakpoint = frameBreakpoint + browserGap + 'px';
frameBreakpoint = frameBreakpoint + 'px';
}
previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
previewFrame.classList.add('has-breakpoint');
@@ -9687,10 +9686,10 @@ const PreviewButtonStyle = qe.button`
`;
const PreviewStyle = qe.div`
position: fixed;
top: 3rem;
top: calc(var(--top_panel_height) - 2px);
bottom: 0;
left: 0;
right: 0;
right: 14px; // Scrollbars
background-color: rgba(0, 0, 0, 0.1);
display: flex;
@@ -9857,7 +9856,8 @@ function DesignPreview({
if (!previewOption) {
return 0;
}
return window.innerWidth / 2 - previewOption.widthDimension / 2;
const scrollbarOffset = 7;
return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset;
}
function responsiveModeChangesHandler(e) {
if (e.data !== 'responsiveUpdate') {
@@ -10000,10 +10000,19 @@ function setupDataOptions(rootAttributes) {
root.render(html);
}
const previewFrame = document.getElementById('preview_frame');
const rootAttributes = {
previewFrame: document.getElementById('preview_frame')
previewFrame
};
setupResponsiveness(rootAttributes);
setupDataOptions(rootAttributes);
setupPublish(rootAttributes);
window.addEventListener('message', function (e) {
const RESIZE_CODE = 'resize:';
if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
return;
}
const data = JSON.parse(e.data.substring(RESIZE_CODE.length));
previewFrame.style.height = data.height + 'px';
});
//# sourceMappingURL=index.min.js.map
layouts/scripts/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/frame-index.js
+16
View File
@@ -0,0 +1,16 @@
'use strict';
setupResizeListener();
///
function setupResizeListener() {
const RESIZE_CODE = 'resize:';
const resizeObserver = new ResizeObserver(entries => {
const height = document.body.offsetHeight;
window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
})
resizeObserver.observe(document.body);
}
layouts/scripts/index.js
+12 -1
View File
@@ -4,10 +4,21 @@ import {setupResponsiveness} from './toolbar/responsive.jsx';
import {setupPublish} from "./toolbar/publish.jsx";
import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
const previewFrame = document.getElementById('preview_frame');
const rootAttributes = {
previewFrame: document.getElementById('preview_frame'),
previewFrame,
}
setupResponsiveness(rootAttributes);
setupDataOptions(rootAttributes);
setupPublish(rootAttributes)
window.addEventListener('message', function (e) {
const RESIZE_CODE = 'resize:';
if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
return;
}
const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
previewFrame.style.height = data.height + 'px';
});
layouts/scripts/toolbar/data-options/DesignPreview.jsx
+2 -1
View File
@@ -130,7 +130,8 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
return 0;
}
return window.innerWidth / 2 - previewOption.widthDimension / 2;
const scrollbarOffset = 7;
return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset;
}
function responsiveModeChangesHandler(e) {
layouts/scripts/toolbar/data-options/design-preview.style.js
+2 -2
View File
@@ -30,10 +30,10 @@ export const PreviewButtonStyle = styled.button`
export const PreviewStyle = styled.div`
position: fixed;
top: 3rem;
top: calc(var(--top_panel_height) - 2px);
bottom: 0;
left: 0;
right: 0;
right: 14px; // Scrollbars
background-color: rgba(0, 0, 0, 0.1);
display: flex;
layouts/scripts/toolbar/responsive.jsx
+1 -2
View File
@@ -65,8 +65,7 @@ function Responsive(props = {}) {
function updateController() {
let frameBreakpoint = breakpoint;
if (typeof frameBreakpoint !== 'string') {
const browserGap = 17; // Scrollbars + Borders
frameBreakpoint = (frameBreakpoint + browserGap) + 'px';
frameBreakpoint = frameBreakpoint + 'px';
}
previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
layouts/styles/_page--breakpoints.scss → layouts/styles/_page--preview.scss
+9 -3
View File
@@ -1,3 +1,9 @@
.preview {
overflow-y: scroll;
height: calc(100% - var(--top_panel_height));
position: relative;
}
#preview_frame {
display: block;
margin-right: auto;
@@ -7,10 +13,11 @@
--breakpoint_top_spacing: 30px;
margin-top: var(--top_spacing);
height: calc(100% - var(--top_panel_height) - var(--top_spacing));
height: 100%;
background-color: white;
border: 1px solid #E2E8F0;
border: 0;
outline: 1px solid #E2E8F0;
transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
@@ -19,7 +26,6 @@
width: 100%;
max-width: var(--breakpoint);
box-sizing: border-box;
}
}
layouts/styles/page--main.css
+11 -3
View File
@@ -56,6 +56,8 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.page_toolbar__middle {
display: flex;
@@ -104,6 +106,12 @@ body {
justify-content: flex-end;
}
.preview {
overflow-y: scroll;
height: calc(100% - var(--top_panel_height));
position: relative;
}
#preview_frame {
display: block;
margin-right: auto;
@@ -111,16 +119,16 @@ body {
--top_spacing: 0px;
--breakpoint_top_spacing: 30px;
margin-top: var(--top_spacing);
height: calc(100% - var(--top_panel_height) - var(--top_spacing));
height: 100%;
background-color: white;
border: 1px solid #E2E8F0;
border: 0;
outline: 1px solid #E2E8F0;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}
#preview_frame.has-breakpoint {
--breakpoint: 100%;
width: 100%;
max-width: var(--breakpoint);
box-sizing: border-box;
}
.open_in_new_tab {
layouts/styles/page--main.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AG7EJ;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AH+DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGhFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH4DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
layouts/styles/page--main.scss
+4 -1
View File
@@ -25,6 +25,9 @@ body {
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
&__middle {
display: flex;
justify-content: center;
@@ -80,7 +83,7 @@ body {
}
@import "page--breakpoints";
@import "page--preview";
.open_in_new_tab {
--size: 1.5rem;
layouts/styles/page--view.css
+1 -1
View File
@@ -1,6 +1,6 @@
body {
margin: 0;
overflow-y: scroll;
overflow-y: hidden;
}
main {
layouts/styles/page--view.scss
+1 -1
View File
@@ -1,6 +1,6 @@
body {
margin: 0;
overflow-y: scroll;
overflow-y: hidden;
}
main {