diff --git a/components/Chip.tsx b/components/Chip.tsx
index 025de266965fff52255e0c1b21cc0074eab7ce46..d225e9cd4f09ccef1391595433057f6d438d23bd 100644
--- a/components/Chip.tsx
+++ b/components/Chip.tsx
@@ -5,7 +5,7 @@ type ChipOptions = {
export default ({ text, style }: ChipOptions) => {
return (
- <div className={`mx-px my-2 px-3 py-1 text-xs rounded-full text-white ${style}`}>
+ <div className={`m-px px-3 py-1 text-xs rounded-full text-white ${style} w-auto self-start`}>
{text}
</div>
);
diff --git a/components/PageHeaderCard.tsx b/components/PageHeaderCard.tsx
index 61c430eb9b6dfd520731d67680a3057f375c4747..9aeca6340ef3d3106f74169b866e40a5f24b2f47 100644
--- a/components/PageHeaderCard.tsx
+++ b/components/PageHeaderCard.tsx
@@ -13,7 +13,7 @@ type HeaderOptions = {
export default ({ title, shortDescription, img, children }: HeaderOptions) => {
return (
<section
- className="bg-white mt-32 w-full mx-auto relative z-10 pb-32"
+ className="bg-white mt-10 lg:mt-32 w-full mx-auto relative z-10 lg:pb-32"
aria-labelledby="heading"
>
<h2 className="sr-only" id="heading">
@@ -22,7 +22,7 @@ export default ({ title, shortDescription, img, children }: HeaderOptions) => {
<div className="flex flex-col bg-white rounded-b-lg shadow-xl">
<div className="flex-1 relative pt-24 px-6 pb-8 md:px-8">
<div className="h-32 absolute top-0 p-4 inline-block transform -translate-y-1/2">
- <header className={'flex items-end space-x-6'}>
+ <header className={'flex justify-between space-x-6'}>
{img && (
<img
className={'w-24 h-24'}
@@ -30,7 +30,7 @@ export default ({ title, shortDescription, img, children }: HeaderOptions) => {
alt={img.alt ? img.alt : `${title} Logo`}
/>
)}
- <h1 className="text-5xl font-extrabold tracking-tight text-gray-900">
+ <h1 className="p-5 text-3xl lg:text-5xl font-extrabold tracking-tight text-gray-900 overflow-hidden">
{title}
</h1>
</header>
diff --git a/components/layout.tsx b/components/layout.tsx
index f9e1b4f7c453779da1089444cc69f5bf6f834acb..2c50c4322a7dd83f2690fd7e9113b37c37fa2093 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,7 +1,14 @@
import Navbar from '@/views/layout/Navbar'
import { Footer, FooterColumn } from '@/views/layout/Footer'
+import { useEffect } from 'react';
export function Layout({ children }) {
+
+ useEffect(() => {
+ document.body.classList.add("absolute");
+ document.body.classList.add("lg:relative");
+ });
+
return (
<>
{/* <Navbar
@@ -10,7 +17,7 @@ export function Layout({ children }) {
alt: 'Föderale Entwicklungsportal',
}}
/> */}
- <main className="py-10">{children}</main>
+ <main className="lg:py-10">{children}</main>
<Footer logo={{
img: '/img/fitko-main-logo.svg',
alt: 'Föderale Entwicklungsportal',
diff --git a/pages/index.tsx b/pages/index.tsx
index 3b2d92bc7d6b9f7adaab55d14b3685addc3354ed..8ecbf5715275e7c1d75533054cc95608dd3a7787 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import FeaturedApiModules from '@/views/FeaturedApiModules'
import Organisators from '@/views/Organisators'
export default function IndexPage({ nodes }) {
+
return (
<>
<Head>
diff --git a/pages/resources/[serviceName].tsx b/pages/resources/[serviceName].tsx
index 5da332e24602407f9a047be2380a20987b27ac41..b4196c2be8be9b10747e991f6af50b9de682d6a5 100644
--- a/pages/resources/[serviceName].tsx
+++ b/pages/resources/[serviceName].tsx
@@ -2,6 +2,8 @@ import { Header } from '@/views/Service'
import Link from "next/link"
import { fetchServices, fetchService } from '@/lib/contentful'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
+import { IconChevronLeft } from '@tabler/icons'
+
export default function ({ service }) {
return (
@@ -9,13 +11,21 @@ export default function ({ service }) {
<nav className="relative max-w-7xl flex">
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
- <div className="flex">
+ <div className="hidden lg:flex">
<Link href="/resources" passHref>
<a className={'text-lg font-bold text-yellow-400 hover:text-gray-900'}>
Zurück zur Übersicht
</a>
</Link>
</div>
+ <div className="flex lg:hidden">
+ <a href="/resources">
+ <IconChevronLeft
+ className="m-6 text-yellow-400 hover:text-gray-900"
+ aria-hidden="true"
+ />
+ </a>
+ </div>
</div>
</div>
</nav>
diff --git a/pages/resources/index.tsx b/pages/resources/index.tsx
index c48164693adf6045cbf6de9a4e8a751f45998a3a..8b63d61f47d775e9f2575b3ba0edb4622b0122cf 100644
--- a/pages/resources/index.tsx
+++ b/pages/resources/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { useRouter } from 'next/router'
import { fetchServices, ServiceType, Tag } from '@/lib/contentful'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
-import { IconArrowBigRight, IconMail } from '@tabler/icons'
+import { IconArrowBigRight, IconChevronLeft, IconMail } from '@tabler/icons'
import Tooltip from '@/components/Tooltip'
import ServiceTag from "@/components/ServiceTag";
import Chip from "@/components/Chip";
@@ -99,11 +99,11 @@ export default function ({ services }) {
return (
<div className='container'>
<nav
- className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 "
+ className="relative max-w-7xl mx-auto flex items-center justify-between px-3 sm:px-6 "
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
- <div className="md:block md:ml-10 md:space-x-10 flex">
+ <div className="lg:block md:space-x-10 hidden">
<Link href="/" passHref>
<a className={'text-lg font-bold text-yellow-400 hover:text-gray-900'}>
Föderales Entwicklungsportal
@@ -115,14 +115,18 @@ export default function ({ services }) {
</nav>
<div className="py-10">
- <div className="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
- <header
- className={
- 'lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9'
- }
- >
+ <div className="max-w-2xl mx-auto px-3 sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
+ <header className="lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9 flex flex-row">
+ <div className="flex lg:hidden">
+ <a href="/">
+ <IconChevronLeft
+ className="mr-7 mt-6 text-yellow-400 hover:text-gray-900"
+ aria-hidden="true"
+ />
+ </a>
+ </div>
<h1>
- <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
+ <span className="overflow-hiddenmt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Verfügbare Plattformen & Basisdienste</span>
</span>
</h1>
@@ -135,7 +139,7 @@ export default function ({ services }) {
{filters.map((filter) => (
<div className="pt-6 mt-4" key={filter.id}>
<p
- className="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
+ className="text-xs font-semibold text-gray-500 uppercase tracking-wider"
id={`${filter.id}-headline`}
>
{filter.label}
@@ -174,8 +178,19 @@ export default function ({ services }) {
{filteredServices.map((service : any, key) => (
<li
key={service.slug}
- className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
+ className="bg-white px-4 pt-3 pb-6 shadow sm:p-6 sm:rounded-lg"
>
+ <div className="text-right md:float-right">
+ {hasTag(service, 'label:external') ?
+ <Tooltip
+ delayIn={200}
+ delayOut={600}
+ content="Bei diesem Inhalt handelt es sich um einen externen Inhalt, der keiner Qualitätssicherung seitens der FITKO unterliegt."
+ >
+ <Chip text={'externer Inhalt'} style={'bg-indigo-500'} />
+ </Tooltip>
+ : ''}
+ </div>
<div aria-labelledby={'service-' + key}>
<div className="flex justify-between">
<div className="flex space-x-3">
@@ -194,24 +209,15 @@ export default function ({ services }) {
</a>
</Link>
</p>
- <div className="container flex">
- {service.tags.map((tag : Tag, i: number) => {
- if (tag.fields && tag.fields.name) {
- return <ServiceTag key={i} text={tag.fields.name} style={'bg-yellow-400'} />
- }
- })}
- </div>
</div>
</div>
- {hasTag(service, 'label:external') ?
- <Tooltip
- delayIn={200}
- delayOut={600}
- content="Bei diesem Inhalt handelt es sich um einen externen Inhalt, der keiner Qualitätssicherung seitens der FITKO unterliegt."
- >
- <Chip text={'externer Inhalt'} style={'bg-indigo-500'} />
- </Tooltip>
- : ''}
+ </div>
+ <div className="container flex flex-col md:flex-row my-2">
+ {service.tags.map((tag : Tag, i: number) => {
+ if (tag.fields && tag.fields.name) {
+ return <ServiceTag key={i} text={tag.fields.name} style={'bg-yellow-400'} />
+ }
+ })}
</div>
<div
className="mt-2 text-sm text-gray-700 space-y-4"
@@ -243,19 +249,16 @@ export default function ({ services }) {
>
<div aria-labelledby={'service-add-on'}>
<div className="min-w-0 flex-1">
- <a href="https://gitlab.opencode.de/fitko/feedback/-/issues/new" className="hover:underline">
- <p className="text-sm font-medium text-gray-900">
- Dein zukünfitiger Inhalt
- </p>
- </a>
+ <p className="text-sm font-medium text-gray-900">
+ Dein zukünfitiger Inhalt
+ </p>
</div>
<div className="mt-2 text-sm text-gray-700 space-y-4">
- Du kennst weitere Inhalte, die hier nicht gelistet sind? Kontaktiere uns und gebe uns darüber Bescheid.
- </div>
+ Dein zukünfitiger Inhalt" entfernen und stattdessen Inhalt der Box anpassen: "Du kennst weitere Inhalte, die hier nicht gelistet sind? Kontaktiere uns und gebe uns darüber Bescheid. Am einfachsten geht das über unseren Issue-Tracker im Open Source Code Repository der öffentlichen Verwaltung . Schau vor Deinem Feedback bitte in die <a className='text-blue-500' href='https://gitlab.opencode.de/fitko/feedback/-/issues'>Liste der bestehenden Issues</a> und erstelle erst dann <a className='text-blue-500' href='https://gitlab.opencode.de/fitko/feedback/-/issues/new'>ein neues Issue</a>.</div>
<div className="mt-6 flex justify-end space-x-8">
<div className="flex text-sm">
<span className="inline-flex items-center text-sm">
- <Link href={`mailto:fit-connectfitko.de`} passHref>
+ <Link href={`mailto:fit-connect@fitko.de`} passHref>
<a className="inline-flex space-x-2 text-gray-400 hover:text-gray-800">
<span className="font-medium">Kontakt</span>
<IconMail
diff --git a/styles/additional/tooltip.scss b/styles/additional/tooltip.scss
index 69b0544bdec3187d12ff6dd304dea065b75344ac..9fc21a09005e4b1606d615a165b193172a10acfd 100644
--- a/styles/additional/tooltip.scss
+++ b/styles/additional/tooltip.scss
@@ -1,20 +1,20 @@
-// Tooltip
.tooltip-wrapper {
@apply relative inline-block;
}
.tooltip-content {
- @apply inline-block absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900
+ @apply pointer-events-none inline-block absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900
rounded-lg shadow-sm opacity-0 dark:bg-gray-700 transition-opacity w-max left-1/2 top-1/1
- -translate-x-1/2 max-w-prose drop-shadow-md;
+ -translate-x-1/2 max-w-xs sm:max-w-prose drop-shadow-md transform-gpu;
}
.tooltip-content.active {
- @apply opacity-100;
+ @apply pointer-events-none opacity-100;
}
.tooltip-content.top-left {
- @apply -top-1 -translate-y-1/1 -translate-x-3/4;
+ --tw-translate-x: -90%;
+ @apply -top-1 -translate-y-1/1;
}
.tooltip-arrow {
@@ -22,5 +22,6 @@
}
.top-left .tooltip-arrow {
- @apply left-3/4 bottom-0 top-auto translate-y-1/1;
+ @apply bottom-0 top-auto translate-y-1/1;
+ left: 90%;
}
diff --git a/views/FeaturedApiModules.tsx b/views/FeaturedApiModules.tsx
index 1471978f945e4feb00b551b371bfd8227c9d0597..6156f6a941cea663f9cb66a33f99dff5b03fd613 100644
--- a/views/FeaturedApiModules.tsx
+++ b/views/FeaturedApiModules.tsx
@@ -1,4 +1,5 @@
import { IconSend, IconRoute, IconSteeringWheel, IconBug, IconManualGearbox, IconBrandOpenSource, IconRocket } from '@tabler/icons'
+import Link from 'next/link'
const featuredModules = [
{
@@ -30,7 +31,7 @@ export default () => {
{/* Header */}
<div className="relative pb-32 bg-gray-800">
<div className="absolute inset-0 bg-yellow-400">
- <div className="w-screen h-full bg-[length:250px] bg-banner-texture" />
+ <div className="h-full bg-[length:250px] bg-banner-texture" />
<div
className="absolute inset-0 bg-gray-200 mix-blend-multiply"
aria-hidden="true"
@@ -44,7 +45,7 @@ export default () => {
aria-hidden="true"
/>
</div>
- <h1 className="py-0.5 m-4 text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
+ <h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
Über das Föderale Entwicklungsportal
</h1>
</div>
@@ -71,8 +72,8 @@ export default () => {
aria-hidden="true"
/>
</div>
- <h1 className="py-0.5 m-4 text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
- Du möchtest Fehler oder Verbesserungsvorschlag melden?
+ <h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
+ Du möchtest Fehler oder Verbesserungs­vorschlag melden?
</h1>
</div>
<p className="p-8 mt-6 max-w-7xl text-lg text-gray-800 bg-white rounded-2xl">
@@ -92,7 +93,7 @@ export default () => {
aria-hidden="true"
/>
</div>
- <h1 className="py-0.5 m-4 text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
+ <h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
Du hast Fragen oder neue Ideen, die Du gerne diskutieren möchtest?
</h1>
</div>
@@ -108,12 +109,12 @@ export default () => {
aria-hidden="true"
/>
</div>
- <h1 className="py-0.5 m-4 text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
+ <h1 className="overflow-hidden py-1 sm:py-0.5 m-4 text-2xl sm:text-3xl font-extrabold tracking-tight text-white drop-shadow-md">
Direkt loslegen!
</h1>
</div>
<p className="p-8 mt-6 max-w-7xl text-lg text-gray-800 bg-white rounded-2xl">
- Mit den folgenden Ressourcen kannst Du direkt loslegen und mehr über die Föderale IT-Infrastruktur von Bund und Ländern erfahren und Anwendungen für die Öffentliche Verwaltung erstellen. Pespektivisch werden an dieser Stelle konkrete Entwicklungsszenarien mit den jeweils dafür benötigten Entwicklungsressourcen zusammengestellt. Eine Übersicht über alle vorhandenen Entwicklungsressourcen findest Du <a className='text-blue-500' href='https://git.fitko.de/fit-connect/planning/-/blob/main/resources'>hier</a>.
+ Mit den folgenden Ressourcen kannst Du direkt loslegen und mehr über die Föderale IT-Infrastruktur von Bund und Ländern erfahren und Anwendungen für die Öffentliche Verwaltung erstellen. Pespektivisch werden an dieser Stelle konkrete Entwicklungsszenarien mit den jeweils dafür benötigten Entwicklungsressourcen zusammengestellt. Eine Übersicht über alle vorhandenen Entwicklungsressourcen findest Du <Link href="/resources" passHref><a className='text-blue-500'>hier</a></Link>.
</p>
</section>
</div>
diff --git a/views/Hero.tsx b/views/Hero.tsx
index 520f8746779744258250434da392241dd9dc988d..fa93b5df4a753fcb3440b81580f3d5e61e901f7a 100644
--- a/views/Hero.tsx
+++ b/views/Hero.tsx
@@ -7,8 +7,8 @@ export default () => {
<div className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-4xl md:mx-auto lg:col-span-8 lg:text-left">
- <h1>
- <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
+ <h1 className="overflow-hidden">
+ <span className="mt-1 block text-3xl tracking-tight font-extrabold sm:text-5xl xl:text-7xl">
<span className="block text-gray-900">Das Föderale</span>
<span className="block text-yellow-400">
Entwicklungsportal
@@ -18,9 +18,9 @@ export default () => {
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-2xl">
Willkommen im Föderalen Entwicklungsportal, dem zentralen Ort für technische Dokumentation, Entwicklungsressourcen und Implementierungsbeispiele zu Standards und Schnittstellen der föderalen IT-Infrastruktur von Bund und Ländern.
</p>
- <div className="mt-8 sm:text-center sm:max-w-lg lg:mxw-0 flex items-stretch flex-grow">
+ <div className="mt-8 lg:mxw-0 flex items-stretch grow lg:w-2/3">
<Link href="/resources" passHref>
- <a className="text-center text-lg -ml-px relative inline-flex space-x-2 px-4 py-2 font-medium rounded-md text-white bg-yellow-400 hover:bg-yellow-300 hover:cursor-pointer shadow-sm">
+ <a className="justify-center text-lg -ml-px relative inline-flex space-x-2 px-4 py-2 font-medium rounded-md text-white bg-yellow-400 hover:bg-yellow-300 hover:cursor-pointer shadow-sm w-full">
Zu den Entwicklungsressourcen
</a>
</Link>
diff --git a/views/layout/Footer.tsx b/views/layout/Footer.tsx
index ca6b342c90bdc175afa09b4324d5e34f34d2f678..8daecc0db757222d82bcaa663ed8bdfcb4b15aeb 100644
--- a/views/layout/Footer.tsx
+++ b/views/layout/Footer.tsx
@@ -80,14 +80,16 @@ export function Footer({ logo, copyright, children }: FooterOptions) {
</div>
) : null}
<p className="text-xs text-gray-400 text-center">
- Wenn nicht anders vermerkt, sind die Inhalte dieser Webseite lizenziert unter der <a className="underline" href="https://creativecommons.org/licenses/by/4.0/deed.de">Creative Commons Namensnennung 4.0 International Public License (CC BY 4.0)</a>.
+ Wenn nicht anders vermerkt, sind die Inhalte dieser Webseite lizenziert unter der <a className="underline" href="https://creativecommons.org/licenses/by/4.0/deed.de">Creative
+ Commons Namensnennung 4.0 International Public License (CC BY 4.0)</a>.
</p>
<p className="text-xs text-gray-400 text-center">
- Der Quellcode dieser Seite ist lizenziert unter der <a href="https://git.fitko.de/fit-connect/entwicklungsportal/-/blob/main/LICENSE.md">EUPL</a> und findet sich <a href="https://git.fitko.de/fit-connect/entwicklungsportal">im GitLab der FITKO</a>.
+ Der Quellcode dieser Seite ist lizenziert unter der <a className="underline" href="https://git.fitko.de/fit-connect/entwicklungsportal/-/blob/main/LICENSE.md">EUPL</a> und
+ findet sich <a className="underline" href="https://git.fitko.de/fit-connect/entwicklungsportal">im GitLab der FITKO</a>.
</p>
<p className="text-xs text-gray-400 text-center">
- Teile der Hintergrundgrafiken stammen aus dem <a href="https://github.com/atlemo/SubtlePatterns">Subtle Patterns-Projekt</a>.
- Subtle Patterns ist lizenziert unter der <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.
+ Teile der Hintergrundgrafiken stammen aus dem <a className="underline" href="https://github.com/atlemo/SubtlePatterns">Subtle Patterns-Projekt</a>.
+ Subtle Patterns ist lizenziert unter der <a className="underline" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.
</p>
</div>
</footer>