Browse Source

Links öffnen nun in neuem Tab

main
Philipp Lohner 10 months ago
parent
commit
aac7c8f9b6
  1. 1
      src/components/Categories/Categories.tsx
  2. 8
      src/components/CategoryLink/CategoryLink.tsx
  3. 2
      src/components/Main/Main.tsx
  4. 4
      src/components/PartnerLink/PartnerLink.tsx
  5. 2
      src/components/Partners/Partners.tsx
  6. 11
      src/components/navigation/Navigation.scss
  7. 4
      src/components/navigation/Navigation.tsx
  8. 2
      src/index.scss

1
src/components/Categories/Categories.tsx

@ -3,7 +3,6 @@ import "./Categories.scss";
import { url } from "../../variables";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
import CategoryLink from "../CategoryLink/CategoryLink";
function Categories() {

8
src/components/CategoryLink/CategoryLink.tsx

@ -1,12 +1,12 @@
import React from "react";
import "./CategoryLink.scss";
import { NavLink } from "react-router-dom";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import ReactMarkdown from "react-markdown";
interface CategoryProps {
title: string;
@ -27,12 +27,14 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
<Typography className="category-title">{category.title}</Typography>
</AccordionSummary>
<AccordionDetails className="acc-detail">
<Typography className="category-text">{category.content}</Typography>
<div className="category-text">
<ReactMarkdown>{category.content}</ReactMarkdown>
</div>
<button
className="category-button"
onClick={(e) => {
e.preventDefault();
window.location.href = category.url;
window.open(`${category.url}`, "_blank");
}}
>
<span>Zur Datenquelle</span> <ArrowForwardIcon />

2
src/components/Main/Main.tsx

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import mainImage from "../../assets/img/AnordnungKarten.png";
import { Link, NavLink } from "react-router-dom";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
function Main() {

4
src/components/PartnerLink/PartnerLink.tsx

@ -9,7 +9,9 @@ interface PartnerProps {
const PartnerLink: React.FC<PartnerProps> = (partner) => {
return (
<div className="PartnerLink">
<a href={partner.url}>{partner.name}</a>
<a target="_blank" rel="noopener noreferrer" href={partner.url}>
{partner.name}
</a>
</div>
);
};

2
src/components/Partners/Partners.tsx

@ -1,7 +1,7 @@
import React, { ReactElement, useEffect, useState } from "react";
import "./Partners.scss";
import { url } from "../../variables";
import { Link, NavLink } from "react-router-dom";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";

11
src/components/navigation/Navigation.scss

@ -18,16 +18,24 @@
flex-direction: row;
align-items: center;
.logo-container {
height: 95%;
.logo {
height: 100%;
}
}
a{
text-decoration: none;
}
span {
margin-left: 1rem;
color: white;
font-family: "bereit", sans-serif;
font-size: 2rem;
@media screen and (min-width: 750px) {
margin-left: 2rem;
}
@ -37,7 +45,7 @@
.link-container {
font-family: "PT Sans", sans-serif;
font-weight: bolder;
border-bottom: 2px solid #ffffff;
font-size: 1.2rem;
@media screen and (max-width: 850px) {
display: none;
@ -49,7 +57,6 @@
a {
margin-left: 2rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
&:hover {

4
src/components/navigation/Navigation.tsx

@ -26,7 +26,9 @@ function MobileNav() {
<img className="logo" src={greenLogo} alt="green" />
</NavLink>
</div>
<span>Grünes Quartett</span>
<NavLink to={"/"}>
<span>Grünes Quartett</span>
</NavLink>
</div>
<div className="link-container">
<NavLink exact to={"/"}>

2
src/index.scss

@ -12,7 +12,7 @@
body {
margin: 0;
font-family: "bereit", sans-serif;
font-family: "PT Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Loading…
Cancel
Save