From dff3fe6bd2722b36bd23e29dcca21abb12a67aec Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Mon, 24 Jun 2019 20:11:12 +0200
Subject: [PATCH 01/10] split header into vue components + immense update to
 gfx

---
 index.ejs                                |   1 +
 src/components/App.vue                   | 257 +++++++++----
 src/components/ConsolePan.vue            | 140 ++++----
 src/components/HomeHeader.vue            | 440 +++--------------------
 src/components/OutputPan.vue             |  65 ++--
 src/components/header/AddBoilerplate.vue |  41 +++
 src/components/header/AddLibrary.vue     |  49 +++
 src/components/header/AutorunButton.vue  |  28 ++
 src/components/header/PanToggles.vue     |  62 ++++
 src/components/header/RunButton.vue      |  49 +++
 src/components/header/SaveGist.vue       | 103 ++++++
 src/components/header/UploadOptions.vue  | 206 +++++++++++
 src/views/EditorPage.vue                 | 133 +++----
 13 files changed, 921 insertions(+), 653 deletions(-)
 create mode 100644 src/components/header/AddBoilerplate.vue
 create mode 100644 src/components/header/AddLibrary.vue
 create mode 100644 src/components/header/AutorunButton.vue
 create mode 100644 src/components/header/PanToggles.vue
 create mode 100644 src/components/header/RunButton.vue
 create mode 100644 src/components/header/SaveGist.vue
 create mode 100644 src/components/header/UploadOptions.vue

diff --git a/index.ejs b/index.ejs
index df82a39..36a3e09 100644
--- a/index.ejs
+++ b/index.ejs
@@ -65,6 +65,7 @@
       }
       // Not in iframe
       if (window.self === window.top) {
+        document.querySelector(HW_config.selector).style.display = 'inline-block'
         var headwayScript = document.createElement('script')
         headwayScript.src = 'https://cdn.headwayapp.co/widget.js'
         headwayScript.async = true
diff --git a/src/components/App.vue b/src/components/App.vue
index 8c6d523..eb8f49b 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view/>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'app'
-  }
+export default {
+  name: 'app'
+}
 </script>
 
 <style src="nprogress/nprogress.css"></style>
@@ -15,71 +15,188 @@
 <style src="v-tippy/dist/tippy.css"></style>
 <style src="notie/dist/notie.min.css"></style>
 
-
 <style lang="stylus">
-html, body, #app, .page
-  height: 100%
-
-body
-  background-color: #f9f9f9
-  margin: 0
-  font-size: 14px
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-
-*
-  box-sizing: border-box
-
-pre
-  padding: 16px
-  overflow: auto
-  font-size: 85%
-  line-height: 1.45
-  background-color: #f6f8fa
-  border-radius: 3px
-
-pre > code
-  padding: 0
-  margin: 0
-  font-size: 100%
-  word-break: normal
-  white-space: pre
-  background: transparent
-  border: 0
-
-.el-dropdown-link
-  cursor: pointer
-  user-select: none
-
-#nprogress
-  z-index: 9999
-  position: relative
-
-.el-dropdown-menu
-  .fake-anchor
-    color: #333
-    text-decoration: none
-    align-items: center
-    display: flex
-    width: 100%
-    svg
-      margin-right: 10px
-      width: 16px
-      height: @width
-      color: #666
-
-.el-badge
-  z-index: 1000
-
-.notie-container
-  z-index: 9999
-
-#HW_frame_cont.HW_visible
-  z-index: 9999
-
-.update-notifier
-  .el-notification__content
-    text-align: left
-
-.notie-overlay
-  z-index: 9900
+html, body, #app, .page {
+  height: 100%;
+}
+
+body {
+  background-color: #f9f9f9;
+  margin: 0;
+  font-size: 14px;
+  font-family: Arial;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  user-select: none;
+}
+
+#nprogress {
+  z-index: 9999;
+  position: relative;
+}
+
+.el-dropdown-menu {
+  .fake-anchor {
+    color: #333;
+    text-decoration: none;
+    align-items: center;
+    display: flex;
+    width: 100%;
+
+    svg {
+      margin-right: 10px;
+      width: 16px;
+      height: @width;
+      color: #666;
+    }
+  }
+}
+
+.el-badge {
+  z-index: 1000;
+}
+
+.notie-container {
+  z-index: 9999;
+}
+
+#HW_frame_cont.HW_visible {
+  z-index: 9999;
+}
+
+.update-notifier {
+  .el-notification__content {
+    text-align: left;
+  }
+}
+
+.notie-overlay {
+  z-index: 9900;
+}
+
+header, .run-buttons {
+  display: flex;
+  flex-wrap: wrap;
+
+  &>* {
+    flex-grow: 1;
+  }
+}
+
+header {
+  .el-button, .el-checkbox {
+    font-variant: small-caps;
+    color: #409EFF !important;
+    background: none !important;
+    height: 50px !important;
+    vertical-align: top;
+    margin: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 12px 16px !important;
+
+    span {
+      vertical-align: middle;
+    }
+
+    .el-checkbox__label {
+      line-height: 26px !important;
+    }
+  }
+
+  .el-checkbox:hover, .el-button:hover {
+    color: black !important;
+  }
+
+  .el-checkbox:focus, .el-button:focus, .el-checkbox:active, .el-button:active {
+    background: lightblue !important;
+    color: white !important;
+  }
+
+  span.el-checkbox__inner, i[class^='el-icon'] {
+    transform: scale(1.5);
+    margin: -1px 5px 1px 0;
+    vertical-align: middle;
+  }
+
+  [class*=el-icon-] {
+    margin: 5px !important;
+  }
+
+  [class*=el-icon-]+* {
+    display: inline-block;
+  }
+}
+
+.pan-head {
+  padding: 10px;
+  height: 36px;
+  font-size: 14px;
+}
+
+.pan-head svg {
+  top: 6px;
+  right: 8px;
+  cursor: pointer;
+  position: absolute;
+  transform: scale(0.5);
+}
+
+.CodeMirror {
+  height: calc(100% - 36px) !important;
+}
+
+.CodeMirror-lines {
+  padding: 0 !important;
+}
+
+.console-pan .pan-head button {
+  vertical-align: top;
+  margin-top: -2px;
+  float: right;
+}
+
+.compiled-code-dialog {
+  width: calc(100% - 20px) !important;
+  max-width: 800px !important;
+}
+
+@media (max-width: 768px) {
+  body {
+    font-size: 12px;
+  }
+
+  .el-checkbox .el-checkbox__label, .el-button span {
+    display: none;
+  }
+
+  .el-checkbox__inner {
+    margin: 5px !important;
+  }
+}
 </style>
diff --git a/src/components/ConsolePan.vue b/src/components/ConsolePan.vue
index d9df33b..b4bb593 100644
--- a/src/components/ConsolePan.vue
+++ b/src/components/ConsolePan.vue
@@ -3,20 +3,11 @@
     class="console-pan"
     :class="{'active-pan': isActivePan}"
     @click="setActivePan('console')"
-    :style="style">
+    :style="style"
+  >
     <div class="pan-head">
-      <el-badge
-        :value="logs.length"
-        :max="99">
-        Console
-      </el-badge>
-      <el-button
-        icon="el-icon-delete"
-        size="mini"
-        v-show="logs.length"
-        @click="clearLogs">
-        Clear
-      </el-button>
+      <el-badge :value="logs.length" :max="99">Console</el-badge>
+      <el-button icon="el-icon-delete" size="mini" v-show="logs.length" @click="clearLogs">Clear</el-button>
     </div>
     <div class="console-logs" ref="console">
       <div
@@ -24,81 +15,84 @@
         :class="`console-log-${log.type}`"
         :key="index"
         v-html="log.message"
-        v-for="(log, index) in logs">
-      </div>
+        v-for="(log, index) in logs"
+      ></div>
     </div>
-    <pan-resizer pan="console" :enable="enableResizer" />
+    <pan-resizer pan="console" :enable="enableResizer"/>
   </div>
 </template>
 
 <script>
-  import { mapState, mapActions } from 'vuex'
-  import { Badge, Button } from 'element-ui'
-  import panPosition from '@/utils/pan-position'
-  import PanResizer from '@/components/PanResizer.vue'
-  import { hasNextPan } from '@/utils'
-  import '@/utils/highlight'
-  import Event from '@/utils/event'
+import { mapState, mapActions } from 'vuex'
+import { Badge, Button } from 'element-ui'
+import panPosition from '@/utils/pan-position'
+import PanResizer from '@/components/PanResizer.vue'
+import { hasNextPan } from '@/utils'
+import '@/utils/highlight'
+import Event from '@/utils/event'
 
