Responsive styling for admin panel pages (#150)

ValueMelody · Sep 11, 2024 · 5848d93 · 5848d93
1 parent b1b97b7
commit 5848d93
Show file tree

Hide file tree

Showing 13 changed files with 241 additions and 101 deletions.
diff --git a/admin-panel/app/[lang]/apps/[id]/page.tsx b/admin-panel/app/[lang]/apps/[id]/page.tsx
@@ -150,10 +150,10 @@ const Page = () => {
       <section>
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48'>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
-          <Table.Body className='divide-y'>
+          <Table.Body className='divide-y break-all'>
             <Table.Row>
               <Table.Cell>{t('apps.name')}</Table.Cell>
               <Table.Cell>

diff --git a/admin-panel/app/[lang]/apps/new/page.tsx b/admin-panel/app/[lang]/apps/new/page.tsx
@@ -111,7 +111,7 @@ const Page = () => {
         />
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48'>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
           <Table.Body className='divide-y'>

diff --git a/admin-panel/app/[lang]/apps/page.tsx b/admin-panel/app/[lang]/apps/page.tsx
@@ -48,15 +48,39 @@ const Page = () => {
           href={`/${locale}${routeTool.Internal.Apps}/new`}
         />
       </div>
-      <Table>
-        <Table.Head>
+      <Table className='break-all'>
+        <Table.Head className='md:hidden'>
+          <Table.HeadCell>{t('apps.app')}</Table.HeadCell>
+        </Table.Head>
+        <Table.Head className='max-md:hidden'>
           <Table.HeadCell>{t('apps.name')}</Table.HeadCell>
           <Table.HeadCell>{t('apps.clientId')}</Table.HeadCell>
           <Table.HeadCell>{t('apps.status')}</Table.HeadCell>
           <Table.HeadCell>{t('apps.type')}</Table.HeadCell>
           <Table.HeadCell />
         </Table.Head>
-        <Table.Body className='divide-y'>
+        <Table.Body className='divide-y md:hidden'>
+          {apps.map((app) => (
+            <Table.Row key={app.id}>
+              <Table.Cell>
+                <div className='flex items-center justify-between'>
+                  <div className='flex flex-col gap-2'>
+                    {app.name}
+                    {app.clientId}
+                    <div className='flex items-center gap-2'>
+                      <EntityStatusLabel isEnabled={app.isActive} />
+                      <ClientTypeLabel type={app.type} />
+                    </div>
+                  </div>
+                  <EditLink
+                    href={`/${locale}/apps/${app.id}`}
+                  />
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+        <Table.Body className='divide-y max-md:hidden'>
           {apps.map((app) => (
             <Table.Row key={app.id}>
               <Table.Cell>{app.name}</Table.Cell>

diff --git a/admin-panel/app/[lang]/dashboard/page.tsx b/admin-panel/app/[lang]/dashboard/page.tsx
@@ -33,7 +33,7 @@ const Page = () => {
         className='mb-6'
         title={t('dashboard.links')}
       />
-      <Table>
+      <Table className='break-all'>
         <Table.Head>
           <Table.HeadCell>{t('dashboard.configName')}</Table.HeadCell>
           <Table.HeadCell>{t('dashboard.configValue')}</Table.HeadCell>
@@ -93,7 +93,7 @@ const Page = () => {
         className='mt-8 mb-6'
         title={t('dashboard.configs')}
       />
-      <Table>
+      <Table className='break-all'>
         <Table.Head>
           <Table.HeadCell>{t('dashboard.configName')}</Table.HeadCell>
           <Table.HeadCell>{t('dashboard.configValue')}</Table.HeadCell>

diff --git a/admin-panel/app/[lang]/roles/[id]/page.tsx b/admin-panel/app/[lang]/roles/[id]/page.tsx
@@ -100,7 +100,7 @@ const Page = () => {
       <section>
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48'>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
           <Table.Body className='divide-y'>

diff --git a/admin-panel/app/[lang]/roles/new/page.tsx b/admin-panel/app/[lang]/roles/new/page.tsx
@@ -58,7 +58,7 @@ const Page = () => {
       <section>
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48 '>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
           <Table.Body className='divide-y'>

diff --git a/admin-panel/app/[lang]/roles/page.tsx b/admin-panel/app/[lang]/roles/page.tsx
@@ -37,6 +37,16 @@ const Page = () => {
     [acquireToken],
   )
 
+  const renderEditButton = (role) => {
+    return isSystem(role.name)
+      ? null
+      : (
+        <EditLink
+          href={`/${locale}/roles/${role.id}`}
+        />
+      )
+  }
+
   return (
     <section>
       <div className='mb-6 flex items-center gap-4'>
@@ -46,12 +56,35 @@ const Page = () => {
         />
       </div>
       <Table>
-        <Table.Head>
+        <Table.Head className='md:hidden'>
+          <Table.HeadCell>{t('roles.role')}</Table.HeadCell>
+        </Table.Head>
+        <Table.Head className='max-md:hidden'>
           <Table.HeadCell>{t('roles.name')}</Table.HeadCell>
           <Table.HeadCell>{t('common.note')}</Table.HeadCell>
           <Table.HeadCell />
         </Table.Head>
-        <Table.Body className='divide-y'>
+        <Table.Body className='divide-y md:hidden'>
+          {roles.map((role) => (
+            <Table.Row key={role.id}>
+              <Table.Cell>
+                <section className='flex justify-between items-center'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      {role.name}
+                      {isSystem(role.name) && <SystemLabel />}
+                    </div>
+                    <p className='md:hidden'>{role.note}</p>
+                  </div>
+                  <div className='md:hidden'>
+                    {renderEditButton(role)}
+                  </div>
+                </section>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+        <Table.Body className='divide-y max-md:hidden'>
           {roles.map((role) => (
             <Table.Row key={role.id}>
               <Table.Cell>
@@ -64,11 +97,7 @@ const Page = () => {
                 {role.note}
               </Table.Cell>
               <Table.Cell>
-                {!isSystem(role.name) && (
-                  <EditLink
-                    href={`/${locale}/roles/${role.id}`}
-                  />
-                )}
+                {renderEditButton(role)}
               </Table.Cell>
             </Table.Row>
           ))}

diff --git a/admin-panel/app/[lang]/scopes/[id]/page.tsx b/admin-panel/app/[lang]/scopes/[id]/page.tsx
@@ -142,11 +142,12 @@ const Page = () => {
     <section>
       <PageTitle
         className='mb-6'
-        title={t('scopes.scope')} />
+        title={t('scopes.scope')}
+      />
       <section>
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48'>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
           <Table.Body className='divide-y'>

diff --git a/admin-panel/app/[lang]/scopes/new/page.tsx b/admin-panel/app/[lang]/scopes/new/page.tsx
@@ -73,7 +73,7 @@ const Page = () => {
       <section>
         <Table>
           <Table.Head>
-            <Table.HeadCell className='w-48'>{t('common.property')}</Table.HeadCell>
+            <Table.HeadCell className='max-md:w-24 md:w-48'>{t('common.property')}</Table.HeadCell>
             <Table.HeadCell>{t('common.value')}</Table.HeadCell>
           </Table.Head>
           <Table.Body className='divide-y'>

diff --git a/admin-panel/app/[lang]/scopes/page.tsx b/admin-panel/app/[lang]/scopes/page.tsx
@@ -46,13 +46,37 @@ const Page = () => {
         />
       </div>
       <Table>
-        <Table.Head>
+        <Table.Head className='md:hidden'>
+          <Table.HeadCell>{t('scopes.scope')}</Table.HeadCell>
+        </Table.Head>
+        <Table.Head className='max-md:hidden'>
           <Table.HeadCell>{t('scopes.name')}</Table.HeadCell>
           <Table.HeadCell>{t('common.note')}</Table.HeadCell>
           <Table.HeadCell>{t('scopes.type')}</Table.HeadCell>
           <Table.HeadCell />
         </Table.Head>
-        <Table.Body className='divide-y'>
+        <Table.Body className='divide-y md:hidden'>
+          {scopes.map((scope) => (
+            <Table.Row key={scope.id}>
+              <Table.Cell>
+                <div className='flex items-center justify-between'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      {scope.name}
+                      {dataTool.isSystem(scope.name) && <SystemLabel />}
+                      <ClientTypeLabel type={scope.type} />
+                    </div>
+                    {scope.note}
+                  </div>
+                  <EditLink
+                    href={`/${locale}/scopes/${scope.id}`}
+                  />
+                </div>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+        <Table.Body className='divide-y max-md:hidden'>
           {scopes.map((scope) => (
             <Table.Row key={scope.id}>
               <Table.Cell>