skills/civitai__civitai
1
0
Fork 0
mirror of https://github.com/civitai/civitai.git synced 2026-09-20 22:08:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

added tailwind eslint config

Browse Source
This commit is contained in:
Briant Diehl
2024-05-16 16:46:10 -06:00
parent aca9ce9bbf
commit 07c125d147
8 changed files with 1562 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+1
View File
@@ -12,6 +12,7 @@ module.exports = {
'next/core-web-vitals',
// 'plugin:@next/next/recommended',
'plugin:@typescript-eslint/recommended',
"plugin:tailwindcss/recommended",
// 'plugin:import/recommended',
// 'plugin:import/typescript',
'prettier',
.prettierrc
+1 -1
View File
@@ -3,4 +3,4 @@
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true
}
}
package-lock.json
Generated
+1524 -398
View File
File diff suppressed because it is too large Load Diff
package.json
+5 -3
View File
@@ -222,6 +222,7 @@
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.17",
"cssnano": "^7.0.1",
"eslint": "8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
@@ -231,8 +232,9 @@
"eslint-import-resolver-typescript": "^3.5.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"postcss": "^8.4.35",
"prettier": "^2.6.2",
"eslint-plugin-tailwindcss": "^3.15.1",
"postcss": "^8.4.38",
"prettier": "^2.8.8",
"prisma": "^5.9.1",
"tailwindcss": "^3.4.1",
"ts-node": "^10.9.1",
@@ -241,4 +243,4 @@
"ct3aMetadata": {
"initVersion": "6.2.1"
}
}
}
postcss.config.js
+1
View File
@@ -2,5 +2,6 @@ module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
},
}
src/components/Image/DetailV2/ImageDetail2.tsx
+11 -11
View File
@@ -175,18 +175,18 @@ export function ImageDetail2() {
deIndex={nsfw || !!image.needsReview || image.availability === Availability.Unsearchable}
/>
<TrackView entityId={image.id} entityType="Image" type="ImageView" nsfw={nsfw} />
<div className="h-full w-full max-w-full max-h-full flex bg-gray-2 dark:bg-dark-9 relative overflow-hidden">
<div className="flex-1 flex flex-col relative @max-md:pb-[60px]">
<div className="relative flex size-full max-h-full max-w-full overflow-hidden bg-gray-2 dark:bg-dark-9">
<div className="relative flex flex-1 flex-col @max-md:pb-[60px]">
<ImageGuard2 image={image} explain={false}>
{(safe) => (
<>
{/* HEADER */}
<div className="flex justify-between gap-8 p-3">
<CloseButton onClick={close} variant="filled" className="h-9 w-9 rounded-full" />
<div className="flex flex-wrap justify-between gap-1 flex-1">
<CloseButton onClick={close} variant="filled" className="size-9 rounded-full" />
<div className="flex flex-1 flex-wrap justify-between gap-1">
{/* Placeholder */}
<div className="@md:hidden" />
<div className="@max-md:hidden flex gap-1">
<div className="flex gap-1 @max-md:hidden">
<ImageGuard2.BlurToggle {...sharedBadgeProps} alwaysVisible />
{LeftImageControls}
</div>
@@ -224,7 +224,7 @@ export function ImageDetail2() {
</ImageContextMenu>
</div>
</div>
<div className={`@max-md:hidden ${sidebarOpen ? 'ml-3 -mr-3' : ''}`}>
<div className={`@max-md:hidden ${sidebarOpen ? '-mr-3 ml-3' : ''}`}>
<ActionIcon {...sharedActionIconProps} onClick={handleSidebarToggle}>
<IconLayoutSidebarRight {...sharedIconProps} />
</ActionIcon>
@@ -279,15 +279,15 @@ export function ImageDetail2() {
!active ? '@max-md:translate-y-[calc(100%-60px)]' : '@max-md:transition-transform'
} @md:w-[450px] @md:min-w-[450px] ${
!sidebarOpen ? '@md:hidden' : ''
} bg-gray-2 dark:bg-dark-9 flex flex-col z-10`}
} z-10 flex flex-col bg-gray-2 dark:bg-dark-9`}
>
<div className="@md:hidden p-3 @max-md:shadow-topper rounded-md flex justify-between items-center">
<div className="@max-md:shadow-topper flex items-center justify-between rounded-md p-3 @md:hidden">
<div className="flex gap-1">{LeftImageControls}</div>
<ActionIcon {...sharedActionIconProps} onClick={toggleInfo}>
<IconChevron {...sharedIconProps} />
</ActionIcon>
</div>
<ScrollArea className="p-3 py-0 flex-1">
<ScrollArea className="flex-1 p-3 py-0">
<div className="flex flex-col gap-3 py-3 @max-md:pt-0">
<SmartCreatorCard
user={image.user}
@@ -325,8 +325,8 @@ export function ImageDetail2() {
collapsible
nsfwLevel={image.nsfwLevel}
/>
<Card className="rounded-xl flex flex-col gap-3">
<Text className="flex items-center gap-2 font-semibold text-xl">
<Card className="flex flex-col gap-3 rounded-xl">
<Text className="flex items-center gap-2 text-xl font-semibold">
<IconBrandWechat />
<span>Discussion</span>
</Text>
src/components/Post/EditV2/PostImageCards/AddedImage.tsx
+18 -18
View File
@@ -161,7 +161,7 @@ export function AddedImage({ image }: { image: PostEditImageDetail }) {
toggleHidePrompt,
}}
>
<div className="bg-gray-0 dark:bg-dark-8 border border-gray-1 dark:border-dark-6 rounded-lg overflow-hidden">
<div className="overflow-hidden rounded-lg border border-gray-1 bg-gray-0 dark:border-dark-6 dark:bg-dark-8">
{showPreview ? <Preview /> : <EditDetail />}
</div>
</AddedImageContext.Provider>
@@ -216,8 +216,8 @@ function EditDetail() {
const hasSimpleMeta = !!simpleMeta.length;
return (
<div className="@container relative">
<div className={`p-3 flex flex-col gap-3 ${!showPreview ? '@sm:p-6 @sm:gap-4' : ''}`}>
<div className="relative @container">
<div className={`flex flex-col gap-3 p-3 ${!showPreview ? '@sm:gap-4 @sm:p-6' : ''}`}>
<LoadingOverlay visible={isDeleting} />
<div
className={`flex flex-row-reverse flex-wrap gap-3 ${
@@ -228,11 +228,11 @@ function EditDetail() {
// #region [image]
*/}
{(!showPreview || hasSimpleMeta) && (
<div className={`flex flex-col gap-3 w-full ${!showPreview ? '@sm:w-4/12' : ''}`}>
<div className={`flex w-full flex-col gap-3 ${!showPreview ? '@sm:w-4/12' : ''}`}>
{!showPreview && <PostImage />}
{hasSimpleMeta && (
<>
<div className="flex flex-col not-last:*:border-b *:border-gray-4 dark:*:border-dark-4">
<div className="flex flex-col *:border-gray-4 not-last:*:border-b dark:*:border-dark-4">
{simpleMeta.map(([key, label]) => (
<div key={key} className="flex justify-between py-0.5">
<Text>{label}</Text>
@@ -262,7 +262,7 @@ function EditDetail() {
)}
{/* #endregion */}
<div className={`flex flex-col gap-3 w-full flex-1 ${!showPreview ? '@sm:gap-4' : ''}`}>
<div className={`flex w-full flex-1 flex-col gap-3 ${!showPreview ? '@sm:gap-4' : ''}`}>
{/*
// #region [TOS Violation]
*/}
@@ -274,7 +274,7 @@ function EditDetail() {
*/}
<CustomCard className="flex flex-col gap-3">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<h3 className=" text-lg font-semibold leading-none text-dark-7 dark:text-gray-0">
Prompt
</h3>
@@ -308,7 +308,7 @@ function EditDetail() {
)}
</div>
{meta?.prompt && (
<Text className={`leading-5 line-clamp-3 ${hideMeta ? 'opacity-20' : ''}`}>
<Text className={`line-clamp-3 leading-5 ${hideMeta ? 'opacity-20' : ''}`}>
{meta.prompt}
</Text>
)}
@@ -316,13 +316,13 @@ function EditDetail() {
<>
<Divider />
<h3
className={`text-md leading-none text-dark-7 dark:text-gray-0 ${
className={`leading-none text-dark-7 dark:text-gray-0 ${
hideMeta ? 'opacity-20' : ''
}`}
>
Negative Prompt
</h3>
<Text className={`leading-5 line-clamp-3 ${hideMeta ? 'opacity-20' : ''}`}>
<Text className={`line-clamp-3 leading-5 ${hideMeta ? 'opacity-20' : ''}`}>
{meta.negativePrompt}
</Text>
</>
@@ -355,7 +355,7 @@ function EditDetail() {
.filter((x) => !!x.modelName)
.slice(0, !showMoreResources ? 3 : resources.length)
.map((resource, i) => (
<div key={i} className="flex justify-between items-center gap-3">
<div key={i} className="flex items-center justify-between gap-3">
<Text>
{resource.modelName} - {resource.modelType}
</Text>
@@ -436,7 +436,7 @@ function EditDetail() {
*/}
<CustomCard className="flex flex-col gap-2">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className=" text-lg font-semibold leading-none text-dark-7 dark:text-gray-0 ">
Tools
@@ -485,7 +485,7 @@ function EditDetail() {
*/}
<CustomCard className="flex flex-col gap-2">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className=" text-lg font-semibold leading-none text-dark-7 dark:text-gray-0 ">
Techniques
@@ -554,7 +554,7 @@ function EditDetail() {
color="yellow"
w="100%"
radius={0}
className="p-2 rounded-lg"
className="rounded-lg p-2"
classNames={{ message: 'flex items-center justify-center gap-2' }}
>
<Loader size="xs" />
@@ -574,7 +574,7 @@ function PostImage() {
return (
<div className={`relative`}>
<div
className="flex-1 flex mx-auto"
className="mx-auto flex flex-1"
style={{
// TODO - db/code cleanup - ideally we only use metadata to get dimensions in future
aspectRatio: `${metadata?.width ?? 1}/${metadata?.height ?? 1}`,
@@ -588,7 +588,7 @@ function PostImage() {
className={showPreview ? 'rounded-none' : 'rounded-lg'}
/>
</div>
<div className="absolute top-0 left-0 right-0 h-12 z-10 bg-gradient-to-b from-black opacity-25" />
<div className="absolute inset-x-0 top-0 z-10 h-12 bg-gradient-to-b from-black opacity-25" />
{!!nsfwLevel && (
<BrowsingLevelBadge
browsingLevel={nsfwLevel}
@@ -596,10 +596,10 @@ function PostImage() {
onClick={
!isBlocked ? () => openSetBrowsingLevelModal({ imageId: id, nsfwLevel }) : undefined
}
className={`absolute top-2 left-2 z-20 ${!isBlocked ? 'cursor-pointer' : ''}`}
className={`absolute left-2 top-2 z-20 ${!isBlocked ? 'cursor-pointer' : ''}`}
/>
)}
<div className="absolute top-2 right-2 z-20 flex gap-1">
<div className="absolute right-2 top-2 z-20 flex gap-1">
<Menu withArrow position="bottom-end">
<Menu.Target>
<ActionIcon>
tailwind.config.js
+1
View File
@@ -124,6 +124,7 @@ module.exports = {
})
})
}),
// ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
],
}