Touch report-window
This commit is contained in:
Arkadiusz Wieczorek
parent
b92a472569
commit
291189bda4
|
|
@ -4,8 +4,8 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Treść maila do zgłoszenia</title>
|
<title>Treść maila do zgłoszenia</title>
|
||||||
<link rel="stylesheet" href="/lib/components/report-window/report-window.css" />
|
<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/survey.css" />
|
||||||
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
|
<link rel="stylesheet" href="/node_modules/survey-react/modern.css" /> -->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
@import './../../styles/colors.scss';
|
@import './../../styles/colors.scss';
|
||||||
// @import './../../styles/fonts';
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
margin: 3rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1rem 1rem;
|
padding: 1rem 1rem;
|
||||||
border-bottom: 2px solid $ultra-light-grey;
|
border-bottom: 2px solid $ultra-light-grey;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
|
|
@ -33,5 +33,104 @@ li,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
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 ReactDOM from 'react-dom';
|
||||||
import { getMemory } from '../../memory';
|
import { getMemory } from '../../memory';
|
||||||
import { useEmitter } from '../../util';
|
import { useEmitter } from '../../util';
|
||||||
|
|
@ -47,10 +47,6 @@ function Report() {
|
||||||
|
|
||||||
const result = (
|
const result = (
|
||||||
<div {...{ 'data-version': counter }}>
|
<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' ? (
|
{mode === 'survey' ? (
|
||||||
<Questions
|
<Questions
|
||||||
hosts={Object.values(clusters)
|
hosts={Object.values(clusters)
|
||||||
|
|
@ -68,7 +64,24 @@ function Report() {
|
||||||
{/* <HARConverter {...{ entries }} /> */}
|
{/* <HARConverter {...{ entries }} /> */}
|
||||||
</div>
|
</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) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
return <div>ERROR! {JSON.stringify(e)}</div>;
|
return <div>ERROR! {JSON.stringify(e)}</div>;
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,7 @@ function StolenDataValue({ entry }: { entry: StolenDataEntry; prefixKey?: string
|
||||||
if (!entry.value) {
|
if (!entry.value) {
|
||||||
body = <></>;
|
body = <></>;
|
||||||
} else {
|
} else {
|
||||||
body = (
|
body = <div data-version={version}>{entry.value}</div>;
|
||||||
<div data-version={version}>{entry.value}</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
|
|
@ -41,35 +39,7 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
|
||||||
data-version={version}
|
data-version={version}
|
||||||
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
|
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
|
||||||
>
|
>
|
||||||
{/* <td className="checkbox">
|
<th title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}>{entry.name}</th>
|
||||||
<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>
|
|
||||||
<td className="icons">
|
<td className="icons">
|
||||||
{entry.source === 'cookie' ? (
|
{entry.source === 'cookie' ? (
|
||||||
<span title="Dane przechowywane w Cookies">
|
<span title="Dane przechowywane w Cookies">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user