Skip to content

Commit 228a041

Browse files
krausestkrausest
committed
Merge branch 'pr/nakrovati/1386'
2 parents 148d09d + e326096 commit 228a041

32 files changed

+601
-537
lines changed

‎webdriver-ts-results/src/App.css

Lines changed: 83 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,133 @@
11
:root {
2-
box-sizing: border-box;
2+
--border-color: #ccc;
33
}
4+
45
*,
5-
*::before,
6-
*::after {
7-
box-sizing: inherit;
6+
::before,
7+
::after {
8+
box-sizing: border-box;
89
}
10+
911
body {
1012
font-family: Helvetica, Arial, sans-serif;
1113
font-size: 14px;
1214
margin: 10px;
1315
}
16+
1417
a,
1518
a:active,
1619
a:hover {
1720
text-decoration: none;
1821
}
22+
1923
button,
2024
select {
2125
font-size: 14px;
2226
}
23-
.selectBar {
27+
28+
.select-bar {
2429
background-color: #fafafa;
25-
border-top: 1px solid #ccc;
26-
border-bottom: 1px solid #ccc;
27-
}
28-
select {
29-
border: 1px solid #ccc;
30-
border-radius: 4px;
31-
height: 29px;
32-
background: #fff;
33-
}
34-
.header-row {
35-
margin: 20px 0;
36-
}
37-
.dropdown-container > .shutter,
38-
.dropdown-container > .dropdown-menu {
39-
display: none;
40-
}
41-
.open > .shutter,
42-
.open > .dropdown-menu {
43-
display: block;
44-
}
45-
.dropdown-menu > .section {
46-
position: relative;
47-
}
48-
.open > .dropdown-menu {
49-
z-index: 1000;
50-
position: absolute;
51-
background: #fff;
52-
border: 1px solid #ccc;
53-
border-radius: 4px;
54-
box-shadow: 4px 4px 5px 5px rgba(0, 0, 0, 0.2);
55-
padding: 10px;
56-
}
57-
.dropdown,
58-
.dropdown:focus {
59-
border: 1px solid #ccc;
60-
border-radius: 4px;
61-
padding: 5px 10px;
62-
outline: none;
63-
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0);
64-
transition: all 0.5s;
30+
border-top: 1px solid var(--border-color);
31+
border-bottom: 1px solid var(--border-color);
32+
padding: 20px 0;
33+
flex-direction: column;
34+
display: flex;
35+
gap: 10px;
6536
}
66-
.dropdown.open {
67-
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
37+
.select-bar__dropdowns {
38+
display: flex;
39+
flex-direction: row;
40+
gap: 1rem;
6841
}
6942

70-
.dropdown > .caret {
71-
width: 10px;
72-
height: 5px;
73-
border-left: 5px solid transparent;
74-
border-right: 5px solid transparent;
75-
border-top: 5px solid #ccc;
76-
display: inline-block;
43+
@media screen and (width>=640px) {
44+
.select-bar {
45+
flex-direction: unset;
46+
align-items: center;
47+
}
48+
}
49+
@media screen and (width>=768px) {
50+
.select-bar {
51+
align-items: center;
52+
}
7753
}
7854

79-
.shutter {
80-
position: fixed;
81-
top: 0;
82-
left: 0;
83-
right: 0;
84-
bottom: 0;
85-
z-index: 999;
86-
display: none;
55+
select {
56+
border: 1px solid var(--border-color);
57+
border-radius: 4px;
58+
height: 29px;
59+
background: white;
8760
}
8861

8962
input + label {
9063
margin-left: 5px;
9164
}
9265

93-
.float-rt {
94-
position: absolute;
95-
top: 10px;
96-
right: 10px;
97-
}
98-
99-
.grid {
100-
column-count: 3;
101-
}
102-
103-
.hspan {
104-
display: inline-block;
105-
width: 10px;
106-
}
107-
10866
.panel-body .checkbox {
10967
margin-top: 5px;
11068
margin-bottom: 5px;
11169
}
11270

113-
table.results {
71+
td {
72+
text-align: center;
73+
}
74+
.results {
75+
width: 100%;
76+
max-width: 100%;
77+
}
78+
.results__table-container {
79+
overflow-x: scroll;
80+
}
81+
.results__table {
11482
font-size: 11px;
83+
width: 100%;
11584
table-layout: fixed;
116-
width: 1px;
117-
overflow: visible;
118-
display: table;
119-
border-spacing: 0 0;
85+
border-spacing: 0;
12086
border-collapse: collapse;
12187
}
122-
table.results th {
88+
.results__table th {
12389
width: 60px;
12490
font-weight: normal;
12591
font-size: 11px;
92+
z-index: 9;
12693
text-align: center;
12794
word-break: normal;
12895
hyphens: auto;
12996
-webkit-hyphens: auto;
13097
}
131-
table.results th.benchname {
98+
.results__table th.benchname {
13299
width: 120px;
133100
}
134-
table.results td {
135-
padding: 3px;
136-
border: 1px solid #ddd;
137-
}
138-
table.results th {
101+
.results__table th,
102+
.results__table td {
139103
padding: 3px;
140104
border: 1px solid #ddd;
141105
}
142-
.top1 {
143-
background-color: #63bf7c;
144-
}
145-
.top2 {
146-
background-color: #d1d580;
147-
}
148-
.top3 {
149-
background-color: #ffec84;
150-
}
151-
.top4 {
152-
background-color: #fcaa78;
153-
}
154-
.top5 {
155-
background-color: #f9696c;
156-
}
157-
td {
158-
text-align: center;
106+
.results__table th:first-child,
107+
.results__table td:first-child {
108+
position: sticky;
109+
left: 0;
110+
width: 120px;
111+
background-color: white;
159112
}
113+
160114
.rowCount {
161115
font-size: 10px;
162116
}
117+
163118
.deviation {
164119
font-size: 8px;
165120
padding-left: 5px;
166121
}
167-
.deviation:before {
122+
.deviation::before {
168123
content: "± ";
169124
}
125+
170126
.factor {
171127
font-size: 8px;
172128
}
173-
.sortKey {
129+
130+
.sort-key {
174131
text-decoration: underline;
175132
}
176133

@@ -190,44 +147,42 @@ dd {
190147
padding: 0;
191148
margin: 0;
192149
}
150+
193151
.with-issues {
194152
background-color: #faa;
195153
}
196154

197-
.textButton {
198-
color: rgb(0, 0, 238);
155+
.button {
156+
cursor: pointer;
157+
}
158+
159+
.button__text {
160+
color: #00e;
199161
font-size: inherit;
200162
border: none;
201163
background: none;
202-
outline-style: none;
203-
cursor: pointer;
204164
}
205165

206-
.iconbutton {
207-
border: 1px solid #ccc;
166+
.button__text:disabled {
167+
color: #666;
168+
font-weight: normal;
169+
}
170+
171+
.button__icon {
172+
border: 1px solid var(--border-color);
208173
border-radius: 4px;
209-
padding: 2px 2px;
210-
outline: none;
211-
box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 0%);
174+
padding: 2px;
212175
width: 26px;
213176
}
214-
.iconbutton:active {
177+
178+
.button__icon:active {
215179
border: 1px solid #888;
216180
}
217-
.header-row {
218-
display: flex;
219-
}
220-
.header-row > * {
221-
align-self: center;
222-
}
223181

224-
button:disabled.textButton {
225-
color: #666;
226-
font-weight: normal;
227-
}
228182
.error {
229183
background-color: #f99;
230184
}
185+
231186
.warning {
232187
background-color: #ff6;
233188
}

‎webdriver-ts-results/src/App.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ import { SelectionBar } from "./components/selection/SelectionBar";
77
const KnownIssuesList = () => {
88
return (
99
<>
10-
<h3>Known issues and notes</h3>
11-
{knownIssues.map((issue) => (
12-
<dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
13-
<dt>
14-
<a target="_blank" rel="noopener noreferrer" href={issue.link}>
15-
{issue.issue.toFixed()}
16-
</a>
17-
</dt>
18-
<dd>{issue.text}</dd>
19-
</dl>
20-
))}
10+
<section>
11+
<h3>Known issues and notes</h3>
12+
{knownIssues.map((issue) => (
13+
<dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
14+
<dt>
15+
<a target="_blank" rel="noopener noreferrer" href={issue.link}>
16+
{issue.issue.toFixed()}
17+
</a>
18+
</dt>
19+
<dd>{issue.text}</dd>
20+
</dl>
21+
))}
22+
</section>
2123
</>
2224
);
2325
};
@@ -56,15 +58,17 @@ const App = () => {
5658
);
5759

5860
return (
59-
<div>
61+
<>
6062
{disclaimer}
6163
{testEnvironmentInfo}
6264

63-
<SelectionBar showDurationSelection={false} />
64-
<ResultTable type={FrameworkType.KEYED} />
65-
<ResultTable type={FrameworkType.NON_KEYED} />
66-
<KnownIssuesList></KnownIssuesList>
67-
</div>
65+
<main>
66+
<SelectionBar showDurationSelection={false} />
67+
<ResultTable type={FrameworkType.KEYED} />
68+
<ResultTable type={FrameworkType.NON_KEYED} />
69+
<KnownIssuesList></KnownIssuesList>
70+
</main>
71+
</>
6872
);
6973
};
7074

0 commit comments

Comments
 (0)