Skip to content

Commit

Permalink
Migrate to vite, tweak popover and table styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinsilvestre
justinsilvestre committed Nov 24, 2024
1 parent 2071c41 commit baa9cd0
Show file tree
Hide file tree
Showing 24 changed files with 625 additions and 596 deletions.
4 changes: 2 additions & 2 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ WORKDIR /myapp
COPY --from=production-deps /myapp/node_modules /myapp/node_modules
COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma

COPY --from=build /myapp/build /myapp/build
COPY --from=build /myapp/public /myapp/public
COPY --from=build /myapp/build/server /myapp/build/server
COPY --from=build /myapp/build/client /myapp/build/client
ADD . .

CMD ["npm", "start"]
1 change: 0 additions & 1 deletion app/components/DictionaryLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export default function DictionaryLayout({
</footer>
<ScrollRestoration />
<Scripts />
<LiveReload />
</div>
);
}
147 changes: 73 additions & 74 deletions app/components/FigurePopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,6 @@ export function FigurePopoverWindow({
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
<div
className={clsx(
`[border:2px inset #afafaf33] pointer-events-auto max-w-xl bg-gray-50/90 p-3 shadow-xl shadow-black/30 backdrop-blur-sm [border-radius:0.3em] [box-sizing:border-box] [max-height:88v] `,
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
Expand All @@ -157,83 +154,85 @@ export function FigurePopoverWindow({
<div
className={clsx(
popoverFadeinStyles.fadeIn,
"flex flex-row flex-wrap items-center gap-4",
`[border:2px inset #afafaf33] pointer-events-auto max-w-xl bg-gray-50/90 p-3 shadow-xl shadow-black/30 backdrop-blur-sm [border-radius:0.3em] [box-sizing:border-box] [max-height:88v] `,
)}
>
<DictLink figureKey={popperFigureKey} focusOnLoad className="">
<FigureBadge badgeProps={badgeProps} width={6} />
</DictLink>
{loading ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
<div className="text-center">
<p className="animate-pulse italic text-gray-900/75">
loading...
</p>
<div className={clsx("flex flex-row flex-wrap items-center gap-4")}>
<DictLink figureKey={popperFigureKey} focusOnLoad className="">
<FigureBadge badgeProps={badgeProps} width={6} />
</DictLink>
{loading ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
<div className="text-center">
<p className="animate-pulse italic text-gray-900/75">
loading...
</p>
</div>
</div>
</div>
) : null}
{!loading && firstClassComponents?.length ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
{firstClassComponents.map((c, i) => (
<a
key={c.component.id + String(i)}
className="inline-flex cursor-pointer items-center"
onClick={(e) => {
e.preventDefault();
loadFigure(c.component.key, getBadgeProps(c.component));
}}
role="button"
href={`/dict/${c.component.key}`}
>
<FigureBadge
badgeProps={getBadgeProps(c.component)}
width={3}
className="mr-4 align-middle"
/>
<span className="i align-middle">
<FigureKeywordDisplay figure={c.component} />
</span>
</a>
))}
</div>
) : null}
{!loading && fetcher.data?.error ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
<div className="text-center">
<p className=" italic text-red-900/75">
problem loading components data
</p>
) : null}
{!loading && firstClassComponents?.length ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
{firstClassComponents.map((c, i) => (
<a
key={c.component.id + String(i)}
className="inline-flex cursor-pointer items-center"
onClick={(e) => {
e.preventDefault();
loadFigure(c.component.key, getBadgeProps(c.component));
}}
role="button"
href={`/dict/${c.component.key}`}
>
<FigureBadge
badgeProps={getBadgeProps(c.component)}
width={3}
className="mr-4 align-middle"
/>
<span className="i align-middle">
<FigureKeywordDisplay figure={c.component} />
</span>
</a>
))}
</div>
</div>
) : null}
) : null}
{!loading && fetcher.data?.error ? (
<div className="flex flex-grow basis-0 flex-wrap items-center justify-evenly gap-4 self-stretch rounded-md border-2 border-gray-300 p-4">
<div className="text-center">
<p className=" italic text-red-900/75">
problem loading components data
</p>
</div>
</div>
) : null}

{!loading && figure && headingsMeanings ? (
<DictionaryHeadingMeanings
headingsMeanings={headingsMeanings}
className={clsx(
"grid basis-0 grid-flow-col gap-4 text-lg [grid-template-columns:1fr_auto]",
{
"basis-full": figure.firstClassComponents?.length != 0,
"flex-grow items-center self-stretch rounded-md border-2 border-gray-200 p-4 ":
figure.firstClassComponents?.length === 0,
"text-center":
(figure.firstClassComponents?.length === 0 &&
!headingsMeanings.componentMnemonic) ||
(headingsMeanings.componentMnemonic &&
!headingsMeanings.currentCharacter),
},
)}
{!loading && figure && headingsMeanings ? (
<DictionaryHeadingMeanings
headingsMeanings={headingsMeanings}
className={clsx(
"grid basis-0 grid-flow-col gap-4 text-lg [grid-template-columns:1fr_auto]",
{
"basis-full": figure.firstClassComponents?.length != 0,
"flex-grow items-center self-stretch rounded-md border-2 border-gray-200 p-4 ":
figure.firstClassComponents?.length === 0,
"text-center":
(figure.firstClassComponents?.length === 0 &&
!headingsMeanings.componentMnemonic) ||
(headingsMeanings.componentMnemonic &&
!headingsMeanings.currentCharacter),
},
)}
/>
) : null}
<FigureTags
className="basis-full"
badgeProps={badgeProps}
isAtomic={
figure?.isPriority
? figure.firstClassComponents.length === 0
: false
}
/>
) : null}
<FigureTags
className="basis-full"
badgeProps={badgeProps}
isAtomic={
figure?.isPriority
? figure.firstClassComponents.length === 0
: false
}
/>
</div>
</div>
</div>
);
Expand Down
11 changes: 9 additions & 2 deletions app/components/fadeInOut.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,26 @@
0% {
opacity: 0;
pointer-events: none;
transform: scaleY(0%) scaleX(0%)
}

