mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Adjust layout for mobile
This commit is contained in:
Misode
@@ -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',
|
||||
|
||||
@@ -18,6 +18,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div id="source-toggle" class="nav-item">
|
||||
<svg id="source-toggle-source" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>
|
||||
<svg id="source-toggle-tree" class="inactive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"></path></svg>
|
||||
</div>
|
||||
<div class="nav-item nav-selector">
|
||||
<svg id="language-selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>
|
||||
<div class="nav-selector-menu btn-group" id="language-selector-menu"></div>
|
||||
@@ -27,7 +31,7 @@
|
||||
<svg id="theme-selection-dark" class="inactive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>
|
||||
</div>
|
||||
<div id="github-link" class="nav-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="28" height="28"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user