From add4093448474426540eefb1cefdc36e7777e5a1 Mon Sep 17 00:00:00 2001
From: haidner1 <haidner@live.de>
Date: Thu, 6 Oct 2022 16:28:07 +0200
Subject: [PATCH] Layout der Seite Termine verbessert
---
src/components/CardTermine.jsx | 4 +--
src/css/style.scss | 40 +++++++++++++++++++++-
src/pages/termine.mdx | 62 +++++++++++++++++++++-------------
3 files changed, 79 insertions(+), 27 deletions(-)
diff --git a/src/components/CardTermine.jsx b/src/components/CardTermine.jsx
index c97b0fcc1..110263ef0 100644
--- a/src/components/CardTermine.jsx
+++ b/src/components/CardTermine.jsx
@@ -13,10 +13,10 @@ export default function Card({title, icon, children}) {
}
}, [icon])
- return <div className="relative flex flex-col items-center p-6 bg-white rounded shadow-xl">
+ return <div className="p-6 bg-white rounded shadow-xl">
{svgData && <img className="w-16 h-16 mb-2" src={svgData}/>}
<br/>
- <h4 className="text-xl font-bold leading-snug tracking-tight mb-1" style={{ textAlign: "center" }} >FIT-Connect <br/> für {title}</h4>
+ <h4 className="text-xl font-bold leading-snug mb-1 text-center fitko-termine-heading" >FIT-Connect <br/> für {title}</h4>
{children}
</div>
}
diff --git a/src/css/style.scss b/src/css/style.scss
index 4798e733d..effd9572a 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -111,6 +111,32 @@ img {
display: none !important;
}
+
+.fitko-termine {
+ text-align: center;
+ min-height: 500px;
+}
+
+.fitko-termine-heading {
+ text-align: center;
+ height: 80px;
+}
+
+.fitko-termine-before-button {
+ text-align: center;
+ min-height: 140px;
+
+}
+
+
+.fitko-termine-after-button {
+ text-align: center;
+ min-height: 470px;
+ margin-top: 25px;
+
+}
+
+
@media (min-width: 997px) {
.navbar__items--right [class^="searchBox"] {
position: right;
@@ -127,4 +153,16 @@ img {
margin-left: -60px;
margin-right: 0px;
}
-}
\ No newline at end of file
+}
+
+@media (max-width:444px) {
+
+ .fitko-termine-after-button {
+ text-align: center;
+ display: inline-block;
+ height: 600px !important;
+
+ }
+
+}
+
diff --git a/src/pages/termine.mdx b/src/pages/termine.mdx
index a5288f814..e21739190 100644
--- a/src/pages/termine.mdx
+++ b/src/pages/termine.mdx
@@ -6,8 +6,7 @@ import MailToButtonTermine from '@components/MailToButtonTermine'
import BannerTermine from '@components/BannerTermine'
import CardTermine from '@components/CardTermine'
import MailToButton from '@components/MailToButton'
-
-
+import '../css/style.scss';
<header className="max-w-3xl mx-auto text-center pb-16">
<h1 className="h1 mb-4">Veranstaltungen</h1>
@@ -16,35 +15,50 @@ import MailToButton from '@components/MailToButton'
<BannerTermine>
<div style={{ width: "33%" }} >
<CardTermine title="Interessierte" icon={'Send'}>
- <br/>
- <p className="text-gray-600 text-center" style={{display: 'inline-block', height: '200px'}}>
- Bei diesen Veranstaltungen erhalten Verantwortliche für die Umsetzung und Entwickler:innen Informationen darüber, wie sie Onlinedienste und Fachverfahren an FIT-Connect anbinden können.
- Zum Anmelden per E-Mail klicken Sie bitte auf die folgende Schaltfläche:
- </p>
- <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20Anbindungsinteressent%3Ainnenkreis&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Anbindungsinteressent%3Ainnenkreis%E2%80%9C.%0D%0A%0D%0AIch%20interessiere%20mich%20f%C3%BCr%20FIT-Connect%20und%20m%C3%B6chte%20mehr%20%C3%BCber%20die%20Anbindung%20an%20FIT-Connect%20erfahren.%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'} />
- <br/>
- </CardTermine>
+ <br/>
+ <div className="fitko-termine" >
+ <p className="fitko-termine-before-button" >
+ Diese Veranstaltungen richten sich an alle, die mehr über die Anbindng an FIT-Connect erfahren wollen.
+ </p>
+ <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20Anbindungsinteressent%3Ainnenkreis&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Anbindungsinteressent%3Ainnenkreis%E2%80%9C.%0D%0A%0D%0AIch%20interessiere%20mich%20f%C3%BCr%20FIT-Connect%20und%20m%C3%B6chte%20mehr%20%C3%BCber%20die%20Anbindung%20an%20FIT-Connect%20erfahren.%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'} />
+ <br/>
+ <p className="fitko-termine-after-button" >
+ Zum Anmelden per E-Mail klicken Sie auf die Schaltfläche oben. <br/>
+ Bei diesen Veranstaltungen erhalten Verantwortliche für die Umsetzung des Onlinezugangsgesetzes (OZG) und Entwickler:innen Informationen darüber, wie sie Onlinedienste und Fachverfahren an FIT-Connect anbinden können.
+ </p>
+ </div>
+ </CardTermine>
</div>
<div style={{ width: "33%" }} >
<CardTermine title={'Verantwortliche'} icon={'Support'}>
- <br/>
- <p className="text-gray-600 text-center" style={{display: 'inline-block', height: '200px'}}>
- Diese Veranstaltungen richten sich an Umsetzungsverantwortliche, die ihre Systeme anbinden oder angebunden haben.
- Schwerpunkte sind die Feature-Roadmap, konzeptionelle Überlegungen, Upgrades. Diese Veranstaltungen finden monatlich statt. Zum Anmelden per E-Mail klicken Sie auf die folgende Schaltfläche:
- </p>
- <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20Nutzer%3Ainnenkreis&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Nutzer%3Ainnenkreis%E2%80%9C.%0D%0A%0D%0AWir%20nutzen%20FIT-Connect%20und%20haben%20bereits%20ein%20System%20an%20FIT-Connect%20angebunden%20bzw.%20sind%20gerade%20dabei%2C%20an%20FIT-Connect%20anzubinden.%0D%0A%0D%0A%0D%0A'} />
- <br/>
- </CardTermine>
+ <br/>
+ <div className="fitko-termine" >
+ <p className="fitko-termine-before-button" >
+ Diese Veranstaltungen richten sich an Verantwortliche, die ihre Systeme anbinden oder angebunden haben.
+ </p>
+ <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20Nutzer%3Ainnenkreis&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Nutzer%3Ainnenkreis%E2%80%9C.%0D%0A%0D%0AWir%20nutzen%20FIT-Connect%20und%20haben%20bereits%20ein%20System%20an%20FIT-Connect%20angebunden%20bzw.%20sind%20gerade%20dabei%2C%20an%20FIT-Connect%20anzubinden.%0D%0A%0D%0A%0D%0A'} />
+ <br/>
+ <p className="fitko-termine-after-button" >
+ Zum Anmelden per E-Mail klicken Sie auf die Schaltfläche oben. <br/>
+ Diese Veranstaltungen finden monatlich statt. Bei diesen Veranstaltungen erfahren Verantwortliche für die Umsetzung Informationen zu Themen wie die Feature-Roadmap, konzeptionelle Überlegungen, anstehende Upgrades und individuelle Themen.
+ </p>
+ </div>
+ </CardTermine>
</div>
<div style={{ width: "33%" }} >
<CardTermine title={'Entwickler:innen'} icon={'Bug'}>
<br/>
- <p className="text-gray-600 text-center" style={{display: 'inline-block', height: '200px'}}>
- Diese Veranstaltungen richten sich an Entwickler:innen, die bereits mit FIT-Connect arbeiten und sich in die Weiterentwicklung von FIT-Connect einbringen möchten.
- Diese Veranstaltungen finden monatlich statt. Zum Anmelden per E-Mail klicken Sie auf die folgende Schaltfläche:
- </p>
- <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20%22FIT-Connect%20Austausch%20zur%20Technik%22&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Austausch%20zur%20Technik%E2%80%9C.%0D%0A%0D%0AWir%20nutzen%20bereits%20FIT-Connect%20und%20m%C3%B6chten%20uns%20aktiv%20in%20die%20Weiterentwicklung%20von%20FIT-Connect%20einbringen.%0D%0A%0D%0A%0D%0A'} />
- <br/>
+ <div className="fitko-termine" >
+ <p className="fitko-termine-before-button" >
+ Diese Veranstaltungen richten sich an Entwickler:innen, die ihre Systeme anbinden oder angebunden haben.
+ </p>
+ <MailToButtonTermine label={'Anmelden'} recipient={'fit-connect@fitko.de'} subject={'Anfrage%20Teilnahme%20an%20der%20Online-Veranstaltung%20%22FIT-Connect%20Austausch%20zur%20Technik%22&body=Liebes%20FIT-Connect-Team%2C%0D%0A%0D%0Aber%C3%BCcksichtigen%20Sie%20mich%20bitte%20f%C3%BCr%20die%20n%C3%A4chste%20Online-Veranstaltung%20%E2%80%9EFIT-Connect%20Austausch%20zur%20Technik%E2%80%9C.%0D%0A%0D%0AWir%20nutzen%20bereits%20FIT-Connect%20und%20m%C3%B6chten%20uns%20aktiv%20in%20die%20Weiterentwicklung%20von%20FIT-Connect%20einbringen.%0D%0A%0D%0A%0D%0A'} />
+ <br/>
+ <p className="fitko-termine-after-button" >
+ Zum Anmelden per E-Mail klicken Sie auf die Schaltfläche oben. <br/>
+ Diese Veranstaltungen finden monatlich statt. Schwerpunkte sind die Feature-Roadmap, konzeptionelle Überlegungen, Upgrades. Teilnehmer sind Entwwickler:innen, die mit FIT-Connect arbeiten und sich in die Weiterentwicklung einbringen möchten.
+ </p>
+ </div>
</CardTermine>
</div>
</BannerTermine>
--
GitLab