Mobile UI and UX improvements

src/app/Router.ts

@@ -14,18 +14,21 @@ const router = async () => {
   const urlParams = new URLSearchParams(location.search)
 
   const target = document.getElementById('app')!
-  const view = new View()
   let title = locale('title.home')
+  let renderer = (view: View) => ''
+  let panel = 'home'
 
   if (urlParts.length === 0){
     App.model.set({ id: '', name: 'Data Pack', category: true, minVersion: '1.15'})
-    target.innerHTML = Home(view)
+    renderer = Home
   } else if (urlParts[0] === 'settings' && urlParts[1] === 'fields') {
-    target.innerHTML = FieldSettings(view)
+    panel = 'settings'
+    renderer = FieldSettings
   } else if (urlParts.length === 1 && categories.map(m => m.id).includes(urlParts[0])) {
     App.model.set(categories.find(m => m.id === urlParts[0])!)
-    target.innerHTML = Home(view)
+    renderer = Home
   } else {
+    panel = 'tree'
     App.model.set(config.models.find(m => m.id === urlParts.join('/'))!)
     if (urlParams.has('q')) {
       try {
@@ -33,14 +36,16 @@ const router = async () => {
         Models[App.model.get()!.id].reset(JSON.parse(data))
       } catch (e) {}
     }
-    target.innerHTML = Generator(view)
+    renderer = Generator
     if (App.model.get()) {
       title = locale('title.generator', [locale(App.model.get()!.id)])
     }
   }
 
   document.title = locale('title.suffix', [title])
-  view.mounted(target)
+  App.mobilePanel.set(panel)
+  const view = new View()
+  view.mount(target, renderer(view), true)
 }
 
 window.addEventListener("popstate", router);

src/app/components/Header.ts

@@ -6,14 +6,38 @@ import { Toggle } from './Toggle';
 import { languages } from '../../config.json'
 import { Tracker } from '../Tracker';
 
-export const Header = (view: View, title: string, homeLink = '/', panelToggleVisible = false) => `
-  <header>
+export const Header = (view: View, title: string, homeLink = '/') => {
+  const panelTogglesId = view.register(el => {
+    const getPanelToggles = () => {
+      const panels = [['preview', 'play'], ['tree', 'note'], ['source', 'code']]
+      if (!panels.map(e => e[0]).includes(App.mobilePanel.get())) return ''
+      return panels
+        .filter(e => e[0] !== App.mobilePanel.get())
+        .filter(e => e[0] !== 'preview' || App.preview.get() !== null)
+        .map(e => `<div data-id="${view.onClick(() => App.mobilePanel.set(e[0]))}">
+          ${Octicon[e[1] as keyof typeof Octicon]}
+        </div>`).join('')
+    }
+    App.mobilePanel.watchRun(() => {
+      view.mount(el, getPanelToggles(), false)
+    })
+    App.preview.watchRun((value, oldValue) => {
+      if (value === null && App.mobilePanel.get() === 'preview') {
+        App.mobilePanel.set('tree')
+      }
+      if (value === null || oldValue === null) {
+        view.mount(el, getPanelToggles(), false)
+      }
+    })
+  })
+  
+  return `<header>
     <div class="header-title">
       <a data-link href="${homeLink}" class="home-link">${Octicon.three_bars}</a>
       <h2>${title}</h2>
     </div>
     <nav>
-      ${panelToggleVisible ? Toggle(view, [['tree', 'code'], ['source', 'note']], App.mobilePanel) : ''}
+      <div class="panel-toggles" data-id="${panelTogglesId}"></div>
       <ul>
         <li>${Dropdown(view, 'globe', languages.map(l => [l.code, l.name]), App.language, Tracker.setLanguage)}</li>
         <li>${Toggle(view, [['dark', 'sun'], ['light', 'moon']], App.theme, Tracker.setTheme)}</li>
@@ -29,5 +53,5 @@ export const Header = (view: View, title: string, homeLink = '/', panelToggleVis
         </li>
       </ul>
     </nav>
-  </header>
-`
+  </header>`
+}

src/app/views/Generator.ts

@@ -59,7 +59,7 @@ export const Generator = (view: View): string => {
     }, 'generator')
   })
   const homeLink = typeof App.model.get()!.category === 'string' ? `/${App.model.get()!.category}/` : undefined
