18451009991

Committed 12 Oct 2025 11:29PM UTC coverage: 43.532% (-19.9%) from 63.458%

Build # 18451009991

Build Type

Pull #475

github

Committed by

web-flow

Commit Message

Merge 9d0374e51 into 0a0ddf96f

Pull Request Pull Request #475: pretty permalinks

Run Details

369 of 1009 branches covered (36.57%)

Branch coverage included in aggregate %.

15 of 37 new or added lines in 5 files covered. (40.54%)

236 existing lines in 17 files now uncovered.

553 of 1109 relevant lines covered (49.86%)

4.31 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

35.71

/src/styles/table.ts

import { css } from '@emotion/react';

import { color, media, size } from './variables';

export const tableChicletsCss = css`
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
`;

export const tableChicletCss = (
  type: 'in-person' | 'online' | 'inactive'
) => css`
  align-items: center;
  background-color: ${type === 'in-person'
    ? 'color-mix(in srgb, var(--in-person), var(--background) 82%);'
    : type === 'online'
    ? 'color-mix(in srgb, var(--online), var(--background) 82%);'
    : 'color-mix(in srgb, var(--inactive), var(--background) 82%);'};
  border-radius: var(--border-radius);
  color: ${type === 'in-person'
    ? 'var(--in-person)'
    : type === 'online'
    ? 'var(--online)'
    : 'var(--inactive)'};
  display: inline-flex;
  font-size: calc(var(--font-size) * 0.875);
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
`;

export const tableCss = css`
  border: 0 !important;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;

  small {
    margin-left: 6px;
    color: ${color.dark};
  }

  td,
  th {
    background-color: transparent;
    border: 0;
    font-size: var(--font-size);
    margin: 0;
    text-align: left;
    vertical-align: middle;
  }

  td {
    cursor: pointer;
    display: block;
    padding: 0 ${size.gutter / 2}px 0 103px !important;
    &.tsml-time,
    &.tsml-distance {
      padding-left: ${size.gutter / 2}px !important;
      position: absolute;
    }
    &.tsml-distance {
      font-size: calc(var(--font-size) * 1.25);
      top: 56px;
    }
    &[colspan] {
      padding-left: ${size.gutter / 2}px !important;
    }
    @media ${media.mdAndUp} {
      border-bottom: 1px solid ${color.medium};
      display: table-cell;
      padding: ${size.gutter / 2}px !important;
      position: static !important;
      &.tsml-time,
      &.tsml-distance {
        padding-left: ${size.gutter}px !important;
      }
      &:last-of-type {
        padding-right: ${size.gutter}px !important;
      }
    }
  }

  th {
    border-bottom: 1px solid ${color.medium};
    font-size: var(--font-size);
    font-weight: 600;
    padding: 0 ${size.gutter / 2}px ${size.gutter / 2}px;
    text-transform: none;
    &:first-of-type {
      padding-left: ${size.gutter}px;
    }
    &:last-of-type {
      padding-right: ${size.gutter}px;
    }
  }

  thead {
    display: none;
    @media ${media.mdAndUp} {
      display: table-header-group;
    }
  }

  tr {
    border: 0;
    display: block;
    padding: ${size.gutter / 2}px ${size.gutter / 2}px;
    position: relative;
    @media ${media.mdAndUp} {
      display: table-row;
      padding: 0;
    }
  }

  tbody tr {
    border-top: 1px solid ${color.medium};
    :nth-of-type(2n + 1) {
      background-color: color-mix(in srgb, var(--text) 3%, transparent);
      a {
        color: color-mix(in srgb, var(--text) 10%, var(--link));
      }
      small {
        color: var(--text);
      }
    }
  }

  time {
    display: flex;
    flex-direction: column;
    span {
      white-space: nowrap;
      &:first-of-type {
        text-transform: lowercase;
      }
    }
    @media ${media.lgAndUp} {
      flex-direction: row;
      gap: 8px;
    }
  }
`;

export const tableInProgressCss = css`
  tr {
    background-color: var(--alert-background) !important;
  }

  button {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    color: var(--alert-text);
    cursor: pointer;
    font-size: var(--font-size);
    margin: 0;
    padding: ${size.gutter}px;
    width: 100%;
    &:focus {
      box-shadow: none;
    }
    &:hover {
      background-color: transparent;
      color: color-mix(in srgb, var(--text) 40%, var(--alert-text));
      text-decoration: underline;
    }
  }
`;

export const tableWrapperCss = css`
  margin: 0 ${size.gutter * -1}px ${size.gutter * -1}px;
  width: calc(100% + ${size.gutter * 2}px);
`;

