icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Styling fixes

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2022-05-22 18:16:14 +02:00
parent aa6d0df3c5
commit ba22788331
3 changed files with 111 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/report-window/report-window.scss
View File

@ -11,7 +11,7 @@ html {
body { body {
background-color: #f9f9fa; background-color: #f9f9fa;
margin: 3rem 3rem; padding: 0rem 0.75rem;
} }
nav { nav {
@ -36,7 +36,7 @@ li,
h1, h1,
h2, h2,
h3 { h3 {
max-width: 70ex; max-width: 100ex;
} }
h1 { h1 {
@ -77,6 +77,9 @@ h1 {
font-family: 'OpenSans' !important; font-family: 'OpenSans' !important;
background-color: transparent; background-color: transparent;
.sv_p_root { .sv_p_root {
max-width: 100ex;
margin: 0 auto;
& > .sv_row:nth-child(2n) { & > .sv_row:nth-child(2n) {
background-color: #fff; background-color: #fff;
} }
@ -172,7 +175,7 @@ h1 {
.sv_nav { .sv_nav {
display: flex; display: flex;
margin: 2rem 0; margin: 2rem 0;
justify-content: flex-end; justify-content: center;
} }
.sv_prev_btn, .sv_prev_btn,
@ -183,6 +186,7 @@ h1 {
line-height: 0.875rem !important; line-height: 0.875rem !important;
height: 2.5rem; height: 2.5rem;
cursor: pointer; cursor: pointer;
min-width: 100px;
} }
.sv_next_btn { .sv_next_btn {
background-color: #000 !important; background-color: #000 !important;

27
components/report-window/screenshot-generator.scss
View File

@ -2,6 +2,12 @@
h1 { h1 {
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: calc(24 / 16 * 1rem);
}
h2 {
font-weight: 600;
font-size: 0.875rem;
} }
.images { .images {
@ -11,6 +17,27 @@ h1 {
margin: 2rem 0; 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 { .browser {
height: 9.667rem; height: 9.667rem;
width: 16rem; width: 16rem;

144
components/report-window/screenshot-generator.tsx
View File

@ -77,88 +77,98 @@ export default function ScreenshotGenerator({
{mode === 'idle' ? ( {mode === 'idle' ? (
<Fragment> <Fragment>
<h1>Przygotowanie zrzutów ekranów</h1> <h1>Przygotowanie zrzutów ekranów</h1>
<p> <div className="container">
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów <h2>Notka informacyjna</h2>
narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony <p>
Danych Osobowych. Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
</p> narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony
<p> Danych Osobowych.
Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '} </p>
<a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je za <p>
Ciebie. Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '}
</p> <a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je
za Ciebie.
</p>
</div>
<button <div className="buttons-container">
className="sv_prev_btn" <button
onClick={() => { className="sv_prev_btn"
setReportWindowMode('preview'); onClick={() => {
}} setReportWindowMode('preview');
> }}
Pomiń >
</button> Pomiń
<button </button>
className="sv_next_btn" <button
onClick={async () => { className="sv_next_btn"
setMode('in_progress'); onClick={async () => {
const task = await createTask(visited_url, Object.keys(clusters)); setMode('in_progress');
const urlArr = task.url.split('/'); const task = await createTask(visited_url, Object.keys(clusters));
setTaskId(urlArr[urlArr.length - 1]); const urlArr = task.url.split('/');
const response = await subscribeTask(task.url); setTaskId(urlArr[urlArr.length - 1]);
setImages(response.files); const response = await subscribeTask(task.url);
console.log('output', response); setImages(response.files);
}} console.log('output', response);
> }}
Wygeneruj >
</button> Wygeneruj
</button>
</div>
</Fragment> </Fragment>
) : null} ) : null}
{mode === 'in_progress' || mode === 'finished' ? ( {mode === 'in_progress' || mode === 'finished' ? (
<Fragment> <Fragment>
<h1>Przygotowujemy zrzuty ekranów</h1> <h1>Przygotowujemy zrzuty ekranów</h1>
<p> <div className="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint <h2>To może chwilkę zająć</h2>
laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam vel <p>
minus aliquid incidunt consequatur illo velit dolorem error exercitationem Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint
tempora? laudantium blanditiis aperiam quos expedita voluptatem iure, nam aliquam
</p> vel minus aliquid incidunt consequatur illo velit dolorem error
exercitationem tempora?
</p>
<div className="images"> <div className="images">
{images.map((filename: string) => { {images.map((filename: string) => {
return ( return (
<div <div
key={`${taskId}_${filename}`} key={`${taskId}_${filename}`}
className="browser browser--filled" className="browser browser--filled"
style={{ style={{
backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`, backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`,
}} }}
> >
<div className="browser__header"> <div className="browser__header">
<div className="browser__header--address-bar"> <div className="browser__header--address-bar">
{filename} {filename}
</div>
<div className="browser__header--controls">· · ·</div>
</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 className="browser__header--controls">· · ·</div>
</div> </div>
<div className="browser__content"></div> <div className="browser__content"></div>
</div> </div>
); ) : null}
})} </div>
</div>
{mode === 'in_progress' ? ( <div className="buttons-container">
<div className="browser"> {mode === 'finished' ? (
<div className="browser__header"> <button className="sv_next_btn" onClick={() => downloadFiles()}>
<div className="browser__header--address-bar"></div> Pobierz zrzuty ekranów
<div className="browser__header--controls">· · ·</div> </button>
</div>
<div className="browser__content"></div>
</div>
) : null} ) : null}
</div> </div>
{mode === 'finished' ? (
<button className="sv_next_btn" onClick={() => downloadFiles()}>
Pobierz zrzuty ekranów
</button>
) : null}
</Fragment> </Fragment>
) : null} ) : null}
</div> </div>