Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat:show table in mobile with hscroll #1273

Merged
merged 15 commits into from
Aug 22, 2024
Merged

feat:show table in mobile with hscroll #1273

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ebb97eb
feat:show table in mobile with hscroll
rajeshj11 Aug 21, 2024
80b5625
Merge branch 'main' into feat-969-show-table-with-hscroll
rajeshj11 Aug 21, 2024
0f634f3
fix: handle the broken manage assets and bookings and other feedback …
rajeshj11 Aug 21, 2024
d0232ec
chore:formatted
rajeshj11 Aug 21, 2024
47c2ebd
Merge branch 'feat-969-show-table-with-hscroll' of github.com:rajeshj…
rajeshj11 Aug 21, 2024
c132c9a
chore:chnage the fade effect width to 35px
rajeshj11 Aug 21, 2024
974b87c
fix:fixed the fade z-index issue
rajeshj11 Aug 21, 2024
b5ddc8f
fix:gradient issue and add lin breaker to description
rajeshj11 Aug 22, 2024
e95edc3
fix: description issue
rajeshj11 Aug 22, 2024
708b0b1
fix:added linbreak for kit also and formatted
rajeshj11 Aug 22, 2024
df28816
chore:cleanup the commented code
rajeshj11 Aug 22, 2024
8583a72
chore:formatted
rajeshj11 Aug 22, 2024
b3fcd66
refactore:moved the fade effect changes to new hook
rajeshj11 Aug 22, 2024
3575da6
chore:formatted
rajeshj11 Aug 22, 2024
42bfa77
chore:renamed the hook
rajeshj11 Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/dashboard/most-scanned-assets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,6 @@ const Row = ({
</Td>

{/* Category */}
<Td className="hidden md:table-cell">{item.scanCount} scans</Td>
<Td className="table-cell">{item.scanCount} scans</Td>
</>
);
2 changes: 1 addition & 1 deletion app/components/dashboard/most-scanned-categories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,6 @@ const Row = ({
</Td>

{/* Category */}
<Td className="hidden md:table-cell">{item.scanCount} scans</Td>
<Td className="table-cell">{item.scanCount} scans</Td>
</>
);
2 changes: 1 addition & 1 deletion app/components/dashboard/newest-assets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const Row = ({
</Td>

{/* Category */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
Expand Down
2 changes: 1 addition & 1 deletion app/components/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>(function List(
<div
ref={ref}
className={tw(
"-mx-4 overflow-x-auto border border-gray-200 bg-white md:mx-0 md:rounded",
"-mx-4 border border-gray-200 bg-white md:mx-0 md:rounded",
className
)}
>
Expand Down
11 changes: 8 additions & 3 deletions app/components/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,14 @@ export function Table({
className?: string;
}) {
return (
<table className={tw("w-full table-auto border-collapse", className)}>
{children}
</table>
<div className="relative overflow-x-auto">
<div className="fixed-gradient"></div>
<div className="scrollbar-top scrollbar-always-visible overflow-x-auto">
<table className={tw("w-full table-auto border-collapse", className)}>
{children}
</table>
</div>
</div>
);
}

Expand Down
16 changes: 8 additions & 8 deletions app/routes/_layout+/admin-dashboard+/qrs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,16 @@ export default function Area51() {
hideFirstHeaderColumn
headerChildren={
<>
<Th className="hidden md:table-cell">QR id</Th>
<Th className="hidden md:table-cell">Asset</Th>
<Th className="hidden md:table-cell">Kit</Th>
<Th className="hidden md:table-cell">Organization ID</Th>
<Th className="hidden md:table-cell">User ID</Th>
<Th className="hidden md:table-cell">
<Th className="table-cell">QR id</Th>
<Th className="table-cell">Asset</Th>
<Th className="table-cell">Kit</Th>
<Th className="table-cell">Organization ID</Th>
<Th className="table-cell">User ID</Th>
<Th className="table-cell">
<span title="Only available for batched codes">Printed</span>
</Th>
<Th className="hidden md:table-cell">Batch</Th>
<Th className="hidden md:table-cell">Created at</Th>
<Th className="table-cell">Batch</Th>
<Th className="table-cell">Created at</Th>
</>
}
/>
Expand Down
20 changes: 8 additions & 12 deletions app/routes/_layout+/assets._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,25 +484,24 @@ export const AssetsList = ({
* Using remix's navigate is the default behaviour, however it can receive also a custom function
*/
navigate={(itemId) => navigate(`/assets/${itemId}`)}
className=" overflow-x-visible md:overflow-x-auto"
bulkActions={disableBulkActions ? undefined : <BulkActionsDropdown />}
customEmptyStateContent={
customEmptyState ? customEmptyState : undefined
}
headerChildren={
<>
<Th className="hidden md:table-cell">Category</Th>
<Th className="hidden md:table-cell">Tags</Th>
<Th className="table-cell">Category</Th>
<Th className="table-cell">Tags</Th>
<When
truthy={userHasPermission({
roles,
entity: PermissionEntity.custody,
action: PermissionAction.read,
})}
>
<Th className="hidden md:table-cell">Custodian</Th>
<Th className="table-cell">Custodian</Th>
</When>
<Th className="hidden md:table-cell">Location</Th>
<Th className="table-cell">Location</Th>
</>
}
/>
Expand Down Expand Up @@ -581,14 +580,11 @@ const ListAssetContent = ({
</div>
</div>

<button className="block md:hidden">
<ChevronRight />
</button>
</div>
</Td>

{/* Category */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
Expand All @@ -601,7 +597,7 @@ const ListAssetContent = ({
</Td>

{/* Tags */}
<Td className="hidden text-left md:table-cell">
<Td className="table-cell text-left">
<ListItemTagsColumn tags={tags} />
</Td>

Expand All @@ -613,7 +609,7 @@ const ListAssetContent = ({
action: PermissionAction.read,
})}
>
<Td className="hidden md:table-cell">
<Td className="table-cell">
{custody ? (
<GrayBadge>
<>
Expand Down Expand Up @@ -648,7 +644,7 @@ const ListAssetContent = ({
</When>

{/* Location */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{location?.name ? <GrayBadge>{location.name}</GrayBadge> : null}
</Td>
</>
Expand Down
29 changes: 14 additions & 15 deletions app/routes/_layout+/bookings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,16 +217,15 @@ export default function BookingsIndexPage({
bulkActions={disableBulkActions ? undefined : <BulkActionsDropdown />}
ItemComponent={ListAssetContent}
navigate={(id) => navigate(`/bookings/${id}`)}
className="overflow-x-visible md:overflow-x-auto"
headerChildren={
<>
<Th className="hidden md:table-cell" />
<Th className="hidden md:table-cell">Description</Th>
<Th className="table-cell" />
<Th className="table-cell">Description</Th>

<Th className="hidden md:table-cell">From</Th>
<Th className="hidden md:table-cell">To</Th>
<Th className="hidden md:table-cell">Custodian</Th>
<Th className="hidden md:table-cell">Created by</Th>
<Th className="table-cell">From</Th>
<Th className="table-cell">To</Th>
<Th className="table-cell">Custodian</Th>
<Th className="table-cell">Created by</Th>
</>
}
/>
Expand Down Expand Up @@ -302,9 +301,9 @@ const ListAssetContent = ({
</div>
</div>

<button className="block md:hidden">
{/* <button className="block md:hidden">
<ChevronRight />
</button>
</button> */}
</div>
</Td>

Expand All @@ -314,7 +313,7 @@ const ListAssetContent = ({
* 2. Have custody
* 3. Have other bookings with the same period - this I am not sure how to handle yet
* */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{hasUnavaiableAssets ? (
<AvailabilityBadge
badgeText={"Includes unavailable assets"}
Expand All @@ -326,12 +325,12 @@ const ListAssetContent = ({
) : null}
</Td>

<Td className="hidden md:table-cell">
<Td className="table-cell">
{item.description ? <LineBreakText text={item.description} /> : null}
</Td>

{/* From */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{item.displayFrom ? (
<div className="min-w-[130px]">
<span className="word-break mb-1 block font-medium">
Expand All @@ -343,7 +342,7 @@ const ListAssetContent = ({
</Td>

{/* To */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{item.displayTo ? (
<div className="min-w-[130px]">
<span className="word-break mb-1 block font-medium">
Expand All @@ -355,7 +354,7 @@ const ListAssetContent = ({
</Td>

{/* Custodian */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
{item?.custodianUser ? (
<UserBadge
img={
Expand All @@ -372,7 +371,7 @@ const ListAssetContent = ({
</Td>

{/* Created by */}
<Td className="hidden md:table-cell">
<Td className="table-cell">
<UserBadge
img={
item?.creator?.profilePicture || "/static/images/default_pfp.jpg"
Expand Down
6 changes: 3 additions & 3 deletions app/routes/_layout+/categories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,9 +166,9 @@ export default function CategoriesPage() {
ItemComponent={CategoryItem}
headerChildren={
<>
<Th className="hidden md:table-cell">Description</Th>
<Th className="hidden md:table-cell">Assets</Th>
<Th className="hidden md:table-cell">Actions</Th>
<Th className="table-cell">Description</Th>
<Th className="table-cell">Assets</Th>
<Th className="table-cell">Actions</Th>
</>
}
/>
Expand Down
8 changes: 4 additions & 4 deletions app/routes/_layout+/kits.$kitId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,8 +534,8 @@ export default function KitDetails() {
}}
headerChildren={
<>
<Th className="hidden md:table-cell">Category</Th>
<Th className="hidden md:table-cell">Location</Th>
<Th className="table-cell">Category</Th>
<Th className="table-cell">Location</Th>
</>
}
/>
Expand Down Expand Up @@ -606,15 +606,15 @@ function ListContent({
</div>
</Td>

<Td className="hidden md:table-cell">
<Td className="table-cell">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
</Badge>
) : null}
</Td>

<Td className="hidden md:table-cell">
<Td className="table-cell">
{location ? (
<GrayBadge>
{location.image ? (
Expand Down
16 changes: 8 additions & 8 deletions app/routes/_layout+/kits._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,10 +190,10 @@ export default function KitsIndexPage() {
navigate={(kitId) => navigate(kitId)}
headerChildren={
<>
<Th className="hidden md:table-cell">Description</Th>
<Th className="hidden md:table-cell">Assets</Th>
<Th className="table-cell">Description</Th>
<Th className="table-cell">Assets</Th>
{canReadCustody && (
<Th className="hidden md:table-cell">Custodian</Th>
<Th className="table-cell">Custodian</Th>
)}
</>
}
Expand Down Expand Up @@ -270,19 +270,19 @@ function ListContent({
</div>
</div>

<button className="block md:hidden">
{/* <button className="block md:hidden">
<ChevronRight />
</button>
</button> */}
</div>
</Td>

<Td className="hidden max-w-96 truncate md:table-cell">
<Td className="table-cell max-w-96 truncate">
{item.description}
</Td>

<Td className="hidden md:table-cell">{item._count.assets}</Td>
<Td className="table-cell">{item._count.assets}</Td>
{canReadCustody && (
<Td className="hidden md:table-cell">
<Td className="table-cell">
{item.custody ? (
<GrayBadge>
<>
Expand Down
6 changes: 3 additions & 3 deletions app/routes/_layout+/locations.$locationId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,8 +264,8 @@ export default function LocationPage() {
navigate={(itemId) => navigate(`/assets/${itemId}`)}
headerChildren={
<>
<Th className="hidden md:table-cell">Category</Th>
<Th className="hidden md:table-cell">Tags</Th>
<Th className="table-cell">Category</Th>
<Th className="table-cell">Tags</Th>
</>
}
customEmptyStateContent={{
Expand Down Expand Up @@ -325,7 +325,7 @@ const ListAssetContent = ({
</button>
</div>
</Td>
<Td className="hidden md:table-cell">
<Td className="table-cell">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_layout+/locations._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default function LocationsIndexPage() {
navigate={(itemId) => navigate(itemId)}
headerChildren={
<>
<Th className="hidden md:table-cell">Assets</Th>
<Th className="table-cell">Assets</Th>
</>
}
/>
Expand Down
14 changes: 7 additions & 7 deletions app/routes/_layout+/settings.team.users.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,10 +185,10 @@ export default function UserTeamSetting() {
ItemComponent={UserRow}
headerChildren={
<>
<Th className="hidden md:table-cell">Custodies</Th>
<Th className="hidden md:table-cell">Role</Th>
<Th className="hidden md:table-cell">Status</Th>
<Th className="hidden md:table-cell">Actions</Th>
<Th className="table-cell">Custodies</Th>
<Th className="table-cell">Role</Th>
<Th className="table-cell">Status</Th>
<Th className="table-cell">Actions</Th>
</>
}
/>
Expand All @@ -211,9 +211,9 @@ function UserRow({ item }: { item: TeamMembersWithUserOrInvite }) {
<TeamMemberDetails details={item} />
)}
</Td>
<Td className="hidden md:table-cell">{item.custodies || 0}</Td>
<Td className="hidden md:table-cell">{item.role}</Td>
<Td className="hidden md:table-cell">
<Td className="table-cell">{item.custodies || 0}</Td>
<Td className="table-cell">{item.role}</Td>
<Td className="table-cell">
<InviteStatusBadge status={item.status} />
</Td>
<Td className="hidden text-right md:table-cell">
Expand Down
4 changes: 2 additions & 2 deletions app/routes/_layout+/tags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ export default function CategoriesPage() {
ItemComponent={TagItem}
headerChildren={
<>
<Th className="hidden md:table-cell">Description</Th>
<Th className="hidden md:table-cell">Actions</Th>
<Th className="table-cell">Description</Th>
<Th className="table-cell">Actions</Th>
</>
}
/>
Expand Down
Loading
Loading