c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Close button

Browse Source
This commit is contained in:
Daniel Kluge 2022-02-05 00:31:04 +01:00
parent 65e290b160
commit 4ba79f63d0
2 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/ProjectModal.tsx
View File

@ -2,6 +2,7 @@ import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import asciidoctor from "asciidoctor"; import asciidoctor from "asciidoctor";
import styles from "../styles/ProjectModal.module.css"; import styles from "../styles/ProjectModal.module.css";
import Link from "next/link";
interface ModalInput { interface ModalInput {
project: string; project: string;
@ -37,7 +38,7 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
if (res.status !== 200) setProjectData(projectServerErrorHtml); if (res.status !== 200) setProjectData(projectServerErrorHtml);
res.text().then(data => { res.text().then(data => {
try { try {
const adDoc = ad.load(data, {attributes: {showtitle: true}}); const adDoc = ad.load(data, { attributes: { showtitle: true } });
setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime"))); setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime")));
} catch { } catch {
setProjectData(projectServerErrorHtml); setProjectData(projectServerErrorHtml);
@ -54,17 +55,12 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
}, [projectData, visible]); }, [projectData, visible]);
const onEscClose = (e: React.KeyboardEvent) => {
console.log(e);
if (e.key === "Escape") {
//e.preventDefault();
setVisible(false);
}
};
if (!visible) return <></>; if (!visible) return <></>;
return <div className={styles.modal}> return <div className={styles.modal}>
<a href="javascript:void(0);" onClick={() => setVisible(false)}>
<div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
</a>
<div ref={containerRef} className={`${styles.modalContainer} asciidoc`}> <div ref={containerRef} className={`${styles.modalContainer} asciidoc`}>
</div> </div>
</div>; </div>;

26
styles/ProjectModal.module.css
View File

@ -17,4 +17,30 @@
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
overflow-y: auto; overflow-y: auto;
position: relative;
}
.modalClose {
float: right;
position: relative;
background: #555;
border-radius: 50%;
width: 2em;
height: 2em;
font-family: sans-serif;
margin-bottom: -20px;
z-index: 100;
/*text-align: center;*/
/*padding: auto 0;*/
}
.modalCloseAlign {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: #fff;
text-decoration: none;
} }