diff --git a/src/app/app.ts b/src/app/app.ts index 39b7bd64..c8cf6f1a 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -50,6 +50,7 @@ Promise.all([ const sourceControlsMenu = document.getElementById('source-controls-menu')! const sourceControlsCopy = document.getElementById('source-controls-copy')! const sourceControlsDownload = document.getElementById('source-controls-download')! + const sourceToggle = document.getElementById('source-toggle')! let selected = modelFromPath(location.pathname) @@ -110,6 +111,18 @@ Promise.all([ updateModel(modelFromPath(location.pathname)) } + sourceToggle.addEventListener('click', evt => { + if (sourceViewEl.classList.contains('toggled')) { + sourceViewEl.classList.remove('toggled') + sourceToggle.children[0].classList.remove('inactive') + sourceToggle.children[1].classList.add('inactive') + } else { + sourceViewEl.classList.add('toggled') + sourceToggle.children[0].classList.add('inactive') + sourceToggle.children[1].classList.remove('inactive') + } + }) + languageSelectorMenu.innerHTML = '' Object.keys(languages).forEach(key => { languageSelectorMenu.insertAdjacentHTML('beforeend', diff --git a/src/generator.html b/src/generator.html index 74135733..b5204a3f 100644 --- a/src/generator.html +++ b/src/generator.html @@ -18,6 +18,10 @@
+
@@ -27,7 +31,7 @@
diff --git a/src/styles/global.css b/src/styles/global.css index 16244ab2..6111cca5 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -11,6 +11,7 @@ body { .container { background-color: #ffffff; + overflow-x: hidden; } .header { @@ -30,6 +31,7 @@ body { .header-title h2 { margin-right: 10px; + /* white-space: nowrap; */ } .header-title .model-selector { @@ -46,7 +48,7 @@ body { align-items: center; fill: #343a40; cursor: pointer; - margin-left: 32px; + margin: 0 16px; user-select: none; } @@ -62,6 +64,18 @@ body { font-size: 1.1em; } +.nav-item#github-link { + fill: #9fa2a7 +} + +.nav-item#github-link:hover { + fill: #bcbfc3 +} + +.nav-item#source-toggle { + display: none; +} + .nav-selector { position: relative; } @@ -176,3 +190,57 @@ body { border-top-right-radius: 0px; border-top-left-radius: 0px; } + +@media screen and (max-width: 560px) { + body { + overflow-y: hidden; + } + + .header { + flex-direction: column; + height: 92px; + } + + .nav { + align-self: flex-end; + } + + .content, + .source textarea { + height: calc(100vh - 92px); + } + + .source, + .gutter.gutter-horizontal { + display: none; + } + + .tree { + width: 100% !important; + height: 100%; + } + + .nav-item#source-toggle { + display: flex; + position: absolute; + left: 10px; + } + + .source.toggled { + display: initial; + position: absolute; + width: 100% !important; + height: 100%; + z-index: 5; + } + + .source.toggled .source-controls { + right: 17px; + top: 0px; + } + + .source.toggled .source-controls-menu { + right: 17px; + top: 35px; + } +}