tests

df2f5185 · Liliana Sanfilippo · 5d305711 · df2f5185 · df2f5185 · df2f5185
Commit df2f5185 authored 8 months ago by Liliana Sanfilippo
--- 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",

--- 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
--- 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";

--- a/src/App/flow.css
+++ b/src/App/flow.css
+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;
+}
--- a/src/components/Quotes.tsx
+++ b/src/components/Quotes.tsx
+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>&ldquo;Success consists of going from failure to failure without loss of enthusiasm.&rdquo; </i></p>
+  </blockquote> */
\ No newline at end of file
--- a/src/components/diagram.tsx
+++ b/src/components/diagram.tsx
+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;
--- 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>
    </>
  );  
 }

--- 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"