From 163865d27da1e893094beff875e5320570c0a9ad Mon Sep 17 00:00:00 2001 From: Theo DUPIN Date: Mon, 14 Nov 2022 18:32:25 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=C3=A9v=C3=A8nement=20bouton=20ajouter=20ph?= =?UTF-8?q?oto=20page=20Compte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Compte.js | 31 ++++++++++++++++++++++++++++-- src/styles/components/_compte.scss | 18 ++++++++++++++++- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/src/pages/Compte.js b/src/pages/Compte.js index e6674d7..54d85fd 100644 --- a/src/pages/Compte.js +++ b/src/pages/Compte.js @@ -2,6 +2,7 @@ import React from 'react'; import NavigationDashboard from '../components/NavigationDashboard'; + const Compte = () => { return ( @@ -27,9 +28,9 @@ const Compte = () => {
- +
- +
@@ -75,8 +76,34 @@ const Compte = () => {
+ ); }; +let fileUpload = document.getElementById("fileUpload"); +let display_image = document.getElementById("display_image"); + +preview(); + +function preview(){ + display_image.innerHTML = ""; + + for(fileUpload of fileUpload.files){ + let reader = new FileReader(); + let figure = document.createElement("figure"); + let figCap = document.createElement("figcaption"); + figCap.innerText = fileUpload.name; + figure.appendChild(figCap); + reader.onload=()=>{ + let img = document.createElement("img"); + img.setAttribute("src", reader.result); + figure.insertBefore(img,figCap); + } + display_image.appendChild(figure); + reader.readAsDataURL(fileUpload); + } +} + + export default Compte; \ No newline at end of file diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss index d9177a7..0ba15bb 100644 --- a/src/styles/components/_compte.scss +++ b/src/styles/components/_compte.scss @@ -162,11 +162,26 @@ body { margin-left: 25px; border-bottom: 1px solid grey; - .photo_profil { + #display_image { display: flex; + margin-bottom: 5px; height: 135px; width: 135px; + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); } + + .figure{ + width: 45%; + } + + .img{ + width: 100%; + } + .bouton_submit { display: flex; @@ -232,6 +247,7 @@ body { } } + .infoPerso { display: flex; flex-direction: column; From 04a65783724e23edbb0fa5c187e9a5ccc43b839a Mon Sep 17 00:00:00 2001 From: clverdoire Date: Tue, 15 Nov 2022 08:24:19 +0100 Subject: [PATCH 2/2] =?UTF-8?q?Changements=20pages=20param=C3=AAtre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NavigationDashboard.js | 2 +- src/pages/Parametres.js | 10 +++++++++- src/styles/components/_parametre.scss | 15 +++++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/NavigationDashboard.js b/src/components/NavigationDashboard.js index 4a0f85a..b5d78fa 100644 --- a/src/components/NavigationDashboard.js +++ b/src/components/NavigationDashboard.js @@ -8,7 +8,7 @@ const NavigationDashboard = () => {
diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js index 3f10057..937f8f1 100644 --- a/src/pages/Parametres.js +++ b/src/pages/Parametres.js @@ -43,7 +43,15 @@ const Parametre = () => {
- coucou +
+ coucou +
+
+

Mode sombre

+
+ +
+
coucou diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss index 7e47492..da2cf82 100644 --- a/src/styles/components/_parametre.scss +++ b/src/styles/components/_parametre.scss @@ -218,8 +218,11 @@ body { .two { display: flex; + flex-direction: column; + justify-content: space-between; width: auto; height: 28.5%; + padding: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 15px; @@ -227,6 +230,18 @@ body { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(15px); + .two_haut { + display: flex; + height: 75%; + } + + .two_bas { + display: flex; + flex-direction: row; + padding: 9px; + height: 25%; + + } } .three {