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://code.jquery.com/jquery-3.4.1.min.js"></script> |
||||
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> |
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }} |
||||
<script src="scripts/page--toolbar.js"></script>{{#if config.jsUrl }} |
<script src="{{ config.jsUrl }}"></script>{{/if}}{{#if config.blockName }} |
||||
<script src="{{ config.jsUrl }}"></script>{{/if}} |
<script src="/scripts/{{ config.blockName }}.min.js"></script>{{/if}} |
||||
<script src="scripts/{{ config.blockName }}.min.js"></script> |
|
||||
|
|||||
@ -1,13 +1,38 @@ |
|||||
(function () { |
(function () { |
||||
|
|
||||
const dataOptionsSelect = document.getElementById('data-options'); |
const previewFrame = document.getElementById('preview_frame'); |
||||
if (!dataOptionsSelect) { |
|
||||
return; |
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 () { |
function initResponsiveMode() { |
||||
console.log(this.value) |
|
||||
window.location = '?data=' + this.value; |
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