IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

css correcte
continuous-integration/drone/push Build is failing Details

Browse Source
d_yanis 1 year ago
parent 09a387f472
commit c87c86f7a6
9 changed files with 27 additions and 66 deletions
Show Stats Download Patch File Download Diff File

9
front/style/template/header.css → front/style/component/header.css
Unescape View File

@ -1,3 +1,5 @@
@import url("./main_title.css");
:root { :root {
--height-header : 110px; --height-header : 110px;
} }
@ -6,11 +8,9 @@
text-align: center; text-align: center;
background-color: var(--main-color); background-color: var(--main-color);
margin: 0px; margin: 0px;
/* border : var(--accent-color) 1px solid; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-family: var(--font-title); font-family: var(--font-title);
/* border-radius: 0.75cap; */
padding-left : 1%; padding-left : 1%;
padding-right: 1%; padding-right: 1%;
height: var(--height-header); height: var(--height-header);
@ -18,16 +18,15 @@
#header-center { #header-center {
width: 80%; width: 80%;
/* border : yellow 1px solid; */
padding : 0px; padding : 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} }
#header-right, #header-right,
#header-left { #header-left {
width: 10%; width: 10%;
/* border: yellow 2px solid; */
} }
#header-right { #header-right {
@ -44,7 +43,6 @@
#img-account { #img-account {
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
/* border : 1px red solid; */
} }
#username { #username {
@ -74,7 +72,6 @@
color: var(--accent-color); color: var(--accent-color);
font-weight: bold; font-weight: bold;
font-size: 45px; font-size: 45px;
/* border: red 1px solid; */
width: fit-content; width: fit-content;
text-align: center; text-align: center;
} }

1
front/style/component/main_title.css
Unescape View File

@ -2,7 +2,6 @@
.main-title h2 { .main-title h2 {
text-align: center; text-align: center;
/* font-weight: bold; */
} }
.title { .title {

8
front/style/home/home.css
Unescape View File

@ -1,15 +1,9 @@
@import url(../theme/dark.css); @import url(../theme/dark.css);
@import url(personnal_space.css); @import url(personnal_space.css);
@import url(side_menu.css); @import url(side_menu.css);
@import url(../template/header.css); @import url(../component/header.css);
body {
/* background-color: #303030; */
}
#main { #main {
/* margin-left : 10%;
margin-right: 10%; */
/* border : solid 1px #303030; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: var(--font-content); font-family: var(--font-content);

3
front/style/home/personnal_space.css
Unescape View File

@ -1,4 +1,4 @@
@import url(../component/main_title.css); @import url(../component/header.css);
#personal-space { #personal-space {
display: flex; display: flex;
@ -7,7 +7,6 @@
#body-personal-space { #body-personal-space {
width: 95%; width: 95%;
/* background-color: #ccc2b7; */
border: 3px var(--main-color) solid; border: 3px var(--main-color) solid;
border-radius: 0.5cap; border-radius: 0.5cap;
align-self: center; align-self: center;

13
front/style/settings/settings.css
Unescape View File

@ -1,10 +1,8 @@
@import url(../template/header.css); @import url(../component/header.css);
@import url(../theme/dark.css); @import url(../theme/dark.css);
@import url(../component/main_title.css);
#body { #body {
background-color: var(--second-color); background-color: var(--second-color);
/* border: 1px solid red; */
width: 100%; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -13,8 +11,8 @@
#content { #content {
width: 85%; width: 85%;
/* border: 1px yellow solid; */
height: 100%; height: 100%;
padding-top : 20px;
} }
.content { .content {
@ -25,3 +23,10 @@
width: 50%; width: 50%;
padding-left : 5%; padding-left : 5%;
} }
#img {
display: flex;
justify-content: center;
width: 100%;
padding-bottom : 10px;
}

2
front/views/Home.tsx
Unescape View File

