From 54cadc072fd777d5c9ee8b219dc6be4957faaf05 Mon Sep 17 00:00:00 2001 From: Anthony Dumas Date: Sat, 20 Apr 2024 18:27:40 +0200 Subject: [PATCH] use: bulma v1 (#69) * trying: pass the bulma breaking changes * fix: bulma 1.0 * fix: some ui bullshits happened after bulma v1 --- package-lock.json | 21 +++++++----- package.json | 4 +-- src/_sass/index.scss | 2 +- src/_sass/main.scss | 34 ++++++------------- .../ExperienceCard/ExperienceCard.js | 12 +++---- .../ExperienceCard/ExperienceCard.scss | 19 ++++++++--- src/components/MainCard/MainCard.js | 2 +- src/components/MainCard/MainCard.scss | 2 -- src/components/ProjectCard/ProjectCard.js | 4 +-- src/components/ProjectsCard/ProjectsCard.js | 2 +- 10 files changed, 51 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0463fa..accf515 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,13 +11,13 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.5.0", - "bulma": "^0.9.4", + "bulma": "^1.0.0", "powerglitch": "^2.3.2", "react": "^17.0.1", "react-dom": "^17.0.1", "react-intl": "^5.10.9", "react-scripts": "^5.0.1", - "sass": "^1.30.0", + "sass": "^1.71.1", "web-vitals": "^0.2.4" } }, @@ -5513,9 +5513,12 @@ } }, "node_modules/bulma": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", - "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz", + "integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==", + "dependencies": { + "sass": "^1.71.1" + } }, "node_modules/bytes": { "version": "3.0.0", @@ -14716,9 +14719,9 @@ "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, "node_modules/sass": { - "version": "1.58.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz", - "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==", + "version": "1.75.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz", + "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -14728,7 +14731,7 @@ "sass": "sass.js" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" } }, "node_modules/sass-loader": { diff --git a/package.json b/package.json index 92acd3c..7a04aea 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,13 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.5.0", - "bulma": "^0.9.4", + "bulma": "^1.0.0", "powerglitch": "^2.3.2", "react": "^17.0.1", "react-dom": "^17.0.1", "react-intl": "^5.10.9", "react-scripts": "^5.0.1", - "sass": "^1.30.0", + "sass": "^1.71.1", "web-vitals": "^0.2.4" }, "scripts": { diff --git a/src/_sass/index.scss b/src/_sass/index.scss index 2ee77f2..0dab38e 100644 --- a/src/_sass/index.scss +++ b/src/_sass/index.scss @@ -1 +1 @@ -@import "main.scss"; +@use "main.scss"; diff --git a/src/_sass/main.scss b/src/_sass/main.scss index fb0d40b..b51a378 100644 --- a/src/_sass/main.scss +++ b/src/_sass/main.scss @@ -7,41 +7,29 @@ $deep-koamaru: #152528; $myrtle-green: #1d353a; $cadet-blue: #25444b; $neon-carrot: #142225; -$white: #ffffff; $admink-brand: #f38d68; -/** - Variables Bulma -**/ -$primary: $cadet-blue; -$primary-invert: #fff; -$info: $myrtle-green; -$info-invert: #fff; -$footer-color: $deep-koamaru; -$success: $deep-koamaru; -$link: $neon-carrot; -$link-hover: ""; +@use "bulma/sass" with ( + $primary: $cadet-blue, + $info: $myrtle-green, + $footer-color: $deep-koamaru, + $success: $deep-koamaru, + $link: $neon-carrot +); html { - background-color: $primary; + background-color: $myrtle-green; } body { overflow-x: hidden; } -@import "../../node_modules/bulma/bulma"; - #idCard { .hero-body { padding-bottom: 2rem; padding-top: 2rem; } - - // permet de re-aligner les tags avec les subtitles - .tags { - margin-top: -1.25rem; - } } // retire les barres de scroll des panneaux experience/education @@ -50,7 +38,7 @@ body { } footer { - background-color: $footer-color !important; + background-color: $deep-koamaru !important; color: #fff; } @@ -89,12 +77,12 @@ section#contact .button { // footer small { - color: $white; + color: #fff; } // Photo de Profil #photoProfil { - background-color: $primary; + background-color: $myrtle-green; } .tile.is-vertical { diff --git a/src/components/ExperienceCard/ExperienceCard.js b/src/components/ExperienceCard/ExperienceCard.js index 9b1ab93..fb94a3d 100644 --- a/src/components/ExperienceCard/ExperienceCard.js +++ b/src/components/ExperienceCard/ExperienceCard.js @@ -32,14 +32,14 @@ export default class ExperienceCard extends Component { return {name}; })} +
+
+
+ {data.commentaire ?
+ {data.commentaire} +
: ''}
-
-
-
- {data.commentaire ?
- {data.commentaire} -
: ''}
} diff --git a/src/components/ExperienceCard/ExperienceCard.scss b/src/components/ExperienceCard/ExperienceCard.scss index 47063b6..6a23594 100644 --- a/src/components/ExperienceCard/ExperienceCard.scss +++ b/src/components/ExperienceCard/ExperienceCard.scss @@ -1,4 +1,15 @@ -.comment{ - font-style: italic; - margin-top: -25px; -} \ No newline at end of file +.comment { + font-style: italic; + margin-top: -25px; +} + +// permet de re-aligner les tags avec les subtitles +.tags, +.description, +.comment { + margin-top: -1.25rem; +} + +.card-content { + margin-top: 1rem; +} diff --git a/src/components/MainCard/MainCard.js b/src/components/MainCard/MainCard.js index 8bf59eb..28e8eac 100644 --- a/src/components/MainCard/MainCard.js +++ b/src/components/MainCard/MainCard.js @@ -52,7 +52,7 @@ class MainCard extends Component {
-
+
diff --git a/src/components/MainCard/MainCard.scss b/src/components/MainCard/MainCard.scss index 754d193..590ba89 100644 --- a/src/components/MainCard/MainCard.scss +++ b/src/components/MainCard/MainCard.scss @@ -1,5 +1,3 @@ -@import "../../_sass/main.scss"; - #photoProfil { overflow: clip; border: 1px solid #3c3c3c; diff --git a/src/components/ProjectCard/ProjectCard.js b/src/components/ProjectCard/ProjectCard.js index 87e3938..43966f3 100644 --- a/src/components/ProjectCard/ProjectCard.js +++ b/src/components/ProjectCard/ProjectCard.js @@ -9,8 +9,8 @@ export default class ProjectCard extends Component { const data = this.props.data; return
-
-
+
+

{data.title}

diff --git a/src/components/ProjectsCard/ProjectsCard.js b/src/components/ProjectsCard/ProjectsCard.js index eb52846..756aee4 100644 --- a/src/components/ProjectsCard/ProjectsCard.js +++ b/src/components/ProjectsCard/ProjectsCard.js @@ -12,7 +12,7 @@ class ProjectsCard extends Component { return
-
+
{projectCardsMessage.projects.map(function (projects, index) { return