Styling fixes
This commit is contained in:
Arkadiusz Wieczorek
parent
aa6d0df3c5
commit
ba22788331
@ -11,7 +11,7 @@ html {
|
||||
|
||||
body {
|
||||
background-color: #f9f9fa;
|
||||
margin: 3rem 3rem;
|
||||
padding: 0rem 0.75rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -36,7 +36,7 @@ li,
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
max-width: 70ex;
|
||||
max-width: 100ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -77,6 +77,9 @@ h1 {
|
||||
font-family: 'OpenSans' !important;
|
||||
background-color: transparent;
|
||||
.sv_p_root {
|
||||
max-width: 100ex;
|
||||
margin: 0 auto;
|
||||
|
||||
& > .sv_row:nth-child(2n) {
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -172,7 +175,7 @@ h1 {
|
||||
.sv_nav {
|
||||
display: flex;
|
||||
margin: 2rem 0;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sv_prev_btn,
|
||||
@ -183,6 +186,7 @@ h1 {
|
||||
line-height: 0.875rem !important;
|
||||
height: 2.5rem;
|
||||
cursor: pointer;
|
||||
min-width: 100px;
|
||||
}
|
||||
.sv_next_btn {
|
||||
background-color: #000 !important;
|
||||
|
||||
@ -2,6 +2,12 @@
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: calc(24 / 16 * 1rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.images {
|
||||
@ -11,6 +17,27 @@ h1 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.generator-container {
|
||||
max-width: 100ex;
|
||||
margin: 0 auto;
|
||||
font-size: calc(14 / 16 * 1rem);
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.browser {
|
||||
height: 9.667rem;
|
||||
width: 16rem;
|
||||
|
||||
@ -77,88 +77,98 @@ export default function ScreenshotGenerator({
|
||||
{mode === 'idle' ? (
|
||||
<Fragment>
|
||||
<h1>Przygotowanie zrzutów ekranów</h1>
|
||||
<p>
|
||||
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
|
||||
narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony
|
||||
Danych Osobowych.
|
||||
</p>
|
||||
<p>
|
||||
Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '}
|
||||
<a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je za
|
||||
Ciebie.
|
||||
</p>
|
||||
<div className="container">
|
||||
<h2>Notka informacyjna</h2>
|
||||
<p>
|
||||
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
|
||||
narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony
|
||||
Danych Osobowych.
|
||||
</p>
|
||||
<p>
|
||||
Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '}
|
||||
<a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je
|
||||
za Ciebie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="sv_prev_btn"
|
||||
onClick={() => {
|
||||
setReportWindowMode('preview');
|
||||
}}
|
||||
>
|
||||
Pomiń
|
||||
</button>
|
||||
<button
|
||||
className="sv_next_btn"
|
||||
onClick={async () => {
|
||||
setMode('in_progress');
|
||||
const task = await createTask(visited_url, Object.keys(clusters));
|
||||
const urlArr = task.url.split('/');
|
||||
setTaskId(urlArr[urlArr.length - 1]);
|
||||
const response = await subscribeTask(task.url);
|
||||
setImages(response.files);
|
||||
console.log('output', response);
|
||||
}}
|
||||
>
|
||||
Wygeneruj
|
||||
</button>
|
||||
<div className="buttons-container">
|
||||
<button
|
||||
className="sv_prev_btn"
|
||||
onClick={() => {
|
||||
setReportWindowMode('preview');
|
||||
}}
|
||||
>
|
||||
Pomiń
|
||||
</button>
|
||||
<button
|
||||
className="sv_next_btn"
|
||||
onClick={async () => {
|
||||
setMode('in_progress');
|
||||
const task = await createTask(visited_url, Object.keys(clusters));
|
||||
const urlArr = task.url.split('/');
|
||||
setTaskId(urlArr[urlArr.length - 1]);
|
||||
const response = await subscribeTask(task.url);
|
||||
setImages(response.files);
|
||||
console.log('output', response);
|
||||
}}
|
||||
>
|
||||
Wygeneruj
|
||||
</button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : null}
|
||||
|
||||
{mode === 'in_progress' || mode === 'finished' ? (
|
||||
<Fragment>
|
||||
<h1>Przygotowujemy zrzuty ekranów</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
|
||||
laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam vel
|
||||
minus aliquid incidunt consequatur illo velit dolorem error exercitationem
|
||||
tempora?
|
||||
</p>
|
||||
<div className="container">
|
||||
<h2>To może chwilkę zająć</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
|
||||
laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
|
||||
vel minus aliquid incidunt consequatur illo velit dolorem error
|
||||
exercitationem tempora?
|
||||
</p>
|
||||
|
||||
<div className="images">
|
||||
{images.map((filename: string) => {
|
||||
return (
|
||||
<div
|
||||
key={`${taskId}_${filename}`}
|
||||
className="browser browser--filled"
|
||||
style={{
|
||||
backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`,
|
||||
}}
|
||||
>
|
||||
<div className="browser__header">
|
||||
<div className="browser__header--address-bar">
|
||||
{filename}
|
||||
<div className="images">
|
||||
{images.map((filename: string) => {
|
||||
return (
|
||||
<div
|
||||
key={`${taskId}_${filename}`}
|
||||
className="browser browser--filled"
|
||||
style={{
|
||||
backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`,
|
||||
}}
|
||||
>
|
||||
<div className="browser__header">
|
||||
<div className="browser__header--address-bar">
|
||||
{filename}
|
||||
</div>
|
||||
<div className="browser__header--controls">· · ·</div>
|
||||
</div>
|
||||
<div className="browser__content"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{mode === 'in_progress' ? (
|
||||
<div className="browser">
|
||||
<div className="browser__header">
|
||||
<div className="browser__header--address-bar"></div>
|
||||
<div className="browser__header--controls">· · ·</div>
|
||||
</div>
|
||||
<div className="browser__content"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{mode === 'in_progress' ? (
|
||||
<div className="browser">
|
||||
<div className="browser__header">
|
||||
<div className="browser__header--address-bar"></div>
|
||||
<div className="browser__header--controls">· · ·</div>
|
||||
</div>
|
||||
<div className="browser__content"></div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="buttons-container">
|
||||
{mode === 'finished' ? (
|
||||
<button className="sv_next_btn" onClick={() => downloadFiles()}>
|
||||
Pobierz zrzuty ekranów
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
{mode === 'finished' ? (
|
||||
<button className="sv_next_btn" onClick={() => downloadFiles()}>
|
||||
Pobierz zrzuty ekranów
|
||||
</button>
|
||||
) : null}
|
||||
</Fragment>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user