-  return `${Header(view, `${App.model.get()!.name} Generator`, homeLink, true)}
+  return `${Header(view, `${App.model.get()!.name} Generator`, homeLink)}
     <div class="content">
       ${SplitGroup(view, { direction: "horizontal", sizes: [66, 34] }, [
         TreePanel(view, model),

src/styles/global.css

@@ -55,11 +55,19 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 10px;
+  width: 100%;
   height: 56px;
+  z-index: 5;
+  background-color: var(--background);
   border-bottom: 2px solid var(--border);
   transition: border-color var(--style-transition), background-color var(--style-transition);
 }
 
+body[data-panel="home"] header,
+body[data-panel="settings"] header {
+  position: fixed;
+}
+
 .header-title {
   display: flex;
   align-items: center;
@@ -70,6 +78,10 @@ header {
   transition: color var(--style-transition);
 }
 
+.home {
+  padding-top: 56px; 
+}
+
 .home-link {
   margin: 0 8px 0 0;
   height: 32px;
@@ -83,12 +95,16 @@ header {
   padding: 2px;
 }
 
+.panel-toggles {
+  display: none;
+}
+
 nav ul {
   display: flex;
   align-items: center;
 }
 
-nav > .toggle,
+.panel-toggles > *,
 nav li {
   display: flex;
   align-items: center;
@@ -97,6 +113,7 @@ nav li {
   user-select: none;
 }
 
+.panel-toggles > *:hover svg,
 .home-link:hover svg,
 header .toggle:hover svg,
 nav li:hover svg {
@@ -115,6 +132,7 @@ nav li.dimmed:hover svg {
   fill: var(--nav-faded-hover);
 }
 
+.panel-toggles svg,
 nav > .toggle svg,
 nav li > *,
 nav li svg {
@@ -471,6 +489,7 @@ nav > .toggle span {
 
 .settings {
   padding: 20px;
+  padding-top: 56px; 
 }
 
 .settings p {
@@ -587,35 +606,49 @@ nav > .toggle span {
 
 @media screen and (max-width: 580px) {
   header {
-    flex-direction: column;
-    height: 92px;
-    width: 100%;
-    background-color: var(--background);
-    z-index: 5;
     position: fixed;
   }
+  
+  
+  .header-title h2 {
+    font-size: 22px;
+  }
 
-  nav {
+  .panel-toggles {
+    display: flex;
+  }
+
+  body nav ul {
+    display: none;
+  }
+
+  body[data-panel="home"] header {
+    flex-direction: column;
+    align-items: flex-start;
+    height: 92px;
+  }
+  body[data-panel="home"] nav {
     align-self: flex-end;
   }
 
-  .home,
-  .settings,
+  body[data-panel="home"] nav ul {
+    display: flex;
+  }
+
   .content {
-    padding-top: 92px; 
+    padding-top: 56px; 
   }
 
   .content {
     height: unset;
-    /* min-height: calc(100vh - 92px); */
     min-height: 100%;
   }
 
   textarea.source {
-    height: calc(100vh - 98px);
+    height: calc(100vh - 56px);
   }
 
-  .tree-panel + .gutter {
+  .gutter {
     display: none;
   }
 
@@ -624,24 +657,36 @@ nav > .toggle span {
     width: 100% !important;
   }
 
+  .source-panel,
+  .preview-panel,
+  .preview-panel canvas {
+    height: 100% !important;
+  }
+
   .tree-panel .panel-controls {
-    top: 97px;
+    top: 61px;
     right: 5px;
     position: fixed;
   }
 
-  nav > .toggle {
-    display: flex;
-    position: absolute;
-    left: 10px;
+  .btn.btn.large-input,
+  .panel-menu .result-list {
+    width: calc(100vw - 10px); 
   }
 
-  body[data-panel="tree"] .content-output {
+  .tree-panel,
+  .content-output,
+  .source-panel,
+  .preview-panel {
     display: none;
   }
 
-  body[data-panel="source"] .tree-panel {
-    display: none;
+  body[data-panel="tree"] .tree-panel,
+  body[data-panel="source"] .source-panel,
+  body[data-panel="source"] .content-output,
+  body[data-panel="preview"] .preview-panel,
+  body[data-panel="preview"] .content-output {
+    display: block;
   }
 
   .home {
@@ -677,8 +722,8 @@ nav > .toggle span {
   }
 }
 
-@media screen and (min-width: 581px) and (max-width: 640px) {
+@media screen and (min-width: 581px) and (max-width: 650px) {
   .header-title h2 {
-    font-size: 23px;
+    font-size: 22px;
   }
 }

src/styles/nodes.css

@@ -95,6 +95,7 @@
   font-size: 18px;
   padding: 0 9px;
   line-height: 1.94rem;
+  white-space: nowrap;
   user-select: none;
   cursor: pointer;
   background-color: var(--node-background-input);