planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

update cs

Browse source
This commit is contained in:
smfahim25 2025-02-03 11:14:11 +06:00
parent f88b81fb35
commit 3a07457404
16 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Layouts/LeftSidebar.jsx
View file

@ -24,7 +24,7 @@ const sidebarItems = [
export function Sidebar() {
const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
return (
<div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6">
<div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6 md:pt-16 xl:pt-0">
{sidebarItems.map((item) => {
const Icon = item.icon;
return (

2
src/components/Panel/CanvasPanel.jsx
View file

@ -19,7 +19,7 @@ const CanvasPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<CanvasSetting />
</ScrollArea>
</div>

2
src/components/Panel/ColorPanel.jsx
View file

@ -19,7 +19,7 @@ const ColorPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<ApplyColor />
</ScrollArea>
</div>

2
src/components/Panel/EditorPanel.jsx
View file

@ -50,7 +50,7 @@ const EditorPanel = () => {
return (
<>
{selectedPanel !== "" && (
<div className="w-80 lg:h-[calc(90vh-100px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
<div className="w-80 md:h-[calc(90vh-120px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
{renderPanel()}
</div>
)}

2
src/components/Panel/FlipPanel.jsx
View file

@ -22,7 +22,7 @@ const FlipPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<Card className="shadow-none border-0">
<CollapsibleComponent text={"Flip, Rotate Control"}>
<div className="space-y-2">

2
src/components/Panel/GroupObjectPanel.jsx
View file

@ -21,7 +21,7 @@ const GroupObjectPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<SelectObjectFromGroup />
{/* Skew Customization */}
<SkewCustomization />

2
src/components/Panel/IconPanel.jsx
View file

@ -20,7 +20,7 @@ const IconPanel = () => {
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<AllIconsPage />
</ScrollArea>
</div>

2
src/components/Panel/ImagePanel.jsx
View file

@ -19,7 +19,7 @@ const ImagePanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<AddImageIntoShape />
</ScrollArea>
</div>

2
src/components/Panel/PositionPanel.jsx
View file

@ -19,7 +19,7 @@ const PositionPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<PositionCustomization />
</ScrollArea>
</div>

2
src/components/Panel/ShadowPanel.jsx
View file

@ -19,7 +19,7 @@ const ShadowPanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<ShadowCustomization />
</ScrollArea>
</div>

2
src/components/Panel/ShapePanel.jsx
View file

@ -23,7 +23,7 @@ const ShapePanel = () => {
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<h2 className="font-semibold text-sm">Custom Shapes</h2>
<Separator className="my-2" />
<div className="space-y-4">

2
src/components/Panel/StrokePanel.jsx
View file

@ -19,7 +19,7 @@ const StrokePanel = () => {
<X className="h-4 w-4" />
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<StrokeCustomization />
</ScrollArea>
</div>

2
src/components/Panel/TextPanel.jsx
View file

@ -53,7 +53,7 @@ export default function TextPanel() {
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-195px)] px-4 py-4">
<Button
className="w-full bg-[#FF2B85] hover:bg-[#FF2B85] text-white rounded-[10px] mb-6 h-12 font-medium text-xl"
onClick={() => {

2
src/components/Panel/TopBar.jsx
View file

@ -27,7 +27,7 @@ export function TopBar() {
<ScrollArea
className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
selectedPanel !== ""
? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
? "md:w-[475px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
: "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
} `}
>

2
src/components/Panel/UploadPanel.jsx
View file

@ -20,7 +20,7 @@ const UploadPanel = () => {
</Button>
</div>
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
<ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
<UploadImage />
</ScrollArea>
</div>

4
tailwind.config.js
View file

@ -13,7 +13,9 @@ export default {
foreground: "hsl(var(--primary-foreground))",
},
},
screens: {
mdxl: "1100px",
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",