chore: improve responsive for mobile

ldclabs · Sep 11, 2024 · 444642f · 444642f
1 parent 9872deb
commit 444642f
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 35 deletions.
diff --git a/src/ic_panda_frontend/src/lib/components/icons/IconArrowLeftSLine.svelte b/src/ic_panda_frontend/src/lib/components/icons/IconArrowLeftSLine.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  fill="currentColor"
+  ><path
+    d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"
+  ></path></svg
+>
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation'
   import { type UserInfo } from '$lib/canisters/message'
   import { ChannelAPI } from '$lib/canisters/messagechannel'
+  import IconArrowLeftSLine from '$lib/components/icons/IconArrowLeftSLine.svelte'
   import IconClose from '$lib/components/icons/IconClose.svelte'
   import IconMoreFill from '$lib/components/icons/IconMoreFill.svelte'
   import IconPanda from '$lib/components/icons/IconPanda.svelte'
@@ -13,7 +14,7 @@
   } from '$src/lib/stores/message'
   import { sleep } from '$src/lib/utils/helper'
   import { Avatar, getToastStore } from '@skeletonlabs/skeleton'
-  import { onMount } from 'svelte'
+  import { getContext, onMount } from 'svelte'
   import { type Readable } from 'svelte/store'
   import ChannelMessages from './ChannelMessages.svelte'
   import ChannelSetting from './ChannelSetting.svelte'
@@ -22,6 +23,7 @@
 
   const toastStore = getToastStore()
   const { canister, id } = ChannelAPI.parseChannelParam(channelId)
+  const onChatBack = getContext('onChatBack') as () => void
 
   let myState: MyMessageState
   let myInfo: Readable<UserInfo>
