Skip to content

Commit 98df260

Browse files
nakrovatinakrovati
committed
refactor: split styles
1 parent b6da941 commit 98df260

File tree

5 files changed

+167
-164
lines changed

5 files changed

+167
-164
lines changed

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

Lines changed: 3 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,10 @@
1-
thead.dummy th {
2-
padding: 0;
3-
border: 0;
4-
}
5-
.results__table td.description {
6-
text-align: left;
7-
overflow: visible;
8-
height: 42px;
9-
padding: 0 !important;
10-
border: 0;
11-
}
12-
td > h3 {
13-
position: absolute;
14-
font-size: 16px;
15-
margin: 0px;
16-
padding: 10px;
17-
top: 0;
18-
left: 0;
19-
width: 800px;
20-
height: 40px;
21-
background-color: #fff;
22-
}
23-
td {
24-
text-align: center;
25-
}
26-
.results {
27-
width: 100%;
28-
max-width: 100%;
29-
}
30-
.results__table-container {
31-
overflow-x: auto;
32-
}
33-
.results__table {
34-
font-size: 11px;
35-
width: 150px;
36-
table-layout: fixed;
37-
border-collapse: collapse;
38-
}
39-
.results__table th {
40-
width: 60px;
41-
font-weight: normal;
42-
font-size: 11px;
43-
z-index: 9;
44-
text-align: center;
45-
word-break: normal;
46-
hyphens: auto;
47-
-webkit-hyphens: auto;
48-
}
49-
.results__table th.benchname {
50-
width: 120px;
51-
}
52-
.results__table th,
53-
.results__table td {
54-
padding: 3px;
55-
border: 1px solid #ddd;
56-
}
57-
.results__table th:first-child,
58-
.results__table td:first-child {
59-
position: sticky;
60-
left: 0;
61-
width: 120px;
62-
background-color: white;
63-
}
64-
.results__table th:first-child::before,
65-
.results__table td:not(.description):first-child::before,
66-
.results__table th:first-child::after,
67-
.results__table td:not(.description):first-child::after {
68-
content: "";
69-
position: absolute;
70-
top: 0;
71-
bottom: 0;
72-
width: 1px;
73-
background-color: #dddddd;
74-
}
75-
.results__table th:first-child::before,
76-
.results__table td:first-child::before {
77-
left: -1px;
78-
}
79-
.results__table th:first-child::after,
80-
.results__table td:first-child::after {
81-
right: -1px;
82-
}
83-
84-
.rowCount {
85-
font-size: 10px;
86-
}
87-
88-
.deviation {
89-
font-size: 8px;
90-
padding-left: 5px;
91-
}
92-
.deviation::before {
93-
content: "± ";
94-
}
95-
96-
.factor {
97-
font-size: 8px;
98-
}
99-
100-
.sort-key {
101-
text-decoration: underline;
1+
.known-issues {
2+
margin-top: 20px;
1023
}
1034

104-
dl {
105-
width: 100%;
106-
overflow: hidden;
107-
padding: 0;
108-
margin-bottom: 16px;
109-
}
110-
dt,
111-
.dt {
5+
.known-issues__issue-code {
1126
float: left;
1137
width: 50px;
1148
padding: 0;
1159
margin: 0;
11610
}
117-
dd {
118-
padding: 0;
119-
margin: 0;
120-
}
121-
122-
.with-issues {
123-
background-color: #faa;
124-
}
125-
126-
.button {
127-
cursor: pointer;
128-
}
129-
130-
.button__text {
131-
color: #00e;
132-
font-size: inherit;
133-
border: none;
134-
background: none;
135-
}
136-
137-
.button__text:disabled {
138-
color: #666;
139-
font-weight: normal;
140-
}
141-
142-
.button__icon {
143-
border: 1px solid var(--border-color);
144-
border-radius: 4px;
145-
padding: 2px;
146-
width: 26px;
147-
}
148-
149-
.button__icon:active {
150-
border: 1px solid #888;
151-
}
152-
153-
.error {
154-
background-color: #f99;
155-
}
156-
157-
.warning {
158-
background-color: #ff6;
159-
}
160-
161-
.check-full-width::after {
162-
display: inline-block;
163-
}

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ const KnownIssuesList = () => {
99

1010
return (
1111
<List
12-
header={<div>Known issues and notes</div>}
12+
header={<h2>Known issues and notes</h2>}
1313
bordered
14+
className="known-issues"
1415
dataSource={data}
1516
renderItem={(issue) => (
1617
<List.Item>
17-
<Typography.Text className="dt">
18+
<Typography.Text className="known-issues__issue-code">
1819
<a href={issue.link}>{issue.issue}</a>
1920
</Typography.Text>{" "}
2021
{issue.text}
@@ -66,8 +67,10 @@ const App = () => {
6667
</p>
6768
<main>
6869
<SelectionToolbar showDurationSelection={true} />
69-
<ResultTable type={FrameworkType.KEYED} />
70-
<ResultTable type={FrameworkType.NON_KEYED} />
70+
<div>
71+
<ResultTable type={FrameworkType.KEYED} />
72+
<ResultTable type={FrameworkType.NON_KEYED} />
73+
</div>
7174
<KnownIssuesList />
7275
</main>
7376
</>

‎webdriver-ts-results/src/assets/styles/global.css

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
:root {
2+
--border-color: #ccc;
3+
}
4+
5+
thead.dummy th {
6+
padding: 0;
7+
border: 0;
8+
}
9+
.results__table td.description {
10+
text-align: left;
11+
overflow: visible;
12+
height: 42px;
13+
padding: 0 !important;
14+
border: 0;
15+
}
16+
td > h3 {
17+
position: absolute;
18+
font-size: 16px;
19+
margin: 0px;
20+
padding: 10px;
21+
top: 0;
22+
left: 0;
23+
width: 800px;
24+
height: 40px;
25+
background-color: #fff;
26+
}
27+
td {
28+
text-align: center;
29+
}
30+
.results {
31+
width: 100%;
32+
max-width: 100%;
33+
}
34+
.results__table-container {
35+
overflow-x: auto;
36+
}
37+
.results__table {
38+
font-size: 11px;
39+
width: 150px;
40+
table-layout: fixed;
41+
border-collapse: collapse;
42+
}
43+
.results__table th {
44+
width: 60px;
45+
font-weight: normal;
46+
font-size: 11px;
47+
z-index: 9;
48+
text-align: center;
49+
word-break: normal;
50+
hyphens: auto;
51+
-webkit-hyphens: auto;
52+
}
53+
.results__table th.benchname {
54+
width: 120px;
55+
}
56+
.results__table th,
57+
.results__table td {
58+
padding: 3px;
59+
border: 1px solid #ddd;
60+
}
61+
.results__table th:first-child,
62+
.results__table td:first-child {
63+
position: sticky;
64+
left: 0;
65+
width: 120px;
66+
background-color: white;
67+
}
68+
.results__table th:first-child::before,
69+
.results__table td:not(.description):first-child::before,
70+
.results__table th:first-child::after,
71+
.results__table td:not(.description):first-child::after {
72+
content: "";
73+
position: absolute;
74+
top: 0;
75+
bottom: 0;
76+
width: 1px;
77+
background-color: #ddd;
78+
}
79+
.results__table th:first-child::before,
80+
.results__table td:first-child::before {
81+
left: -1px;
82+
}
83+
.results__table th:first-child::after,
84+
.results__table td:first-child::after {
85+
right: -1px;
86+
}
87+
88+
.rowCount {
89+
font-size: 10px;
90+
}
91+
92+
.deviation {
93+
font-size: 8px;
94+
padding-left: 5px;
95+
}
96+
.deviation::before {
97+
content: "± ";
98+
}
99+
100+
.factor {
101+
font-size: 8px;
102+
}
103+
104+
.sort-key {
105+
text-decoration: underline;
106+
}
107+
108+
dl {
109+
width: 100%;
110+
overflow: hidden;
111+
padding: 0;
112+
margin-bottom: 16px;
113+
}
114+
dt {
115+
float: left;
116+
width: 50px;
117+
padding: 0;
118+
margin: 0;
119+
}
120+
dd {
121+
padding: 0;
122+
margin: 0;
123+
}
124+
125+
.with-issues {
126+
background-color: #faa;
127+
}
128+
129+
.button {
130+
cursor: pointer;
131+
}
132+
133+
.button__text {
134+
color: #00e;
135+
font-size: inherit;
136+
border: none;
137+
background: none;
138+
}
139+
140+
.button__text:disabled {
141+
color: #666;
142+
font-weight: normal;
143+
}
144+
145+
.error {
146+
background-color: #f99;
147+
}
148+
149+
.warning {
150+
background-color: #ff6;
151+
}
152+
153+
.check-full-width::after {
154+
display: inline-block;
155+
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
:root {
2-
--border-color: #ccc;
3-
}
4-
51
*,
62
::before,
73
::after {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from "react";
22
import App from "./App.tsx";
33
import { createRoot } from "react-dom/client";
4+
45
import "./index.css";
6+
import "./assets/styles/global.css";
57

68
createRoot(document.getElementById("root")!).render(
79
<React.StrictMode>

0 commit comments

Comments
 (0)