Touch report-window

This commit is contained in:
Arkadiusz Wieczorek 2022-04-25 14:29:55 +02:00
parent b92a472569
commit 291189bda4
4 changed files with 141 additions and 59 deletions

View File

@ -4,8 +4,8 @@
<meta charset="utf-8" />
<title>Treść maila do zgłoszenia</title>
<link rel="stylesheet" href="/lib/components/report-window/report-window.css" />
<link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
<!-- <link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" /> -->
</head>
<body>

View File

@ -1,5 +1,4 @@
@import './../../styles/colors.scss';
// @import './../../styles/fonts';
html {
font-size: 1rem;
@ -9,6 +8,7 @@ html {
body {
background-color: #fff;
margin: 3rem 3rem;
}
nav {
@ -35,3 +35,102 @@ h2,
h3 {
max-width: 70ex;
}
.header {
display: grid;
grid-template-columns: 1.75rem 1fr;
align-items: center;
max-height: 3.5rem;
min-height: 3.5rem;
border-bottom: 1px solid $light-grey;
position: sticky;
top: 0;
background: #ffffff;
z-index: 1;
.webpage-metadata {
word-break: break-all;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
font-size: 0.875rem;
font-weight: 600;
justify-content: center;
padding-left: 1rem;
color: #000;
&--hyperlink {
font-weight: 400;
color: $ultra-black-color;
max-height: 2rem;
overflow: hidden;
}
}
}
.sv_main {
.sv_container {
color: #000;
padding: 1rem 0;
}
.sv_body {
border: none !important;
}
}
.sv_q_radiogroup {
margin-bottom: .5rem;
}
.sv_row {
background-color: #fff !important;
}
.sv_nav {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 2rem 0;
}
.sv_prev_btn {
grid-column-start: 0;
justify-self: flex-start;
}
.sv_next_btn {
grid-column-start: 2;
justify-self: flex-end;
}
.sv_prev_btn,
.sv_next_btn {
border: 0;
outline: 0;
height: 3rem;
font-size: 0.875rem;
line-height: 0.875rem;
height: 2.5rem;
cursor: pointer;
background-color: #000 !important;
font-weight: 800;
padding: 0 1.5rem;
background-color: #000;
color: $icd-rentgen-color;
// &:hover {
// background-image: linear-gradient(
// to right,
// $icd-rentgen-color 0%,
// $icd-rentgen-color 4%,
// #000 4%,
// #000 100%
// );
// animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
// }
// @keyframes slidebg {
// to {
// background-position: 155px;
// }
// }
}

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../../memory';
import { useEmitter } from '../../util';
@ -47,10 +47,6 @@ function Report() {
const result = (
<div {...{ 'data-version': counter }}>
<nav>
<img src="../assets/icon-addon.svg" width={48} height={48}></img>{' '}
<h1>Rentgen - Generuj treść maila dla {origin}</h1>
</nav>
{mode === 'survey' ? (
<Questions
hosts={Object.values(clusters)
@ -68,7 +64,24 @@ function Report() {
{/* <HARConverter {...{ entries }} /> */}
</div>
);
return result;
return (
<Fragment>
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<div className="webpage-metadata">
{origin ? (
<>
<span>Generowanie raportu </span>
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div>
</header>
<section>{result}</section>
</Fragment>
);
} catch (e) {
console.error(e);
return <div>ERROR! {JSON.stringify(e)}</div>;

View File

@ -14,9 +14,7 @@ function StolenDataValue({ entry }: { entry: StolenDataEntry; prefixKey?: string
if (!entry.value) {
body = <></>;
} else {
body = (
<div data-version={version}>{entry.value}</div>
);
body = <div data-version={version}>{entry.value}</div>;
}
return (
<td
@ -41,35 +39,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
data-version={version}
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
>
{/* <td className="checkbox">
<input
type="checkbox"
checked={entry.isMarked}
onChange={() => {
entry.toggleMark();
getMemory().emit(
'change',
false,
entry.request.shorthost,
'clicked checkbox'
);
}}
/>
</td> */}
<th
title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}
// onClick={() => {
// entry.toggleMark();
// getMemory().emit(
// 'change',
// false,
// entry.request.shorthost,
// 'Clicked entry name'
// );
// }}
>
{entry.name}
</th>
<th title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}>{entry.name}</th>
<td className="icons">
{entry.source === 'cookie' ? (
<span title="Dane przechowywane w Cookies">