Normalize Code Style

This commit is contained in:
Kevin Kandlbinder 2020-12-27 03:44:12 +01:00
parent f62930067b
commit 75c52c744d
36 changed files with 508 additions and 526 deletions

View file

@ -1,6 +1,6 @@
import React from "react"
import {graphql} from "gatsby"
import {Trans, useTranslation} from 'gatsby-plugin-react-i18next';
import { graphql } from "gatsby"
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
import Layout from "../layouts/default";
import PropTypes from "prop-types"
@ -27,53 +27,53 @@ query GetProject($urlname: String!, $lang: String!) {
}
`
const ProjectTemplate = ({data}) => {
const {t} = useTranslation();
const ProjectTemplate = ({ data }) => {
const { t } = useTranslation();
let project = data.allProjectsJson.nodes[0];
let projectName = project.name;
return (
<Layout description={project.shortDescription} title={t("project")+": "+projectName} transparentTopbar={true}>
<section className={styles.projectHeader}>
<div style={{paddingTop: 0}}>
<div className={styles.headerBackground} style={{backgroundImage: "url("+project.image.publicURL+")"}}></div>
<header>
<div className={styles.headerInner}>
<h1><Trans>project</Trans>: {projectName}</h1>
<span className={styles.postMeta}>{project.shortDescription}</span>
</div>
</header>
<div className={styles.headerPlaceholder}></div>
return (
<Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
<section className={styles.projectHeader}>
<div style={{ paddingTop: 0 }}>
<div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
<header>
<div className={styles.headerInner}>
<h1><Trans>project</Trans>: {projectName}</h1>
<span className={styles.postMeta}>{project.shortDescription}</span>
</div>
</section>
{project.longDescription != null ?
<section className={styles.projectAbout}>
<article>
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{projectName}}</Trans></h1>
<p>{project.longDescription}</p>
</article>
</section>
: null}
{project.links.github !== null || project.links.website !== null ?
<section className={styles.projectLinks}>
<div>
<h1>Links</h1>
<div className={styles.linkList}>
{project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
{project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
</header>
<div className={styles.headerPlaceholder}></div>
</div>
</section>
{project.longDescription != null ?
<section className={styles.projectAbout}>
<article>
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
<p>{project.longDescription}</p>
</article>
</section>
: null}
{project.links.github !== null || project.links.website !== null ?
<section className={styles.projectLinks}>
<div>
<h1>Links</h1>
<div className={styles.linkList}>
{project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
{project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
</div>
</div>
</section>
: null}
{/*<section>
</div>
</div>
</section>
: null}
{/*<section>
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</section>*/}
</Layout>
);
</Layout>
);
}
ProjectTemplate.propTypes = {

View file

@ -1,7 +1,7 @@
@import "../variables";
.projectHeader {
> div {
>div {
padding-bottom: 0 !important;
}
@ -19,8 +19,8 @@
left: 0;
width: 100%;
height: 300px;
background:linear-gradient(to bottom, rgba($background, .95), rgba($background, .5) 20%);
background: linear-gradient(to bottom, rgba($background, .95), rgba($background, .5) 20%);
.headerInner {
max-width: $layoutWidth;
width: 100%;
@ -32,12 +32,12 @@
margin: 0;
color: white;
}
h1 {
font-size: 2em;
}
}
}
.headerPlaceholder {
@ -68,7 +68,11 @@
text-decoration-skip: none;
text-decoration: underline dotted currentColor;
i.fab, i.fas, i.fa, i.far, i.fal {
i.fab,
i.fas,
i.fa,
i.far,
i.fal {
display: inline;
}
}