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

Added the logic of wrapper + responsiveness controllers.

Browse Source
This commit is contained in:
Roman Axelrod
2022-07-19 18:43:16 +03:00
parent a7e51803cf
commit 9173efe9c9
24 changed files with 535 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/alignfull.hbs
-2
View File
@@ -4,8 +4,6 @@
<body>
{{> (include_partial "layouts/partials/toolbar") }}
<main>
{{> (include_block_template) }}
</main>
layouts/container.hbs
-2
View File
@@ -4,8 +4,6 @@
<body>
{{> (include_partial "layouts/partials/toolbar") }}
<main>
<div class="container">
{{> (include_block_template) }}
layouts/images/icon-desktop.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15 20H9" stroke="url(#paint0_linear_17102_17357)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path
d="M19 5H5C4.44772 5 4 5.44772 4 6V16C4 16.5523 4.44772 17 5 17H19C19.5523 17 20 16.5523 20 16V6C20 5.44772 19.5523 5 19 5Z"
stroke="url(#paint1_linear_17102_17357)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17357" x1="9" y1="21" x2="11.3077" y2="17.5385"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17357" x1="4" y1="17" x2="22" y2="11" gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 970 B

layouts/images/icon-mobile.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M16 3H8C7.44772 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z"
stroke="url(#paint0_linear_17102_17362)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17362)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17362" x1="7" y1="21" x2="19.2634" y2="19.2967"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17362" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

layouts/images/icon-tablet.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3Z"
stroke="url(#paint0_linear_17102_17360)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17360)" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_17102_17360" x1="3" y1="21" x2="24.1765" y2="15.7059"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
<linearGradient id="paint1_linear_17102_17360" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
gradientUnits="userSpaceOnUse">
<stop stop-color="#14181F"/>
<stop offset="1" stop-color="#272A31"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

layouts/index.hbs
+19
View File
@@ -0,0 +1,19 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/page--main.css">
<title>Block Development Tool</title>
</head>
<body>
{{> (include_partial "layouts/partials/toolbar") }}
<script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
<iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
<script src="/scripts/page--toolbar.js"></script>
</body>
</html>
layouts/partials/head.hbs
+5 -3
View File
@@ -2,8 +2,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{#if config.cssUrl }}<link rel="stylesheet" href="{{ config.cssUrl }}">
{{/if}}<link rel="stylesheet" href="styles/page--main.css">
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
{{#if config.cssUrl }}
<link rel="stylesheet" href="{{ config.cssUrl }}">
{{/if}}
<link rel="stylesheet" href="/styles/page--view.css">{{# if config.blockName}}
<link rel="stylesheet" href="/styles/{{ config.blockName }}.min.css">{{/if}}
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
layouts/partials/scripts.hbs
+3 -4
View File
@@ -1,5 +1,4 @@
<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>
<script src="scripts/page--toolbar.js"></script>{{#if config.jsUrl }}
<script src="{{ config.jsUrl }}"></script>{{/if}}
<script src="scripts/{{ config.blockName }}.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
<script src="{{ config.jsUrl }}"></script>{{/if}}{{#if config.blockName }}
<script src="/scripts/{{ config.blockName }}.min.js"></script>{{/if}}
layouts/partials/toolbar.hbs
+13
View File
@@ -1,7 +1,20 @@
<header class="page_toolbar">
<div class="page_toolbar__responsive_mode">
<input type="radio" value="desktop" id="responsive_mode__desktop" name="responsive_mode" checked="checked"/>
<label for="responsive_mode__desktop">Desktop</label>
<input type="radio" value="tablet" id="responsive_mode__tablet" name="responsive_mode"/>
<label for="responsive_mode__tablet">Tablet</label>
<input type="radio" value="mobile" id="responsive_mode__mobile" name="responsive_mode"/>
<label for="responsive_mode__mobile">Mobile</label>
</div>
<div class="page_toolbar__data_options">
<label for="data-options">Data Options: </label>
<select name="data" id="data-options">
{{#each config.dataFiles }}
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
layouts/scripts/page--toolbar.js
+32 -7
View File
@@ -1,13 +1,38 @@
(function () {
const dataOptionsSelect = document.getElementById('data-options');
if (!dataOptionsSelect) {
return;
const previewFrame = document.getElementById('preview_frame');
initDataOptions();
initResponsiveMode();
/**
* Functions
*/
function initDataOptions() {
const dataOptionsSelect = document.getElementById('data-options');
if (!dataOptionsSelect) {
return;
}
dataOptionsSelect.addEventListener('change', function () {
previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
});
}
dataOptionsSelect.addEventListener('change', function () {
console.log(this.value)
window.location = '?data=' + this.value;
})
function initResponsiveMode() {
document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
input.addEventListener('change', (event) => {
const mode = event.target.value;
previewFrame.classList.remove('breakpoint--desktop');
previewFrame.classList.remove('breakpoint--tablet');
previewFrame.classList.remove('breakpoint--mobile');
previewFrame.classList.add('breakpoint--' + mode);
});
});
}
})();
layouts/styles/_page--breakpoints.scss
+24
View File
@@ -0,0 +1,24 @@
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width .3s ease-in-out, width .3s ease-in-out;
&.breakpoint {
width: 100%;
max-width: 1920px;
//max-width: 100%;
&--mobile {
max-width: 375px;
}
&--tablet {
max-width: 768px;
}
}
}
layouts/styles/_page--main--responsive-mode.scss
+38
View File
@@ -0,0 +1,38 @@
&__responsive_mode {
display: flex;
gap: 0.5rem;
input[type='radio'] {
display: none;
}
label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
&[for="responsive_mode__tablet"] {
background-image: url("../images/icon-tablet.svg");
}
&[for="responsive_mode__mobile"] {
background-image: url("../images/icon-mobile.svg");
}
}
input[type='radio']:checked + label {
background-color: #CBD5E0;
}
}
layouts/styles/page--main.css
+70 -18
View File
@@ -1,29 +1,36 @@
body {
margin: 0;
font-size: 1rem;
background-color: #F7FAFC;
}
header.page_toolbar {
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #ccc;
background-color: #EDF2F7;
padding: 1em;
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
margin-bottom: 2em;
}
header.page_toolbar > div {
.page_toolbar > div {
position: relative;
}
header.page_toolbar > div:not(:first-child):after {
content: '|';
@media (max-width: 1024px) {
.page_toolbar > div {
display: none;
}
}
.page_toolbar > div:not(:first-child):after {
content: "|";
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
@@ -31,8 +38,7 @@ header.page_toolbar > div:not(:first-child):after {
line-height: 1;
transform: translateY(-50%);
}
header.page_toolbar select {
.page_toolbar > div select {
font-size: 0.85em;
margin: 0;
display: inline-block;
@@ -41,13 +47,59 @@ header.page_toolbar select {
width: initial !important;
padding: 4px 8px;
}
@media (max-width: 1024px) {
header.page_toolbar > div {
display: none;
}
header.page_toolbar .page_toolbar__data_options {
.page_toolbar__data_options {
display: block;
}
}
.page_toolbar__responsive_mode {
display: flex;
gap: 0.5rem;
}
.page_toolbar__responsive_mode input[type=radio] {
display: none;
}
.page_toolbar__responsive_mode label {
--size: 1.5rem;
cursor: pointer;
background-image: url("../images/icon-desktop.svg");
background-repeat: no-repeat;
background-size: calc(var(--size) - 0.15rem);
background-position: center;
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1;
display: block;
width: var(--size);
height: var(--size);
border-radius: 0.25rem;
}
.page_toolbar__responsive_mode label[for=responsive_mode__tablet] {
background-image: url("../images/icon-tablet.svg");
}
.page_toolbar__responsive_mode label[for=responsive_mode__mobile] {
background-image: url("../images/icon-mobile.svg");
}
.page_toolbar__responsive_mode input[type=radio]:checked + label {
background-color: #CBD5E0;
}
#preview_frame {
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #E2E8F0;
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
}
#preview_frame.breakpoint {
width: 100%;
max-width: 1920px;
}
#preview_frame.breakpoint--mobile {
max-width: 375px;
}
#preview_frame.breakpoint--tablet {
max-width: 768px;
}
/*# sourceMappingURL=page--main.css.map */
layouts/styles/page--main.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"}
layouts/styles/page--main.scss
+66
View File
@@ -0,0 +1,66 @@
body {
margin: 0;
font-size: 1rem;
//overflow: none;
background-color: #F7FAFC;
}
iframe {
margin-top: 30px;
height: calc(100% - 54px - 32px);
background-color: white;
}
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: 1em;
display: flex;
justify-content: center;
gap: var(--gap);
align-items: center;
//margin-bottom: 2em;
> div {
position: relative;
@media (max-width: 1024px) {
display: none;
}
&:not(:first-child):after {
content: '|';
position: absolute;
left: calc(var(--gap) / 2 * -1);
top: 40%;
font-size: 20px;
line-height: 1;
transform: translateY(-50%);
}
select {
font-size: 0.85em;
margin: 0;
display: inline-block;
border-radius: initial;
min-width: initial;
width: initial !important;
padding: 4px 8px;
}
}
&__data_options {
@media (max-width: 1024px) {
display: block;
}
}
@import "page--main--responsive-mode";
}
@import "page--breakpoints";
layouts/styles/page--view.css
+19
View File
@@ -0,0 +1,19 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/*# sourceMappingURL=page--view.css.map */
layouts/styles/page--view.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page--view.css"}
layouts/styles/page--view.scss
+17
View File
@@ -0,0 +1,17 @@
body {
margin: 0;
}
main {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}