mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-25 07:51:12 +02:00
Code Issues Releases Wiki Activity

add full screen layout. fixes #24

Browse Source
This commit is contained in:
Kushagra Gour
2017-01-20 02:25:52 +05:30
parent b0290f9ed0
commit 176970e1dc
3 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.html
View File

@@ -127,6 +127,11 @@
<use xlink:href="#mode-icon" />
</svg>
</a>
<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" />
</svg>
</a>
<div class="footer__separator"></div>

9
src/script.js
View File

@@ -139,7 +139,10 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
minSize: 34,
gutterSize: 6
gutterSize: 6,
onDragEnd: function () {
scope.setPreviewContent();
}
});
}
function toggleLayout(mode) {
@@ -153,13 +156,16 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
layoutBtn1.classList.remove('selected');
layoutBtn2.classList.remove('selected');
layoutBtn3.classList.remove('selected');
layoutBtn4.classList.remove('selected');
$('#layoutBtn' + mode).classList.add('selected');
document.body.classList.remove('layout-1');
document.body.classList.remove('layout-2');
document.body.classList.remove('layout-3');
document.body.classList.remove('layout-4');
document.body.classList.add('layout-' + mode);
resetSplitting();
scope.setPreviewContent();
}
function onExternalLibChange() {
@@ -792,6 +798,7 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
layoutBtn1.addEventListener('click', getToggleLayoutButtonListener(1));
layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
utils.onButtonClick(helpBtn, function () {
helpModal.classList.toggle('is-modal-visible');

9
src/style.css
View File

@@ -106,6 +106,15 @@ select, input[type="text"], textarea {
flex-direction: row;
width: auto;
}
.layout-4 .code-side {
display: none;
}
.layout-4 .code-side + .gutter {
display: none;
}
.layout-4 .demo-side {
width: 100% !important;
}
.code-wrap {
display: flex;
flex-direction: column;