Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mise en commun des scrollbar,et padding des glassBorder

Browse Source
This commit is contained in:
ORDONNEAU Antoine
2026-03-26 12:16:56 +01:00
parent 3ee3bc4fb4
commit 7b174e7085
18 changed files with 37 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/Header.module.css
+3 -2
View File
@@ -150,7 +150,7 @@
.notificationDiv {
position: absolute;
width: 300px;
width: auto;
top: 105%;
right: 2rem;
opacity: 0;
@@ -159,7 +159,8 @@
z-index: 0;
max-height: 60vh;
overflow: scroll;
scrollbar-width: none;
overflow-x: hidden;
backdrop-filter: blur(10px);
}
.activeNotificationDiv {
src/components/NotificationCard/NotificationCard.jsx
+1 -1
View File
@@ -7,7 +7,7 @@ import styles from "./NotificationCard.module.css"
function NotificationCard({notifications, deleteNotification}) {
return (
notifications.map((notification, index) => (
<div className={styles.notificationCard} key={index}>
<div className={`${styles.notificationCard} glassBorder`}key={index}>
<div className={styles.cardHeader}>
<span className={styles.timeTag}>
Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
src/components/ToolBar/ToolBar.module.css
+1 -1
View File
@@ -83,7 +83,7 @@
right: 0;
align-items: flex-start;
width: 100%;
margin-top: 16px;
margin: 6px 0 16px 0;
}
.filterContainer{
src/index.css
+9 -7
View File
@@ -2,6 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-color: #b5b5b5 transparent;
}
html {
@@ -26,13 +27,6 @@ html {
inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 768px) {
.content{
padding: 0.7rem;
}
}
.content {
padding: 1.5rem;
z-index: 1;
@@ -78,6 +72,7 @@ body.dark {
}
.glassBorder{
padding: 10px 20px 10px 20px;
border-radius: 20px;
border: none;
background: rgb(255, 255, 255, 0.25);
@@ -101,3 +96,10 @@ button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media screen and (max-width: 768px) {
.content{
padding: 0.7rem;
}
}
src/pages/Admin/components/PendingMembers/PendingMembers.module.css
+1
View File
@@ -2,6 +2,7 @@
width: 100%;
}
.rightBlock > h2 {
font-size: 29px;
}
src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.module.css
-1
View File
@@ -9,7 +9,6 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.userName {
src/pages/EventDetail/components/EventTask/EventTask.module.css
-10
View File
@@ -17,16 +17,6 @@
.content {
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
border-radius: 20px;
border: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
animation-delay: calc(var(--i) * 0.1s);
}
src/pages/EventDetail/components/EventTask/EventTask.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ export default function EventTask({ task, index, eventId }: EventTaskProps) {
};
return (
<div style={{ "--i": index } as any} key={index} className={styles.content}>
<div style={{ "--i": index } as any} key={index} className={`${styles.content} glassBorder`}>
<div className={styles.task}>
<div>
<span>
src/pages/Events/components/Event/Event.module.css
-1
View File
@@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
width: 80%;
padding: 10px 20px 10px 20px;
}
.eventContainer:hover {
src/pages/Home/components/Calendar/Calendar.module.css
+1 -15
View File
@@ -114,27 +114,13 @@
list-style: none;
}
.eventGroup{
border-radius: 20px;
padding: 15px;
margin-top: 16px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
.glassCard {
width: 45%;
max-height: 90vh;
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
height: fit-content;
overflow: scroll;
overflow-x: hidden;
}
.glassCard::-webkit-scrollbar{
src/pages/Home/components/EventList/EventList.module.css
+1 -2
View File
@@ -2,9 +2,9 @@
width: 45%;
max-height: 90vh;
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
height: fit-content;
overflow: scroll;
overflow-x: hidden;
}
.glassCard::-webkit-scrollbar{
@@ -41,7 +41,6 @@ h2{
.eventGroup{
margin: 16px 0 16px 0;
padding: 10px 20px 10px 20px;
}
.eventGroup:hover{
src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export default function DeleteMemberBtn({name, id, className}: { name: string, i
}
return <div className={className}>
<Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>
<Button variant={"danger"} onClick={() => setOpen(true)}>Supprimer</Button>
<Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
src/pages/Profile/components/ManageMember/ManageMember.module.css
+1 -7
View File
@@ -27,16 +27,10 @@
.select {
width: 70%;
padding: 10px 14px;
font-size: 14px;
font-weight: 500;
color: #1d1d1f;
background-color: #ffffff;
border: 1px solid #d2d2d7;
border-radius: 10px;
background: rgb(255, 255, 255, 0.75);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
src/pages/Profile/components/ManageMember/ManageMember.tsx
+14 -13
View File
@@ -4,38 +4,39 @@ import {useContext, useState} from "react";
import styles from "./ManageMember.module.css"
import DeactivateMemberBtn from "./DeactivateMember/DeactivateMemberBtn.jsx";
import ModifyRole from "./ModifyRole/ModifyRole.jsx";
import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext.js";
import {AuthContext, AuthContextType} from "../../../../contexts/Auth/AuthContext.js";
import DeleteMemberBtn from "./DeleteMember/DeleteMemberBtn";
import User from "../../../../interfaces/user.interface";
import User from "../../../../interfaces/user.interface";
export default function ManageMember({ userToManage }: { userToManage: User }) {
export default function ManageMember({userToManage}: { userToManage: User }) {
const { user } = useContext(AuthContext) as AuthContextType;
const {user} = useContext(AuthContext) as AuthContextType;
const [open, setOpen] = useState(false);
return <>
<Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
<img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
<img src="/icons/tools.svg" alt="tools icon" className={styles.icon}/>
<p>Gérer</p>
</Button>
<Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
{(user?.id != userToManage.id) ? (
<div className={styles.manageSection}>
<h3>Désactiver le compte</h3>
<DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
<h3>Supprimer le compte</h3>
<DeleteMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
<div className={`${styles.manageSection} glassBorder`}>
<h3>Désactiver le compte</h3>
<DeactivateMemberBtn name={userToManage.name} id={userToManage.id}
className={styles.manageBlockContent}/>
<h3> Supprimer le compte</h3>
<DeleteMemberBtn name={userToManage.name} id={userToManage.id}
className={styles.manageBlockContent}/>
</div>
) : null}
<div className={styles.manageSection}>
<div className={`${styles.manageSection} glassBorder`}>
<h3>Modifier le rôle</h3>
<ModifyRole user={userToManage} />
<ModifyRole user={userToManage}/>
</div>
</Modal>
</>
src/pages/Profile/components/ManageMember/ModifyRole/ModifyRole.jsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function ModifyRole({ user }) {
<select
value={selectedRole}
onChange={(e) => setSelectedRole(e.target.value)}
className={styles.select}
className={`${styles.select} glassBorder`}
>
{roles.map((role, index) => (
<option key={index} value={index+1}>
src/pages/Profile/components/SettingsModal/SettingsModal.module.css
-1
View File
@@ -2,7 +2,6 @@
width: 100%;
display: flex;
flex-direction: column;
padding: 10px 20px 10px 20px;
gap: 20px;
}
src/pages/RGPD/RGPDPage.jsx
+1 -1
View File
@@ -4,7 +4,7 @@ import {Link} from "react-router";
export default function RGPDPage() {
return (
<div className={`${styles.RGPD} glassCard`}>
<h1> Fiche d'informatino RGPD </h1>
<h1> Fiche d'information RGPD </h1>
<section className={styles.section}>
<h2 className={styles.h2}> 1. Présentation du site </h2>
src/pages/RGPD/RGPDPage.module.css
+1 -1
View File
@@ -11,5 +11,5 @@
}
.RGPD{
margin: 16px 2em;
margin: 16px 30px 16px 30px;
}