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

Locale update patch (#229)

Browse source
This commit is contained in:
Luke Vella 2022-07-21 17:11:10 +01:00 • committed by GitHub
parent e0a5cfec39
commit f46c9b0348
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 108 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/page-layout/footer.tsx
View file

@ -15,7 +15,7 @@ import Vercel from "~/public/vercel-logotype-dark.svg";
import { LanguageSelect } from "../poll/language-selector";
const Footer: React.VoidFunctionComponent = () => {
const { t } = useTranslation(["common", "homepage"]);
const { t } = useTranslation("common");
const router = useRouter();
return (
<div className="mt-16 bg-slate-50/70">
@ -26,7 +26,7 @@ const Footer: React.VoidFunctionComponent = () => {
<p>
<Trans
t={t}
i18nKey="common:footerSponsor"
i18nKey="footerSponsor"
components={{
a: (
<a
@ -40,7 +40,7 @@ const Footer: React.VoidFunctionComponent = () => {
<div>
<Trans
t={t}
i18nKey="common:footerCredit"
i18nKey="footerCredit"
components={{
a: (
<a
@ -70,25 +70,25 @@ const Footer: React.VoidFunctionComponent = () => {
className="inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-400 transition-colors hover:bg-primary-500 hover:text-white hover:no-underline focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 active:bg-primary-600"
>
<Star className="mr-2 inline-block w-5" />
<span>{t("common:starOnGithub")}</span>
<span>{t("starOnGithub")}</span>
</a>
</div>
</div>
<div className="lg:col-span-2">
<div className="mb-4 font-medium">{t("homepage:links")}</div>
<div className="mb-4 font-medium">{t("links")}</div>
<ul>
<li>
<a
className="font-normal leading-loose text-slate-400 hover:text-slate-800 hover:no-underline"
href="https://github.com/lukevella/rallly/discussions"
>
{t("homepage:discussions")}
{t("discussions")}
</a>
</li>
<li>
<Link href="https://blog.rallly.co">
<a className="font-normal leading-loose text-slate-400 hover:text-slate-800 hover:no-underline">
{t("homepage:blog")}
{t("blog")}
</a>
</Link>
</li>
@ -97,20 +97,20 @@ const Footer: React.VoidFunctionComponent = () => {
href="https://support.rallly.co"
className="font-normal leading-loose text-slate-400 hover:text-slate-800 hover:no-underline"
>
{t("homepage:support")}
{t("support")}
</a>
</li>
<li>
<Link href="/privacy-policy">
<a className="font-normal leading-loose text-slate-400 hover:text-slate-800 hover:no-underline">
{t("homepage:privacyPolicy")}
{t("privacyPolicy")}
</a>
</Link>
</li>
</ul>
</div>
<div className="lg:col-span-3">
<div className="mb-4 font-medium">{t("homepage:poweredBy")}</div>
<div className="mb-4 font-medium">{t("poweredBy")}</div>
<div className="block space-y-4">
<div>
<a
@ -133,7 +133,7 @@ const Footer: React.VoidFunctionComponent = () => {
</div>
</div>
<div className="lg:col-span-3">
<div className="mb-4 font-medium">{t("common:language")}</div>
<div className="mb-4 font-medium">{t("language")}</div>
<LanguageSelect
className="mb-4 w-full"
onChange={(locale) => {
@ -145,7 +145,7 @@ const Footer: React.VoidFunctionComponent = () => {
className="inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
>
<Translate className="mr-2 h-5 w-5" />
{t("common:volunteerTranslator")} &rarr;
{t("volunteerTranslator")} &rarr;
</a>
</div>
</div>

6
src/components/poll/desktop-poll.tsx
View file

@ -51,8 +51,10 @@ const Poll: React.VoidFunctionComponent = () => {
Math.floor((width - (minSidebarWidth + actionColumnWidth)) / columnWidth),
);
const sidebarWidth =
width - (numberOfVisibleColumns * columnWidth + actionColumnWidth);
const sidebarWidth = Math.min(
width - (numberOfVisibleColumns * columnWidth + actionColumnWidth),
300,
);
const availableSpace = Math.min(
numberOfVisibleColumns * columnWidth,

50
src/components/poll/desktop-poll/participant-row-form.tsx
View file

@ -1,9 +1,9 @@
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import { useTranslation } from "next-i18next";
import * as React from "react";
import { Controller, useForm } from "react-hook-form";
import ArrowLeft from "@/components/icons/arrow-left.svg";
import ArrowRight from "@/components/icons/arrow-right.svg";
import { requiredString } from "../../../utils/form-validation";
@ -16,7 +16,6 @@ import { VoteSelector } from "../vote-selector";
import ControlledScrollArea from "./controlled-scroll-area";
import { usePollContext } from "./poll-context";
const MotionButton = motion(Button);
export interface ParticipantRowFormProps {
defaultValues?: Partial<ParticipantForm>;
onSubmit: (data: ParticipantFormSubmitted) => Promise<void>;
@ -35,6 +34,7 @@ const ParticipantRowForm: React.ForwardRefRenderFunction<
sidebarWidth,
numberOfColumns,
goToNextPage,
goToPreviousPage,
maxScrollPosition,
setScrollPosition,
} = usePollContext();
@ -161,28 +161,30 @@ const ParticipantRowForm: React.ForwardRefRenderFunction<
);
}}
/>
<div className="flex items-center space-x-2 px-2 transition-all">
{scrollPosition < maxScrollPosition ? (
<AnimatePresence initial={false}>
{scrollPosition < maxScrollPosition ? (
<MotionButton
transition={{ duration: 0.1 }}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
className="text-xs"
rounded={true}
onClick={() => {
goToNextPage();
}}
>
<ArrowRight className="h-4 w-4" />
</MotionButton>
) : null}
</AnimatePresence>
) : null}
</div>
{maxScrollPosition > 0 ? (
<div className="flex items-center space-x-2 px-2 transition-all">
<Button
disabled={scrollPosition === 0}
className="text-xs"
rounded={true}
onClick={() => {
goToPreviousPage();
}}
>
<ArrowLeft className="h-4 w-4" />
</Button>
<Button
disabled={scrollPosition >= maxScrollPosition}
className="text-xs"
rounded={true}
onClick={() => {
goToNextPage();
}}
>
<ArrowRight className="h-4 w-4" />
</Button>
</div>
) : null}
</form>
);
};

54
src/components/standard-layout.tsx
View file

@ -42,7 +42,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
openLoginModal: () => void;
}> = ({ openLoginModal }) => {
const { user } = useSession();
const { t } = useTranslation("app");
const { t } = useTranslation(["common", "app"]);
return (
<div
className="fixed top-0 z-40 flex h-12 w-full shrink-0 items-center justify-between border-b bg-gray-50
@ -58,7 +58,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
className="flex w-full cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
>
<Login className="h-5 opacity-75" />
<span className="inline-block">{t("login")}</span>
<span className="inline-block">{t("app:login")}</span>
</button>
)}
<AnimatePresence initial={false}>
@ -96,7 +96,9 @@ const MobileNavigation: React.VoidFunctionComponent<{
className="group flex items-center whitespace-nowrap rounded-md px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
>
<Adjustments className="h-5 opacity-75 group-hover:text-primary-500" />
<span className="ml-2 hidden sm:block">{t("preferences")}</span>
<span className="ml-2 hidden sm:block">
{t("app:preferences")}
</span>
</button>
}
>
@ -110,7 +112,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
className="group flex items-center rounded-md px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
>
<Menu className="w-5 group-hover:text-primary-500" />
<span className="ml-2 hidden sm:block">{t("menu")}</span>
<span className="ml-2 hidden sm:block">{t("app:menu")}</span>
</button>
}
>
@ -124,13 +126,13 @@ const MobileNavigation: React.VoidFunctionComponent<{
const AppMenu: React.VoidFunctionComponent<{ className?: string }> = ({
className,
}) => {
const { t } = useTranslation("app");
const { t } = useTranslation(["common", "app"]);
return (
<div className={clsx("space-y-1", className)}>
<Link href="/new">
<a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 pr-4 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300">
<Pencil className="h-5 opacity-75 " />
<span className="inline-block">{t("newPoll")}</span>
<span className="inline-block">{t("app:newPoll")}</span>
</a>
</Link>
<a
@ -140,7 +142,7 @@ const AppMenu: React.VoidFunctionComponent<{ className?: string }> = ({
rel="noreferrer"
>
<Support className="h-5 opacity-75" />
<span className="inline-block">{t("support")}</span>
<span className="inline-block">{t("common:support")}</span>
</a>
</div>
);
@ -150,7 +152,7 @@ const UserDropdown: React.VoidFunctionComponent<
DropdownProps & { openLoginModal: () => void }
> = ({ children, openLoginModal, ...forwardProps }) => {
const { logout, user } = useSession();
const { t } = useTranslation("app");
const { t } = useTranslation(["common", "app"]);
const modalContext = useModalContext();
if (!user) {
return null;
@ -161,7 +163,7 @@ const UserDropdown: React.VoidFunctionComponent<
{user.isGuest ? (
<DropdownItem
icon={Question}
label={t("whatsThis")}
label={t("app:whatsThis")}
onClick={() => {
modalContext.render({
showClose: true,
@ -180,14 +182,14 @@ const UserDropdown: React.VoidFunctionComponent<
</div>
</div>
</div>
<p>{t("guestSessionNotice")}</p>
<p>{t("app:guestSessionNotice")}</p>
<div>
<a
href="https://support.rallly.co/guest-sessions"
target="_blank"
rel="noreferrer"
>
{t("guestSessionReadMore")}
{t("app:guestSessionReadMore")}
</a>
</div>
</div>
@ -206,19 +208,19 @@ const UserDropdown: React.VoidFunctionComponent<
) : null}
<DropdownItem
icon={Logout}
label={user.isGuest ? t("forgetMe") : t("logout")}
label={user.isGuest ? t("app:forgetMe") : t("app:logout")}
onClick={() => {
if (user?.isGuest) {
modalContext.render({
title: t("areYouSure"),
description: t("endingGuestSessionNotice"),
title: t("app:areYouSure"),
description: t("app:endingGuestSessionNotice"),
onOk: logout,
okButtonProps: {
type: "danger",
},
okText: t("endSession"),
cancelText: t("cancel"),
okText: t("app:endSession"),
cancelText: t("app:cancel"),
});
} else {
logout();
@ -233,7 +235,7 @@ const StandardLayout: React.VoidFunctionComponent<{
children?: React.ReactNode;
}> = ({ children, ...rest }) => {
const { user } = useSession();
const { t } = useTranslation("app");
const { t } = useTranslation(["common", "app"]);
const [loginModal, openLoginModal] = useModal({
footer: null,
overlayClosable: true,
@ -257,7 +259,7 @@ const StandardLayout: React.VoidFunctionComponent<{
<Link href="/new">
<a className="group mb-1 flex items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20">
<Pencil className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
<span className="grow text-left">{t("newPoll")}</span>
<span className="grow text-left">{t("app:newPoll")}</span>
</a>
</Link>
<a
@ -267,14 +269,14 @@ const StandardLayout: React.VoidFunctionComponent<{
rel="noreferrer"
>
<Support className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
<span className="grow text-left">{t("support")}</span>
<span className="grow text-left">{t("common:support")}</span>
</a>
<Popover
placement="right-start"
trigger={
<button className="group flex w-full items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20">
<Adjustments className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
<span className="grow text-left">{t("preferences")}</span>
<span className="grow text-left">{t("app:preferences")}</span>
<DotsVertical className="h-4 text-slate-500 opacity-0 transition-opacity group-hover:opacity-100" />
</button>
}
@ -287,7 +289,7 @@ const StandardLayout: React.VoidFunctionComponent<{
className="group flex w-full items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20"
>
<Login className="h-5 opacity-75 group-hover:text-primary-500 group-hover:opacity-100" />
<span className="grow text-left">{t("login")}</span>
<span className="grow text-left">{t("app:login")}</span>
</button>
)}
</div>
@ -313,7 +315,7 @@ const StandardLayout: React.VoidFunctionComponent<{
{user.shortName}
</div>
<div className="truncate text-xs text-slate-500">
{user.isGuest ? t("guest") : t("user")}
{user.isGuest ? t("app:guest") : t("app:user")}
</div>
</div>
<DotsVertical className="h-4 text-slate-500 opacity-0 transition-opacity group-hover:opacity-100" />
@ -345,16 +347,16 @@ const StandardLayout: React.VoidFunctionComponent<{
className="text-sm text-slate-400 transition-colors hover:text-primary-500 hover:no-underline"
rel="noreferrer"
>
{t("support")}
{t("common:support")}
</a>
<Link href="https://github.com/lukevella/rallly/discussions">
<a className="text-sm text-slate-400 transition-colors hover:text-primary-500 hover:no-underline">
{t("discussions")}
{t("common:discussions")}
</a>
</Link>
<Link href="https://blog.rallly.co">
<a className="text-sm text-slate-400 transition-colors hover:text-primary-500 hover:no-underline">
{t("blog")}
{t("common:blog")}
</a>
</Link>
<div className="hidden text-slate-300 lg:block">&bull;</div>
@ -385,7 +387,7 @@ const StandardLayout: React.VoidFunctionComponent<{
className="inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-400 transition-colors hover:bg-primary-500 hover:text-white hover:no-underline focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 active:bg-primary-600"
>
<Cash className="mr-1 inline-block w-5" />
<span>{t("donate")}</span>
<span>{t("app:donate")}</span>
</a>
</div>
</div>