From 291189bda4dd8f5f0874fafd3cc92c373d06f59f Mon Sep 17 00:00:00 2001 From: Arkadiusz Wieczorek Date: Mon, 25 Apr 2022 14:29:55 +0200 Subject: [PATCH] Touch report-window --- components/report-window/report-window.html | 4 +- components/report-window/report-window.scss | 137 +++++++++++++++++--- components/report-window/report-window.tsx | 25 +++- components/sidebar/stolen-data-cluster.tsx | 34 +---- 4 files changed, 141 insertions(+), 59 deletions(-) diff --git a/components/report-window/report-window.html b/components/report-window/report-window.html index 096197e..39a537d 100644 --- a/components/report-window/report-window.html +++ b/components/report-window/report-window.html @@ -4,8 +4,8 @@ Treść maila do zgłoszenia - - + diff --git a/components/report-window/report-window.scss b/components/report-window/report-window.scss index 6da317d..dbcb96a 100644 --- a/components/report-window/report-window.scss +++ b/components/report-window/report-window.scss @@ -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; + // } + // } } diff --git a/components/report-window/report-window.tsx b/components/report-window/report-window.tsx index 2a9b4e1..737acd5 100644 --- a/components/report-window/report-window.tsx +++ b/components/report-window/report-window.tsx @@ -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 = (
- {mode === 'survey' ? ( */}
); - return result; + return ( + +
+ +
+ {origin ? ( + <> + Generowanie raportu + {origin} + + ) : ( + Przejdź do wybranej strony internetowej + )} +
+
+
{result}
+ + ); } catch (e) { console.error(e); return
ERROR! {JSON.stringify(e)}
; diff --git a/components/sidebar/stolen-data-cluster.tsx b/components/sidebar/stolen-data-cluster.tsx index 73b32c7..a00f17e 100644 --- a/components/sidebar/stolen-data-cluster.tsx +++ b/components/sidebar/stolen-data-cluster.tsx @@ -14,9 +14,7 @@ function StolenDataValue({ entry }: { entry: StolenDataEntry; prefixKey?: string if (!entry.value) { body = <>; } else { - body = ( -
{entry.value}
- ); + body =
{entry.value}
; } return ( - {/* - { - entry.toggleMark(); - getMemory().emit( - 'change', - false, - entry.request.shorthost, - 'clicked checkbox' - ); - }} - /> - */} - { - // entry.toggleMark(); - // getMemory().emit( - // 'change', - // false, - // entry.request.shorthost, - // 'Clicked entry name' - // ); - // }} - > - {entry.name} - + {entry.name} {entry.source === 'cookie' ? (