From acaa3d2d247b927d6bcea5f13641b309ab582fa5 Mon Sep 17 00:00:00 2001 From: kinou-p Date: Sun, 12 May 2024 14:43:34 +0200 Subject: [PATCH] add phone view for project page --- my-app/package-lock.json | 20 +++++++++++++ my-app/package.json | 1 + my-app/src/components/header.tsx | 28 +++++++++++++++++++ my-app/src/components/menu | 0 my-app/src/css/mine.css | 48 ++++++++++++++++++++------------ my-app/src/css/project.css | 40 ++++++++++++++++++++++++-- 6 files changed, 116 insertions(+), 21 deletions(-) create mode 100644 my-app/src/components/menu diff --git a/my-app/package-lock.json b/my-app/package-lock.json index 0abcee1..be6cf03 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -28,6 +28,7 @@ "framer-motion": "^11.1.9", "i18next": "^23.11.4", "i18next-xhr-backend": "^3.2.2", + "material-ui-popup-state": "^5.1.0", "react": "^18.3.1", "react-bootstrap": "^2.10.2", "react-country-flag": "^3.1.0", @@ -15617,6 +15618,25 @@ "tmpl": "1.0.5" } }, + "node_modules/material-ui-popup-state": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.1.0.tgz", + "integrity": "sha512-kG0xGqdPx3WM6AYnq0h7hCb3gk2M1FM/G/NFQN+HahcyABxCx3EFzLj5mdJICu2NYj0etZ2s7VDhAbrAezkxYg==", + "dependencies": { + "@babel/runtime": "^7.20.6", + "@types/prop-types": "^15.7.3", + "@types/react": "^18.0.26", + "classnames": "^2.2.6", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", diff --git a/my-app/package.json b/my-app/package.json index c23dae6..3771e64 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -23,6 +23,7 @@ "framer-motion": "^11.1.9", "i18next": "^23.11.4", "i18next-xhr-backend": "^3.2.2", + "material-ui-popup-state": "^5.1.0", "react": "^18.3.1", "react-bootstrap": "^2.10.2", "react-country-flag": "^3.1.0", diff --git a/my-app/src/components/header.tsx b/my-app/src/components/header.tsx index dcd5d42..5786744 100644 --- a/my-app/src/components/header.tsx +++ b/my-app/src/components/header.tsx @@ -13,6 +13,11 @@ import { FormControl } from 'react-bootstrap'; import { Box, InputLabel, MenuItem} from '@mui/material'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Menu from '@mui/material/Menu'; +// import MenuItem from '@mui/material/MenuItem'; +import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state'; +import Button from '@mui/material/Button'; + function Header() { const { i18n, t } = useTranslation(); @@ -70,6 +75,29 @@ function Header() Logo + + + + {/* + {(popupState) => ( + + + + Profile + My account + Logout + + + )} + */} + + + + + +
{t("page2")} diff --git a/my-app/src/components/menu b/my-app/src/components/menu new file mode 100644 index 0000000..e69de29 diff --git a/my-app/src/css/mine.css b/my-app/src/css/mine.css index cbf4ce5..eacd75f 100644 --- a/my-app/src/css/mine.css +++ b/my-app/src/css/mine.css @@ -137,42 +137,52 @@ body { } .description { - font-size: 1vw; + font-size: 3vh; } + + + .presentation { + display: flex; + flex-direction: column; + /* justify-content: center; */ + + width: 50vw; + margin-top: 8%; + margin-left: 15%; + /* max-width: 40%; */ + } + .project { + width: 50vw; display: flex; flex-direction: column; align-items: flex-start; - - margin-top: 30vh; - margin-right: 10vw; + /* align-self: center; */ + justify-content: center; + height: 85vh; + padding-left: 10vw; + /* margin-top: 30vh; */ + /* margin-right: 10vw; */ font-weight: 800; - width: 50vh; - height: 50%; - align-self: start; - } - - .presentation { - margin-top: 8%; - margin-left: 15%; - max-width: 40%; + /* width: 50vh; */ + /* height: 50%; */ + /* align-self: start; */ } .home { /* overflow: hidden; */ + width: 100vw; position: absolute; - right: -100vw; - animation: slideRight 2s ease forwards; + /* right: -100vw; */ + animation: slideRight 1000ms ease forwards; display: flex; flex-direction: row; justify-content: space-between; } - - @keyframes slideRight { 0% { right: -100vh; /* Position initiale */ @@ -185,6 +195,7 @@ body { .project_txt { font-weight: 800; font-size: 3vw; + } .cv_button { @@ -196,7 +207,8 @@ body { .project_group { margin-top: 2vh; - font-size: 1vw; + /* font-size: 1vw; */ + font-size: 2vh; display: flex; flex-direction: row; align-items: center; diff --git a/my-app/src/css/project.css b/my-app/src/css/project.css index 4b123ab..405af8f 100644 --- a/my-app/src/css/project.css +++ b/my-app/src/css/project.css @@ -11,7 +11,7 @@ img { } .project_page { - overflow: hidden; + /* overflow: hidden; */ margin: auto; display: flex; flex-direction: row; @@ -63,7 +63,41 @@ img { .project_home { - margin-top: 20vh; + /* margin-top: 20vh; */ width: 100vw; - margin-left: 45vw; + margin-left: 35vw; +} + + + + + +@media screen and (max-width: 992px){ + .project_page { + text-align: center; + /* overflow: hidden; */ + margin: auto; + display: flex; + flex-direction: column; + width: 100vw; + height: 85vh; + justify-content: center; + align-items: center; + } + .project_detail { + margin: 0; + } + + .project_description{ + + margin: 0; + max-width: 80%; + /* margin-left: 10vw; */ + } + .project_image { + margin-top: 10vh; + width: 80vw; + /* margin-left: 10vw; */ + /* max-height: 30%; */ + } } \ No newline at end of file