feat: show controls on mobile

Author: antfu

packages/client/internals/NavControls.vue

@@ -31,7 +31,7 @@ async function downloadPDF() {
 </script>
 
 <template>
-  <nav class="flex text-xl p-2 text-gray-600 dark:text-gray-300 gap-1">
+  <nav class="flex flex-wrap-reverse text-xl p-2 gap-1">
     <button class="icon-btn" @click="toggleFullscreen">
       <carbon:minimize v-if="isFullscreen" />
       <carbon:maximize v-else />
@@ -69,7 +69,7 @@ async function downloadPDF() {
         <carbon:user-speaker />
       </a>
 
-      <button v-if="!isPresenter" class="icon-btn" @click="showEditor = !showEditor">
+      <button v-if="!isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
         <carbon:edit />
       </button>
     </template>

packages/client/internals/Play.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SwipeDirection, useSwipe } from '@vueuse/core'
 import { ref } from 'vue'
-import { isPrintMode, showEditor, windowSize } from '../state'
+import { isPrintMode, showEditor, windowSize, isScreenVertical } from '../state'
 import { next, prev, currentRoute, tab, tabElements, prevSlide, nextSlide } from '../logic/nav'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
@@ -51,8 +51,16 @@ const { direction, lengthX, lengthY } = useSwipe(root, {
       @click="onClick"
     >
       <template #controls>
-        <div class="absolute bottom-0 left-0 p-2 transition duration-300 opacity-0 hover:opacity-100">
-          <NavControls class="rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)" />
+        <div
+          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
+          :class="isScreenVertical ? 'opacity-100 right-0' : 'oapcity-0 p-2'"
+        >
+          <NavControls
+            class="m-auto"
+            :class="isScreenVertical
+              ? 'text-white bg-transparent'
+              : 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)'"
+          />
         </div>
       </template>
     </SlideContainer>

packages/client/state/index.ts

@@ -10,6 +10,7 @@ export const query = useUrlSearchParams()
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
+export const isScreenVertical = computed(() => windowSize.width.value <= windowSize.height.value)
 
 export const activeElement = useActiveElement()
 export const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))

packages/slidev/node/cli.ts

@@ -106,6 +106,7 @@ cli.command(
     .option('out', {
       alias: 'o',
       type: 'string',
+      default: 'dist',
       describe: 'output dir',
     })
     .option('base', {