use: bulma v1 (#69)

* trying: pass the bulma breaking changes

* fix: bulma 1.0

* fix: some ui bullshits happened after bulma v1
This commit is contained in:
Anthony Dumas 2024-04-20 18:27:40 +02:00 committed by GitHub
parent c6a239608f
commit 54cadc072f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 51 additions and 51 deletions

21
package-lock.json generated
View File

@ -11,13 +11,13 @@
"@testing-library/jest-dom": "^5.11.6", "@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2", "@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.5.0", "@testing-library/user-event": "^12.5.0",
"bulma": "^0.9.4", "bulma": "^1.0.0",
"powerglitch": "^2.3.2", "powerglitch": "^2.3.2",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-intl": "^5.10.9", "react-intl": "^5.10.9",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"sass": "^1.30.0", "sass": "^1.71.1",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"
} }
}, },
@ -5513,9 +5513,12 @@
} }
}, },
"node_modules/bulma": { "node_modules/bulma": {
"version": "0.9.4", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz",
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" "integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==",
"dependencies": {
"sass": "^1.71.1"
}
}, },
"node_modules/bytes": { "node_modules/bytes": {
"version": "3.0.0", "version": "3.0.0",
@ -14716,9 +14719,9 @@
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.58.3", "version": "1.75.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==", "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0", "immutable": "^4.0.0",
@ -14728,7 +14731,7 @@
"sass": "sass.js" "sass": "sass.js"
}, },
"engines": { "engines": {
"node": ">=12.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/sass-loader": { "node_modules/sass-loader": {

View File

@ -6,13 +6,13 @@
"@testing-library/jest-dom": "^5.11.6", "@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2", "@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.5.0", "@testing-library/user-event": "^12.5.0",
"bulma": "^0.9.4", "bulma": "^1.0.0",
"powerglitch": "^2.3.2", "powerglitch": "^2.3.2",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-intl": "^5.10.9", "react-intl": "^5.10.9",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"sass": "^1.30.0", "sass": "^1.71.1",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"
}, },
"scripts": { "scripts": {

View File

@ -1 +1 @@
@import "main.scss"; @use "main.scss";

View File

@ -7,41 +7,29 @@ $deep-koamaru: #152528;
$myrtle-green: #1d353a; $myrtle-green: #1d353a;
$cadet-blue: #25444b; $cadet-blue: #25444b;
$neon-carrot: #142225; $neon-carrot: #142225;
$white: #ffffff;
$admink-brand: #f38d68; $admink-brand: #f38d68;
/** @use "bulma/sass" with (
Variables Bulma $primary: $cadet-blue,
**/ $info: $myrtle-green,
$primary: $cadet-blue; $footer-color: $deep-koamaru,
$primary-invert: #fff; $success: $deep-koamaru,
$info: $myrtle-green; $link: $neon-carrot
$info-invert: #fff; );
$footer-color: $deep-koamaru;
$success: $deep-koamaru;
$link: $neon-carrot;
$link-hover: "";
html { html {
background-color: $primary; background-color: $myrtle-green;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
@import "../../node_modules/bulma/bulma";
#idCard { #idCard {
.hero-body { .hero-body {
padding-bottom: 2rem; padding-bottom: 2rem;
padding-top: 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 // retire les barres de scroll des panneaux experience/education
@ -50,7 +38,7 @@ body {
} }
footer { footer {
background-color: $footer-color !important; background-color: $deep-koamaru !important;
color: #fff; color: #fff;
} }
@ -89,12 +77,12 @@ section#contact .button {
// //
footer small { footer small {
color: $white; color: #fff;
} }
// Photo de Profil // Photo de Profil
#photoProfil { #photoProfil {
background-color: $primary; background-color: $myrtle-green;
} }
.tile.is-vertical { .tile.is-vertical {

View File

@ -32,14 +32,14 @@ export default class ExperienceCard extends Component {
return <span key={index} className="tag">{name}</span>; return <span key={index} className="tag">{name}</span>;
})} })}
</div> </div>
<div className='description content'>
<div dangerouslySetInnerHTML={{ __html: data.description }} />
</div>
{data.commentaire ? <div className="comment">
{data.commentaire}
</div> : ''}
</div> </div>
</div> </div>
<div className='content'>
<div dangerouslySetInnerHTML={{ __html: data.description }} />
</div>
{data.commentaire ? <div className="comment">
{data.commentaire}
</div> : ''}
</div> </div>
} }

View File

@ -1,4 +1,15 @@
.comment{ .comment {
font-style: italic; font-style: italic;
margin-top: -25px; margin-top: -25px;
} }
// permet de re-aligner les tags avec les subtitles
.tags,
.description,
.comment {
margin-top: -1.25rem;
}
.card-content {
margin-top: 1rem;
}

View File

@ -52,7 +52,7 @@ class MainCard extends Component {
<div className="hero-body"> <div className="hero-body">
<div className="container"> <div className="container">
<div className="columns"> <div className="columns">
<div className="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div> <div className="column is-1 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
<div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success"> <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
<div className="card"> <div className="card">
<div className="card-image"> <div className="card-image">

View File

@ -1,5 +1,3 @@
@import "../../_sass/main.scss";
#photoProfil { #photoProfil {
overflow: clip; overflow: clip;
border: 1px solid #3c3c3c; border: 1px solid #3c3c3c;

View File

@ -9,8 +9,8 @@ export default class ProjectCard extends Component {
const data = this.props.data; const data = this.props.data;
return <div className="tile is-vertical is-4"> return <div className="tile is-vertical is-4">
<div className="tile"> <div className="tile">
<div className="tile is-parent"> <div className="cell">
<article className="tile is-child notification is-info"> <article className="box notification is-info">
<p className="title"> <p className="title">
<a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a> <a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
</p> </p>

View File

@ -12,7 +12,7 @@ class ProjectsCard extends Component {
return <section id="projets" className="hero is-success"> return <section id="projets" className="hero is-success">
<div className="hero-body"> <div className="hero-body">
<div className="container"> <div className="container">
<div className="tile is-ancestor"> <div className="grid">
{projectCardsMessage.projects.map(function (projects, index) { {projectCardsMessage.projects.map(function (projects, index) {
return <ProjectCard key={index} return <ProjectCard key={index}
data={projects} data={projects}