@ -95,8 +95,6 @@ function PersonalSpace({
) )
} }
function TableData({ allTactics }: { allTactics: Tactic[] }) { function TableData({ allTactics }: { allTactics: Tactic[] }) {
const nbRow = Math.floor(allTactics.length / 3) + 1 const nbRow = Math.floor(allTactics.length / 3) + 1
let listTactic = Array(nbRow) let listTactic = Array(nbRow)

49
front/views/Settings.tsx
Unescape View File

@ -1,5 +1,5 @@
import { BASE } from "../Constants"
import "../style/settings/settings.css" import "../style/settings/settings.css"
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import { MainTitle, SecondTitle } from "./component/Title" import { MainTitle, SecondTitle } from "./component/Title"
import { Header } from './template/Header' import { Header } from './template/Header'
@ -11,16 +11,11 @@ import Image from 'react-bootstrap/Image';
import Container from 'react-bootstrap/Container' import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';
import { updateSourceFile } from "typescript";
import { fetchAPI } from "../Fetcher"; import { fetchAPI } from "../Fetcher";
import { fetchPOST } from "../Fetcher"; import { fetchPOST } from "../Fetcher";
import axios from "axios"; import axios from "axios";
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import { Stack } from "react-bootstrap"; import { Stack } from "react-bootstrap";
import * as http from 'follow-redirects/http';
import * as https from 'follow-redirects/https';
// import fetch from 'node-fetch';
export default function Settings({ user }: { user: User }) { export default function Settings({ user }: { user: User }) {
return ( return (
@ -28,14 +23,14 @@ export default function Settings({ user }: { user: User }) {
<Header username={user.name} /> <Header username={user.name} />
<Body user={user} /> <Body user={user} />
</div> </div>
) );
} }
function Body({ user }: { user: User }) { function Body({ user }: { user: User }) {
return ( return (
<div id="body"> <div id="body">
<div id="content"> <div id="content">
<MainTitle title="Paramètres" id={null} /> <MainTitle title="Paramètres" id="param" />
<AccountSettings user={user} /> <AccountSettings user={user} />
</div> </div>
</div> </div>
@ -55,15 +50,16 @@ function ProfilSettings({ user }: { user: User }) {
const nameRef = useRef<HTMLInputElement>(null); const nameRef = useRef<HTMLInputElement>(null);
const emailRef = useRef<HTMLInputElement>(null); const emailRef = useRef<HTMLInputElement>(null);
const [modalShow, setModalShow] = useState(false); const [modalShow, setModalShow] = useState(false);
const width = 140; const width = 150;
const profilePicture = user.profilePicture; const profilePicture = user.profilePicture;
console.log("profile :" + profilePicture);
return ( return (
<Container> <Container>
<Row> <Row>
<Col> <Col>
<Stack> <Stack>
<Image src={profilePicture} width={width} height={width} roundedCircle /> <div id="img">
<Image src={profilePicture} width={width} height={width} roundedCircle />
</div>
<Button variant="outline-primary" onClick={() => setModalShow(true)}>Changer photo de profil</Button> <Button variant="outline-primary" onClick={() => setModalShow(true)}>Changer photo de profil</Button>
<MyVerticallyCenteredModal <MyVerticallyCenteredModal
show={modalShow} show={modalShow}
@ -81,7 +77,6 @@ function ProfilSettings({ user }: { user: User }) {
<Form.Group className="mb-3" controlId="formEmail"> <Form.Group className="mb-3" controlId="formEmail">
<Form.Label className="content">Adresse mail</Form.Label> <Form.Label className="content">Adresse mail</Form.Label>
<Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" /> <Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
{/* <Form.Control readOnly onClick={() => alert("En cours de développement...")} ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" /> */}
</Form.Group> </Form.Group>
<Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value)}>Mettre à jour</Button> <Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value)}>Mettre à jour</Button>
</Form> </Form>
@ -114,7 +109,6 @@ function updateAccountPicture(lien: string) {
function MyVerticallyCenteredModal(props: any) { function MyVerticallyCenteredModal(props: any) {
const urlRef = useRef<HTMLInputElement>(null); const urlRef = useRef<HTMLInputElement>(null);
const [invalidShow, setInvalidShow] = useState(false); const [invalidShow, setInvalidShow] = useState(false);
return ( return (
<Modal <Modal
{...props} {...props}
@ -141,7 +135,6 @@ function MyVerticallyCenteredModal(props: any) {
async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.SetStateAction<boolean>>) { async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.SetStateAction<boolean>>) {
let exist = await testImage(lien); let exist = await testImage(lien);
console.log(exist);
if (exist) { if (exist) {
invalidRef(false); invalidRef(false);
updateAccountPicture(lien); updateAccountPicture(lien);
@ -154,10 +147,8 @@ async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.Se
async function testImage(lien: string) { async function testImage(lien: string) {
try { try {
const response = await axios.head(lien); const response = await axios.head(lien);
console.log(response);
// Vérifier le statut de la réponse (200 OK est considéré comme valide)
if (response.status === 200) { if (response.status === 200) {
// Vérifier le type de contenu pour s'assurer qu'il s'agit d'une image
const contentType = response.headers['content-type']; const contentType = response.headers['content-type'];
if (contentType && contentType.startsWith('image/')) { if (contentType && contentType.startsWith('image/')) {
return true; return true;
@ -169,28 +160,4 @@ async function testImage(lien: string) {
console.error("Erreur lors de la requête HEAD: ", error); console.error("Erreur lors de la requête HEAD: ", error);
return false; return false;
} }
// return true;
} }
// async function testImage(imageUrl: string) {
// try {
// const response = await axios.head(`${BASE.PROXY}?url=${encodeURIComponent(imageUrl)}`);
// console.log(response);
// // Check the response status (200 OK is considered valid)
// if (response.status === 200) {
// // Check the content type to ensure it's an image
// const contentType = response.headers['content-type'];
// if (contentType && contentType.startsWith('image/')) {
// return true;
// }
// return false;
// }
// return false;
// } catch (error) {
// console.error("Error during HEAD request: ", error);
// return false;
// }
// }

1
front/views/component/Title.tsx
Unescape View File

@ -2,6 +2,7 @@
export function MainTitle({title, id} : {title : string, id : string|null}) { export function MainTitle({title, id} : {title : string, id : string|null}) {
let titre; let titre;
console.log(id);
if (id==null){ if (id==null){
titre = <h3>{title}</h3>; titre = <h3>{title}</h3>;
} }

3
front/views/template/Header.tsx
Unescape View File

@ -1,4 +1,5 @@
import { BASE } from "../../Constants" import { BASE } from "../../Constants"
import "../../style/component/header.css"
/** /**
* *
@ -35,5 +36,5 @@ export function Header({ username }: { username: string }) {
</div> </div>
</div> </div>
</div> </div>
) );
} }

Write Preview
Loading…
Cancel
Save