AXE-WEB/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/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 {