24 changed files with 535 additions and 76 deletions
|
After Width: | Height: | Size: 970 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -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> |
|||
@ -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}} |
|||
|
|||
@ -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); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
})(); |
|||
|
|||
@ -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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -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; |
|||
} |
|||
|
|||
} |
|||
@ -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"} |
|||
@ -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"; |
|||
|
|||
@ -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 */ |
|||
@ -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"} |
|||
@ -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; |
|||
} |
|||
Loading…
Reference in new issue