added links to marvel for work in progress parts (#297)

This commit is contained in:
Erik Jan de Wit 2021-01-13 21:59:49 +01:00 committed by GitHub
parent 0d9b4ff054
commit 9548038631
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 6 deletions

View file

@ -1,5 +1,6 @@
import React from "react";
import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
export const AuthenticationSection = () => {
return <>The Authentication Page</>;
};
export const AuthenticationSection = () => (
<WorkInProgress marvelLink="https://marvelapp.com/prototype/bh91013/screen/75647039" />
);

View file

@ -0,0 +1,16 @@
import React from "react";
import "./work-in-progress.css";
type WorkInProgressProps = {
marvelLink: string;
};
export const WorkInProgress = ({ marvelLink }: WorkInProgressProps) => (
<div>
This page is not completed yet, but this is what it's going to look like:
<div className="container">
<iframe className="responsive-iframe" src={marvelLink}></iframe>
</div>
</div>
);

View file

@ -0,0 +1,18 @@
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}

View file

@ -1,5 +1,6 @@
import React from "react";
import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
export const IdentityProvidersSection = () => {
return <>The Identity Providers Page</>;
};
export const IdentityProvidersSection = () => (
<WorkInProgress marvelLink="https://marvelapp.com/prototype/55c2d8f/screen/75697040" />
);