-  export default {
-    data() {
-      return {
-        style: {}
-      }
-    },
-    watch: {
-      logs() {
-        const { console } = this.$refs
-        this.$nextTick(() => {
-          console.scrollTop = console.scrollHeight
-        })
-      },
-      visiblePans: {
-        immediate: true,
-        handler(val) {
-          this.style = panPosition(val, 'console')
-        }
-      }
-    },
-    mounted() {
-      Event.$on(`set-console-pan-style`, style => {
-        this.style = {
-          ...this.style,
-          ...style
-        }
+export default {
+  data() {
+    return {
+      style: {}
+    }
+  },
+  watch: {
+    logs() {
+      const { console } = this.$refs
+      this.$nextTick(() => {
+        console.scrollTop = console.scrollHeight
       })
     },
-    computed: {
-      ...mapState(['logs', 'visiblePans', 'activePan']),
-      enableResizer() {
-        return hasNextPan(this.visiblePans, 'console')
-      },
-      isActivePan() {
-        return this.activePan === 'console'
+    visiblePans: {
+      immediate: true,
+      handler(val) {
+        this.style = panPosition(val, 'console')
       }
+    }
+  },
+  mounted() {
+    Event.$on(`set-console-pan-style`, style => {
+      this.style = {
+        ...this.style,
+        ...style
+      }
+    })
+  },
+  computed: {
+    ...mapState(['logs', 'visiblePans', 'activePan']),
+    enableResizer() {
+      return hasNextPan(this.visiblePans, 'console')
     },
-    methods: {
-      ...mapActions(['clearLogs', 'setActivePan'])
-    },
-    components: {
-      'el-badge': Badge,
-      'el-button': Button,
-      'pan-resizer': PanResizer
+    isActivePan() {
+      return this.activePan === 'console'
     }
+  },
+  methods: {
+    ...mapActions(['clearLogs', 'setActivePan'])
+  },
+  components: {
+    'el-badge': Badge,
+    'el-button': Button,
+    'pan-resizer': PanResizer
   }
+}
 </script>
 
 <style lang="stylus" scoped>
-.console-logs
-  height: calc(100% - 40px)
-  overflow: auto
+.console-logs {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
 
-.console-log
-  white-space: pre
-  font-size: 13px
-  padding: 10px
-  border-bottom: 1px solid #efefef
+.console-log {
+  white-space: pre;
+  font-size: 13px;
+  padding: 10px;
+  border-bottom: 1px solid #efefef;
+}
 
-.console-log-error
-  color: red
+.console-log-error {
+  color: red;
+}
 </style>
diff --git a/src/components/HomeHeader.vue b/src/components/HomeHeader.vue
index 05246ef..7ae1654 100644
--- a/src/components/HomeHeader.vue
+++ b/src/components/HomeHeader.vue
@@ -1,407 +1,57 @@
 <template>
   <header class="home-header">
-    <div class="home-header-left home-header-block">
-      <el-dropdown
-        @command="setBoilerplate"
-        trigger="click"
-        class="home-header-left-item">
-        <el-button
-          icon="el-icon-document"
-          size="mini">
-          Boilerplates
-        </el-button>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="empty">Empty</el-dropdown-item>
-          <el-dropdown-item command="vue">Vue</el-dropdown-item>
-          <el-dropdown-item command="vue-jsx">Vue JSX</el-dropdown-item>
-          <el-dropdown-item command="react">React</el-dropdown-item>
-          <el-dropdown-item command="preact">Preact</el-dropdown-item>
-          <el-dropdown-item command="rxjs">RxJS</el-dropdown-item>
-          <el-dropdown-item command="svelte">Svelte</el-dropdown-item>
-          <el-dropdown-item command="hyperapp">Hyperapp</el-dropdown-item>
-          <el-dropdown-item command="es-import">ES import</el-dropdown-item>
-          <el-dropdown-item command="rust">Rust</el-dropdown-item>
-          <el-dropdown-item command="pixi">Pixi</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <el-button
-        v-if="!inIframe"
-        class="home-header-left-item"
-        style="margin-right:0"
-        icon="el-icon-plus"
-        @click="promptLibrary"
-        size="mini">
-        Add library
-      </el-button>
-      <span class="home-header-left-item changelog-indicator"></span>
-    </div>
-    <div class="home-header-middle home-header-block pan-toggles">
-      <span
-        class="pan-toggle"
-        :class="{visible: isVisible('html')}"
-        @click="togglePan('html')">
-        HTML
-      </span>
-      <span
-        class="pan-toggle"
-        :class="{visible: isVisible('css')}"
-        @click="togglePan('css')">
-        CSS
-      </span>
-      <span
-        class="pan-toggle"
-        :class="{visible: isVisible('js')}"
-        @click="togglePan('js')">
-        JS
-      </span>
-      <span
-        class="pan-toggle"
-        :class="{visible: isVisible('console')}"
-        @click="togglePan('console')">
-        <el-badge
-          :is-dot="totalLogsCount > 0">
-          Console
-        </el-badge>
-      </span>
-      <span
-        class="pan-toggle"
-        :class="{visible: isVisible('output')}"
-        @click="togglePan('output')">
-        Output
-      </span>
-    </div>
-    <div class="home-header-right home-header-block">
-      <el-checkbox
-        border
-        size="mini"
-        :value="autoRun"
-        v-if="!inIframe"
-        @change="setAutoRun">
-        Auto-run
-      </el-checkbox>
-      <el-button
-        :icon="iframeStatusIcon"
-        size="mini"
-        :type="iframeStatus === 'error' ? 'danger' : 'primary'"
-        class="home-header-right-item"
-        plain
-        @click="runCode">
-        Run
-      </el-button>
-      <el-button
-        v-if="!inIframe"
-        :icon="editorStatus === 'saving' ? 'el-icon-loading' : 'el-icon-upload2'"
-        size="mini"
-        plain
-        :disabled="editorStatus === 'saving'"
-        :title="saveButtonTitle"
-        v-tippy="{position: 'bottom'}"
-        class="home-header-right-item"
-        @click="saveGist">
-        Save
-      </el-button>
-      <el-dropdown
-        v-if="!inIframe"
-        class="home-header-right-item home-header-more"
-        @command="handleDropdownCommand"
-        trigger="click">
-        <el-button
-          :icon="isLoggedIn ? '' : 'el-icon-more'"
-          size="mini">
-          {{ isLoggedIn ? username : '' }}
-        </el-button>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="github-login">
-            <div class="fake-anchor">
-              <log-out-icon v-if="githubToken" />
-              <github-icon v-else /> GitHub {{ githubToken ? 'Logout' : 'Login' }}
-            </div>
-          </el-dropdown-item>
-          <el-dropdown-item
-            :disabled="editorStatus === 'saving'"
-            command="save-new-gist"
-            title="Create a new gist from editor"
-            v-tippy="{position: 'left',arrow: true}"
-            v-if="canUpdateGist">
-            <div class="fake-anchor">
-              <git-branch-icon></git-branch-icon> Save new
-            </div>
-          </el-dropdown-item>
-          <el-dropdown-item style="padding: 0;">
-            <a class="el-dropdown-menu__item fake-anchor" target="_blank" href="https://github.com/egoist/codepan"><link2-icon></link2-icon> Source Code</a>
-          </el-dropdown-item>
-          <el-dropdown-item style="padding: 0;">
-            <a class="el-dropdown-menu__item fake-anchor" target="_blank" href="https://twitter.com/_egoistlily"><twitter-icon></twitter-icon> Follow me on Twitter</a>
-          </el-dropdown-item>
-          <el-dropdown-item style="padding: 0;">
-            <a
-              target="_blank"
-              class="el-dropdown-menu__item fake-anchor"
-              :href="`https://github.com/egoist/codepan/commit/${latestCommit}`">
-              <info-icon></info-icon>
-              {{ version }}
-            </a>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <a
-        title="Edit on CodePan"
-        v-tippy
-        v-if="inIframe"
-        class="home-header-right-item"
-        :href="url"
-        target="_blank">
-        <img height="30" src="/favicon-180.png" alt="codepan">
-      </a>
-    </div>
+    <run-button/>
+    <autorun-button/>
+    <pan-toggles/>
+    <span class="home-header-left-item changelog-indicator"></span>
+    <add-boilerplate/>
+    <add-library/>
+    <save-gist/>
+    <upload-options/>
   </header>
 </template>
 
 <script>
-  import { mapState, mapActions, mapGetters } from 'vuex'
-  import { Button, Input, Badge, Dropdown, DropdownMenu, DropdownItem, MessageBox, Checkbox } from 'element-ui'
-  import Event from '@/utils/event'
-  import popup from '@/utils/popup'
-  import { inIframe } from '@/utils'
-  import notie from 'notie'
-  import {
-    GithubIcon,
-    GitBranchIcon,
-    Link2Icon,
-    SaveIcon,
-    TwitterIcon,
-    LogOutIcon,
-    InfoIcon
-  } from 'vue-feather-icons'
-  import SvgIcon from './SvgIcon.vue'
-
-  export default {
-    data() {
-      return {
-        version: process.env.VERSION,
-        latestCommit: process.env.LATEST_COMMIT,
-        inIframe,
-        url: window.location.href
-      }
-    },
-    computed: {
-      ...mapState(['visiblePans', 'githubToken', 'editorStatus', 'autoRun', 'iframeStatus']),
-      ...mapState({
-        totalLogsCount: state => state.logs.length,
-        username: state => state.userMeta && state.userMeta.login
-      }),
-      ...mapGetters(['isLoggedIn', 'canUpdateGist']),
-      iframeStatusIcon() {
-        switch (this.iframeStatus) {
-          case 'loading':
-            return 'el-icon-loading'
-          case 'error':
-            return 'el-icon-warning'
-          default:
-            return 'el-icon-refresh'
-        }
-      },
-      saveButtonTitle() {
-        if (this.isLoggedIn) {
-          return this.canUpdateGist ? 'Update this gist' : 'Create new gist'
-        }
-        return 'Login to save'
-      }
-    },
-    mounted() {
-      window.addEventListener('keydown', this.handleKeydown)
-      Event.$on('showLogin', () => this.githubLogin())
-    },
-    beforeDestroy() {
-      window.removeEventListener('keydown', this.handleKeydown)
-    },
-    methods: {
-      ...mapActions(['togglePan', 'updateCode']),
-      handleKeydown(e) {
-        if (e.which === 83 && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault()
-          this.runCode()
-        }
-      },
-      setAutoRun(status) {
-        this.$store.dispatch('setAutoRun', status)
-      },
-      async promptLibrary() {
-        const { value } = await MessageBox.prompt('Type an npm package name:', 'Add Library', {
-          confirmButtonText: 'Confirm',
-          cancelButtonText: 'Cancel'
-        })
-        this.addLibrary(value)
-      },
-      async addLibrary(name) {
-        if (name) {
-          const code = `&lt;script src="https://unpkg.com/${name}">&lt;/script>\n`.replace(/&lt;/g, '<') + this.$store.state.html.code
-          await this.updateCode({ type: 'html', code })
-          Event.$emit('refresh-editor')
-        }
-      },
-      async setBoilerplate(boilerplate) {
-        this.$router.push({
-          name: 'boilerplate',
-          params: {
-            boilerplate
-          }
-        })
-      },
-      isVisible(pan) {
-        return this.visiblePans.indexOf(pan) !== -1
-      },
-      runCode() {
-        Event.$emit('run')
-      },
-      saveGist() {
-        if (!this.isLoggedIn) {
-          return this.githubLogin()
-        }
-        Event.$emit('save-gist')
-      },
-      handleDropdownCommand(command) {
-        if (command === 'save-new-gist') {
-          Event.$emit('save-gist', true)
-        } else if (command === 'github-login') {
-          if (this.githubToken) {
-            this.$store.dispatch('setGitHubToken', null)
-            notie.alert({
-              type: 'success',
-              text: `Done, you've been successfully logged out!`
-            })
-          } else {
-            this.githubLogin()
-          }
-        }
-      },
-      githubLogin() {
-        notie.select({
-          text: 'Choose the way to login to GitHub',
-          choices: [{
-            text: 'Token',
-            handler: () => {
-              this.promptGitHubToken()
-            }
-          }, {
-            text: 'OAuth',
-            type: 2,
-            handler: () => {
-              const loginURL = process.env.NODE_ENV === 'development' ? 'http://localhost:4001/login' : 'https://gh-login.codepan.net/login'
-
-              popup(loginURL, 'gh login', 600, 400)
-            }
-          }]
-        })
-      },
-      promptGitHubToken() {
-        notie.input({
-          text: 'Please set your personal access token for GitHub Gist',
-          submitCallback: value => {
-            this.$store.dispatch('setGitHubToken', value)
-            notie.alert({
-              type: 'success',
-              time: 6,
-              text: 'Done, now you can save your code to GitHub Gist under your account!'
-            })
-          }
-        })
-      }
-    },
-    components: {
-      'el-dropdown': Dropdown,
-      'el-dropdown-menu': DropdownMenu,
-      'el-dropdown-item': DropdownItem,
-      'el-button': Button,
-      'el-input': Input,
-      'el-badge': Badge,
-      'el-checkbox': Checkbox,
-      GithubIcon,
-      GitBranchIcon,
-      Link2Icon,
-      SaveIcon,
-      TwitterIcon,
-      SvgIcon,
-      LogOutIcon,
-      InfoIcon
-    }
+import PanToggles from '@/components/header/PanToggles'
+import AddLibrary from '@/components/header/AddLibrary'
+import AddBoilerplate from '@/components/header/AddBoilerplate'
+import RunButton from '@/components/header/RunButton'
+import AutorunButton from '@/components/header/AutorunButton'
+import UploadOptions from '@/components/header/UploadOptions'
+import SaveGist from '@/components/header/SaveGist'
+
+export default {
+  components: {
+    AddLibrary,
+    AddBoilerplate,
+    PanToggles,
+    RunButton,
+    AutorunButton,
+    UploadOptions,
+    SaveGist
   }
+}
 </script>
 
 <style lang="stylus" scoped>
-.home-header
-  height: 40px;
-  border-bottom: 1px solid #bfbfbf
-  background-color: white
-  display: flex
-  align-items: center
-  padding: 0 10px
-  justify-content: space-between
-
-.home-header-block
-  flex: 1
-  width: 0
-
-.home-header-left
-  display: flex
-  justify-content: flex-start
-  .home-header-left-item
-    margin-right: 10px
-
-.home-header-right
-  display: flex
-  justify-content: flex-end
-  align-items: center
-  .home-header-right-item
-    margin-left: 10px
-
-.changelog-indicator
-  display: flex
-  align-items: center
-  height: 28px
-
-.pan-toggles
-  display: flex
-  justify-content: center
-  height: 100%
-
-  .pan-toggle
-    display: flex
-    align-items: center
-    height: 100%
-    border-left: 1px solid #e2e2e2
-    border-right: @border-left
-    position: relative
-    padding: 0 10px
-    cursor: pointer
-    user-select: none
-
-    &:not(:first-child)
-      margin-left: -1px
-
-    &:hover
-      &:not(.visible)
-        background-color: #f9f9f9
-
-    &.visible
-      background-color: #EBF3FF
-
-.editor-save-status
-  display: flex
-  align-items: center
-  color: #607d8b
-  .svg-icon
-    display: flex
-    align-items: center
-    margin-right: 5px
-  >>> svg
-    fill: @color
-    width: 16px
-    height: @width
+.home-header {
+  font-family: Arial, sans-serif !important;
+  border-bottom: 1px solid #bfbfbf;
+  background-color: white;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  justify-content: space-between;
+
+  .changelog-indicator {
+    display: none;
+  }
+}
 
-@media screen and (max-width: 768px)
-  .home-header-left
-    display: none
-  .pan-toggles
-    justify-content: left
+.home-header > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: center;
+}
 </style>
diff --git a/src/components/OutputPan.vue b/src/components/OutputPan.vue
index 1b6cf75..023c54e 100644
--- a/src/components/OutputPan.vue
+++ b/src/components/OutputPan.vue
@@ -3,11 +3,9 @@
     class="output-pan"
     :class="{ 'active-pan': isActivePan }"
     @click="setActivePan('output')"
-    :style="style">
-
-    <div class="pan-head">
-      Output
-    </div>
+    :style="style"
+  >
+    <div class="pan-head">Output</div>
     <div class="output-iframe" id="output-iframe">
       <div id="output-iframe-holder"></div>
     </div>
@@ -25,7 +23,6 @@ import Event from '@/utils/event'
 import panPosition from '@/utils/pan-position'
 import getScripts from '@/utils/get-scripts'
 import proxyConsole from '!raw-loader!babel-loader?presets[]=babili&-babelrc!buble-loader!@/utils/proxy-console'
-import SvgIcon from './SvgIcon.vue'
 
 const sandboxAttributes = [
   'allow-modals',
@@ -90,10 +87,7 @@ export default {
       'githubToken',
       'iframeStatus'
     ]),
-    ...mapGetters([
-      'isLoggedIn',
-      'canUpdateGist'
-    ]),
+    ...mapGetters(['isLoggedIn', 'canUpdateGist']),
     isActivePan() {
       return this.activePan === 'output'
     }
@@ -165,19 +159,18 @@ export default {
 
       try {
         await Promise.all([
-          transform.js(this.js)
+          transform
+            .js(this.js)
             .then(code => getScripts(code, scripts))
             .then(code => {
               js = code
             }),
-          transform.html(this.html)
-            .then(code => {
-              html = code
-            }),
-          transform.css(this.css)
-            .then(code => {
-              css = code
-            })
+          transform.html(this.html).then(code => {
+            html = code
+          }),
+          transform.css(this.css).then(code => {
+            css = code
+          })
         ])
 
         js = js.replace(/<\/script>/, '<\\/script>')
@@ -217,7 +210,8 @@ export default {
       await this.transform(false)
 
       const headStyle = createElement('style')(css)
-      const codePanRuntime = createElement('script')(`
+      const codePanRuntime =
+        createElement('script')(`
         window.process = window.process || { env: { NODE_ENV: 'development' } }
         `) +
         scripts
@@ -232,9 +226,7 @@ export default {
         createElement('script')(proxyConsole)
       const head = headStyle + codePanRuntime
 
-      const body =
-        html +
-        createElement('script')(js)
+      const body = html + createElement('script')(js)
 
       this.iframe.setHTML({
         head,
@@ -268,9 +260,7 @@ export default {
         }
         const shouldUpdateGist = this.canUpdateGist && !saveNew
         const url = `https://api.github.com/gists${
-          shouldUpdateGist ?
-          `/${this.$route.params.gist}` :
-          ''
+          shouldUpdateGist ? `/${this.$route.params.gist}` : ''
         }`
         const method = shouldUpdateGist ? 'PATCH' : 'POST'
         const { data } = await axios(url, {
@@ -309,22 +299,23 @@ export default {
         }
       }
     }
-  },
-  components: {
-    SvgIcon
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-$statusSize = 12px
+$statusSize = 12px;
+
+.output-pan {
+  overflow: hidden;
+}
 
-.output-pan
-  overflow: hidden
+.output-iframe {
+  width: 100%;
+  height: calc(100% - 40px);
 
-.output-iframe
-  width: 100%
-  height: calc(100% - 40px)
-  &.disable-mouse-events
-    pointer-events: none
+  &.disable-mouse-events {
+    pointer-events: none;
+  }
+}
 </style>
diff --git a/src/components/header/AddBoilerplate.vue b/src/components/header/AddBoilerplate.vue
new file mode 100644
index 0000000..ea4f720
--- /dev/null
+++ b/src/components/header/AddBoilerplate.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dropdown @command="setBoilerplate" trigger="click" class="home-header-left-item">
+    <el-button icon="el-icon-star-on">Boilerplates</el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="empty">Empty</el-dropdown-item>
+      <el-dropdown-item command="vue">Vue</el-dropdown-item>
+      <el-dropdown-item command="vue-jsx">Vue JSX</el-dropdown-item>
+      <el-dropdown-item command="react">React</el-dropdown-item>
+      <el-dropdown-item command="preact">Preact</el-dropdown-item>
+      <el-dropdown-item command="rxjs">RxJS</el-dropdown-item>
+      <el-dropdown-item command="svelte">Svelte</el-dropdown-item>
+      <el-dropdown-item command="hyperapp">Hyperapp</el-dropdown-item>
+      <el-dropdown-item command="es-import">ES import</el-dropdown-item>
+      <el-dropdown-item command="rust">Rust</el-dropdown-item>
+      <el-dropdown-item command="pixi">Pixi</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { Button, Dropdown, DropdownMenu, DropdownItem } from 'element-ui'
+
+export default {
+  components: {
+    'el-button': Button,
+    'el-dropdown': Dropdown,
+    'el-dropdown-menu': DropdownMenu,
+    'el-dropdown-item': DropdownItem
+  },
+  methods: {
+    async setBoilerplate(boilerplate) {
+      this.$router.push({
+        name: 'boilerplate',
+        params: {
+          boilerplate
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/header/AddLibrary.vue b/src/components/header/AddLibrary.vue
new file mode 100644
index 0000000..9ae2261
--- /dev/null
+++ b/src/components/header/AddLibrary.vue
@@ -0,0 +1,49 @@
+<template>
+  <el-button
+    v-if="!inIframe"
+    class="home-header-left-item"
+    icon="el-icon-notebook-2"
+    @click="promptLibrary"
+  >Add library</el-button>
+</template>
+
+<script>
+import { inIframe } from '@/utils'
+import { Button, MessageBox } from 'element-ui'
+
+export default {
+  data() {
+    return {
+      inIframe
+    }
+  },
+  components: {
+    MessageBox,
+    'el-button': Button
+  },
+  methods: {
+    async promptLibrary() {
+      const { value } = await MessageBox.prompt(
+        'Type an npm package name:',
+        'Add Library',
+        {
+          confirmButtonText: 'Confirm',
+          cancelButtonText: 'Cancel'
+        }
+      )
+      this.addLibrary(value)
+    },
+    async addLibrary(name) {
+      if (name) {
+        const code =
+          `&lt;script src="https://unpkg.com/${name}">&lt;/script>\n`.replace(
+            /&lt;/g,
+            '<'
+          ) + this.$store.state.html.code
+        await this.updateCode({ type: 'html', code })
+        Event.$emit('refresh-editor')
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/header/AutorunButton.vue b/src/components/header/AutorunButton.vue
new file mode 100644
index 0000000..d1734a3
--- /dev/null
+++ b/src/components/header/AutorunButton.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-checkbox border :value="autoRun" v-if="!inIframe" @change="setAutoRun">Auto-run</el-checkbox>
+</template>
+
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex'
+import { Button, Checkbox } from 'element-ui'
+import { inIframe } from '@/utils'
+
+export default {
+  data() {
+    return {
+      inIframe
+    }
+  },
+  computed: {
+    ...mapState(['autoRun']),
+    ...mapGetters(['isLoggedIn', 'canUpdateGist'])
+  },
+  methods: {
+    ...mapActions(['setAutoRun'])
+  },
+  components: {
+    'el-checkbox': Checkbox,
+    'el-button': Button
+  }
+}
+</script>
diff --git a/src/components/header/PanToggles.vue b/src/components/header/PanToggles.vue
new file mode 100644
index 0000000..6d4d3a7
--- /dev/null
+++ b/src/components/header/PanToggles.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dropdown trigger="click" @command="togglePan" class="home-header-left-item">
+    <el-button icon="el-icon-thumb">Toggle Pans</el-button>
+    <el-dropdown-menu slot="dropdown" class="pan-toggles">
+      <el-dropdown-item :class="{visible: isVisible('html')}" command="html">HTML</el-dropdown-item>
+      <el-dropdown-item :class="{visible: isVisible('css')}" command="css">CSS</el-dropdown-item>
+      <el-dropdown-item :class="{visible: isVisible('js')}" command="js">JS</el-dropdown-item>
+      <el-dropdown-item :class="{visible: isVisible('console')}" command="console">
+        <el-badge :is-dot="totalLogsCount > 0">Console</el-badge>
+      </el-dropdown-item>
+      <el-dropdown-item :class="{visible: isVisible('output')}" command="output">Output</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import {
+  Button,
+  Badge,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem
+} from 'element-ui'
+
+export default {
+  components: {
+    'el-button': Button,
+    'el-dropdown': Dropdown,
+    'el-dropdown-menu': DropdownMenu,
+    'el-dropdown-item': DropdownItem,
+    'el-badge': Badge
+  },
+  computed: {
+    ...mapState(['visiblePans', 'autoRun']),
+    totalLogsCount: state => (state.logs ? state.logs.length : 0)
+  },
+  methods: {
+    ...mapActions(['togglePan', 'updateCode']),
+    isVisible(pan) {
+      return this.visiblePans.indexOf(pan) !== -1
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.el-badge {
+  vertical-align: top;
+}
+
+.pan-toggles {
+  &>*::before {
+    content: '✔️';
+    display: inline-block;
+    margin-right: 6px;
+  }
+  &>*:not(.visible)::before {
+    content: '✅';
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/header/RunButton.vue b/src/components/header/RunButton.vue
new file mode 100644
index 0000000..b54f3ea
--- /dev/null
+++ b/src/components/header/RunButton.vue
@@ -0,0 +1,49 @@
+<template>
+  <section class="run-buttons">
+    <el-button
+      :icon="iframeStatusIcon"
+      :type="iframeStatus === 'error' ? 'danger' : 'primary'"
+      class="home-header-right-item"
+      plain
+      @click="runCode"
+    >Run</el-button>
+  </section>
+</template>
+
+<script>
+import Event from '@/utils/event'
+import { mapState, mapGetters } from 'vuex'
+import { Button, Checkbox } from 'element-ui'
+import { inIframe } from '@/utils'
+
+export default {
+  data() {
+    return {
+      inIframe
+    }
+  },
+  computed: {
+    ...mapState(['editorStatus', 'autoRun', 'iframeStatus']),
+    ...mapGetters(['isLoggedIn', 'canUpdateGist']),
+    iframeStatusIcon() {
+      switch (this.iframeStatus) {
+        case 'loading':
+          return 'el-icon-loading'
+        case 'error':
+          return 'el-icon-warning'
+        default:
+          return 'el-icon-caret-right'
+      }
+    }
+  },
+  methods: {
+    runCode() {
+      Event.$emit('run')
+    }
+  },
+  components: {
+    'el-checkbox': Checkbox,
+    'el-button': Button
+  }
+}
+</script>
diff --git a/src/components/header/SaveGist.vue b/src/components/header/SaveGist.vue
new file mode 100644
index 0000000..598bfa1
--- /dev/null
+++ b/src/components/header/SaveGist.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-button
+    v-if="!inIframe"
+    :icon="editorStatus === 'saving' ? 'el-icon-loading' : 'el-icon-upload'"
+    plain
+    :disabled="editorStatus === 'saving'"
+    :title="saveButtonTitle"
+    v-tippy="{position: 'bottom'}"
+    class="home-header-right-item"
+    @click="saveGist"
+  >Save</el-button>
+</template>
+
+<script>
+import Event from '@/utils/event'
+import { mapState, mapGetters } from 'vuex'
+import { Button, Checkbox } from 'element-ui'
+import notie from 'notie'
+import { inIframe } from '@/utils'
+import popup from '@/utils/popup'
+
+export default {
+  data() {
+    return {
+      inIframe
+    }
+  },
+  computed: {
+    ...mapState(['editorStatus', 'iframeStatus']),
+    ...mapGetters(['isLoggedIn', 'canUpdateGist']),
+    iframeStatusIcon() {
+      switch (this.iframeStatus) {
+        case 'loading':
+          return 'el-icon-loading'
+        case 'error':
+          return 'el-icon-warning'
+        default:
+          return 'el-icon-caret-right'
+      }
+    },
+    saveButtonTitle() {
+      if (this.isLoggedIn) {
+        return this.canUpdateGist ? 'Update this gist' : 'Create new gist'
+      }
+      return 'Login to save'
+    }
+  },
+  methods: {
+    runCode() {
+      Event.$emit('run')
+    },
+    saveGist() {
+      if (!this.isLoggedIn) {
+        return this.githubLogin()
+      }
+      Event.$emit('save-gist')
+    },
+    githubLogin() {
+      notie.select({
+        text: 'Choose the way to login to GitHub',
+        choices: [
+          {
+            text: 'Token',
+            handler: () => {
+              this.promptGitHubToken()
+            }
+          },
+          {
+            text: 'OAuth',
+            type: 2,
+            handler: () => {
+              const loginURL =
+                process.env.NODE_ENV === 'development' ?
+                  'http://localhost:4001/login' :
+                  'https://gh-login.codepan.net/login'
+
+              popup(loginURL, 'gh login', 600, 400)
+            }
+          }
+        ]
+      })
+    },
+    promptGitHubToken() {
+      notie.input({
+        text: 'Please set your personal access token for GitHub Gist',
+        submitCallback: value => {
+          this.$store.dispatch('setGitHubToken', value)
+          notie.alert({
+            type: 'success',
+            time: 6,
+            text:
+              'Done, now you can save your code to GitHub Gist under your account!'
+          })
+        }
+      })
+    }
+  },
+  components: {
+    'el-checkbox': Checkbox,
+    'el-button': Button
+  }
+}
+</script>
diff --git a/src/components/header/UploadOptions.vue b/src/components/header/UploadOptions.vue
new file mode 100644
index 0000000..3ca231a
--- /dev/null
+++ b/src/components/header/UploadOptions.vue
@@ -0,0 +1,206 @@
+<template>
+  <section>
+    <el-dropdown
+      v-if="!inIframe"
+      class="home-header-right-item home-header-more"
+      @command="handleDropdownCommand"
+      trigger="click"
+    >
+      <el-button
+        :icon="isLoggedIn ? 'el-icon-lock' : 'el-icon-unlock'"
+      >{{ isLoggedIn ? username : '' }}</el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="github-login">
+          <div class="fake-anchor">
+            <log-out-icon v-if="githubToken"/>
+            <github-icon v-else/>
+            GitHub {{ githubToken ? 'Logout' : 'Login' }}
+          </div>
+        </el-dropdown-item>
+        <el-dropdown-item
+          :disabled="editorStatus === 'saving'"
+          command="save-new-gist"
+          title="Create a new gist from editor"
+          v-tippy="{position: 'left',arrow: true}"
+          v-if="canUpdateGist"
+        >
+          <div class="fake-anchor">
+            <git-branch-icon></git-branch-icon>Save new
+          </div>
+        </el-dropdown-item>
+        <el-dropdown-item style="padding: 0;">
+          <a
+            class="el-dropdown-menu__item fake-anchor"
+            target="_blank"
+            href="https://github.com/egoist/codepan"
+          >
+            <link2-icon></link2-icon>Source Code
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item style="padding: 0;">
+          <a
+            class="el-dropdown-menu__item fake-anchor"
+            target="_blank"
+            href="https://twitter.com/_egoistlily"
+          >
+            <twitter-icon></twitter-icon>Follow me on Twitter
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item style="padding: 0;">
+          <a
+            target="_blank"
+            class="el-dropdown-menu__item fake-anchor"
+            :href="`https://github.com/egoist/codepan/commit/${latestCommit}`"
+          >
+            <info-icon></info-icon>
+            {{ version }}
+          </a>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <a
+      title="Edit on CodePan"
+      v-tippy
+      v-if="inIframe"
+      class="home-header-right-item"
+      :href="url"
+      target="_blank"
+    >
+      <img height="30" src="/favicon-180.png" alt="codepan">
+    </a>
+  </section>
+</template>
+
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import {
+  Button,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem
+} from 'element-ui'
+import Event from '@/utils/event'
+import popup from '@/utils/popup'
+import { inIframe } from '@/utils'
+import notie from 'notie'
+import {
+  GithubIcon,
+  Link2Icon,
+  SaveIcon,
+  TwitterIcon,
+  InfoIcon
+} from 'vue-feather-icons'
+
+export default {
+  data() {
+    return {
+      version: process.env.VERSION,
+      latestCommit: process.env.LATEST_COMMIT,
+      inIframe,
+      url: window.location.href
+    }
+  },
+  computed: {
+    ...mapState(['githubToken', 'editorStatus', 'autoRun', 'iframeStatus']),
+    ...mapState({
+      totalLogsCount: state => state.logs.length,
+      username: state => state.userMeta && state.userMeta.login
+    }),
+    ...mapGetters(['isLoggedIn', 'canUpdateGist']),
+    iframeStatusIcon() {
+      switch (this.iframeStatus) {
+        case 'loading':
+          return 'el-icon-loading'
+        case 'error':
+          return 'el-icon-warning'
+        default:
+          return 'el-icon-caret-right'
+      }
+    },
+    saveButtonTitle() {
+      if (this.isLoggedIn) {
+        return this.canUpdateGist ? 'Update this gist' : 'Create new gist'
+      }
+      return 'Login to save'
+    }
+  },
+  mounted() {
+    Event.$on('showLogin', () => this.githubLogin())
+  },
+  methods: {
+    handleDropdownCommand(command) {
+      if (command === 'save-new-gist') {
+        Event.$emit('save-gist', true)
+      } else if (command === 'github-login') {
+        if (this.githubToken) {
+          this.$store.dispatch('setGitHubToken', null)
+          notie.alert({
+            type: 'success',
+            text: `Done, you've been successfully logged out!`
+          })
+        } else {
+          this.githubLogin()
+        }
+      }
+    },
+    githubLogin() {
+      notie.select({
+        text: 'Choose the way to login to GitHub',
+        choices: [
+          {
+            text: 'Token',
+            handler: () => {
+              this.promptGitHubToken()
+            }
+          },
+          {
+            text: 'OAuth',
+            type: 2,
+            handler: () => {
+              const loginURL =
+                process.env.NODE_ENV === 'development' ?
+                  'http://localhost:4001/login' :
+                  'https://gh-login.codepan.net/login'
+
+              popup(loginURL, 'gh login', 600, 400)
+            }
+          }
+        ]
+      })
+    },
+    promptGitHubToken() {
+      notie.input({
+        text: 'Please set your personal access token for GitHub Gist',
+        submitCallback: value => {
+          this.$store.dispatch('setGitHubToken', value)
+          notie.alert({
+            type: 'success',
+            time: 6,
+            text:
+              'Done, now you can save your code to GitHub Gist under your account!'
+          })
+        }
+      })
+    }
+  },
+  components: {
+    'el-button': Button,
+    'el-dropdown': Dropdown,
+    'el-dropdown-menu': DropdownMenu,
+    'el-dropdown-item': DropdownItem,
+    GithubIcon,
+    Link2Icon,
+    SaveIcon,
+    TwitterIcon,
+    InfoIcon
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.el-button [class*=el-icon-]+span:empty {
+  display: none !important;
+  margin: 0 !important;
+}
+</style>
diff --git a/src/views/EditorPage.vue b/src/views/EditorPage.vue
index d65102a..39712a2 100644
--- a/src/views/EditorPage.vue
+++ b/src/views/EditorPage.vue
@@ -1,37 +1,37 @@
 <template>
   <div class="page" :class="{readonly: isReadOnly}">
-    <home-header />
+    <home-header/>
 
     <compiled-code-dialog
       v-if="js.code"
       :code="js"
       :show.sync="showCompiledCode.js"
       highlight="javascript"
-      type="js">
-    </compiled-code-dialog>
+      type="js"
+    ></compiled-code-dialog>
 
     <compiled-code-dialog
       v-if="html.code"
       :code="html"
       :show.sync="showCompiledCode.html"
       highlight="htmlmixed"
-      type="html">
-    </compiled-code-dialog>
+      type="html"
+    ></compiled-code-dialog>
 
     <compiled-code-dialog
       v-if="css.code"
       :code="css"
       :show.sync="showCompiledCode.css"
       highlight="css"
-      type="css">
-    </compiled-code-dialog>
+      type="css"
+    ></compiled-code-dialog>
 
     <div class="pans">
-      <html-pan class="pan" v-show="isVisible('html')" />
-      <css-pan class="pan" v-show="isVisible('css')" />
-      <js-pan class="pan" v-show="isVisible('js')" />
-      <console-pan class="pan" v-show="isVisible('console')" />
-      <output-pan class="pan" v-show="isVisible('output')" />
+      <html-pan class="pan" v-show="isVisible('html')"/>
+      <css-pan class="pan" v-show="isVisible('css')"/>
+      <js-pan class="pan" v-show="isVisible('js')"/>
+      <console-pan class="pan" v-show="isVisible('console')"/>
+      <output-pan class="pan" v-show="isVisible('output')"/>
     </div>
 
     <div ref="codefund">
@@ -140,14 +140,16 @@ export default {
 
     // Since in prevous versions we didn't fetch userMeta after login
     // We need to force user to re-login in order to get that data
-    if (this.$store.state.githubToken && Object.keys(this.$store.state.userMeta).length === 0) {
-      this.$store.dispatch('setGitHubToken', null)
-        .then(() => {
-          notie.alert({
-            type: 'warning',
-            text: `You need to login again to use the new version!`
-          })
+    if (
+      this.$store.state.githubToken &&
+      Object.keys(this.$store.state.userMeta).length === 0
+    ) {
+      this.$store.dispatch('setGitHubToken', null).then(() => {
+        notie.alert({
+          type: 'warning',
+          text: `You need to login again to use the new version!`
         })
+      })
     }
 
     Event.$on('show-compiled-code', type => {
@@ -180,7 +182,9 @@ export default {
       }
     },
     async getCodeFund() {
-      const res = await axios.get('https://codefund.io/properties/241/funder.html')
+      const res = await axios.get(
+        'https://codefund.io/properties/241/funder.html'
+      )
       this.$refs.codefund.innerHTML = res.data
     }
   },
@@ -200,73 +204,46 @@ export default {
 </script>
 
 <style src="codemirror/lib/codemirror.css">
-
 </style>
 <style src="codemirror/addon/fold/foldgutter.css">
-
 </style>
 
 <style lang="stylus" scoped>
-.pans
-  height: calc(100% - 40px - 40px)
-  display: flex
-  position: relative
+.pans {
+  height: calc(100% - 40px - 40px);
+  display: flex;
+  position: relative;
+}
+
+.pan {
+  background-color: #f9f9f9;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
 
-.pan
-  background-color: #f9f9f9
-  position: absolute
-  top: 0
-  bottom: 0
-  overflow: auto
-  &.active-pan
-    background-color: white
+  &.active-pan {
+    background-color: white;
+  }
+}
 </style>
 
 <style lang="stylus">
-.CodeMirror
-  height: calc(100% - 40px)
-  background-color: transparent
-
-.CodeMirror-gutters
-  background-color: transparent
-  border-right: none
-
-.pan-head
-  height: 40px
-  padding: 0 10px
-  font-size: 14px
-  display: flex
-  justify-content: space-between
-  align-items: center
-  svg.svg-icon
-    margin-left: 5px
-    cursor: pointer
-    width: 14px
-    height: @width
-    color: #666
-    outline: none
-    &:hover
-      color: #000
-
-.pans.resizing
-  cursor: ew-resize
-  .pan-resizer
-    cursor: ew-resize
-
-.page.readonly
-  .CodeMirror-cursor
-    display: none !important
+.pans {
+  height: calc(100% - 40px - 40px);
+  display: flex;
+  position: relative;
+}
 
-.cf-wrapper
-  height: 40px
-  line-height: 40px !important
-  z-index: 9999 !important
-  padding: 0 10px !important
+.pan {
+  background-color: #f9f9f9;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
 
-.codefund-placeholder
-  height: 40px
-  line-height 40px
-  border-top: 1px solid #ccc
-  text-align: center
-  padding: 0 10px
+  &.active-pan {
+    background-color: white;
+  }
+}
 </style>

From 4509db8fc8b0939b31fd3ae4a7ab1b02f575901b Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 21:47:40 +0200
Subject: [PATCH 02/10] further responsive

---
 package.json                  |   2 +-
 src/components/App.vue        | 175 +++++++++++++++++++++++++++-------
 src/components/HomeHeader.vue |  15 +--
 src/components/PanResizer.vue | 169 ++++++++++++++++----------------
 src/views/EditorPage.vue      |  71 ++++++--------
 yarn.lock                     |  29 ++++--
 6 files changed, 284 insertions(+), 177 deletions(-)

diff --git a/package.json b/package.json
index 9fba9e7..8c8a5e5 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "codemirror": "^5.28.0",
     "codemirror-emmet": "^1.0.0",
     "debounce": "^1.0.2",
-    "element-ui": "^2.0.11",
+    "element-ui": "^2.9.2",
     "is-electron": "^2.1.0",
     "loadjs": "^3.5.1",
     "marked3": "^0.5.1",
diff --git a/src/components/App.vue b/src/components/App.vue
index eb8f49b..dd75d18 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -99,34 +99,54 @@ pre > code {
   z-index: 9900;
 }
 
-header, .run-buttons {
+header > * {
+  height: 100%;
+}
+
+header, header .el-button, header .el-checkbox {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0;
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+}
 
-  &>* {
-    flex-grow: 1;
-  }
+header > *, header .el-dropdown, header .checkbox__inner {
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+#cf > span {
+  z-index: 9999 !important;
 }
 
 header {
   .el-button, .el-checkbox {
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 0;
     font-variant: small-caps;
     color: #409EFF !important;
     background: none !important;
-    height: 50px !important;
-    vertical-align: top;
-    margin: 0 !important;
-    border: 0 !important;
-    border-radius: 0 !important;
-    padding: 12px 16px !important;
 
-    span {
-      vertical-align: middle;
+    i, .el-checkbox__inner {
+      margin: 0 10px 0 0 !important;
     }
+  }
 
-    .el-checkbox__label {
-      line-height: 26px !important;
-    }
+  .el-button > *, .el-checkbox span {
+    margin: 0;
+    padding: 0;
+    display: block;
   }
 
   .el-checkbox:hover, .el-button:hover {
@@ -138,37 +158,44 @@ header {
     color: white !important;
   }
 
-  span.el-checkbox__inner, i[class^='el-icon'] {
-    transform: scale(1.5);
-    margin: -1px 5px 1px 0;
-    vertical-align: middle;
-  }
-
-  [class*=el-icon-] {
-    margin: 5px !important;
+  span.el-checkbox__inner {
+    margin: 0 !important;
   }
 
-  [class*=el-icon-]+* {
-    display: inline-block;
+  span.el-checkbox__inner, i[class^='el-icon'] {
+    transform: scale(1.5);
   }
 }
 
 .pan-head {
-  padding: 10px;
-  height: 36px;
+  padding: 12px;
   font-size: 14px;
+
+  .el-dropdown {
+    display: block;
+
+    i {
+      margin: 0 !important;
+    }
+  }
 }
 
 .pan-head svg {
-  top: 6px;
-  right: 8px;
+  top: 3px;
+  right: 7px;
   cursor: pointer;
   position: absolute;
   transform: scale(0.5);
 }
 
 .CodeMirror {
-  height: calc(100% - 36px) !important;
+  height: auto !important;
+  background: inherit !important;
+}
+
+.CodeMirror-gutters {
+  border: 0 !important;
+  background: inherit !important;
 }
 
 .CodeMirror-lines {
@@ -186,17 +213,93 @@ header {
   max-width: 800px !important;
 }
 
-@media (max-width: 768px) {
+.page {
+  display: flex;
+  flex-direction: column;
+}
+
+span:empty {
+  display: none;
+}
+
+.el-dropdown .el-icon--right {
+  position: absolute;
+  top: 0;
+}
+
+.el-message-box {
+  width: calc(100% - 20px) !important;
+  max-width: 420px;
+}
+
+#cf {
+  display: none;
+}
+
+@media (orientation: landscape) {
+  header {
+    width: auto;
+    flex: 1;
+    height: auto;
+    border-bottom: 0 !important;
+    border-right: 1px solid silver;
+    flex-direction: column !important;
+
+    .el-button, .el-checkbox {
+      padding: 0 10px;
+      flex-direction: column !important;
+
+      i, .el-checkbox__inner {
+        margin: 0 0 10px 0 !important;
+      }
+    }
+  }
+
+  .el-popper {
+    max-height: 100%;
+    overflow-y: auto;
+  }
+
+  .page {
+    flex-direction: row;
+  }
+
+  .el-button > *, .el-checkbox > span, i {
+    margin: 10px 0 !important;
+  }
+
+  .pans {
+    height: 100% !important;
+    width: calc(100% - 64px);
+  }
+}
+
+@media (max-width: 800px), (max-height: 600px) {
   body {
     font-size: 12px;
   }
 
-  .el-checkbox .el-checkbox__label, .el-button span {
-    display: none;
+  .pan-head {
+    padding: 6px;
+  }
+
+  .compiled-code-dialog  {
+    max-height: calc(100% - 20px);
+    top: 10px !important;
   }
 
-  .el-checkbox__inner {
-    margin: 5px !important;
+  header {
+    min-width: 64px;
+
+    .el-button, .el-checkbox {
+      i, .el-checkbox__inner {
+        margin: 0 !important;
+      }
+
+      span:not(.el-checkbox__input):not(.el-checkbox__inner) {
+        display: none !important;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/HomeHeader.vue b/src/components/HomeHeader.vue
index 7ae1654..2730cb5 100644
--- a/src/components/HomeHeader.vue
+++ b/src/components/HomeHeader.vue
@@ -36,13 +36,14 @@ export default {
 <style lang="stylus" scoped>
 .home-header {
   font-family: Arial, sans-serif !important;
-  border-bottom: 1px solid #bfbfbf;
   background-color: white;
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
-  align-items: center;
   padding: 0;
-  justify-content: space-between;
+  border-bottom: 1px solid silver;
+  align-items: center;
+  justify-content: center;
 
   .changelog-indicator {
     display: none;
@@ -50,8 +51,10 @@ export default {
 }
 
 .home-header > * {
-  flex-grow: 1;
-  flex-shrink: 1;
-  text-align: center;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 </style>
diff --git a/src/components/PanResizer.vue b/src/components/PanResizer.vue
index 30653f9..f265a29 100644
--- a/src/components/PanResizer.vue
+++ b/src/components/PanResizer.vue
@@ -1,105 +1,108 @@
 <template>
-  <div
-    class="pan-resizer"
-    :class="{ enable }"
-    ref="resizer"
-    @mousedown="handleMouseDown">
-  </div>
+  <div class="pan-resizer" :class="{ enable }" ref="resizer" @mousedown="handleMouseDown"></div>
 </template>
 
 <script>
-  import Event from '@/utils/event'
-  import { mapState } from 'vuex'
+import Event from '@/utils/event'
+import { mapState } from 'vuex'
 
-  export default {
-    props: ['enable', 'pan'],
-    data() {
-      return {
-        resizing: false,
-        originalNextPanLeft: null,
-        originalNextPanRight: null,
-        originalCurrentPanRight: null,
-        originalCurrentPanLeft: null,
-        currentPan: null,
-        nextPan: null
-      }
+export default {
+  props: ['enable', 'pan'],
+  data() {
+    return {
+      resizing: false,
+      originalNextPanLeft: null,
+      originalNextPanRight: null,
+      originalCurrentPanRight: null,
+      originalCurrentPanLeft: null,
+      currentPan: null,
+      nextPan: null
+    }
+  },
+  computed: {
+    ...mapState(['visiblePans']),
+    nextPanName() {
+      const currentIndex = this.visiblePans.indexOf(this.pan)
+      return this.visiblePans[currentIndex + 1]
+    }
+  },
+  methods: {
+    updateNextPan(style) {
+      Event.$emit(`set-${this.nextPanName}-pan-style`, style)
+    },
+    updateCurrentPan(style) {
+      Event.$emit(`set-${this.pan}-pan-style`, style)
     },
-    computed: {
-      ...mapState(['visiblePans']),
-      nextPanName() {
-        const currentIndex = this.visiblePans.indexOf(this.pan)
-        return this.visiblePans[currentIndex + 1]
+    getNextVisiblePan(current) {
+      const next = current.nextElementSibling
+      if (next && next.style.display === 'none') {
+        return this.getNextVisiblePan(next)
       }
+      return next
     },
-    methods: {
-      updateNextPan(style) {
-        Event.$emit(`set-${this.nextPanName}-pan-style`, style)
-      },
-      updateCurrentPan(style) {
-        Event.$emit(`set-${this.pan}-pan-style`, style)
-      },
-      getNextVisiblePan(current) {
-        const next = current.nextElementSibling
-        if (next && next.style.display === 'none') {
-          return this.getNextVisiblePan(next)
-        }
-        return next
-      },
-      handleMouseDown() {
-        this.resizing = true
-        this.currentPan = this.$refs.resizer.parentNode
-        this.nextPan = this.getNextVisiblePan(this.currentPan)
-        this.originalNextPanLeft = parseFloat(this.nextPan.style.left)
-        this.originalNextPanRight = parseFloat(this.nextPan.style.right)
-        this.originalCurrentPanRight = parseFloat(this.currentPan.style.right)
-        this.originalCurrentPanLeft = parseFloat(this.currentPan.style.left)
+    handleMouseDown() {
+      this.resizing = true
+      this.currentPan = this.$refs.resizer.parentNode
+      this.nextPan = this.getNextVisiblePan(this.currentPan)
+      this.originalNextPanLeft = parseFloat(this.nextPan.style.left)
+      this.originalNextPanRight = parseFloat(this.nextPan.style.right)
+      this.originalCurrentPanRight = parseFloat(this.currentPan.style.right)
+      this.originalCurrentPanLeft = parseFloat(this.currentPan.style.left)
 
-        document.addEventListener('mousemove', this.handleMouseMove)
-        document.addEventListener('mouseup', this.handleMouseUp)
+      document.addEventListener('mousemove', this.handleMouseMove)
+      document.addEventListener('mouseup', this.handleMouseUp)
 
-        this.currentPan.parentNode.classList.add('resizing')
-        document.getElementById('output-iframe').classList.add('disable-mouse-events')
-      },
-      handleMouseUp() {
-        this.resizing = false
+      this.currentPan.parentNode.classList.add('resizing')
+      document
+        .getElementById('output-iframe')
+        .classList.add('disable-mouse-events')
+    },
+    handleMouseUp() {
+      this.resizing = false
 
-        document.removeEventListener('mousemove', this.handleMouseMove)
-        document.removeEventListener('mouseup', this.handleMouseUp)
+      document.removeEventListener('mousemove', this.handleMouseMove)
+      document.removeEventListener('mouseup', this.handleMouseUp)
 
-        this.currentPan.parentNode.classList.remove('resizing')
-        document.getElementById('output-iframe').classList.remove('disable-mouse-events')
+      this.currentPan.parentNode.classList.remove('resizing')
+      document
+        .getElementById('output-iframe')
+        .classList.remove('disable-mouse-events')
 
-        Event.$emit('refresh-editor', { run: false })
-      },
-      handleMouseMove(e) {
-        if (this.resizing) {
-          e.preventDefault()
-          const newNextPanLeft = e.clientX / window.innerWidth * 100
-          if (
-             (newNextPanLeft - this.originalCurrentPanLeft > 5) &&
-            (100 - newNextPanLeft - this.originalNextPanRight > 5)
-          ) {
-            this.updateNextPan({ left: `${newNextPanLeft}%` })
-            const newCurrentPanRight = this.originalCurrentPanRight - (newNextPanLeft - this.originalNextPanLeft)
-            this.updateCurrentPan({ right: `${newCurrentPanRight}%` })
-          }
+      Event.$emit('refresh-editor', { run: false })
+    },
+    handleMouseMove(e) {
+      if (this.resizing) {
+        e.preventDefault()
+        const newNextPanLeft = (e.clientX / window.innerWidth) * 100
+        if (
+          newNextPanLeft - this.originalCurrentPanLeft > 5 &&
+          100 - newNextPanLeft - this.originalNextPanRight > 5
+        ) {
+          this.updateNextPan({ left: `${newNextPanLeft}%` })
+          const newCurrentPanRight =
+            this.originalCurrentPanRight -
+            (newNextPanLeft - this.originalNextPanLeft)
+          this.updateCurrentPan({ right: `${newCurrentPanRight}%` })
         }
       }
     }
   }
+}
 </script>
 
 <style lang="stylus" scoped>
-.pan-resizer
-  width: 5px
-  position: absolute
-  height: 100%
-  top: 0
-  right: 0
-  border-right: 1px solid #e2e2e2
-  z-index: 1000
+.pan-resizer {
+  width: 5px;
+  position: absolute;
+  height: 100%;
+  top: 0;
+  right: 0;
+  border-right: 1px solid #e2e2e2;
+  z-index: 1000;
 
-  &.enable:hover
-    cursor: move
-    border-right: 1px dashed #39f
+  &.enable:hover {
+    cursor: move;
+    border-right: 1px dashed #39f;
+  }
+}
 </style>
diff --git a/src/views/EditorPage.vue b/src/views/EditorPage.vue
index 39712a2..924c86c 100644
--- a/src/views/EditorPage.vue
+++ b/src/views/EditorPage.vue
@@ -2,29 +2,31 @@
   <div class="page" :class="{readonly: isReadOnly}">
     <home-header/>
 
-    <compiled-code-dialog
-      v-if="js.code"
-      :code="js"
-      :show.sync="showCompiledCode.js"
-      highlight="javascript"
-      type="js"
-    ></compiled-code-dialog>
-
-    <compiled-code-dialog
-      v-if="html.code"
-      :code="html"
-      :show.sync="showCompiledCode.html"
-      highlight="htmlmixed"
-      type="html"
-    ></compiled-code-dialog>
-
-    <compiled-code-dialog
-      v-if="css.code"
-      :code="css"
-      :show.sync="showCompiledCode.css"
-      highlight="css"
-      type="css"
-    ></compiled-code-dialog>
+    <section class="dialogs">
+      <compiled-code-dialog
+        v-if="js.code"
+        :code="js"
+        :show.sync="showCompiledCode.js"
+        highlight="javascript"
+        type="js"
+      ></compiled-code-dialog>
+
+      <compiled-code-dialog
+        v-if="html.code"
+        :code="html"
+        :show.sync="showCompiledCode.html"
+        highlight="htmlmixed"
+        type="html"
+      ></compiled-code-dialog>
+
+      <compiled-code-dialog
+        v-if="css.code"
+        :code="css"
+        :show.sync="showCompiledCode.css"
+        highlight="css"
+        type="css"
+      ></compiled-code-dialog>
+    </section>
 
     <div class="pans">
       <html-pan class="pan" v-show="isVisible('html')"/>
@@ -210,27 +212,8 @@ export default {
 
 <style lang="stylus" scoped>
 .pans {
-  height: calc(100% - 40px - 40px);
-  display: flex;
-  position: relative;
-}
-
-.pan {
-  background-color: #f9f9f9;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  overflow: auto;
-
-  &.active-pan {
-    background-color: white;
-  }
-}
-</style>
-
-<style lang="stylus">
-.pans {
-  height: calc(100% - 40px - 40px);
+  height: calc(100% - 64px);
+  width: 100%;
   display: flex;
   position: relative;
 }
diff --git a/yarn.lock b/yarn.lock
index 14020af..d2115aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -342,8 +342,9 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
 async-validator@~1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
   dependencies:
     babel-runtime "6.x"
 
@@ -2554,13 +2555,16 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.28:
   dependencies:
     electron-releases "^2.1.0"
 
-element-ui@^2.0.11:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.0.11.tgz#efc19d10270c13aa2b235f65bcb6ced3226550b8"
+element-ui@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.9.2.tgz#f02b6b1dfb937044addbf204eaa15860d544ad84"
+  integrity sha512-HU5DDKivv2UFZghVWiP3I74IbTzSW8VXc070fM787i1X/u9f43olDuu3S6Pe9z87Z1oNjXt06ZmBlLYtySJMCw==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
     deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
     throttle-debounce "^1.0.1"
 
 elliptic@^6.0.0:
@@ -4855,6 +4859,11 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 notie@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/notie/-/notie-4.3.1.tgz#0d199de15130242e21675507aba63c6929e0adda"
@@ -6147,6 +6156,11 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-1.0.0.tgz#4eaeea41ed040d1702457df64a42b2b07d246f9f"
@@ -6789,8 +6803,9 @@ thenify-all@^1.0.0:
     any-promise "^1.0.0"
 
 throttle-debounce@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
 
 through2@^2.0.0:
   version "2.0.3"

From 5a0f6f657230104048fef23b683cda06f7c0d0f2 Mon Sep 17 00:00:00 2001
From: Jacek Pietal <prozi85@gmail.com>
Date: Tue, 25 Jun 2019 21:50:46 +0200
Subject: [PATCH 03/10] Update index.ejs

---
 index.ejs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/index.ejs b/index.ejs
index 36a3e09..50e6b91 100644
--- a/index.ejs
+++ b/index.ejs
@@ -65,11 +65,12 @@
       }
       // Not in iframe
       if (window.self === window.top) {
-        document.querySelector(HW_config.selector).style.display = 'inline-block'
         var headwayScript = document.createElement('script')
         headwayScript.src = 'https://cdn.headwayapp.co/widget.js'
         headwayScript.async = true
         document.body.appendChild(headwayScript)
+        var element = document.querySelector(HW_config.selector)
+        element && (element.style.display = 'inline-block')
       }
     </script>
   </body>

From 1016b99f1b592a6b84a4a45402958b75b7fd5311 Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 22:10:57 +0200
Subject: [PATCH 04/10] fix pan resize

(cherry picked from commit 3a5ae9069528f2f8a7f02bda673836fd67d00776)
---
 src/components/App.vue        |  2 +-
 src/components/PanResizer.vue | 55 ++++++++++++++++++-----------------
 src/utils/pan-position.js     | 20 ++++++-------
 src/views/EditorPage.vue      |  4 +--
 4 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index dd75d18..f537cae 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -283,7 +283,7 @@ span:empty {
     padding: 6px;
   }
 
-  .compiled-code-dialog  {
+  .compiled-code-dialog {
     max-height: calc(100% - 20px);
     top: 10px !important;
   }
diff --git a/src/components/PanResizer.vue b/src/components/PanResizer.vue
index f265a29..657c061 100644
--- a/src/components/PanResizer.vue
+++ b/src/components/PanResizer.vue
@@ -11,10 +11,10 @@ export default {
   data() {
     return {
       resizing: false,
-      originalNextPanLeft: null,
-      originalNextPanRight: null,
-      originalCurrentPanRight: null,
-      originalCurrentPanLeft: null,
+      originalNextPanTop: null,
+      originalNextPanBottom: null,
+      originalCurrentPanBottom: null,
+      originalCurrentPanTop: null,
       currentPan: null,
       nextPan: null
     }
@@ -44,13 +44,13 @@ export default {
       this.resizing = true
       this.currentPan = this.$refs.resizer.parentNode
       this.nextPan = this.getNextVisiblePan(this.currentPan)
-      this.originalNextPanLeft = parseFloat(this.nextPan.style.left)
-      this.originalNextPanRight = parseFloat(this.nextPan.style.right)
-      this.originalCurrentPanRight = parseFloat(this.currentPan.style.right)
-      this.originalCurrentPanLeft = parseFloat(this.currentPan.style.left)
+      this.originalNextPanTop = parseFloat(this.nextPan.style.top)
+      this.originalNextPanBottom = parseFloat(this.nextPan.style.bottom)
+      this.originalCurrentPanBottom = parseFloat(this.currentPan.style.bottom)
+      this.originalCurrentPanTop = parseFloat(this.currentPan.style.top)
 
-      document.addEventListener('mousemove', this.handleMouseMove)
-      document.addEventListener('mouseup', this.handleMouseUp)
+      document.addEventListener('pointermove', this.handleMouseMove)
+      document.addEventListener('pointerup', this.handleMouseUp)
 
       this.currentPan.parentNode.classList.add('resizing')
       document
@@ -60,8 +60,8 @@ export default {
     handleMouseUp() {
       this.resizing = false
 
-      document.removeEventListener('mousemove', this.handleMouseMove)
-      document.removeEventListener('mouseup', this.handleMouseUp)
+      document.removeEventListener('pointermove', this.handleMouseMove)
+      document.removeEventListener('pointerup', this.handleMouseUp)
 
       this.currentPan.parentNode.classList.remove('resizing')
       document
@@ -71,18 +71,18 @@ export default {
       Event.$emit('refresh-editor', { run: false })
     },
     handleMouseMove(e) {
+      e.preventDefault()
       if (this.resizing) {
-        e.preventDefault()
-        const newNextPanLeft = (e.clientX / window.innerWidth) * 100
+        const newNextPanTop = (e.clientY / window.innerHeight) * 100
         if (
-          newNextPanLeft - this.originalCurrentPanLeft > 5 &&
-          100 - newNextPanLeft - this.originalNextPanRight > 5
+          newNextPanTop - this.originalCurrentPanTop > 5 &&
+          100 - newNextPanTop - this.originalNextPanBottom > 5
         ) {
-          this.updateNextPan({ left: `${newNextPanLeft}%` })
-          const newCurrentPanRight =
-            this.originalCurrentPanRight -
-            (newNextPanLeft - this.originalNextPanLeft)
-          this.updateCurrentPan({ right: `${newCurrentPanRight}%` })
+          this.updateNextPan({ top: `${newNextPanTop}%` })
+          const newCurrentPanBottom =
+            this.originalCurrentPanBottom -
+            (newNextPanTop - this.originalNextPanTop)
+          this.updateCurrentPan({ bottom: `${newCurrentPanBottom}%` })
         }
       }
     }
@@ -92,17 +92,18 @@ export default {
 
 <style lang="stylus" scoped>
 .pan-resizer {
-  width: 5px;
   position: absolute;
-  height: 100%;
-  top: 0;
+  left: 0;
   right: 0;
-  border-right: 1px solid #e2e2e2;
+  bottom: 0;
+  border-bottom: 1px solid #e2e2e2;
+  border-top: 3px solid transparent;
+  height: 1px;
   z-index: 1000;
 
   &.enable:hover {
-    cursor: move;
-    border-right: 1px dashed #39f;
+    cursor: ns-resize;
+    border-bottom: 1px dashed #39f;
   }
 }
 </style>
diff --git a/src/utils/pan-position.js b/src/utils/pan-position.js
index 50ab425..1926c8a 100644
--- a/src/utils/pan-position.js
+++ b/src/utils/pan-position.js
@@ -10,40 +10,40 @@ export default (pans, pan) => {
 
   if (pan === 'html') {
     return {
-      left: 0,
-      right: suffix(rightOffset(0))
+      top: 0,
+      bottom: suffix(rightOffset(0))
     }
   }
 
   if (pan === 'css') {
     const leftCount = pansCount(['html'])
     return {
-      left: suffix(leftCount),
-      right: suffix(rightOffset(leftCount))
+      top: suffix(leftCount),
+      bottom: suffix(rightOffset(leftCount))
     }
   }
 
   if (pan === 'js') {
     const leftCount = pansCount(['html', 'css'])
     return {
-      left: suffix(leftCount),
-      right: suffix(rightOffset(leftCount))
+      top: suffix(leftCount),
+      bottom: suffix(rightOffset(leftCount))
     }
   }
 
   if (pan === 'console') {
     const leftCount = pansCount(['html', 'css', 'js'])
     return {
-      left: suffix(leftCount),
-      right: suffix(rightOffset(leftCount))
+      top: suffix(leftCount),
+      bottom: suffix(rightOffset(leftCount))
     }
   }
 
   if (pan === 'output') {
     const leftCount = pansCount(['html', 'css', 'js', 'console'])
     return {
-      left: suffix(leftCount),
-      right: 0
+      top: suffix(leftCount),
+      bottom: 0
     }
   }
 }
diff --git a/src/views/EditorPage.vue b/src/views/EditorPage.vue
index 924c86c..6b6ec1c 100644
--- a/src/views/EditorPage.vue
+++ b/src/views/EditorPage.vue
@@ -221,8 +221,8 @@ export default {
 .pan {
   background-color: #f9f9f9;
   position: absolute;
-  top: 0;
-  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: auto;
 
   &.active-pan {

From 460f80081844ac2514ad9bce13d78373261c89f8 Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 22:46:43 +0200
Subject: [PATCH 05/10] bump-fix

(cherry picked from commit 9eb9214733f113f4fc8448fe4a7561a69f6a95c4)
---
 src/components/PanResizer.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/PanResizer.vue b/src/components/PanResizer.vue
index 657c061..027f182 100644
--- a/src/components/PanResizer.vue
+++ b/src/components/PanResizer.vue
@@ -10,6 +10,7 @@ export default {
   props: ['enable', 'pan'],
   data() {
     return {
+      panMoveTolerance: 4,
       resizing: false,
       originalNextPanTop: null,
       originalNextPanBottom: null,
@@ -73,10 +74,12 @@ export default {
     handleMouseMove(e) {
       e.preventDefault()
       if (this.resizing) {
-        const newNextPanTop = (e.clientY / window.innerHeight) * 100
+        const landscape = (window.innerWidth > window.innerHeight)
+        const correction = landscape ? 0 : 64
+        const newNextPanTop = (e.clientY / (window.innerHeight - correction)) * 100
         if (
-          newNextPanTop - this.originalCurrentPanTop > 5 &&
-          100 - newNextPanTop - this.originalNextPanBottom > 5
+          newNextPanTop - this.originalCurrentPanTop > this.panMoveTolerance &&
+          100 - newNextPanTop - this.originalNextPanBottom > this.panMoveTolerance
         ) {
           this.updateNextPan({ top: `${newNextPanTop}%` })
           const newCurrentPanBottom =

From 462ac08f9989dcd8cd787686be249a4e7c66aa01 Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 22:50:29 +0200
Subject: [PATCH 06/10] cleanup

(cherry picked from commit d552af29be2eb84e9191aa2337b501647e093077)
---
 poi.config.js       |  21 ++++----
 src/router/index.js |   2 +-
 yarn.lock           | 124 ++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 133 insertions(+), 14 deletions(-)

diff --git a/poi.config.js b/poi.config.js
index ac9bc7e..0ebbaf8 100644
--- a/poi.config.js
+++ b/poi.config.js
@@ -62,14 +62,17 @@ module.exports = {
   ],
   babel: {
     babelrc: false,
-    presets: [
-      require.resolve('babel-preset-poi')
-    ],
-    plugins: [[require.resolve('babel-plugin-component'), [
-      {
-        libraryName: 'element-ui',
-        styleLibraryName: 'theme-chalk'
-      }
-    ]]]
+    presets: [require.resolve('babel-preset-poi')],
+    plugins: [
+      [
+        require.resolve('babel-plugin-component'),
+        [
+          {
+            libraryName: 'element-ui',
+            styleLibraryName: 'theme-chalk'
+          }
+        ]
+      ]
+    ]
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index 0cd8e02..2c35d8b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@ const NotFound = () => import(/* webpackChunkName: "not-found-page" */ '@/views/
 const GitHubSuccess = () => import(/* webpackChunkName: "ghlogin-result" */ '@/views/GitHubSuccess.vue')
 
 const router = new Router({
-  mode: 'history',
+  mode: 'hash',
   routes: [
     {
       name: 'home',
diff --git a/yarn.lock b/yarn.lock
index d2115aa..e9b4c66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1874,6 +1874,11 @@ colors@0.6.x:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
 
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+  integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -2038,6 +2043,11 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
+corser@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
+  integrity sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=
+
 cosmiconfig@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
@@ -2289,6 +2299,13 @@ debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
+debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2537,6 +2554,16 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+ecstatic@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.3.2.tgz#6d1dd49814d00594682c652adb66076a69d46c48"
+  integrity sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==
+  dependencies:
+    he "^1.1.1"
+    mime "^1.6.0"
+    minimist "^1.1.0"
+    url-join "^2.0.5"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -2924,6 +2951,11 @@ eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
 
+eventemitter3@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
@@ -3183,6 +3215,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+follow-redirects@^1.0.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
+  dependencies:
+    debug "^3.2.6"
+
 follow-redirects@^1.2.3:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.6.tgz#4dcdc7e4ab3dd6765a97ff89c3b4c258117c79bf"
@@ -3578,6 +3617,11 @@ he@1.1.x, he@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+he@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3703,6 +3747,29 @@ http-proxy@^1.16.2:
     eventemitter3 "1.x.x"
     requires-port "1.x.x"
 
+http-proxy@^1.8.1:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-server@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/http-server/-/http-server-0.11.1.tgz#2302a56a6ffef7f9abea0147d838a5e9b6b6a79b"
+  integrity sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==
+  dependencies:
+    colors "1.0.3"
+    corser "~2.0.0"
+    ecstatic "^3.0.0"
+    http-proxy "^1.8.1"
+    opener "~1.4.0"
+    optimist "0.6.x"
+    portfinder "^1.0.13"
+    union "~0.4.3"
+
 http-signature@~0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-0.10.1.tgz#4fbdac132559aa8323121e540779c0a012b27e66"
@@ -4596,7 +4663,7 @@ mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
-mime@^1.2.11, mime@^1.4.1, mime@^1.5.0:
+mime@^1.2.11, mime@^1.4.1, mime@^1.5.0, mime@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
@@ -4636,10 +4703,15 @@ minimist@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.1.tgz#1bc2bc71658cdca5712475684363615b0b4f695b"
 
-minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
 minimost@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimost/-/minimost-1.0.0.tgz#1d07954aa0268873408b95552fbffc5977dfc78b"
@@ -4687,6 +4759,11 @@ ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@@ -4962,7 +5039,7 @@ onetime@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
 
-opener@^1.4.3:
+opener@^1.4.3, opener@~1.4.0:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
 
@@ -4972,6 +5049,14 @@ opn@^5.0.0, opn@^5.1.0:
   dependencies:
     is-wsl "^1.1.0"
 
+optimist@0.6.x:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
 optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
@@ -5339,6 +5424,15 @@ popper.js@^1.12.9:
   version "1.12.9"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
 
+portfinder@^1.0.13:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
+  integrity sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -5764,6 +5858,11 @@ qs@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-1.0.2.tgz#50a93e2b5af6691c31bcea5dae78ee6ea1903768"
 
+qs@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
+  integrity sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@@ -6152,7 +6251,7 @@ require-uncached@^1.0.2:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
-requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
+requires-port@1.0.x, requires-port@1.x.x, requires-port@^1.0.0, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
@@ -7000,6 +7099,13 @@ unified@^6.1.2:
     x-is-function "^1.0.4"
     x-is-string "^0.1.0"
 
+union@~0.4.3:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/union/-/union-0.4.6.tgz#198fbdaeba254e788b0efcb630bc11f24a2959e0"
+  integrity sha1-GY+9rrolTniLDvy2MLwR8kopWeA=
+  dependencies:
+    qs "~2.3.3"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -7082,6 +7188,11 @@ upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 
+url-join@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+  integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
+
 url-loader@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
@@ -7510,6 +7621,11 @@ wordwrap@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
 
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
 wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"

From 6a14376cafb09c68e900f2778926481f3a61df8a Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 22:52:49 +0200
Subject: [PATCH 07/10] undo

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index 2c35d8b..0cd8e02 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@ const NotFound = () => import(/* webpackChunkName: "not-found-page" */ '@/views/
 const GitHubSuccess = () => import(/* webpackChunkName: "ghlogin-result" */ '@/views/GitHubSuccess.vue')
 
 const router = new Router({
-  mode: 'hash',
+  mode: 'history',
   routes: [
     {
       name: 'home',

From c4f70d8584287c3682476b45f90d94bba7271c33 Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 23:09:16 +0200
Subject: [PATCH 08/10] moar updatez

(cherry picked from commit 627777eb8c829f5b18a874b324ae8e50b8882b8c)
---
 src/components/App.vue   | 7 +++----
 src/store/index.js       | 4 ++--
 src/views/EditorPage.vue | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index f537cae..1da9618 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -238,15 +238,14 @@ span:empty {
 
 @media (orientation: landscape) {
   header {
-    width: auto;
-    flex: 1;
-    height: auto;
+    overflow-y: auto;
+    flex: 0 0 auto;
     border-bottom: 0 !important;
     border-right: 1px solid silver;
     flex-direction: column !important;
 
     .el-button, .el-checkbox {
-      padding: 0 10px;
+      padding: 10px;
       flex-direction: column !important;
 
       i, .el-checkbox__inner {
diff --git a/src/store/index.js b/src/store/index.js
index 07c7241..cd8e01e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -53,7 +53,7 @@ const getFileNameByLang = {
 const boilerplates = {
   empty: async () => ({
     ...emptyPans(),
-    showPans: ['html', 'js', 'output']
+    showPans: ['js', 'output']
   })
 }
 function importAll(r) {
@@ -68,7 +68,7 @@ const store = new Vuex.Store({
   state: {
     ...emptyPans(),
     logs: [],
-    visiblePans: ['html', 'js', 'output'],
+    visiblePans: ['js', 'output'],
     activePan: 'js',
     autoRun: false,
     githubToken: localStorage.getItem('codepan:gh-token') || '',
diff --git a/src/views/EditorPage.vue b/src/views/EditorPage.vue
index 6b6ec1c..c38bc7f 100644
--- a/src/views/EditorPage.vue
+++ b/src/views/EditorPage.vue
@@ -117,7 +117,7 @@ export default {
     '$route.query.show': {
       handler(next, prev) {
         if (!next && prev) {
-          this.showPans(['js', 'html', 'output'])
+          this.showPans(['js', 'output'])
         } else if (next !== prev) {
           this.showPans(next.split(','))
         }

From 89c46e43c1d2962c72ba569015a831e53e68144b Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 23:11:04 +0200
Subject: [PATCH 09/10] minor

(cherry picked from commit de3af945cd565add75df03a49e81063806a11a19)
---
 src/components/App.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index 1da9618..504ea57 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -232,10 +232,6 @@ span:empty {
   max-width: 420px;
 }
 
-#cf {
-  display: none;
-}
-
 @media (orientation: landscape) {
   header {
     overflow-y: auto;
@@ -274,6 +270,10 @@ span:empty {
 }
 
 @media (max-width: 800px), (max-height: 600px) {
+  #cf {
+    display: none;
+  }
+
   body {
     font-size: 12px;
   }

From 85575e75fe9de2f1f278bd5bea23425c533a45ee Mon Sep 17 00:00:00 2001
From: Jacek Pietal <jacek@gamecodehq.com>
Date: Tue, 25 Jun 2019 23:23:16 +0200
Subject: [PATCH 10/10] remove 1 dependency, fix build

(cherry picked from commit 36a6de16cf300490561612f036d4c4ccc1d227d3)
---
 package.json  |  1 -
 poi.config.js | 14 +++++++++-----
 yarn.lock     | 10 ----------
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 8c8a5e5..4734d38 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "poi-preset-bundle-report": "^2.0.1",
     "poi-preset-offline": "^9.0.3",
     "raw-loader": "^0.5.1",
-    "repo-latest-commit": "^1.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "surge": "^0.19.0",
diff --git a/poi.config.js b/poi.config.js
index 0ebbaf8..4fae182 100644
--- a/poi.config.js
+++ b/poi.config.js
@@ -1,6 +1,7 @@
+const { execSync } = require('child_process')
 const nodeModules = require('webpack-node-modules')
-const repoLatestCommit = require('repo-latest-commit')
 const pkg = require('./package')
+const LATEST_COMMIT = execSync('git rev-parse HEAD', { encoding: 'utf8' }).slice(0, 7)
 
 const cdns = {
   BABEL_CDN: 'https://cdn.jsdelivr.net/npm/@babel/standalone@7.0.0-beta.32/babel.min.js',
@@ -29,10 +30,13 @@ module.exports = {
   },
   hash: false,
   homepage: '/',
-  env: Object.assign({
-    VERSION: `v${pkg.version}-${repoLatestCommit().commit.slice(0, 7)}`,
-    LATEST_COMMIT: repoLatestCommit().commit.slice(0, 7)
-  }, cdns),
+  env: Object.assign(
+    {
+      VERSION: `v${pkg.version}-LATEST_COMMIT}`,
+      LATEST_COMMIT
+    },
+    cdns
+  ),
   presets: [
     require('poi-preset-bundle-report')(),
     require('poi-preset-babel-minify')(),
diff --git a/yarn.lock b/yarn.lock
index e9b4c66..af9ec57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6172,12 +6172,6 @@ replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
 
-repo-latest-commit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/repo-latest-commit/-/repo-latest-commit-1.0.0.tgz#c27e6e73a50f6d32a89006d5059f3a0c4ab8274e"
-  dependencies:
-    split-on-first-occurrence "^1.0.2"
-
 reqjs@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/reqjs/-/reqjs-1.0.3.tgz#80db97ddaac7a65487ac546d7a23cbe54583f1ee"
@@ -6585,10 +6579,6 @@ spdy@^3.4.1:
     select-hose "^2.0.0"
     spdy-transport "^2.0.18"
 
-split-on-first-occurrence@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/split-on-first-occurrence/-/split-on-first-occurrence-1.0.2.tgz#07fd11bafd692ecced9c9e1daba586adb709f907"
-
 split@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/split/-/split-0.3.1.tgz#cebcf142bf61bbb64b141628e6db482a2914654c"