Skip to content

Commit

Permalink
Merge branch 'manawiki:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@pogseal
pogseal authored Mar 5, 2024
2 parents 5d66be7 + 6b88314 commit 0a0f699
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 50 deletions.
21 changes: 17 additions & 4 deletions app/components/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,11 @@ export function Table({
{...props}
className={clsx(
className,
"-mx-[--gutter] overflow-x-auto whitespace-nowrap",
`-mx-[--gutter] overflow-x-auto whitespace-nowrap scrollbar
dark:scrollbar-thumb-zinc-500 dark:scrollbar-track-dark450
scrollbar-thumb-zinc-300 scrollbar-track-zinc-100`,
framed &&
"border-y tablet:border tablet:rounded-lg border-color-sub dark:bg-dark350 shadow-sm shadow-1",
"border-y mobile:border mobile:rounded-lg border-color-sub dark:bg-dark350 shadow-sm shadow-1",
)}
>
<div
Expand Down Expand Up @@ -139,15 +141,19 @@ export function TableRow({

export function TableHeader({
className,
center,
...props
}: React.ComponentPropsWithoutRef<"th">) {
}: {
center?: boolean;
} & React.ComponentPropsWithoutRef<"th">) {
let { bleed, grid, framed } = useContext(TableContext);

return (
<th
{...props}
className={clsx(
className,
center && "text-center",
framed && "bg-zinc-50 dark:bg-dark400",
"border-b border-color-sub font-semibold px-4 py-2.5 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]",
grid && "border-l border-color-sub first:border-l-0",
Expand All @@ -160,8 +166,13 @@ export function TableHeader({
export function TableCell({
className,
children,
center,
bold,
...props
}: React.ComponentPropsWithoutRef<"td">) {
}: {
center?: boolean;
bold?: boolean;
} & React.ComponentPropsWithoutRef<"td">) {
let { bleed, dense, grid, striped, framed } = useContext(TableContext);
let { href, target, title } = useContext(TableRowContext);
let [cellRef, setCellRef] = useState<HTMLElement | null>(null);
Expand All @@ -172,6 +183,8 @@ export function TableCell({
{...props}
className={clsx(
className,
center && "text-center",
bold && "font-bold",
"relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]",
!striped && !framed && "border-b border-color",
grid && "border-l border-color-sub first:border-l-0",
Expand Down
19 changes: 9 additions & 10 deletions app/routes/_home+/components/manacore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ export const ManaCore = () => {
/>

<div className="flex items-center justify-center">
<div className="relative flex h-48 w-48 items-center justify-center">
<div className="relative flex size-36 laptop:size-48 items-center justify-center">
{/* Halo effect */}
<svg
className="pointer-events-none absolute inset-0 left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 transform blur-md will-change-transform"
width="480"
height="480"
width="280"
height="280"
viewBox="0 0 480 480"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down Expand Up @@ -83,15 +83,14 @@ export const ManaCore = () => {
</g>
</svg>
{/* Grid */}
<div className="pointer-events-none absolute inset-0 left-1/2 top-1/2 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-full [mask-image:_radial-gradient(black,_transparent_60%)]">
{/* <div className="pointer-events-none absolute inset-0 left-1/2 top-1/2 size-[300px] laptop:size-[500px] -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-full [mask-image:_radial-gradient(black,_transparent_60%)]">
<div className="animate-endless h-[200%]">
<div className="absolute inset-0 opacity-20 blur-[2px] [background:_repeating-linear-gradient(transparent,_transparent_48px,_theme(colors.white)_48px,_theme(colors.white)_49px)]" />
<div className="absolute inset-0 [background:_repeating-linear-gradient(transparent,_transparent_48px,_theme(colors.zinc.600)_48px,_theme(colors.zinc.600)_49px)]" />
<div className="absolute inset-0 opacity-20 blur-[2px] [background:_repeating-linear-gradient(90deg,transparent,_transparent_48px,_theme(colors.white)_48px,_theme(colors.white)_49px)]" />
<div className="absolute inset-0 [background:_repeating-linear-gradient(90deg,transparent,_transparent_48px,_theme(colors.zinc.700)_48px,_theme(colors.zinc.600)_49px)]" />
</div>
</div>
{/* Icons */}
</div> */}
<Transition
show={tab === 1}
className="absolute"
Expand All @@ -102,7 +101,7 @@ export const ManaCore = () => {
leaveFrom="opacity-100 rotate-0"
leaveTo="opacity-0 rotate-[60deg]"
>
<div className="relative flex h-16 w-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<div className="relative flex size-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<Logo className="h-8 w-8" />
</div>
</Transition>
Expand All @@ -116,7 +115,7 @@ export const ManaCore = () => {
leaveFrom="opacity-100 rotate-0"
leaveTo="opacity-0 rotate-[60deg]"
>
<div className="relative flex h-16 w-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<div className="relative flex size-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
Expand All @@ -138,7 +137,7 @@ export const ManaCore = () => {
leaveFrom="opacity-100 rotate-0"
leaveTo="opacity-0 rotate-[60deg]"
>
<div className="relative flex h-16 w-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<div className="relative flex size-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
Expand All @@ -162,7 +161,7 @@ export const ManaCore = () => {
leaveFrom="opacity-100 rotate-0"
leaveTo="opacity-0 rotate-[60deg]"
>
<div className="relative flex h-16 w-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<div className="relative flex size-16 -rotate-[14deg] items-center justify-center rounded-2xl border border-transparent shadow-2xl [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] before:absolute before:inset-0 before:rounded-2xl before:bg-slate-800/30">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
Expand Down
8 changes: 2 additions & 6 deletions app/routes/_site+/c_+/$collectionId/_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Image } from "~/components/Image";
import { Input } from "~/components/Input";
import { AdminOrStaffOrOwner } from "~/routes/_auth+/components/AdminOrStaffOrOwner";
import { getSiteSlug } from "~/routes/_site+/_utils/getSiteSlug.server";
import { apiDBPath } from "~/utils/api-path.server";
import { isAdding } from "~/utils/form";
import { useSiteLoaderData } from "~/utils/useSiteLoaderData";

Expand Down Expand Up @@ -93,7 +94,6 @@ export default function CollectionList() {
}, [addingUpdate, zoEntry.refObject]);

//Get root domain from full domain url
let customDomainHostname = site?.domain?.split(".").slice(-2).join(".");

return (
<List>
Expand All @@ -107,11 +107,7 @@ export default function CollectionList() {
color="blue"
target="_blank"
className="text-sm"
href={`https://${site.slug}-db.${
customDomainHostname
? customDomainHostname
: "mana.wiki"
}/admin/collections/${collection?.slug}/create`}
href={`https://${site.slug}-db.${apiDBPath}/admin/collections/${collection?.slug}/create`}
>
{addingUpdate ? (
<Icon
Expand Down
1 change: 1 addition & 0 deletions app/routes/_site+/c_+/$collectionId_.$entryId/components/Section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

export type SubSectionType = {
id: string;
slug: string;
name?: string;
type: "editor" | "customTemplate" | "qna" | "comments";
};
Expand Down
6 changes: 3 additions & 3 deletions app/routes/_site+/c_+/$collectionId_.$entryId/components/SubSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ function CustomTemplateSection({
data: unknown;
}) {
if (
subSection?.id &&
subSection?.slug &&
customComponents &&
Object.keys(customComponents).includes(subSection?.id)
Object.keys(customComponents).includes(subSection?.slug)
) {
//@ts-ignore
const CustomComponentView = customComponents[subSection?.id];
const CustomComponentView = customComponents[subSection?.slug];

return <CustomComponentView data={data} />;
}
Expand Down
21 changes: 4 additions & 17 deletions app/routes/_site+/c_+/_components/CollectionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,6 @@ export function CollectionHeader({

const [isSectionsOpen, setSectionsOpen] = useState<boolean>(false);

//Get root domain from full domain url
let customDomainHostname = site?.domain?.split(".").slice(-2).join(".");

return (
<div className="bg-gradient-to-t from-white to-zinc-100 dark:from-dark350 dark:to-bg3Dark relative">
<div className="pt-[61px] laptop:pt-0 z-20 relative">
Expand Down Expand Up @@ -107,13 +104,7 @@ export function CollectionHeader({
className="size-8 !p-0"
color="violet"
target="_blank"
href={`https://${site.slug}-db.${
customDomainHostname
? customDomainHostname
: "mana.wiki"
}/admin/collections/${collection.slug}/${
entry.id
}`}
href={`https://${site.slug}-db.mana.wiki/admin/collections/${collection.slug}/${entry.id}`}
>
<Icon
title="Edit"
Expand Down Expand Up @@ -192,11 +183,9 @@ export function CollectionHeader({
src={collection?.icon?.url}
className="size-6 dark:!bg-zinc-800/30"
initials={
entry?.icon?.url || collection?.icon?.url
collection?.icon?.url
? undefined
: isEntry
? entryName?.charAt(0)
: collectionName.charAt(0)
: collectionName.charAt(0)
}
options="aspect_ratio=1:1&height=80&width=80"
/>
Expand All @@ -220,9 +209,7 @@ export function CollectionHeader({
initials={
row?.icon?.url
? undefined
: isEntry
? entryName?.charAt(0)
: collectionName.charAt(0)
: row.name?.charAt(0)
}
options="aspect_ratio=1:1&height=80&width=80"
/>
Expand Down
19 changes: 9 additions & 10 deletions app/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,16 @@ html.dark {
}

@layer components {
audio::-webkit-media-controls-panel {
@apply bg-zinc-200;
}

audio {
@apply h-6 w-full;
}

input[type="range"] {
@apply appearance-none bg-transparent;
@apply appearance-none bg-transparent !border-0;
}

input[type="range"]::-webkit-slider-runnable-track {
Expand All @@ -69,15 +77,6 @@ html.dark {
input[type="range"]::-ms-track {
@apply bg-zinc-200 dark:bg-dark500 rounded-full;
}
.input-text {
@apply border-color
focus:bg-2
bg-3
mt-1
block h-11 w-full
rounded-md border focus:border-zinc-200
focus:ring-0 dark:placeholder:text-zinc-300 focus:dark:border-zinc-700;
}
.divide-color {
@apply divide-[#ededed] dark:divide-[#36393e];
}
Expand Down

0 comments on commit 0a0f699

Please sign in to comment.