add horizontal scrollbar (#523)

* add horizontal scrollbar * add conlang toggle
livingtongues · Jan 24, 2025 · 5c432d4 · 5c432d4
1 parent 9eba33f
commit 5c432d4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/packages/site/src/routes/admin/dictionaries/+page.svelte b/packages/site/src/routes/admin/dictionaries/+page.svelte
@@ -76,7 +76,7 @@
       </Button>
     </div>
     <div class="mb-1" />
-    <ResponsiveTable stickyHeading stickyColumn>
+    <ResponsiveTable class="md:!overflow-unset" stickyHeading stickyColumn>
       <SortDictionaries dictionaries={filteredDictionaries} let:sortedDictionaries>
         {#each sortedDictionaries as dictionary, index (dictionary.id)}
           <IntersectionObserverShared bottom={2000} let:intersecting once>
@@ -122,6 +122,12 @@
                         regions: dictionary.coordinates?.regions,
                       },
                     })
+                  }}
+                  on:toggleconlang={() => {
+                    update_dictionary({
+                      id: dictionary.id,
+                      con_language_description: !dictionary.con_language_description ? 'YES' : null,
+                    })
                   }} />
               {:else}
                 <td colspan="30"> Loading... </td>

diff --git a/packages/site/src/routes/admin/dictionaries/DictionaryRow.svelte b/packages/site/src/routes/admin/dictionaries/DictionaryRow.svelte
@@ -22,6 +22,7 @@
     togglevideoaccess: boolean
     updatecoordinates: { lat: number, lng: number }
     removecoordinates: boolean
+    toggleconlang: boolean
   }>()
 </script>
 
@@ -161,6 +162,17 @@
 <td>
   <div style="width: 300px;" />
   {dictionary.con_language_description ? dictionary.con_language_description : ''}</td>
+<td>
+  <Button
+    color={dictionary.con_language_description ? 'green' : 'orange'}
+    size="sm"
+    onclick={() => {
+      if (confirm('Flip this dictionary\'s visibility?'))
+        dispatch('toggleconlang')
+    }}>
+    {dictionary.con_language_description ? 'YES' : 'NO'}
+  </Button>
+</td>
 {#if $admin > 1}
   <td class="cursor-pointer" title={JSON.stringify(dictionary, null, 1)}><span class="i-material-symbols-info-outline" /></td>
 {/if}
diff --git a/packages/site/src/routes/admin/dictionaries/SortDictionaries.svelte b/packages/site/src/routes/admin/dictionaries/SortDictionaries.svelte
@@ -40,6 +40,8 @@
     author_connection = 'Author Connection',
     // eslint-disable-next-line no-unused-vars
     con_language_description = 'Conlang Description',
+    // eslint-disable-next-line no-unused-vars
+    conlang = 'Conlang',
   }
 
   type SortFields = keyof typeof DictionaryFields
@@ -91,6 +93,10 @@
         valueA = a.created_at || 0
         valueB = b.created_at || 0
         break
+      case 'conlang':
+        valueA = a.con_language_description?.toString() || ''
+        valueB = b.con_language_description?.toString() || ''
+        break
       default:
         valueA = a[sortKey] ? a[sortKey].toUpperCase() : 'zz' // if we ever have missing names or email, then pass 'zz' when the sortKey is undefined
         valueB = b[sortKey] ? b[sortKey].toUpperCase() : 'zz'

diff --git a/packages/site/src/routes/admin/users/+page.svelte b/packages/site/src/routes/admin/users/+page.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-  import type { IUser } from '@living-dictionaries/types';
-  import { Collection } from 'sveltefirets';
-  import Filter from '$lib/components/Filter.svelte';
-  import { downloadObjectsAsCSV } from '$lib/export/csv';
-  import { Button, ResponsiveTable } from 'svelte-pieces';
-  import UserRow from './UserRow.svelte';
-  import SortUsers from './SortUsers.svelte';
+  import type { IUser } from '@living-dictionaries/types'
+  import { Collection } from 'sveltefirets'
+  import { Button, ResponsiveTable } from 'svelte-pieces'
+  import UserRow from './UserRow.svelte'
+  import SortUsers from './SortUsers.svelte'
+  import { downloadObjectsAsCSV } from '$lib/export/csv'
+  import Filter from '$lib/components/Filter.svelte'
 
-  const usersType: IUser[] = [];
+  const usersType: IUser[] = []
 
   function exportUsersAsCSV(users: IUser[]) {
     const headers = {
       displayName: 'Name',
       email: 'Email',
-    };
+    }
 
     const formattedUsers = users.map((user) => {
       return {
         displayName: user.displayName?.replace(/,/, ''),
         email: user.email,
-      };
-    });
+      }
+    })
 
-    downloadObjectsAsCSV(headers, formattedUsers, 'livingdictionary-users');
+    downloadObjectsAsCSV(headers, formattedUsers, 'livingdictionary-users')
   }
 </script>
 
@@ -36,7 +36,7 @@
         </Button>
       </div>
       <div class="mb-1" />
-      <ResponsiveTable stickyColumn stickyHeading>
+      <ResponsiveTable class="md:!overflow-unset" stickyColumn stickyHeading>
         <SortUsers users={filteredUsers} let:sortedUsers>
           {#each sortedUsers as user (user.uid)}
             <UserRow {user} />