From 06d9acc794eb892a94149cbad065714285e19178 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 5 Aug 2024 20:02:13 +0200
Subject: [PATCH] human practice reflection
---
src/App/App.css | 55 +++++++++++++++++++++++++++++++-
src/contents/human-practices.tsx | 16 +++++++++-
2 files changed, 69 insertions(+), 2 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index b8872422..a46aa71a 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3321,4 +3321,57 @@ div[class*="boxy"] {
/* .rotate-linear-infinite:hover{
animation-play-state: paused;
-} */
\ No newline at end of file
+} */
+
+.methods-node{
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ height: 6rem;
+ width: 6rem;
+ line-height: var(--node-size);
+ border: 0.1vw solid var(--text-primary);
+ border-radius: 50%;
+ cursor: pointer;
+ margin-left: 20px;
+ margin-right: 20px;
+ font-size: small;
+ -webkit-transition: all .2s ease;
+ transition: all .2s ease;
+ z-index: 5;
+ text-align: center;
+}
+.methods-node:nth-of-type(1){
+ background-color: var(--accent-primary);
+}
+.methods-node:nth-of-type(2){
+ background-color: var(--accen-secondary);
+}
+.methods-node:nth-of-type(odd) {
+ top: 2vw;
+ left: 0;
+}
+.methods-node:nth-of-type(even){
+ bottom: 2vw;
+}
+
+.methods-node:nth-of-type(even):before {
+ content: '';
+ position: absolute;
+ top: 80%;
+ z-index: 0;
+ left: -3.4vw;
+ width: 3.8vw;
+ transform: rotate(-25deg);
+ border-top: 1px solid var(--text-primary);
+}
+.methods-node:nth-of-type(even):after {
+ content: '';
+ position: absolute;
+ top: 80%;
+ z-index: 0;
+ left: 6.4vw;
+ width: 3.8vw;
+ transform: rotate(25deg);
+ border-top: 1px solid var(--text-primary);
+}
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 0bf4b7c2..8d82687b 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -237,9 +237,23 @@ function HPTabsTwo(){
};
return(
<>
+ <div className="col">
+ <div className="methods-node">
+ Ho
+ </div>
+ <div className="methods-node">
+ Hi
+ </div>
+ <div className="methods-node">
+ Ho
+ </div>
+ <div className="methods-node">
+ Hi
+ </div>
+ </div>
<div className="row align-items-center">
<div className="col-3">
- <Circle text="Reflection"></Circle>
+
{/* <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Patient Needs" value="1" />
--
GitLab