Feat: Expandable info sidebar on mobile (#5566)

packages/frontend-2/components/presentation/InfoSidebar.vue

@@ -1,6 +1,7 @@
 <template>
   <aside
-    class="bg-foundation h-[196px] lg:h-dvh w-full lg:w-[260px] xl:w-[324px] border-t lg:border-t-0 lg:border-l border-outline-3 p-4"
+    class="absolute lg:relative bottom-0 right-0 bg-foundation w-full lg:w-[16.25rem] xl:w-[20.25rem] lg:h-dvh border-t lg:border-t-0 lg:border-l border-outline-3 p-4"
+    :class="[isExpanded ? 'h-[27.625rem]' : 'h-[11rem]']"
   >
     <div class="hidden lg:flex items-center justify-end space-x-1">
       <FormButton
@@ -18,11 +19,11 @@
         @click="$emit('close')"
       />
     </div>
-    <section class="lg:pt-4 lg:px-1 flex flex-col gap-3">
+    <section class="lg:pt-4 lg:px-1 flex flex-col gap-3 relative h-full pb-4 lg:pb-24">
       <div class="flex items-start justify-between gap-x-2">
         <h1
           v-if="currentSlide?.name"
-          class="text-xl/7 xl:text-[26px]/8 tracking-[-0.399px] xl:tracking-[-0.494px] font-medium text-foreground px-1 lg:px-2 xl:px-3 py-0.5 lg:py-1.5"
+          class="text-xl/7 xl:text-[26px]/8 tracking-[-0.399px] xl:tracking-[-0.494px] font-medium text-foreground px-1 lg:px-2 xl:px-3 py-0.5 lg:py-1.5 line-clamp-1 lg:line-clamp-none break-all"
         >
           {{ currentSlide?.name }}
         </h1>
@@ -34,17 +35,34 @@
             hide-text
             @click="isSlideEditDialogOpen = true"
           />
+
+          <FormButton
+            :icon-left="isExpanded ? LucideMinimize2 : LucideMaximize2"
+            color="subtle"
+            hide-text
+            @click="isExpanded = !isExpanded"
+          />
         </div>
       </div>
 
       <p
         v-if="currentSlide?.description"
-        class="text-body-sm xl:text-body text-foreground whitespace-pre-wrap px-1 lg:px-2 xl:px-3 lg:py-1"
+        ref="descriptionRef"
+        class="text-body-sm xl:text-body text-foreground whitespace-pre-wrap px-1 lg:px-2 xl:px-3 lg:py-1 lg:flex-1 lg:overflow-y-auto lg:line-clamp-none"
+        :class="{
+          'line-clamp-4 overflow-hidden': !isExpanded,
+          'flex-1 overflow-y-auto': isExpanded
+        }"
       >
         {{ currentSlide?.description }}
       </p>
     </section>
 
+    <div
+      v-if="!isExpanded"
+      class="lg:hidden absolute bottom-0 left-0 w-full h-16 bg-red z-20 flex justify-center items-center bg-[linear-gradient(0deg,#FFFFFF_0%,rgba(255,255,255,0)_100%)] dark:bg-[linear-gradient(0deg,#15161c_0%,rgba(255,255,255,0)_100%)]"
+    />
+
     <PresentationSlideEditDialog
       v-model:open="isSlideEditDialogOpen"
       :slide="currentSlide"
@@ -56,7 +74,12 @@
 <script setup lang="ts">
 import { useInjectedPresentationState } from '~/lib/presentations/composables/setup'
 import { graphql } from '~~/lib/common/generated/gql'
-import { LucideX, LucidePencilLine } from 'lucide-vue-next'
+import {
+  LucideX,
+  LucidePencilLine,
+  LucideMaximize2,
+  LucideMinimize2
+} from 'lucide-vue-next'
 
 defineEmits<{
   (e: 'close'): void
@@ -82,6 +105,8 @@ const {
 } = useInjectedPresentationState()
 
 const isSlideEditDialogOpen = ref(false)
+const descriptionRef = ref<HTMLElement>()
+const isExpanded = ref(false)
 
 const canUpdateSlide = computed(() => {
   return currentSlide.value?.permissions?.canUpdate.authorized

packages/frontend-2/components/presentation/PageWrapper.vue

@@ -9,17 +9,6 @@
         @toggle-sidebar="isLeftSidebarOpen = !isLeftSidebarOpen"
       />
 
-      <PresentationActions
-        v-if="!hideUi"
-        v-model:is-sidebar-open="isInfoSidebarOpen"
-        class="absolute bottom-3 lg:top-3 right-3 z-20"
-        :class="{
-          'bottom-52 lg:bottom-auto lg:right-[17rem] xl:right-[21rem]':
-            isInfoSidebarOpen
-        }"
-        @toggle-sidebar="isInfoSidebarOpen = !isInfoSidebarOpen"
-      />
-
       <PresentationSlideIndicator
         v-if="!isViewerLoading"
         :show-slide-list="!isLeftSidebarOpen"
@@ -42,7 +31,7 @@
         class="absolute left-0 top-0 md:relative flex-shrink-0 z-30"
       />
 
-      <div class="flex-1 z-0 flex flex-col lg:flex-row">
+      <div class="flex-1 z-0 flex flex-col lg:flex-row pb-[11rem] lg:pb-0">
         <Component
           :is="presentation ? ViewerWrapper : 'div'"
           :group="presentation"
@@ -51,21 +40,32 @@
           @progress-change="onProgressChange"
         />
 
+        <PresentationControls
+          :hide-ui="hideUi"
+          class="absolute left-3 lg:left-1/2 lg:-translate-x-1/2 z-10"
+          :class="[
+            isInfoSidebarOpen ? 'bottom-52 lg:bottom-3' : 'bottom-3',
+            isLeftSidebarOpen ? 'hidden md:flex md:left-[252px]' : ''
+          ]"
+        />
+
+        <PresentationActions
+          v-if="!hideUi"
+          v-model:is-sidebar-open="isInfoSidebarOpen"
+          class="absolute bottom-3 lg:top-3 right-3 z-20"
+          :class="{
+            'bottom-52 lg:bottom-auto lg:right-[17rem] xl:right-[21rem]':
+              isInfoSidebarOpen
+          }"
+          @toggle-sidebar="isInfoSidebarOpen = !isInfoSidebarOpen"
+        />
+
         <PresentationInfoSidebar
           v-if="isInfoSidebarOpen"
           class="flex-shrink-0 z-20"
           @close="isInfoSidebarOpen = false"
         />
       </div>
-
-      <PresentationControls
-        :hide-ui="hideUi"
-        class="absolute left-3 lg:left-1/2 lg:-translate-x-1/2"
-        :class="[
-          isInfoSidebarOpen ? 'bottom-52 lg:bottom-3' : 'bottom-3',
-          isLeftSidebarOpen ? 'hidden md:flex md:left-[252px]' : ''
-        ]"
-      />
     </div>
   </div>
 </template>