feat: update presenter mode styles for mobile (#624)

* feat: update presenter mode styles for mobile

* feat: use media queries depending on aspect-ratio

packages/client/internals/NavControls.vue

@@ -47,7 +47,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 <template>
   <nav ref="root" class="flex flex-col">
     <div
-      class="flex flex-wrap-reverse text-xl p-2 gap-1"
+      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:(gap-1 p-2)"
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >

packages/client/internals/Presenter.vue

@@ -84,7 +84,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:(h-14 py-2)">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
@@ -98,7 +98,7 @@ onMounted(() => {
           {{ timer }}
         </div>
       </div>
-      <div ref="main" class="grid-section main flex flex-col p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:(p-4)" :style="themeVars">
         <SlideContainer
           key="main"
           class="h-full w-full"
@@ -107,8 +107,11 @@ onMounted(() => {
             <SlidesShow context="presenter" />
           </template>
         </SlideContainer>
+        <div class="context">
+          current
+        </div>
       </div>
-      <div class="grid-section next flex flex-col p-4">
+      <div class="relative grid-section next flex flex-col p-2 lg:(p-4)">
         <SlideContainer
           v-if="nextSlide"
           key="next"
@@ -124,10 +127,13 @@ onMounted(() => {
             context="previewNext"
           />
         </SlideContainer>
+        <div class="context">
+          next
+        </div>
       </div>
       <div class="grid-section note overflow-auto">
-        <NoteEditor v-if="__DEV__" class="w-full h-full p-4 overflow-auto" />
-        <NoteStatic v-else class="w-full h-full p-4 overflow-auto" />
+        <NoteEditor v-if="__DEV__" class="w-full h-full overflow-auto p-2 lg:(p-4)" />
+        <NoteStatic v-else class="w-full h-full overflow-auto p-2 lg:(p-4)" />
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />
@@ -176,7 +182,20 @@ onMounted(() => {
     "bottom bottom";
 }
 
-@screen md {
+@media (max-aspect-ratio: 3/5) {
+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-areas:
+      "top"
+      "main"
+      "note"
+      "next"
+      "bottom";
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
   .grid-container {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
@@ -211,4 +230,8 @@ onMounted(() => {
     grid-area: bottom;
   }
 }
+
+.context {
+  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+}
 </style>

packages/client/internals/VerticalDivider.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="w-1px m-2 opacity-10 bg-current" />
+  <div class="w-1px opacity-10 bg-current m-1 lg:(m-2)" />
 </template>

packages/client/styles/index.css

@@ -16,10 +16,16 @@ html {
 
 .icon-btn {
   @apply inline-block cursor-pointer select-none !outline-none;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
+  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
 }
 
+@screen md {
+  .icon-btn {
+    @apply p-2;
+  }
+}
+
 .icon-btn.shallow {
   @apply opacity-30
 }