More tweaks

quickstrom · Mar 29, 2023 · 2c9c1de · 2c9c1de
1 parent 8e9c031
commit 2c9c1de
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/html-report/src/App.tsx b/html-report/src/App.tsx
@@ -386,18 +386,14 @@ const TestViewer: FunctionComponent<{ test: Test }> = ({ test }) => {
                 </nav>
             </section>
             <section class="content">
-                <section class="states-and-actions">
-                    <State number={state.index} extraClass="from" />
-                    <Actions
-                        initial={state.index === 0}
-                        actions={transition.actions}
-                        setSelectedElement={setSelectedElement}
-                    />
-                    <State number={state.index + 1} extraClass="to" />
-                </section>
+                <Actions
+                    actions={transition.actions}
+                    setSelectedElement={setSelectedElement}
+                />
                 <section class="screenshots">
                     {state.current.fromState?.screenshot ? (
                         <Screenshot
+                            index={state.index}
                             state={state.current.fromState}
                             extraClass="from"
                             selectedElement={selectedElement}
@@ -409,6 +405,7 @@ const TestViewer: FunctionComponent<{ test: Test }> = ({ test }) => {
                     {transition.tag === "StateTransition" &&
                         transition.toState?.screenshot ? (
                         <Screenshot
+                            index={state.index + 1}
                             state={transition.toState}
                             extraClass="to"
                             selectedElement={selectedElement}
@@ -425,10 +422,9 @@ const TestViewer: FunctionComponent<{ test: Test }> = ({ test }) => {
 };
 
 const Actions: FunctionComponent<{
-    initial: boolean;
     actions: NonEmptyArray<Action>;
     setSelectedElement: StateUpdater<Element | null>;
-}> = ({ initial, actions, setSelectedElement }) => {
+}> = ({ actions, setSelectedElement }) => {
     function renderArg(arg: any): string {
         return keyName(arg) || JSON.stringify(arg);
     }
@@ -519,11 +515,12 @@ const MissingScreenshot: FunctionComponent = () => {
 };
 
 const Screenshot: FunctionComponent<{
+    index: number;
     state: State;
     extraClass: string;
     selectedElement: Element | null;
     setSelectedElement: StateUpdater<Element | null>;
-}> = ({ state, extraClass, selectedElement, setSelectedElement }) => {
+}> = ({ index, state, extraClass, selectedElement, setSelectedElement }) => {
     function isActive(element: Element) {
         return selectedElement && selectedElement.ref === element.ref;
     }
@@ -570,6 +567,7 @@ const Screenshot: FunctionComponent<{
                 <img src={s.url} width={s.width} height={s.height} />
                 {dim}
             </div>
+            <State number={index} extraClass={extraClass} />
         </div>
     );
 };

diff --git a/html-report/src/report.css b/html-report/src/report.css
@@ -12,7 +12,7 @@ html, body {
 
 @media screen and (max-width: 800px) {
     html, body {
-        font-siez: 14px;
+        font-size: 14px;
     }
 }
 
@@ -135,22 +135,18 @@ main .controls button:active {
     font-family: 'Monaco', 'Consolas', 'Ubuntu Mono', monospace;
 }
 
-.states-and-actions, .screenshots, .details {
+.actions, .screenshots, .details {
     width: 100%;
     display: flex;
 }
 
-.states-and-actions {
+.actions {
     display: flex;
-    align-items: flex-end;
-    width: 100%;
+    justify-content: center;
     margin: 0;
     padding: 1rem;
     flex: 0 0 auto;
 }
-.state, .actions {
-    flex: 0 0 33%;
-}
 
 .actions {
     text-align: center;
@@ -171,14 +167,15 @@ main .controls button:active {
 .state:last-child {
     text-align: right;
 }
-.state .label {
-    margin: .5rem 0;
+.state {
+    border-top: 2px solid #ddd;
+    background: #eee;
 }
-
 .state h2 {
     font-size: 1rem;
     font-weight: normal;
     margin: 0;
+    text-align: center;
 }
 
 .state .queries {
@@ -190,8 +187,12 @@ main .controls button:active {
     display: flex;
     justify-content: space-evenly;
     padding: 1rem 0;
+    max-width: 100vh;
+    margin: 0 auto;
 }
 .state-screenshot {
+    display: flex;
+    flex-direction: column;
     flex: 0 0 49%;
     border: 2px solid #ddd;
     display: flex;