1	import { css } from '@emotion/react';
2
3	import { color, media, size } from './variables';
4
5	export const tableChicletsCss = css`	5✔
6	display: flex;
7	gap: 4px;
8	flex-wrap: wrap;
9	`;
10
11	export const tableChicletCss = (	5✔
12	type: 'in-person' \| 'online' \| 'inactive'
UNCOV 13	) => css`	×
14	align-items: center;
15	background-color: ${type === 'in-person'	×
16	? 'color-mix(in srgb, var(--in-person), var(--background) 82%);'
17	: type === 'online'	×
18	? 'color-mix(in srgb, var(--online), var(--background) 82%);'
19	: 'color-mix(in srgb, var(--inactive), var(--background) 82%);'};
20	border-radius: var(--border-radius);
21	color: ${type === 'in-person'	×
22	? 'var(--in-person)'
23	: type === 'online'	×
24	? 'var(--online)'
25	: 'var(--inactive)'};
26	display: inline-flex;
27	font-size: calc(var(--font-size) * 0.875);
28	gap: 4px;
29	justify-content: center;
30	padding: 4px 8px;
31	`;
32
33	export const tableCss = css`	5✔
34	border: 0 !important;
35	border-spacing: 0;
36	table-layout: auto;
37	width: 100%;
38
39	small {
40	margin-left: 6px;
41	color: ${color.dark};
42	}
43
44	td,
45	th {
46	background-color: transparent;
47	border: 0;
48	font-size: var(--font-size);
49	margin: 0;
50	text-align: left;
51	vertical-align: middle;
52	}
53
54	td {
55	cursor: pointer;
56	display: block;
57	padding: 0 ${size.gutter / 2}px 0 103px !important;
58	&.tsml-time,
59	&.tsml-distance {
60	padding-left: ${size.gutter / 2}px !important;
61	position: absolute;
62	}
63	&.tsml-distance {
64	font-size: calc(var(--font-size) * 1.25);
65	top: 56px;
66	}
67	&[colspan] {
68	padding-left: ${size.gutter / 2}px !important;
69	}
70	@media ${media.mdAndUp} {
71	border-bottom: 1px solid ${color.medium};
72	display: table-cell;
73	padding: ${size.gutter / 2}px !important;
74	position: static !important;
75	&.tsml-time,
76	&.tsml-distance {
77	padding-left: ${size.gutter}px !important;
78	}
79	&:last-of-type {
80	padding-right: ${size.gutter}px !important;
81	}
82	}
83	}
84
85	th {
86	border-bottom: 1px solid ${color.medium};
87	font-size: var(--font-size);
88	font-weight: 600;
89	padding: 0 ${size.gutter / 2}px ${size.gutter / 2}px;
90	text-transform: none;
91	&:first-of-type {
92	padding-left: ${size.gutter}px;
93	}
94	&:last-of-type {
95	padding-right: ${size.gutter}px;
96	}
97	}
98
99	thead {
100	display: none;
101	@media ${media.mdAndUp} {
102	display: table-header-group;
103	}
104	}
105
106	tr {
107	border: 0;
108	display: block;
109	padding: ${size.gutter / 2}px ${size.gutter / 2}px;
110	position: relative;
111	@media ${media.mdAndUp} {
112	display: table-row;
113	padding: 0;
114	}
115	}
116
117	tbody tr {
118	border-top: 1px solid ${color.medium};
119	:nth-of-type(2n + 1) {
120	background-color: color-mix(in srgb, var(--text) 3%, transparent);
121	a {
122	color: color-mix(in srgb, var(--text) 10%, var(--link));
123	}
124	small {
125	color: var(--text);
126	}
127	}
128	}
129
130	time {
131	display: flex;
132	flex-direction: column;
133	span {
134	white-space: nowrap;
135	&:first-of-type {
136	text-transform: lowercase;
137	}
138	}
139	@media ${media.lgAndUp} {
140	flex-direction: row;
141	gap: 8px;
142	}
143	}
144	`;
145
146	export const tableInProgressCss = css`	5✔
147	tr {
148	background-color: var(--alert-background) !important;
149	}
150
151	button {
152	background-color: transparent;
153	border-radius: 0;
154	border: 0;
155	color: var(--alert-text);
156	cursor: pointer;
157	font-size: var(--font-size);
158	margin: 0;
159	padding: ${size.gutter}px;
160	width: 100%;
161	&:focus {
162	box-shadow: none;
163	}
164	&:hover {
165	background-color: transparent;
166	color: color-mix(in srgb, var(--text) 40%, var(--alert-text));
167	text-decoration: underline;
168	}
169	}
170	`;
171
172	export const tableWrapperCss = css`	5✔
173	margin: 0 ${size.gutter * -1}px ${size.gutter * -1}px;
174	width: calc(100% + ${size.gutter * 2}px);
175	`;

code4recovery / tsml-ui / 18451009991

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous