From 650d62c947d95597b1305cf4b564aff92e96d56e Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 22 Sep 2024 15:06:28 +0200
Subject: [PATCH] reflection is tab
---
src/App/App.css | 6 ----
src/App/App.tsx | 1 +
src/App/HP.css | 26 ++++++++++++++
src/contents/Human Practices/HP svgs/hp3.tsx | 18 +++++-----
.../Human Practices/HP svgs/understanding.tsx | 36 +++++++++++++------
src/contents/Human Practices/IHP.tsx | 12 +++++--
src/utils/openElement.ts | 2 +-
7 files changed, 73 insertions(+), 28 deletions(-)
create mode 100644 src/App/HP.css
diff --git a/src/App/App.css b/src/App/App.css
index b4abc96d..dcf85b5a 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3714,9 +3714,3 @@ a{
padding-left: 10px !important;
}
-.framecycletab{
- background-color: var(--darkerbeige);
- padding: 30px 20px;
- border-radius: 20px;
- margin-left: 60px;
-}
\ No newline at end of file
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 5c340bd6..e8bff3de 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import "./App.css";
+import "./HP.css"
import "./mediarules.css"
import "./Timelines.css";
import '../App/Graph.css';
diff --git a/src/App/HP.css b/src/App/HP.css
new file mode 100644
index 00000000..b82ee94d
--- /dev/null
+++ b/src/App/HP.css
@@ -0,0 +1,26 @@
+#under-reflection{
+ background-color: var(--lightblue) !important;
+}
+#under-responsibility{
+ background-color: var(--lightpurple) !important;
+}
+#under-responsive{
+ background-color: var(--text-primary) !important;
+}
+
+#under-responsive, #under-responsibility, #under-reflection{
+ border-radius: 10px;
+ color: white;
+}
+
+#under-reflection div, #under-responsibility div, #under-responsive div{
+ padding: 15px;
+}
+
+.framecycletab{
+ box-shadow: 1px 2px 5px gray;
+ background-color: var(--background);
+ padding: 30px 20px;
+ border-radius: 20px;
+ margin-left: 60px;
+ }
\ No newline at end of file
diff --git a/src/contents/Human Practices/HP svgs/hp3.tsx b/src/contents/Human Practices/HP svgs/hp3.tsx
index eda9a186..ea2c09c7 100644
--- a/src/contents/Human Practices/HP svgs/hp3.tsx
+++ b/src/contents/Human Practices/HP svgs/hp3.tsx
@@ -1176,7 +1176,7 @@ export const HP3new = () => (
id="path34"
style={{
display: "inline",
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1292,7 +1292,7 @@ export const HP3new = () => (
<path
id="path46"
style={{
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1303,7 +1303,7 @@ export const HP3new = () => (
id="path50"
style={{
display: "inline",
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1315,7 +1315,7 @@ export const HP3new = () => (
style={{
display: "inline",
fill: "none",
- stroke: "#e2dad7",
+ stroke: "#FFF6F2",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
@@ -1375,7 +1375,7 @@ export const HP3new = () => (
<path
id="path62"
style={{
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1725,7 +1725,7 @@ export const HP3new = () => (
<path
id="path740"
style={{
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -1736,7 +1736,7 @@ export const HP3new = () => (
id="path742"
style={{
fill: "none",
- stroke: "#e2dad7",
+ stroke: "#FFF6F2",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
@@ -3628,7 +3628,7 @@ export const HP3new = () => (
<path
id="path62-8"
style={{
- fill: "#e2dad7",
+ fill: "#FFF6F2",
fillOpacity: 1,
fillRule: "evenodd",
stroke: "none",
@@ -3963,7 +3963,7 @@ export const HP3new = () => (
id="path742-2"
style={{
fill: "none",
- stroke: "#e2dad7",
+ stroke: "#FFF6F2",
strokeWidth: 2.04,
strokeLinecap: "butt",
strokeLinejoin: "round",
diff --git a/src/contents/Human Practices/HP svgs/understanding.tsx b/src/contents/Human Practices/HP svgs/understanding.tsx
index aed0d767..58ac1b75 100644
--- a/src/contents/Human Practices/HP svgs/understanding.tsx
+++ b/src/contents/Human Practices/HP svgs/understanding.tsx
@@ -1,3 +1,5 @@
+import { openElement } from "../../../utils/openElement";
+
export const HPUnderstanding = () => (
<svg
viewBox="0 0 853.05645 556.00848"
@@ -493,6 +495,7 @@ export const HPUnderstanding = () => (
</linearGradient>
</defs>
<g transform="matrix(1.3333333,0,0,-1.3333333,-490.85172,1245.44)" id="g10">
+ <a onClick={openElement({elementToOpen: "under-responsive", classToHide: "understandingtab"})}>
<path
id="path22"
style={{
@@ -503,6 +506,7 @@ export const HPUnderstanding = () => (
}}
d="m 628.2,711.36 c 36.9,0 66.8,-31.58 66.8,-70.54 0,-38.96 -29.9,-70.58 -66.8,-70.58 h 308.44 c 36.9,0 66.8,31.62 66.8,70.58 0,38.96 -29.9,70.54 -66.8,70.54 z"
/>
+ </a>
<g id="g24">
<g clipPath="url(#clipPath30)" id="g26">
<text
@@ -520,6 +524,7 @@ export const HPUnderstanding = () => (
}}
transform="matrix(1,0,0,-1,765.84,632.57)"
>
+ <a onClick={openElement({elementToOpen: "under-responsive", classToHide: "understandingtab"})}>
<tspan
id="tspan32"
y={0}
@@ -527,6 +532,7 @@ export const HPUnderstanding = () => (
>
{"RESPONSIVE"}
</tspan>
+ </a>
</text>
</g>
</g>
@@ -540,6 +546,7 @@ export const HPUnderstanding = () => (
}}
d="m 628.78,711.36 c -36.91,0 -66.82,-31.58 -66.82,-70.54 0,-38.96 29.91,-70.58 66.82,-70.58 36.9,0 66.86,31.62 66.86,70.58 0,38.96 -29.96,70.54 -66.86,70.54 z"
/>
+ <a onClick={openElement({elementToOpen: "under-reflection", classToHide: "understandingtab"})}>
<path
id="path38"
style={{
@@ -550,6 +557,7 @@ export const HPUnderstanding = () => (
}}
d="m 628.2,934.08 c 36.9,0 66.8,-31.55 66.8,-70.48 0,-38.92 -29.9,-70.52 -66.8,-70.52 h 308.44 c 36.9,0 66.8,31.6 66.8,70.52 0,38.93 -29.9,70.48 -66.8,70.48 z"
/>
+ </a>
<g id="g40">
<g clipPath="url(#clipPath46)" id="g42">
<text
@@ -567,6 +575,7 @@ export const HPUnderstanding = () => (
}}
transform="matrix(1,0,0,-1,767.04,855.38)"
>
+ <a onClick={openElement({elementToOpen: "under-reflection", classToHide: "understandingtab"})}>
<tspan
id="tspan48"
y={0}
@@ -574,6 +583,7 @@ export const HPUnderstanding = () => (
>
{"REFLECTION"}
</tspan>
+ </a>
</text>
</g>
</g>
@@ -607,16 +617,18 @@ export const HPUnderstanding = () => (
}}
d="m 561.96,640.98 c 0,38.94 31.56,70.5 70.5,70.5 38.94,0 70.5,-31.56 70.5,-70.5 0,-38.94 -31.56,-70.5 -70.5,-70.5 -38.94,0 -70.5,31.56 -70.5,70.5 z"
/>
- <path
- id="path58"
- style={{
- fill: "#b85bd1",
- fillOpacity: 1,
- fillRule: "evenodd",
- stroke: "none",
- }}
- d="m 439.33,823.08 c -36.92,0 -66.85,-31.58 -66.85,-70.54 0,-38.96 29.93,-70.58 66.85,-70.58 h 308.63 c -36.93,0 -66.85,31.62 -66.85,70.58 0,38.96 29.92,70.54 66.85,70.54 z"
- />
+ <a onClick={openElement({elementToOpen: "under-responsibility", classToHide: "understandingtab"})}>
+ <path
+ id="path58"
+ style={{
+ fill: "#b85bd1",
+ fillOpacity: 1,
+ fillRule: "evenodd",
+ stroke: "none",
+ }}
+ d="m 439.33,823.08 c -36.92,0 -66.85,-31.58 -66.85,-70.54 0,-38.96 29.93,-70.58 66.85,-70.58 h 308.63 c -36.93,0 -66.85,31.62 -66.85,70.58 0,38.96 29.92,70.54 66.85,70.54 z"
+ />
+ </a>
<g id="g60">
<g clipPath="url(#clipPath66)" id="g62">
<text
@@ -634,6 +646,7 @@ export const HPUnderstanding = () => (
}}
transform="matrix(1,0,0,-1,447.5,744.31)"
>
+ <a onClick={openElement({elementToOpen: "under-responsibility", classToHide: "understandingtab"})}>
<tspan
id="tspan68"
y={0}
@@ -641,6 +654,7 @@ export const HPUnderstanding = () => (
>
{"RESPONSIBILITY"}
</tspan>
+ </a>
</text>
</g>
</g>
@@ -674,6 +688,7 @@ export const HPUnderstanding = () => (
}}
d="m 632.53,909.84 c -25.55,0 -46.26,-20.71 -46.3,-46.23 0,-24.73 20.2,-45.58 44.92,-46.32 h 0.6 c 17.84,-0.27 34.95,-6.92 47.59,-19.56 l 0.6,-0.6 c 11.66,-11.67 17.61,-27.63 17.47,-44.15 v -0.46 -0.23 c 0.05,-17.11 -5.99,-33.63 -18.07,-45.67 l -1.53,-1.52 c -11.25,-11.31 -26.48,-18.11 -42.38,-18.11 -0.52,0 -1.04,0.01 -1.56,0.02 -0.46,0.02 -0.92,0.03 -1.39,0.03 -0.46,0 -0.92,-0.01 -1.38,-0.03 -23.89,-0.69 -43.76,-20.25 -44.83,-44.15 -1.15,-26.48 19.97,-48.35 46.21,-48.35 h 0.23 0.38 c 14.44,0 28.44,-5.21 38.69,-15.45 l 5.76,-5.77 c 12.77,-12.78 19.36,-30.17 19.87,-48.26 0.05,-2.03 0.23,-4.1 0.56,-6.18 3.13,-20.07 -43.61679,138.77795 -0.34671,32.67417 -46.70726,93.91764 11.46655,-2.19219 13.43655,-2.19219 27.53,0 18.60722,-10.36809 15.02722,17.88191 -2.58,20.21 11.65815,39.29636 24.68294,4.78611 -2.08,0.32 -4.11,0.46 -6.14,0.5 -18.25,0.42 -35.87,6.97 -48.78,19.94 l -2.08,2.03 c -11.12,11.16 -16.51,26.7 -15.17,42.39 0.09,1.29 0.14,2.58 0.14,3.92 v 0.23 c -0.09,17.03 5.99,33.54 18.03,45.58 l 1.57,1.57 c 11.3,11.31 26.53,18.11 42.43,18.11 0.52,0 1.04,-0.01 1.56,-0.02 h 2.72 c 23.89,0.74 43.77,20.3 44.78,44.2 1.15,26.48 -19.97,48.34 -46.21,48.34 -0.37,0 -0.78,0 -1.15,-0.04 -0.52,-0.02 -1.04,-0.02 -1.55,-0.02 -15.96,0 -31.33,6.2 -42.63,17.5 -12.73,12.69 -19.32,29.94 -19.55,47.89 v 0.6 c -0.6,24.77 -21.45,45.07 -46.21,45.12 z"
/>
+ <a onClick={openElement({elementToOpen: "under-responsive", classToHide: "understandingtab"})}>
<path
id="path78"
style={{
@@ -684,6 +699,7 @@ export const HPUnderstanding = () => (
}}
d="m 633.24,581.1 c 0,31.18 28.8,56.46 64.32,56.46 35.52,0 64.32,-25.28 64.32,-56.46 0,-31.18 -28.8,-56.46 -64.32,-56.46 -35.52,0 -64.32,25.28 -64.32,56.46 z"
/>
+ </a>
<path
id="path80"
style={{
diff --git a/src/contents/Human Practices/IHP.tsx b/src/contents/Human Practices/IHP.tsx
index 1612f9ff..4b9c179e 100644
--- a/src/contents/Human Practices/IHP.tsx
+++ b/src/contents/Human Practices/IHP.tsx
@@ -1,6 +1,6 @@
import { ButtonOne } from "../../components/Buttons";
import { HPTimeline } from "../../components/HP-timeline";
-import { LoremMedium } from "../../components/Loremipsum";
+import { LoremMedium, LoremShort } from "../../components/Loremipsum";
import { Section, Subesction } from "../../components/sections";
import { HP3new } from "./HP svgs/hp3";
import HP4 from "./HP svgs/hp4";
@@ -42,7 +42,15 @@ export function HPIntegrated(){
</div>
</div>
<div className="col">
- hallo
+ <div className="col understandingtab" id="under-reflection" style={{display: "block"}}>
+ <div><LoremShort/></div>
+ </div>
+ <div className="col understandingtab" id="under-responsibility" style={{display: "none"}}>
+ <div><LoremShort/></div>
+ </div>
+ <div className="col understandingtab" id="under-responsive" style={{display: "none"}}>
+ <div><LoremShort/></div>
+ </div>
</div>
</div>
</div>
diff --git a/src/utils/openElement.ts b/src/utils/openElement.ts
index 2945c996..a4fbaeaa 100644
--- a/src/utils/openElement.ts
+++ b/src/utils/openElement.ts
@@ -1,7 +1,7 @@
export function openElement({
elementToOpen,
classToHide, /* tabcontent */
- elementToClose,
+ elementToClose,
buttonClass, /* = "tablinks" */
eventTargetClass = "active"
}: {
--
GitLab