From df2f5185e7cca8880bf19a7745f16f913c42f826 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 26 Jul 2024 23:50:12 +0200
Subject: [PATCH] tests
---
package.json | 2 +
src/App/App.css | 219 +++++++++++++++++++++++++++++++
src/App/App.tsx | 1 +
src/App/flow.css | 83 ++++++++++++
src/components/Quotes.tsx | 49 +++++++
src/components/diagram.tsx | 57 ++++++++
src/contents/human-practices.tsx | 27 ++++
yarn.lock | 51 ++++++-
8 files changed, 487 insertions(+), 2 deletions(-)
create mode 100644 src/App/flow.css
create mode 100644 src/components/Quotes.tsx
create mode 100644 src/components/diagram.tsx
diff --git a/package.json b/package.json
index 44f64575..d9d12c5c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@mui/x-charts": "^7.11.0",
"@popperjs/core": "^2.11.8",
"@refinedev/core": "^4.53.0",
+ "beautiful-react-diagrams": "^0.5.1",
"bootstrap": "^5.3.3",
"dangerously-set-html-content": "^1.1.0",
"dompurify": "^3.1.5",
@@ -27,6 +28,7 @@
"react-bootstrap": "^2.10.2",
"react-collapsed": "^4.1.2",
"react-dom": "^18.2.0",
+ "react-js-diagrams": "^3.1.3",
"react-pdf": "^9.0.0",
"react-photo-album": "^2.4.1",
"react-router-dom": "^6.23.0",
diff --git a/src/App/App.css b/src/App/App.css
index 39c47e9c..e68683bb 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -151,6 +151,7 @@ color: var(--text-primary);
display: flex !important;
align-items: center !important;
text-align: center;
+ align-self: center;
}
.shadow{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
@@ -2589,3 +2590,221 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
margin-left: 5px;
margin-right: 5px;
}
+
+.blockquote-wrapper {
+ display: flex;
+ height: fit-content;
+}
+
+/* Blockquote main style */
+.blockquote {
+ position: relative;
+ font-style: sans-serif;
+ max-width: 80%;
+ margin: 40px auto !important;
+ align-self: center;
+}
+
+/* Blockquote header */
+.blockquote h2 {
+ font-style: italic;
+ position: relative; /* for pseudos */
+ color: black;
+ font-size: 2.8rem;
+ font-weight: normal;
+ line-height: 1;
+ font-size: larger;
+ margin: 0;
+ border: solid 5px var(--text-primary) !important;
+ border-radius:20px;
+ padding: 25px;
+}
+
+/* Blockquote right double quotes */
+.blockquote h2:after {
+ content:"";
+ position: absolute;
+ border: 5px solid var(--text-primary);
+ border-radius: 0 50px 0 0;
+ width: 60px;
+ height: 60px;
+ bottom: -60px;
+ left: 50px;
+ border-bottom: none;
+ border-left: none;
+ z-index: 3;
+}
+
+.blockquote h2:before {
+ content:"";
+ position: absolute;
+ width: 80px;
+ border: 5px solid var(--ourbeige);
+ bottom: -5px;
+ left: 50px;
+ z-index: 2;
+}
+
+/* increase header size after 600px */
+@media all and (min-width: 600px) {
+ .blockquote h1 {
+ font-size: 3rem;
+ line-height: 1.2;
+ }
+
+}
+
+/* Blockquote subheader */
+.blockquote h4 {
+ position: relative;
+ color: black;
+ font-size: 1.3rem;
+ font-weight: 400;
+ line-height: 1.2;
+ font-size: medium;
+ margin: 0;
+ padding-top: 15px;
+ z-index: 1;
+ margin-left:150px;
+ padding-left:12px;
+}
+
+
+.blockquote h4:first-letter {
+ margin-left:-12px;
+}
+
+/* #ct{height:150px; width:370px;border:4px solid var(--accent-dark);margin: 100px auto;text-align:center;position:relative;color:#fff;padding:15px;}
+span{
+ background:var(--background);
+ color:var(--accent-dark);
+ padding:0 10px;
+ font-size:20px;
+ position:relative;
+ top:-28px;
+} */
+.corner{
+ height:36px;
+ width:36px;
+ border-radius:50%;
+ border:4px solid #fff;
+ transform:rotate(-45deg);
+ position:absolute;
+ background:var(--ourbeige);
+}
+
+#left_top{
+ top:-16px;
+ left:-16px;
+ border-width: 4px;
+ border-color:transparent transparent var(--text-primary) transparent;
+}
+#right_top{
+ top:-16px;
+ right:-16px;
+ border-width: 4px;
+ border-color:transparent transparent transparent var(--text-primary);
+}
+#left_bottom{
+ bottom:-16px;
+ left:-16px;
+ border-width: 4px;
+ border-color:transparent var(--text-primary) transparent transparent ;
+}
+#right_bottom{
+ bottom:-16px;
+ right:-16px;
+ border-width: 4px;
+ border-color:var(--text-primary) transparent transparent transparent;
+}
+
+
+
+
+/* Blockquote main style */
+.blockquotex {
+ position: relative;
+ font-style: sans-serif;
+ font-weight: 800;
+ color: black;
+ padding: 30px 0;
+ width: 100%;
+ max-width: 80%;
+ z-index: 1;
+ margin: 80px auto;
+ align-self: center;
+ border-top: solid 1px var(--text-primary);
+ border-bottom: solid 1px var(--text-primary);
+}
+
+/* Blockquote header */
+.blockquotex h1 {
+ position: relative;
+ color: black;
+ font-size: 20px !important;
+ font-weight: 800;
+ line-height: 1;
+ margin: 0;
+}
+
+/* Blockquote right double quotes */
+.blockquotex:after {
+ position: absolute;
+ content: "â€";
+ color: var(--accent-primary);
+ font-size: 5rem;
+ line-height: 0;
+ bottom: -25px;
+ right: 30px;
+}
+
+/* increase header size after 600px */
+@media all and (min-width: 600px) {
+ .blockquotex h1 {
+ font-size: 60px;
+ }
+
+}
+
+/* Blockquote subheader */
+.blockquotex h4 {
+ position: relative;
+ color: var(--text-primary);
+ font-size: 1rem;
+ font-weight: normal;
+ line-height: 1;
+ margin: 0;
+ padding-top: 20px;
+ z-index: 1;
+}
+
+.figure-img{
+ padding: 30px 10px;
+ border-radius: 10px;
+ margin: 10px 0 !important;
+}
+
+.personalstyleone{
+ padding-left: 10px;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ padding-right: 10px;
+ background-color: var(--text-primary);
+ color: var(--ourbeige);
+ border-radius: 10px;
+ margin-bottom: 50px;
+ margin-top: 50px;
+}
+
+.react-flow__node-mindmap {
+ background: white;
+ border-radius: 2px;
+ border: 1px solid transparent;
+ padding: 2px 5px;
+ font-weight: 700;
+}
+
+.diagram-hp{
+ height: 300px;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/App/App.tsx b/src/App/App.tsx
index fbbad2c8..119fa60a 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
import "./App.css";
import "../contents/example.css"
import "./App.scss";
+import 'beautiful-react-diagrams/styles.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, Routes } from "react-router-dom";
import { Footer } from "../components/Footer.tsx";
diff --git a/src/App/flow.css b/src/App/flow.css
new file mode 100644
index 00000000..8ec0c224
--- /dev/null
+++ b/src/App/flow.css
@@ -0,0 +1,83 @@
+body {
+ margin: 0;
+ background-color: #f8f8f8;
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+}
+
+html,
+body,
+#root {
+ height: 100%;
+}
+
+.header {
+ color: #cdcdcd;
+}
+
+.react-flow__node-mindmap {
+ background: white;
+ border-radius: 2px;
+ border: none;
+ padding: 6px 10px;
+ font-weight: 700;
+}
+
+.react-flow__handle.target {
+ top: 50%;
+ pointer-events: none;
+ opacity: 0;
+}
+
+.react-flow__handle.source {
+ top: 0;
+ left: 0;
+ transform: none;
+ background: #f6ad55;
+ height: 100%;
+ width: 100%;
+ border-radius: 2px;
+ border: none;
+}
+
+.react-flow .react-flow__connectionline {
+ z-index: 0;
+}
+
+.inputWrapper {
+ display: flex;
+ height: 20px;
+ z-index: 1;
+ position: relative;
+ pointer-events: none;
+}
+
+.dragHandle {
+ background: transparent;
+ width: 14px;
+ height: 100%;
+ margin-right: 4px;
+ display: flex;
+ align-items: center;
+ pointer-events: all;
+}
+
+.input {
+ border: none;
+ padding: 0 2px;
+ border-radius: 1px;
+ font-weight: 700;
+ background: transparent;
+ height: 100%;
+ color: #222;
+ pointer-events: none;
+}
+
+.input:focus {
+ border: none;
+ outline: none;
+ background: rgba(255, 255, 255, 0.25);
+ pointer-events: all;
+}
diff --git a/src/components/Quotes.tsx b/src/components/Quotes.tsx
new file mode 100644
index 00000000..012bfb20
--- /dev/null
+++ b/src/components/Quotes.tsx
@@ -0,0 +1,49 @@
+
+
+export function BlockQuote({text, cite}: {text: string; cite: string}){
+ return(
+ <div className="blockquote-wrapper">
+ <div className="blockquote">
+ <h2>
+ {text}
+ </h2>
+ <h4><em>{cite}</em></h4>
+ </div>
+ </div>
+ )
+}
+
+export function BlockQuoteB({text, cite, id}: {text: string; cite: string, id?: string}){
+ if (id){
+ let h = "#" + {id}
+ return(
+ <div className="blockquote-wrapper">
+ <div className="blockquotex">
+ <h2>
+ {text}
+ </h2>
+ <h4><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
+ </div>
+ </div>
+ )
+ }
+ else{
+ return(
+ <div className="blockquote-wrapper">
+ <div className="blockquotex">
+ <h2>
+ {text}
+ </h2>
+ <h4><em>{cite}</em></h4>
+ </div>
+ </div>
+ )
+ }
+
+}
+
+
+/* <span>Winston Churchill</span>
+ <blockquote>
+ <p><i>“Success consists of going from failure to failure without loss of enthusiasm.” </i></p>
+ </blockquote> */
\ No newline at end of file
diff --git a/src/components/diagram.tsx b/src/components/diagram.tsx
new file mode 100644
index 00000000..f4152c7c
--- /dev/null
+++ b/src/components/diagram.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams';
+
+// Define the types manually
+type CustomNode = {
+ id: string;
+ content: React.ReactNode;
+ coordinates: [number, number];
+};
+
+type CustomLink = {
+ input: string;
+ output: string;
+};
+
+type CustomSchema = {
+ nodes: CustomNode[];
+ links: CustomLink[];
+};
+
+// the diagram model
+const initialSchema: CustomSchema = {
+ nodes: [
+ { id: 'sh', content: 'Stakeholders', coordinates: [500, 110] },
+ { id: 'aca', content: 'Academia', coordinates: [250, 60] },
+ { id: 'ind', content: 'Industry', coordinates: [250, 160] },
+ { id: 'pat', content: 'Patients', coordinates: [750, 60] },
+ { id: 'meds', content: 'Medical Professionals', coordinates: [750, 160] },
+ /* { id: 'soc', content: 'Society', coordinates: [500, 20] }, */
+/* { id: 'pat', content: 'Patients', coordinates: [500, 210] }, */
+ ],
+ links: [
+ { input: 'sh', output: 'aca' },
+ { input: 'sh', output: 'ind' },
+ { input: 'sh', output: 'pat' },
+ { input: 'sh', output: 'meds' },
+ /* { input: 'sh', output: 'soc' },
+ { input: 'sh', output: 'meds' }, */
+ ],
+};
+
+const UncontrolledDiagram: React.FC = () => {
+ // create diagrams schema
+ const [schema, { onChange }] = useSchema(createSchema(initialSchema));
+
+ return (
+ <div className='center'>
+ <div className='diagram-hp'>
+ <Diagram schema={schema} onChange={onChange} />
+ </div>
+ </div>
+
+
+ );
+};
+
+export default UncontrolledDiagram;
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 1e1a79d7..866a3ebe 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -12,6 +12,9 @@ import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { TabButtonRow, openTab } from "../components/Buttons";
+import { BlockQuoteB } from "../components/Quotes";
+
+
let timelinebuttonrowdata = [
{
buttonname: "All",
@@ -116,11 +119,35 @@ export function HumanPractices() {
openTab({cityName: "All", cla: "timelinecardtabs"});
return (
<>
+ <BlockQuoteB
+ text="Human Practices is the study of how your work affects the world, and how the world affects your work."
+ cite="- Peter Carr, Director of Judging"
+ />
+ <div className="center">
+ <h3 className="col personalstyleone">Overview</h3>
+ </div>
+
+ <div className="center">
+ <h3 className="col personalstyleone">Timeline</h3>
+ </div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
<AllPopus></AllPopus>
<ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
<BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
+ <div className="center">
+ <h3 className="col personalstyleone">Reflection Framework</h3>
+ </div>
+
+ <div className="center">
+ <h3 className="col personalstyleone">Feedback Cycle</h3>
+ </div>
+
+
+ <div className="center">
+ <h3 className="col personalstyleone">Surveys</h3>
+ </div>
</>
+
);
}
diff --git a/yarn.lock b/yarn.lock
index aab9976f..ba79dbf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1435,6 +1435,26 @@ balanced-match@^1.0.0:
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+beautiful-react-diagrams@^0.5.1:
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/beautiful-react-diagrams/-/beautiful-react-diagrams-0.5.1.tgz#9f350387b3cee94dce2aaf2e08b233feeacace4d"
+ integrity sha512-B5sw+L27acwcOv0BUqCOPSf29sFDLXm8Fn2Vl0s4IFn9lrwZU6uqKN6oVl1R+M/M6mvEP9ZxvuSyVPNS8mAEIg==
+ dependencies:
+ beautiful-react-hooks "^0.31.0"
+ classnames "^2.2.6"
+ lodash.findindex "^4.6.0"
+ lodash.isequal "^4.5.0"
+ lodash.throttle "^4.1.1"
+ prop-types "^15.7.2"
+
+beautiful-react-hooks@^0.31.0:
+ version "0.31.1"
+ resolved "https://registry.yarnpkg.com/beautiful-react-hooks/-/beautiful-react-hooks-0.31.1.tgz#16651cd47d36f804a4dc3a9de4b2bcdad9ad9054"
+ integrity sha512-fanSUMCPCRYkTH7aPSKM47aVu6m1Uuaz6rLw0YDP6VUVUwXXuAmwCldRwB+AiNO2x/RV/LWh4izfNcfQRT/yVA==
+ dependencies:
+ lodash.debounce "^4.0.8"
+ lodash.throttle "^4.1.1"
+
binary-extensions@^2.0.0:
version "2.3.0"
resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
@@ -1544,7 +1564,7 @@ chownr@^2.0.0:
resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-classnames@^2.2.5, classnames@^2.3.2:
+classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.2:
version "2.5.1"
resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -2430,11 +2450,31 @@ lodash.debounce@^4.0.8:
resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+lodash.findindex@^4.6.0:
+ version "4.6.0"
+ resolved "https://registry.yarnpkg.com/lodash.findindex/-/lodash.findindex-4.6.0.tgz#a3245dee61fb9b6e0624b535125624bb69c11106"
+ integrity sha512-9er6Ccz6sEST3bHFtUrCFWk14nE8cdL/RoW1RRDV1BxqN3qsmsT56L14jhfctAqhVPVcdJw4MRxEaVoAK+JVvw==
+
+lodash.isequal@^4.5.0:
+ version "4.5.0"
+ resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+ integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+lodash.throttle@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+ integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
+lodash@4.17.4:
+ version "4.17.4"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+ integrity sha512-6X37Sq9KCpLSXEh8uM12AKYlviHPNNk4RxiGBn4cmKGJinbXBneWIV7iE/nXkM928O7ytHcHb6+X6Svl0f4hXg==
+
lodash@^4.17.19, lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
@@ -2744,7 +2784,7 @@ prop-types-extra@^1.1.0:
react-is "^16.3.2"
warning "^4.0.0"
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2818,6 +2858,13 @@ react-is@^18.2.0, react-is@^18.3.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+react-js-diagrams@^3.1.3:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/react-js-diagrams/-/react-js-diagrams-3.1.3.tgz#2397fe9ac338ef67b56673b163a3a58b9fc9d115"
+ integrity sha512-MQa4HUbYHmxNynABZMMGkTQRJszi7L9n0Bhx92HZd/qNJXaeo5hsCTHSxQoDP/u3mnOs16uQlLSErigDIvJcCQ==
+ dependencies:
+ lodash "4.17.4"
+
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
--
GitLab