Skip to content
Snippets Groups Projects
Commit 3e15cfe0 authored by René Rösner's avatar René Rösner
Browse files

Merge branch 'feature/428-mobile-and-refactoring' into 'main' 

planning#428: Responsive Design and textual changes

See merge request !14
parents aba61fe7 ab1bbcb1
No related branches found
No related tags found
1 merge request!14planning#428: Responsive Design and textual changes
Hide whitespace changes
Inline Side-by-side
Showing
with 88 additions and 63 deletions
components/Chip.tsx
+ 1
− 1
View file @ 3e15cfe0
......@@ -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>
);
......
components/PageHeaderCard.tsx
+ 3
− 3
View file @ 3e15cfe0
......@@ -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>
......
components/layout.tsx
+ 8
− 1
View file @ 3e15cfe0
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',
......
pages/index.tsx
+ 1
− 0
View file @ 3e15cfe0
......@@ -5,6 +5,7 @@ import FeaturedApiModules from '@/views/FeaturedApiModules'
import Organisators from '@/views/Organisators'
export default function IndexPage({ nodes }) {
return (
<>
<Head>
......
pages/resources/[serviceName].tsx
+ 11
− 1
View file @ 3e15cfe0
......@@ -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>
......
pages/resources/index.tsx
+ 39
− 36
View file @ 3e15cfe0
......@@ -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 &amp; 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
......
styles/additional/tooltip.scss
+ 7
− 6
View file @ 3e15cfe0
// 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%;
}
views/FeaturedApiModules.tsx
+ 8
− 7
View file @ 3e15cfe0
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&shy;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>
......
views/Hero.tsx
+ 4
− 4
View file @ 3e15cfe0
......@@ -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>
......
views/layout/Footer.tsx
+ 6
− 4
View file @ 3e15cfe0
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment