From f35bb1d8dda5fa5d344d22c6ee5db4b5f7b4d490 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Fri, 10 Jan 2025 10:16:10 +0300 Subject: [PATCH] Feat: updated images styles --- bun.lockb | Bin 111017 -> 122841 bytes package.json | 1 + src/{App.css => App.scss} | 0 src/App.tsx | 3 ++- src/components/Image.scss | 5 +++++ src/components/Image.tsx | 9 +++++---- src/components/Tier.tsx | 17 +++++++++++++---- src/{index.css => index.scss} | 0 src/main.tsx | 2 +- vite.config.ts | 9 ++++++--- 10 files changed, 33 insertions(+), 13 deletions(-) rename src/{App.css => App.scss} (100%) create mode 100644 src/components/Image.scss rename src/{index.css => index.scss} (100%) diff --git a/bun.lockb b/bun.lockb index 9b061fb4b96bdf749ef533912a4a9fd6af21eadb..f1c32c9800225af39d85d8a69ad16450d4ae9155 100755 GIT binary patch delta 15425 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 delta 7887 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 Dt~(Z& diff --git a/package.json b/package.json index 22c7a7a..2646e71 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", "postcss": "^8.4.49", + "sass-embedded": "^1.83.1", "tailwindcss": "^3.4.17", "typescript": "~5.6.2", "typescript-eslint": "^8.18.2", diff --git a/src/App.css b/src/App.scss similarity index 100% rename from src/App.css rename to src/App.scss diff --git a/src/App.tsx b/src/App.tsx index 2440422..6e16f8a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import './App.css'; +import './App.scss'; import { TierImage } from './components/Image'; import { Tier, TierProps } from './components/Tier'; import { useAppDispatch, useAppSelector } from './hooks'; @@ -79,6 +79,7 @@ function App() { name='imageUpload' accept='.jpeg' ref={uploadBtn} + multiple style={{ display: 'none' }} onChange={event => { console.log(event.target.files); diff --git a/src/components/Image.scss b/src/components/Image.scss new file mode 100644 index 0000000..7db6083 --- /dev/null +++ b/src/components/Image.scss @@ -0,0 +1,5 @@ +.anime-container:hover { + .anime-name { + opacity: 100; + } +} \ No newline at end of file diff --git a/src/components/Image.tsx b/src/components/Image.tsx index 6958a1c..e9ea963 100644 --- a/src/components/Image.tsx +++ b/src/components/Image.tsx @@ -1,4 +1,5 @@ import { tierImage } from '../store'; +import './Image.scss'; interface ImageProps { image: tierImage; onDragStart?: () => void; @@ -7,16 +8,16 @@ interface ImageProps { export const TierImage = ({ image, onDragStart }: ImageProps) => { return (
{ // e.preventDefault(); if (onDragStart) onDragStart(); }} > -
+
{image.name} -
- {image.name} +
+ {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx index b96189d..c1fdef3 100644 --- a/src/components/Tier.tsx +++ b/src/components/Tier.tsx @@ -35,6 +35,7 @@ export const Tier = ({ color, name, textColor }: TierProps) => { } const [currentDragImage, setCurrentDragImage] = useState(null); + const [currentDragTier, setCurrentDragTier] = useState(''); const onDragStart = (image: tierImage) => { setCurrentDragImage(image); @@ -43,15 +44,23 @@ export const Tier = ({ color, name, textColor }: TierProps) => { return ( <>
{ // e.preventDefault(); - if (currentDragImage) dispatch(changeTierImage(currentDragImage)); + if (currentDragImage) { + if (currentDragImage.category === name) return; + console.log(currentDragImage); + console.log(name); + dispatch(changeTierImage({ ...currentDragImage, category: name })); + } setCurrentDragImage(null); }} + onDragOver={() => { + if (currentDragTier !== name) setCurrentDragTier(name); + }} >
{ >

{name}

-
+
{tierImages .filter(image => image.category === name) .map((image, index) => ( diff --git a/src/index.css b/src/index.scss similarity index 100% rename from src/index.css rename to src/index.scss diff --git a/src/main.tsx b/src/main.tsx index dbac8e5..aa8806a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import App from './App.tsx'; -import './index.css'; +import './index.scss'; import store from './store.ts'; createRoot(document.getElementById('root')!).render( diff --git a/vite.config.ts b/vite.config.ts index 2328e17..7a00916 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,10 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import react from '@vitejs/plugin-react-swc'; +import { defineConfig } from 'vite'; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], -}) + define: { + 'process.env': {}, + }, +});