@@ -44,27 +46,39 @@
   }
 
   onMount(() => {
-    const { abort } = toastRun(async (signal: AbortSignal) => {
-      if (canister) {
-        myState = await myMessageStateAsync()
-        myInfo = myState.info as Readable<UserInfo>
-        channelInfo = await myState.loadChannelInfo(canister, id)
-        openSettings = !$channelInfo._kek
-      } else {
+    const { abort, finally: onfinally } = toastRun(
+      async (signal: AbortSignal) => {
+        if (canister) {
+          myState = await myMessageStateAsync()
+          myInfo = myState.info as Readable<UserInfo>
+          channelInfo = await myState.loadChannelInfo(canister, id)
+          openSettings = !$channelInfo._kek
+          return channelInfo
+        }
+        return null
+      },
+      toastStore
+    )
+
+    onfinally((channel) => {
+      if (!channel) {
         goto('/_/messages')
       }
-    }, toastStore)
+    })
 
     return abort
   })
 </script>
 
-<div
-  class="grid max-h-[calc(100dvh-80px)] grid-rows-[auto_1fr] sm:rounded-tr-2xl"
->
+<div class="grid grid-rows-[auto_1fr]">
   <header
     class="flex h-[60px] flex-row items-center justify-between gap-2 border-b border-surface-500/30 px-4 py-2"
   >
+    <div class="md:hidden">
+      <button class="btn -ml-6" on:click={onChatBack}
+        ><IconArrowLeftSLine /></button
+      >
+    </div>
     <div class="flex flex-row items-center gap-2">
       {#if $channelInfo}
         <Avatar

diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte
@@ -270,9 +270,14 @@
   }
 </script>
 
-<div class="grid max-h-[calc(100dvh-140px)] grid-rows-[1fr_auto] bg-gray/5">
+<div
+  class="grid h-[calc(100dvh-110px)] grid-rows-[1fr_auto] bg-gray/5 sm:h-[calc(100dvh-140px)]"
+>
   <!-- Conversation -->
-  <section bind:this={elemChat} class="space-y-4 overflow-y-auto p-4 pb-10">
+  <section
+    bind:this={elemChat}
+    class="space-y-4 overflow-y-auto p-2 pb-10 md:p-4"
+  >
     <div class="grid justify-center">
       <span
         class="text-panda/50 transition duration-700 ease-in-out {topLoading

diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte
@@ -225,7 +225,7 @@
 </script>
 
 <div
-  class="grid max-h-[calc(100dvh-136px)] grid-rows-[auto_auto_1fr] items-start overflow-y-auto bg-gray/5 pb-10"
+  class="grid h-[calc(100dvh-110px)] grid-rows-[auto_auto_1fr] items-start overflow-y-auto bg-gray/5 pb-10 sm:h-[calc(100dvh-140px)]"
 >
   <section class="mt-0 flex w-full flex-row items-center gap-4 self-start p-4">
     <Avatar
@@ -337,10 +337,10 @@
     {/if}
   </section>
   <section class="p-4">
-    <div class="mb-2 grid grid-cols-[1fr_auto] items-center">
+    <div class="mb-2 items-center sm:grid sm:grid-cols-[1fr_auto]">
       <span class="text-sm opacity-50">Members</span>
       {#if isManager}
-        <div class="flex flex-row items-center space-x-1">
+        <div class="flex flex-col space-x-1 sm:flex-row">
           <button
             type="button"
             class="btn btn-sm"

diff --git a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
@@ -2,36 +2,53 @@
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { type UserInfo } from '$lib/canisters/message'
+  import IconArrowLeftSLine from '$lib/components/icons/IconArrowLeftSLine.svelte'
   import { MyMessageState } from '$src/lib/stores/message'
+  import { sleep } from '$src/lib/utils/helper'
   import { Avatar } from '@skeletonlabs/skeleton'
+  import { setContext } from 'svelte'
   import { type Readable } from 'svelte/store'
-
   import ChannelDetail from './ChannelDetail.svelte'
   import MyChannelList from './MyChannelList.svelte'
   import ProfileDetail from './ProfileDetail.svelte'
 
   export let myState: MyMessageState // force reactivity when 'myState' updated
   export let myInfo: Readable<UserInfo>
 
+  let channelsListActive = true
+
   function onMeHandler() {
+    goto('/_/messages/profile')
+  }
+
+  async function onChatBack() {
+    channelsListActive = true
+    await sleep(400)
     goto('/_/messages')
   }
 
+  setContext('onChatBack', onChatBack)
+
   $: channelId = $page.params['channel'] || ''
+  $: channelsListActive = channelId === ''
 </script>
 
 <section
-  class="card mt-4 h-full w-full max-w-4xl rounded-b-none rounded-t-2xl bg-white"
+  class="card h-full w-full rounded-b-none bg-white max-sm:rounded-none sm:mt-4 sm:rounded-t-2xl"
 >
   <div
-    class="grid h-full w-full grid-cols-1 sm:grid-cols-[220px_1fr] md:grid-cols-[280px_1fr]"
+    class="relative h-full w-full sm:grid sm:grid-cols-[220px_1fr] md:grid-cols-[280px_1fr] lg:grid-cols-[300px_1fr]"
   >
-    <div class="grid grid-rows-[1fr_auto] border-surface-500/30 sm:border-r">
+    <div
+      class="channels-list transition duration-500 ease-out {channelsListActive
+        ? ''
+        : 'max-sm:-translate-x-full'} grid grid-rows-[1fr_auto] border-r border-surface-500/30 bg-white max-sm:shadow-sm sm:rounded-tl-2xl"
+    >
       <MyChannelList />
       <footer class="border-t border-surface-500/30">
         <button
           type="button"
-          class="flex w-full items-center space-x-2 p-2"
+          class="flex w-full items-center space-x-2 px-4 py-2"
           on:click={onMeHandler}
         >
           <Avatar
@@ -51,16 +68,33 @@
         </button>
       </footer>
     </div>
-    {#key channelId}
-      {#if channelId}
-        <ChannelDetail {channelId} />
-      {:else}
-        <div
-          class="grid-row-[1fr] grid max-h-[calc(100dvh-76px)] items-start gap-6 bg-white sm:rounded-tr-2xl"
-        >
+    <div
+      class="grid-row-[1fr] grid max-h-[calc(100dvh-80px)] sm:rounded-tr-2xl"
+    >
+      {#key channelId}
+        {#if channelId && channelId !== 'profile'}
+          <ChannelDetail {channelId} />
+        {:else}
+          <div class="h-[60px] px-4 py-2 md:hidden">
+            <button class="btn -ml-6" on:click={onChatBack}
+              ><IconArrowLeftSLine /></button
+            >
+          </div>
           <ProfileDetail userId={myState.id} />
-        </div>
-      {/if}
-    {/key}
+        {/if}
+      {/key}
+    </div>
   </div>
 </section>
+
+<style>
+  @media (max-width: 640px) {
+    .channels-list {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 10;
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte b/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte
@@ -77,12 +77,12 @@
     >
   </header>
   <div class="space-y-4 overflow-y-auto">
-    <div class="p-2 text-sm opacity-50"><span>Channels</span></div>
+    <div class="px-4 py-2 text-sm opacity-50"><span>Channels</span></div>
     <div class="!mt-0 flex flex-col space-y-1">
       {#each channels as channel}
         <button
           type="button"
-          class="flex w-full items-center gap-2 p-2 {channel.channelId ===
+          class="flex w-full items-center gap-2 px-4 py-2 {channel.channelId ===
           currentChannel
             ? 'variant-soft-primary'
             : 'bg-surface-hover-token'}"

diff --git a/src/ic_panda_frontend/src/routes/(app)/_/messages/[...channel]/+page.svelte b/src/ic_panda_frontend/src/routes/(app)/_/messages/[...channel]/+page.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="mx-auto flex h-full w-full max-w-4xl flex-col flex-nowrap content-center items-center"
+  class="mx-auto flex h-full w-full max-w-5xl flex-col flex-nowrap content-center items-center"
 >
   <Index />
 </div>