Touch report-window
This commit is contained in:
Arkadiusz Wieczorek
parent
b92a472569
commit
291189bda4
@ -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>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
@import './../../styles/colors.scss';
|
||||
// @import './../../styles/fonts';
|
||||
|
||||
html {
|
||||
font-size: 1rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
margin: 3rem 3rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem;
|
||||
border-bottom: 2px solid $ultra-light-grey;
|
||||
height: 5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem;
|
||||
border-bottom: 2px solid $ultra-light-grey;
|
||||
height: 5rem;
|
||||
|
||||
img {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
img {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
@ -33,5 +33,104 @@ li,
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
max-width: 70ex;
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@ -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>;
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user