Skip to content

Commit

Permalink
responsive et css
Browse files Browse the repository at this point in the history
  • Loading branch information
JulienBenoit7 committed Dec 12, 2024
1 parent f5fb816 commit 7bf2b35
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 32 deletions.
1 change: 1 addition & 0 deletions frontend/src/components/DeleteArticleButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ function DeleteProductButton({ articleId }: { articleId: string }) {
title="Supprimer cet article ? "
description="Toutes les données le concernant seront perdues."
okText="Oui"
className="bg-red-500 text-white hover:bg-red-600 focus:outline-none"
cancelText="Non"
onConfirm={() =>
deleteArticle({
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/DeleteProductButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ function DeleteProductButton({ productId }: { productId: string }) {
})
}
>
<Button>Supprimer</Button>
<Button className="bg-red-500 text-white hover:bg-red-600 focus:outline-none">
Supprimer
</Button>
</Popconfirm>
);
}
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/components/EditProduct/EditProductRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ function EditProductRow({ product }: EditProductRowProps) {

return (
<>
<Button onClick={() => setIsModalOpen(true)}>Modifier</Button>
<Button
onClick={() => setIsModalOpen(true)}
className="bg-blue-500 text-white hover:bg-blue-600 focus:outline-none"
>
Modifier
</Button>
<EditProductModal
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
Expand Down
124 changes: 98 additions & 26 deletions frontend/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,46 +32,52 @@ function Navbar() {
];

const onSearch = (value?: string) => {
if (value) {
navigate(`/search/${value}`)
if (value) {
navigate(`/search/${value}`);
} else {
navigate("/search")
navigate("/search");
}
}
};

const showDrawer = () => setVisible(true)
const onClose = () => setVisible(false)
const showDrawer = () => setVisible(true);
const onClose = () => setVisible(false);

return (
<Header className="p-4 bg-lightBlue h-1/4">
<div className="flex justify-between items-center">
<Link to="/">
<Link to="/" className="md:mx-0 mx-auto">
<img src={Logo} alt="Wildrent Logo" className="h-12" />
</Link>

<div className="flex flex-col justify-center gap-2">
<Search
className="max-w-96"
className="max-w-96 hidden md:block"
placeholder="Rechercher un produit"
onSearch={onSearch}
enterButton={
<Button
className="bg-blue-900 text-white"
onMouseEnter={(e) => e.currentTarget.classList.add("bg-orange-600")}
onMouseLeave={(e) => e.currentTarget.classList.remove("bg-orange-600")}
onMouseEnter={(e) =>
e.currentTarget.classList.add("bg-orange-600")
}
onMouseLeave={(e) =>
e.currentTarget.classList.remove("bg-orange-600")
}
>
{visible ? "Rechercher" : <SearchOutlined />}
</Button>
<SearchOutlined />
</Button>
}
/>
<RangePicker onSearch={onSearch} />
<div className="max-w-full hidden md:block">
<RangePicker onSearch={onSearch} />
</div>
</div>

<div className="hidden md:flex items-center space-x-4">
{userInfo.isLoggedIn && (
<>
<p className="text-blue-900 font-medium text-lg">
Bonjour, {userInfo.firstname}
{userInfo.firstname} {userInfo.lastname}
</p>
<Link
to={userInfo.role === Role.Admin ? "/admin" : "/profile"}
Expand All @@ -85,26 +91,24 @@ function Navbar() {
<ShoppingCartOutlined className="text-lg" />
</Link>
{userInfo.isLoggedIn ? (
<Button
type="link"
<Link
to="/"
className="text-blue-900 font-medium"
onClick={() => {
logout({
onCompleted: () => {
userInfo.refetch();
message.success("Déconnexion réussie !");
navigate("/");
},
});
onClose();
}}
className="text-blue-900"
>
<LogoutOutlined className="text-lg" />
</Button>
<LogoutOutlined />
</Link>
) : (
<Link to="/login">
<Button type="link" className="text-blue-900">
<PoweroffOutlined className="text-lg" />
</Button>
<Link to="/login" className="text-blue-900">
<PoweroffOutlined className="text-lg" />
</Link>
)}
</div>
Expand All @@ -129,12 +133,81 @@ function Navbar() {
</div>

<Drawer
title="Menu"
title="Menu Wildrent"
placement="right"
onClose={onClose}
visible={visible}
className="text-blue-900 w-full md:w-80"
>
<div className="flex flex-col space-y-4">
<Search
className="max-w-full"
placeholder="Rechercher un produit"
onSearch={onSearch}
enterButton={
<Button
className="bg-blue-900 text-white"
onMouseEnter={(e) =>
e.currentTarget.classList.add("bg-orange-600")
}
onMouseLeave={(e) =>
e.currentTarget.classList.remove("bg-orange-600")
}
>
<SearchOutlined />
</Button>
}
/>
<div className="w-full h-auto w-auto">
<RangePicker onSearch={onSearch} />
</div>
{userInfo.isLoggedIn && (
<p className="text-blue-900 font-medium text-lg">
{userInfo.firstname} {userInfo.lastname}
</p>
)}
{userInfo.isLoggedIn && (
<Link
to={userInfo.role === Role.Admin ? "/admin" : "/profile"}
className="text-blue-900 font-medium"
onClick={onClose}
>
<UserOutlined /> Espace personnel
</Link>
)}
<Link
to="/cart"
className="text-blue-900 font-medium"
onClick={onClose}
>
<ShoppingCartOutlined /> Panier
</Link>
{userInfo.isLoggedIn ? (
<Link
to="/"
className="text-blue-900 font-medium"
onClick={() => {
logout({
onCompleted: () => {
userInfo.refetch();
message.success("Déconnexion réussie !");
},
});
onClose();
}}
>
<LogoutOutlined /> Déconnexion
</Link>
) : (
<Link
to="/login"
onClick={onClose}
className="text-blue-900 font-medium"
>
<PoweroffOutlined /> Connexion
</Link>
)}
<hr />
{categories.map((category) => (
<Link
key={category.name}
Expand All @@ -144,7 +217,6 @@ function Navbar() {
>
{category.name}
</Link>
//TO DO ajouter liens panier , admin etc
))}
</div>
</Drawer>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/pages/Admin.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Tabs, TabsProps, Typography } from "antd";
import { Tabs, Typography } from "antd";
import NewProduct from "./NewProduct";
import NewArticle from "./NewArticle";
import { useMediaQuery } from "react-responsive";
Expand All @@ -8,7 +8,7 @@ const { Title } = Typography;
function Admin() {
const isMobile = useMediaQuery({ maxWidth: 640 });

const items: TabsProps["items"] = [
const items = [
{
key: "1",
label: "Gérer les produits",
Expand All @@ -27,17 +27,18 @@ function Admin() {
];

return (
<div className="p-5">
<div className="min-h-screen p-4 md:p-8 max-w-screen-lg mx-auto">
<Title level={2} className="text-center mb-6">
Interface administrateur
</Title>
<Tabs
type="card"
tabPosition={isMobile ? "left" : "top"}
tabPosition={isMobile ? "top" : "top"}
defaultActiveKey="1"
items={items}
className="shadow-lg rounded-md"
/>
<div className="pt-12" />
</div>
);
}
Expand Down

0 comments on commit 7bf2b35

Please sign in to comment.