80% {
opacity: 1;
pointer-events: none;
transform: scaleY(1)

}
81% {
pointer-events: all;
}
100% {
opacity: 1;

}
}

.fadeIn {
animation: fadeIn 0.3s;
animation: fadeIn 0.4s;

}

.fadeOut {
Expand Down
7 changes: 5 additions & 2 deletions app/components/popoverFadeIn.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
@keyframes fadeIn {
from {
opacity: 0;
transform: scaleY(0) translateY(-.25em);
}
to {
opacity: 1;
transform: scaleY(1) translateY(0);
}
}

.fadeIn {
animation-name: fadeIn;
animation-duration: 0.3s;
transform-origin: top;
transition: opacity;
animation-name: fadeIn;
animation-duration: .5s;
}
80 changes: 42 additions & 38 deletions app/features/dictionary/AncientCharacterFormSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,17 @@ export function AncientCharacterFormSection({
const popper = useHoverPopper(popperOptions);
return (
<div
className={clsx(
`align-center relative flex flex-col justify-center gap-4 text-center`,

className,
)}
className={clsx(className)}
ref={popper.setReferenceElement}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
{...popper.openEventHandlers}
>
<div>
<div
className={clsx(
`align-center relative flex flex-col justify-center gap-4 text-center`,
)}
>
{paths.map((path, i) => (
<div
key={String(i)}
Expand All @@ -59,44 +59,48 @@ export function AncientCharacterFormSection({
</div>
{popper.isOpen ? (
<div
className={clsx(
`[border:2px inset #afafaf33] z-20 -m-2 p-3 text-left text-sm shadow shadow-gray-400 transition-opacity duration-300 [border-radius:0.3em] [box-sizing:border-box] [max-height:88v] [background-color:rgba(247,247,247,0.95)] [overflow-y:auto] [width:18rem] md:max-w-7xl`,
popper.animationClassName,
)}
ref={popper.setPopperElement}
{...popper.attributes.popper}
style={popper.styles.popper}
className="fixed z-20"
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
>
<p className="mb-4 text-sm">
These ancient <strong>&quot;seal script&quot;</strong> character
forms are provided here to help you understand the{" "}
<strong>historical evolution of the kanji</strong>. They are mostly
obsolete, but can still be found on <i>hanko</i> seals (stamps) used
in Japan as a way of signing documents.
</p>
<div className="mx-auto mb-4 text-center">
{paths.map((path) => (
<Fragment key={path}>
<div className="inline-block rounded-md border-2 border-solid border-red-900/80 bg-white [height:7rem] [width:7rem]">
<ShuowenSvg path={path} />
</div>
{paths.length > 1 ? " " : null}
</Fragment>
))}
</div>
<div
className={clsx(
`[border:2px inset #afafaf33] -m-2 p-3 text-left text-sm shadow shadow-gray-400 transition-opacity duration-300 [background-color:rgba(247,247,247,0.95)] [border-radius:0.3em] [box-sizing:border-box] [max-height:88v] [overflow-y:auto] [width:18rem] md:max-w-7xl`,
popper.popoverContentClassNames,
)}
>
<p className="mb-4 text-sm">
These ancient <strong>&quot;seal script&quot;</strong> character
forms are provided here to help you understand the{" "}
<strong>historical evolution of the kanji</strong>. They are
mostly obsolete, but can still be found on <i>hanko</i> seals
(stamps) used in Japan as a way of signing documents.
</p>
<div className="mx-auto mb-4 text-center">
{paths.map((path) => (
<Fragment key={path}>
<div className="inline-block rounded-md border-2 border-solid border-red-900/80 bg-white [height:7rem] [width:7rem]">
<ShuowenSvg path={path} />
</div>
{paths.length > 1 ? " " : null}
</Fragment>
))}
</div>

<p className="mb-4 text-sm">
The seal script forms in Kanjisense are based on the writing of the
Qin dynasty (ca. 200{" "}
<span className="[font-variant:small-caps]">BCE</span>), when
Chinese writing was first standardized. They are taken from the
ancient character dictionary 說文解字 <i>Shuowen Jiezi</i>{" "}
(Japanese: <i>Setsumon Kaiji</i>
), which was compiled a couple centuries later, during the Eastern
Han dynasty (25-206{" "}
<span className="[font-variant:small-caps]">CE</span>).
</p>
<p className="mb-4 text-sm">
The seal script forms in Kanjisense are based on the writing of
the Qin dynasty (ca. 200{" "}
<span className="[font-variant:small-caps]">BCE</span>), when
Chinese writing was first standardized. They are taken from the
ancient character dictionary 說文解字 <i>Shuowen Jiezi</i>{" "}
(Japanese: <i>Setsumon Kaiji</i>
), which was compiled a couple centuries later, during the Eastern
Han dynasty (25-206{" "}
<span className="[font-variant:small-caps]">CE</span>).
</p>
</div>
</div>
) : null}
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/features/dictionary/DictEntryReadings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
import { DictionaryPageFigureWithPriorityUses } from "./getDictionaryPageFigure.server";
import { kanjidicKanaToRomaji } from "./kanjidicKanaToRomaji";
import { QysDialogContent } from "./QysDialogContent";
import scallopBorder from "./scallopBorder.css";
import scallopBorder from "./scallopBorder.css?url";
import slideDownStyles from "./slideDown.module.css";
import { transcribeSbgyXiaoyun } from "./transcribeSbgyXiaoyun";

Expand Down Expand Up @@ -287,7 +287,7 @@ function QysDialog({
</dd>
</div>
</DialogTrigger>
<DialogContent className=" [border:2px inset #afafaf33] p-3 text-sm shadow-xl shadow-black/60 transition-opacity duration-300 [border-radius:0.3em] [box-sizing:border-box] [background-color:rgba(247,247,247,0.95)] [overflow-y:auto] [max-height:95vh] [max-width:95vw] [min-width:17rem] [width:40v] md:max-w-xl md:[max-height:95vh] ">
<DialogContent className=" [border:2px inset #afafaf33] p-3 text-sm shadow-xl shadow-black/60 transition-opacity duration-300 [background-color:rgba(247,247,247,0.95)] [border-radius:0.3em] [box-sizing:border-box] [max-height:95vh] [max-width:95vw] [min-width:17rem] [overflow-y:auto] [width:40v] md:max-w-xl md:[max-height:95vh] ">
<QysDialogContent
onClickClose={() => setOpen(false)}
attestedOnReadings={
Expand Down
Loading

0 comments on commit baa9cd0

Please sign in to comment.