mobile mode

Author: yyx990803

index-dist.html

@@ -5,13 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue SFC Playground</title>
-
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         margin: 0;

index.html

@@ -5,13 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue SFC Playground</title>
-
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         margin: 0;

src/Message.vue

@@ -55,6 +55,12 @@ function formatMessage(err: string | Error): string {
   overflow-y: scroll;
 }
 
+@media (max-width: 720px) {
+  .msg {
+    bottom: 50px;
+  }
+}
+
 .msg.err {
   color: red;
   border-color: red;

src/Repl.vue

@@ -39,9 +39,10 @@ provide('store', props.store)
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   color: var(--base);
   margin: 0;
+  overflow: hidden;
   background-color: #f8f8f8;
   --base: #444;
-  --font-code: 'Source Code Pro', monospace;
+  --font-code: Menlo, Monaco, Consolas, "Courier New", monospace;
   --color-branding: #3ca877;
   --color-branding-dark: #416f9c;
 }

src/SplitPane.vue

@@ -3,6 +3,9 @@ import { ref, reactive } from 'vue'
 
 const container = ref()
 
+// mobile only
+const showOutput = ref(false)
+
 const state = reactive({
   dragging: false,
   split: 50
@@ -40,7 +43,7 @@ function dragEnd() {
   <div
     ref="container"
     class="split-pane"
-    :class="{ dragging: state.dragging }"
+    :class="{ dragging: state.dragging, 'show-output': showOutput }"
     @mousemove="dragMove"
     @mouseup="dragEnd"
     @mouseleave="dragEnd"
@@ -52,13 +55,18 @@ function dragEnd() {
     <div class="right" :style="{ width: 100 - boundSplit() + '%' }">
       <slot name="right" />
     </div>
+
+    <button class="toggler" @click="showOutput = !showOutput">
+      {{ showOutput ? '< Code' : 'Output >' }}
+    </button>
   </div>
 </template>
 
 <style scoped>
 .split-pane {
   display: flex;
   height: 100%;
+  position: relative;
 }
 .split-pane.dragging {
   cursor: ew-resize;
@@ -84,4 +92,36 @@ function dragEnd() {
   width: 10px;
   cursor: ew-resize;
 }
+.toggler {
+  display: none;
+  z-index: 999;
+  font-family: var(--font-code);
+  color: #444;
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  background-color: #fff;
+  padding: 8px 12px;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
+}
+@media (max-width: 720px) {
+  .toggler {
+    display: block;
+  }
+  .left,
+  .right {
+    width: 100% !important;
+  }
+  .right {
+    display: none;
+  }
+  .split-pane.show-output .right {
+    display: block;
+  }
+  .split-pane.show-output .left {
+    display: none;
+  }
+}
 </style>

src/codemirror/CodeMirror.vue

@@ -69,7 +69,8 @@ onMounted(() => {
 }
 
 .CodeMirror {
-  font-family: 'Source Code Pro', monospace;
+  font-family: var(--font-code);
+  line-height: 1.5;
   height: 100%;
 }
 </style>

src/editor/FileSelector.vue

@@ -93,7 +93,6 @@ function doneAddFile() {
   cursor: pointer;
   color: #999;
   box-sizing: border-box;
-  height: 34px;
 }
 .file.active {
   color: var(--color-branding);
@@ -120,13 +119,13 @@ function doneAddFile() {
   padding-left: 0;
 }
 .add {
-  font-size: 20px;
+  font-size: 18px;
   font-family: var(--font-code);
   color: #999;
   vertical-align: middle;
   margin-left: 6px;
   position: relative;
-  top: -2px;
+  top: -1px;
 }
 .add:hover {
   color: var(--color-branding);

src/output/Preview.vue

@@ -184,14 +184,14 @@ async function updatePreview() {
 </script>
 
 <template>
-  <div class="preview-container" ref="container"></div>
+  <div class="vue-repl-preview-container" ref="container"></div>
   <Message :err="runtimeError" />
   <Message v-if="!runtimeError" :warn="runtimeWarning" />
 </template>
 
 <style>
-.preview-container,
-iframe {
+.vue-repl-preview-container,
+.vue-repl-preview-container iframe {
   width: 100%;
   height: 100%;
   border: none;