summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_reset.scss48
-rw-r--r--src/components/App/App.module.scss56
-rw-r--r--src/components/App/App.tsx118
-rw-r--r--src/components/Content/Content.tsx74
-rw-r--r--src/components/Details/Details.tsx254
-rw-r--r--src/components/RequestSummary/RequestSummary.tsx49
-rw-r--r--src/index.scss12
-rw-r--r--src/index.tsx2
8 files changed, 369 insertions, 244 deletions
diff --git a/src/_reset.scss b/src/_reset.scss
deleted file mode 100644
index ed11813..0000000
--- a/src/_reset.scss
+++ /dev/null
@@ -1,48 +0,0 @@
1/* http://meyerweb.com/eric/tools/css/reset/
2 v2.0 | 20110126
3 License: none (public domain)
4*/
5
6html, body, div, span, applet, object, iframe,
7h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8a, abbr, acronym, address, big, cite, code,
9del, dfn, em, img, ins, kbd, q, s, samp,
10small, strike, strong, sub, sup, tt, var,
11b, u, i, center,
12dl, dt, dd, ol, ul, li,
13fieldset, form, label, legend,
14table, caption, tbody, tfoot, thead, tr, th, td,
15article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary,
18time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0;
22 font-size: 100%;
23 font: inherit;
24 vertical-align: baseline;
25}
26/* HTML5 display-role reset for older browsers */
27article, aside, details, figcaption, figure,
28footer, header, hgroup, menu, nav, section {
29 display: block;
30}
31body {
32 line-height: 1;
33}
34ol, ul {
35 list-style: none;
36}
37blockquote, q {
38 quotes: none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42 content: '';
43 content: none;
44}
45table {
46 border-collapse: collapse;
47 border-spacing: 0;
48}
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 2036eb9..9837cdf 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,55 +1,3 @@
1.app { 1.content {
2 display: flex; 2 flex: 1 0 auto;
3 flex-flow: column nowrap;
4 grid-template-rows: auto 1fr;
5 height: 100vh;
6 overflow: hidden;
7}
8
9.main {
10 display: flex;
11 flex-flow: row nowrap;
12 flex-grow: 1;
13 overflow: hidden;
14}
15
16.header {
17 font-size: 1.2em;
18 display: flex;
19 flex-flow: row nowrap;
20 align-items: center;
21 justify-content: space-between;
22 background: black;
23 color: white;
24 padding: 1em;
25
26 a {
27 color: white;
28 }
29}
30
31.sidebar {
32 width: calc((6 / 16) * 100%);
33 height: 100%;
34 grid-area: sidebar;
35 border-right: 1px solid black;
36 overflow-y: auto;
37
38 li {
39 border-bottom: 1px solid gray;
40 }
41}
42
43.details {
44 width: calc((10 / 16) * 100%);
45 overflow: hidden;
46 height: 100%;
47}
48
49.noRequest, .noRequestSelected {
50 width: 100%;
51 height: 100%;
52 display: flex;
53 justify-content: center;
54 align-items: center;
55} 3}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e361aa5..61f88f6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ import styles from './App.module.scss';
6import Details from "../Details/Details"; 6import Details from "../Details/Details";
7import RequestSummary from "../RequestSummary/RequestSummary"; 7import RequestSummary from "../RequestSummary/RequestSummary";
8import {getHost} from "../../utils"; 8import {getHost} from "../../utils";
9import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap";
10import classNames from "classnames";
9 11
10interface Config { 12interface Config {
11 url: string 13 url: string
@@ -50,29 +52,59 @@ export default function App() {
50 ), [selectedRequestIndex, calls]); 52 ), [selectedRequestIndex, calls]);
51 53
52 return config && ( 54 return config && (
53 <div className={styles.app}> 55 <>
54 <header className={styles.header}> 56 <Navbar
55 {statusMap[readyState]} TTUN 57 bg="dark"
56 <a href={config.url} target="_blank">{config.url}</a> 58 variant="dark"
57 </header> 59 expand
58 <main className={styles.main}> 60 >
59 <ul className={styles.sidebar}> 61 <Container fluid>
60 { 62 <Navbar.Brand>
61 calls.length > 0 63 {statusMap[readyState]} TTUN
62 ? calls.slice(0).reverse().map((requestResponse, index) => ( 64 </Navbar.Brand>
63 <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}> 65 <Navbar.Text>
64 <RequestSummary requestResponse={requestResponse} /> 66 <a href={config.url} target="_blank">{config.url}</a>
65 </li> 67 </Navbar.Text>
66 )) 68 </Container>
67 : ( 69 </Navbar>
68 <div className={styles.noRequest}> 70 <Container>
69 <p>No requests</p>
70 </div>
71 )
72 }
73 </ul>
74 71
75 <div className={styles.details}> 72 </Container>
73 <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}>
74 <Col className='border-end overflow-auto' xs={4}>
75 <ListGroup variant='flush'>
76 {
77 calls.length > 0
78 ? (
79 calls.slice(0).reverse().map((requestResponse, index) => {
80 const selected = selectedRequestIndex === calls.length - index - 1;
81 return (
82 <ListGroup.Item
83 onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
84 key={`request-${index}`}
85 className={classNames({
86 'bg-primary': selected,
87 'text-light': selected,
88 'border-bottom': true
89 })}
90 >
91 <RequestSummary
92 requestResponse={requestResponse}
93 selected={selected}
94 />
95 </ListGroup.Item>
96 )
97 })
98 )
99 : (
100 <div className={styles.noRequest}>
101 <p>No requests</p>
102 </div>
103 )
104 }
105 </ListGroup>
106 </Col>
107 <Col xs={8} className=''>
76 { 108 {
77 selectedRequest !== null 109 selectedRequest !== null
78 ? ( 110 ? (
@@ -83,8 +115,44 @@ export default function App() {
83 </div> 115 </div>
84 ) 116 )
85 } 117 }
86 </div> 118 </Col>
87 </main> 119 </Row>
88 </div> 120 </>
121 // <div className={styles.app}>
122 // <header className={styles.header}>
123 // {statusMap[readyState]} TTUN
124 // <a href={config.url} target="_blank">{config.url}</a>
125 // </header>
126 // <main className={styles.main}>
127 // <ul className={styles.sidebar}>
128 // {
129 // calls.length > 0
130 // ? calls.slice(0).reverse().map((requestResponse, index) => (
131 // <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
132 // <RequestSummary requestResponse={requestResponse} />
133 // </li>
134 // ))
135 // : (
136 // <div className={styles.noRequest}>
137 // <p>No requests</p>
138 // </div>
139 // )