3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-07 06:06:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improve usability when expanding table (#827)

Browse source
This commit is contained in:
Luke Vella 2023-08-28 09:56:31 +01:00 • committed by GitHub
parent fc28cf105a
commit 1b100481a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 214 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/web/package.json
View file

@ -61,6 +61,7 @@
"react-hot-toast": "^2.4.0",
"react-i18next": "^12.1.4",
"react-linkify": "^1.0.0-alpha",
"react-remove-scroll": "^2.5.6",
"react-use": "^17.4.0",
"smoothscroll-polyfill": "^0.4.4",
"spacetime": "^7.1.4",

31
apps/web/src/components/poll/desktop-poll.tsx
View file

@ -11,6 +11,7 @@ import { Button } from "@rallly/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
import { Trans, useTranslation } from "next-i18next";
import * as React from "react";
import { RemoveScroll } from "react-remove-scroll";
import { useMeasure, useScroll } from "react-use";
import { TimesShownIn } from "@/components/clock";
@ -86,6 +87,8 @@ const DesktopPoll: React.FunctionComponent = () => {
};
const collapse = () => {
// enable scrolling on body
document.body.style.overflow = "";
setExpanded(false);
};
@ -108,9 +111,14 @@ const DesktopPoll: React.FunctionComponent = () => {
<div
className={cn(
expanded
? "shadow-huge absolute left-1/2 max-w-[calc(100vw-64px)] -translate-x-1/2 -translate-y-1 rounded-md border bg-white"
? "fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-900/25 p-8"
: "",
)}
>
<div
className={cn(
"shadow-huge flex max-h-full flex-col overflow-hidden rounded-md bg-white",
)}
>
<div className="flex h-14 shrink-0 items-center justify-between rounded-t-md border-b bg-gradient-to-b from-gray-50 to-gray-100/50 px-4 py-3">
<div>
@ -219,7 +227,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<TimesShownIn />
</div>
) : null}
<div className="relative">
<div className="relative flex min-h-0 flex-col">
<div
aria-hidden="true"
className={cn(
@ -227,9 +235,13 @@ const DesktopPoll: React.FunctionComponent = () => {
x > 0 ? "opacity-100" : "opacity-0",
)}
/>
<div
<RemoveScroll
enabled={expanded}
ref={scrollRef}
className="scrollbar-thin hover:scrollbar-thumb-gray-400 scrollbar-thumb-gray-300 scrollbar-track-gray-100 relative z-10 flex-grow overflow-auto scroll-smooth pb-3 pr-3"
className={cn(
"scrollbar-thin hover:scrollbar-thumb-gray-400 scrollbar-thumb-gray-300 scrollbar-track-gray-100 relative z-10 flex-grow overflow-auto scroll-smooth pb-3 pr-3",
expanded ? "" : "max-h-[600px]",
)}
>
<table className="w-full table-auto border-separate border-spacing-0 ">
<thead>
@ -240,7 +252,10 @@ const DesktopPoll: React.FunctionComponent = () => {
<>
<ParticipantRowForm />
<tr aria-hidden="true">
<td colSpan={poll.options.length + 1} className="py-2" />
<td
colSpan={poll.options.length + 1}
className="py-2"
/>
</tr>
</>
) : null}
@ -251,7 +266,8 @@ const DesktopPoll: React.FunctionComponent = () => {
key={i}
participant={participant}
editMode={
votingForm.watch("participantId") === participant.id
votingForm.watch("participantId") ===
participant.id
}
onChangeEditMode={(isEditing) => {
if (isEditing) {
@ -266,7 +282,7 @@ const DesktopPoll: React.FunctionComponent = () => {
: null}
</tbody>
</table>
</div>
</RemoveScroll>
</div>
{mode !== "view" ? (
<div className="flex shrink-0 items-center border-t bg-gray-50">
@ -302,6 +318,7 @@ const DesktopPoll: React.FunctionComponent = () => {
) : null}
</div>
</div>
</div>
);
};

2
packages/ui/dialog.tsx
View file

@ -31,7 +31,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"data-[state=closed]:animate-out data-[state=closed]:fade-out animate-in data-[state=open]:fade-in fixed inset-0 z-50 bg-gray-900/25 backdrop-blur-sm transition-all duration-100",
"data-[state=closed]:animate-out data-[state=closed]:fade-out animate-in data-[state=open]:fade-in fixed inset-0 z-50 bg-gray-900/25 transition-all duration-100",
className,
)}
{...props}

13
yarn.lock
View file

@ -8692,7 +8692,7 @@ react-overlays@^5.2.1:
uncontrollable "^7.2.1"
warning "^4.0.3"
react-remove-scroll-bar@^2.3.3:
react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4:
version "2.3.4"
resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz"
integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
@ -8722,6 +8722,17 @@ react-remove-scroll@2.5.5:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-remove-scroll@^2.5.6:
version "2.5.6"
resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz#7510b8079e9c7eebe00e65a33daaa3aa29a10336"
integrity sha512-bO856ad1uDYLefgArk559IzUNeQ6SWH4QnrevIUjH+GczV56giDfl3h0Idptf2oIKxQmd1p9BN25jleKodTALg==
dependencies:
react-remove-scroll-bar "^2.3.4"
react-style-singleton "^2.2.1"
tslib "^2.1.0"
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-ssr-prepass@^1.5.0:
version "1.5.0"
resolved "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz"