From 9f609f70029b222c2b6efffb2e2877a6d85452cf Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <lsanfilippo@techfak.uni-bielefeld.de>
Date: Thu, 14 Nov 2024 17:41:29 +0100
Subject: [PATCH] fixed button placement
---
src/App/App.css | 17 +++++++++++++++--
src/components/Buttons.tsx | 8 ++++----
.../Further Engagement/Collaborations.tsx | 6 +++---
.../Further Engagement/Entrepreneurship.tsx | 6 +++---
.../Further Engagement/Outreach.tsx | 6 +++---
src/contents/Human Practices/IHP.tsx | 16 ++++++++--------
src/contents/Human Practices/Introduction.tsx | 8 ++++----
src/contents/interviews.tsx | 4 ++--
8 files changed, 42 insertions(+), 29 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index ee90c40e..4f269e3b 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -264,6 +264,13 @@ color: var(--text-primary);
/* * * * * * * */
/* * GENERAL * */
/* * * * * * * */
+
+section{
+ margin-bottom: var(--big-margin) !important;
+ margin-top: var(--big-margin) !important;
+ padding-top: var(--big-padding) !important;
+}
+
.relative{position: relative;}
.absolute{position: absolute;}
.align-items-center{align-items:center!important}
@@ -472,8 +479,8 @@ margin-bottom: 10vw !important;
h1, h2, h3, h4, h5{
- padding-top: var(--small-padding) !important;
- padding-bottom: var(--small-padding) !important;
+ margin-top: var(--simple-margin) !important;
+ margin-bottom: var(--simple-margin) !important;
color: var(--text-primary) !important;
font-weight: bolder !important;
}
@@ -2985,12 +2992,18 @@ span{
BUTTONS
========================
*/
+button span {
+ margin: auto;
+}
button {
margin-top: var(--simple-margin) !important;
margin-bottom: var(--simple-margin) !important;
border-radius: var(--border-radius) !important;
cursor: pointer;
+ margin-left: auto !important;
+ margin-right: auto !important;
text-align: center;
+ display: grid;
}
.btn1{
padding: var(--button-padding) var(--small-padding) !important;
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index ccf9743d..950341ac 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -179,13 +179,13 @@ export function ButtonOne({text, open, openclass}: {text:string, open:string, op
const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
- <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}>{text}</button>
+ <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
)
}
else{
return(
- <button className="btn-one" onClick={() => openFromOtherPage(open)}>{text}</button>
+ <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
)
}
}
@@ -194,7 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) {
return(
- <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>{text}</button>
+ <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
)
}
else{
@@ -212,7 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return(
- <button className="btn-one" onClick={openThem({it: open, scrollToId})}>{label}</button>
+ <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
)
}
diff --git a/src/contents/Human Practices/Further Engagement/Collaborations.tsx b/src/contents/Human Practices/Further Engagement/Collaborations.tsx
index 47961cf7..58c9cb73 100644
--- a/src/contents/Human Practices/Further Engagement/Collaborations.tsx
+++ b/src/contents/Human Practices/Further Engagement/Collaborations.tsx
@@ -9,13 +9,13 @@ export function HPCollabs(){
return (
<div className="col">
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="coll-cycletab" text="Overview" open="coll-overview"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="coll-cycletab" text="Collabs in 2024" open="colls2024"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="coll-cycletab" text="LNP Handbook" open="Handbook"></ButtonOne>
</div>
</div>
diff --git a/src/contents/Human Practices/Further Engagement/Entrepreneurship.tsx b/src/contents/Human Practices/Further Engagement/Entrepreneurship.tsx
index c26294af..b4b407c4 100644
--- a/src/contents/Human Practices/Further Engagement/Entrepreneurship.tsx
+++ b/src/contents/Human Practices/Further Engagement/Entrepreneurship.tsx
@@ -8,13 +8,13 @@ export function HPEntrepreneur(){
return(
<div className="col">
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
- <div className="col">
+ <div className="col ">
<ButtonOneWithScroll openclass="ent-cycletab" text="Overview" open="ent-overview" scrollId="ent-heading"/>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOneWithScroll openclass="ent-interview" text="Interviews with Founders" open="ent-interview" scrollId="ent-inter-heading"/>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOneWithScroll openclass="ent-interview" text="Next Steps" open="ent-next" scrollId="ent-course-heading"/>
</div>
</div>
diff --git a/src/contents/Human Practices/Further Engagement/Outreach.tsx b/src/contents/Human Practices/Further Engagement/Outreach.tsx
index 50125f43..572801a6 100644
--- a/src/contents/Human Practices/Further Engagement/Outreach.tsx
+++ b/src/contents/Human Practices/Further Engagement/Outreach.tsx
@@ -9,13 +9,13 @@ export function HPOutreach(){
return(
<div className="col">
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="out-cycletab" text="Overview" open="out-overview"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="out-cycletab" text="MUKOmove" open="mukomove"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="out-cycletab" text="Waffle Sale" open="Waffle sale"></ButtonOne>
</div>
</div>
diff --git a/src/contents/Human Practices/IHP.tsx b/src/contents/Human Practices/IHP.tsx
index 18894d91..adfa7565 100644
--- a/src/contents/Human Practices/IHP.tsx
+++ b/src/contents/Human Practices/IHP.tsx
@@ -229,30 +229,30 @@ export function HPIntegrated(){
<SWOTone/>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
</div>
</div>
<div className="row align-items-center" style={{ marginBottom: "5vh"}}>
- <div className="col">
+ < div className="col ">
<ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
</div>
</div>
diff --git a/src/contents/Human Practices/Introduction.tsx b/src/contents/Human Practices/Introduction.tsx
index cb75083b..8ad472d8 100644
--- a/src/contents/Human Practices/Introduction.tsx
+++ b/src/contents/Human Practices/Introduction.tsx
@@ -15,16 +15,16 @@ export function HPIntroduction(){
<H5 text="- Connecting our project to real life -"/>
<BlockQuoteB text="Science and everyday life cannot and should not be separated." cite="Rosalind Franklin"/>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="intro-cycletab" text="Our Understanding of HP" open="understanding"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="intro-cycletab" text="Our Mission & Vision" open="mission"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="intro-cycletab" text="Our Approach" open="approach"></ButtonOne>
</div>
- <div className="col">
+ <div className="col ">
<ButtonOne openclass="intro-cycletab" text="Our Target Groups" open="targets"></ButtonOne>
</div>
</div>
diff --git a/src/contents/interviews.tsx b/src/contents/interviews.tsx
index 1a57f6fa..1a7d5470 100644
--- a/src/contents/interviews.tsx
+++ b/src/contents/interviews.tsx
@@ -111,11 +111,11 @@ export function Ints() {
<img className="interview-img" src="https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg"/>
</div>
<div className="col">
- <div className="col">
+ <div className="col ">
<ButtonOne text="Erstes Interview" open="mattijsinv1"></ButtonOne>
</div>
<br/>
- <div className="col">
+ <div className="col ">
<ButtonOne text="Zweites Interview" open="mattijsinv2"></ButtonOne>
</div>
</div>
--
GitLab