Skip to content

Fix minor UI bugs: dropdown text, responsive table, focus outline checkboxes #1051

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tunetheweb merged 5 commits into from
May 14, 2025
Merged

Fix minor UI bugs: dropdown text, responsive table, focus outline checkboxes #1051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2665967
fix dropdown cutoff, fix bug focus outlines
sarahfossheim May 14, 2025
1372fa2
linting
sarahfossheim May 14, 2025
5b20b81
rgba to rgb
sarahfossheim May 14, 2025
ed4a683
rgba -> rgb
tunetheweb May 14, 2025
7219e36
Standardise format
tunetheweb May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/js/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
const OPACITY = 0.4;
const RGBA = [
`rgba(4, 199, 253, ${OPACITY})`,
`rgba(166, 42, 164, ${OPACITY})`,
`rgba(18, 174, 248, ${OPACITY})`,
`rgba(132, 36, 134, ${OPACITY})`
`rgb(4, 199, 253, ${OPACITY})`,
`rgb(166, 42, 164, ${OPACITY})`,
`rgb(18, 174, 248, ${OPACITY})`,
`rgb(132, 36, 134, ${OPACITY})`
];
const HEX = ['#04c7fd', '#a62aa4', '#12aef8', '#842486'];

Expand Down
2 changes: 1 addition & 1 deletion src/js/histogram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ function drawChart(series, containerId, options) {
tooltip: {
shared: true,
useHTML: true,
borderColor: 'rgba(247,247,247,0.85)',
borderColor: 'rgb(247,247,247,0.85)',
formatter: function() {
const metric = new Metric(options, Math.round(this.points[0].x * 100) / 100);
const tooltips = this.points.filter(p => !p.series.name.includes('CDF')).map((point) => {
Expand Down
2 changes: 1 addition & 1 deletion src/js/timeseries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ function drawChart(options, series) {
crosshairs: true,
shared: true,
useHTML: true,
borderColor: 'rgba(247,247,247,0.85)',
borderColor: 'rgb(247,247,247,0.85)',
formatter: function() {
function getChangelog(changelog) {
if (!changelog) return '';
Expand Down
10 changes: 5 additions & 5 deletions static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -455,7 +455,7 @@ nav#mobile.active nav {

nav#mobile li {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 10%);
border-bottom: 1px solid rgb(0, 0, 0, 10%);
margin: 0;
background-color: #667a7d;
color: #fff;
Expand Down Expand Up @@ -667,9 +667,9 @@ ul.bulleted li ul {

.figure {
box-shadow:
0 10px 20px rgba(0, 0, 0, 19%),
0 6px 6px rgba(0, 0, 0, 23%),
inset 0px 10px 50px 0px rgba(0, 0, 0, 15%);
0 10px 20px rgb(0, 0, 0, 19%),
0 6px 6px rgb(0, 0, 0, 23%),
inset 0px 10px 50px 0px rgb(0, 0, 0, 15%);
}

select,
Expand Down Expand Up @@ -703,7 +703,7 @@ input {
top: 10px;
left: 10px;
font: bold 120px/1 monospace;
color: rgba(0, 0, 0, 10%);
color: rgb(0, 0, 0, 10%);
}

.report-graphic .primary-icon,
Expand Down
28 changes: 22 additions & 6 deletions static/css/techreport/techreport.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
--font-size-xlarge: 2.25rem;

/* Components */
--card-shadow: 0 3px 12px 0px rgba(106, 121, 124, 0.2);
--card-shadow: 0 3px 12px 0px rgb(106, 121, 124, 20%);
--card-radius: 0.625rem;
--color-panel-text: #203b40;
--color-panel-background: #bfe1e7;
Expand Down Expand Up @@ -123,7 +123,7 @@
/* Cards */
--color-card-background: #111;
--color-card-border: #000;
--card-shadow: 0 3px 12px 0px rgba(4, 8, 8, 0.2);
--card-shadow: 0 3px 12px 0px rgb(4, 8, 8, 20%);
--color-page-background: #292828;

/* Checkboxes */
Expand Down Expand Up @@ -935,16 +935,26 @@ select {
/* General tables */
.table-ui-wrapper {
overflow: auto;
margin: 1rem 0;
background: /* Shadow covers */
linear-gradient(90deg, var(--color-card-background) 30%, var(--color-card-background)),
linear-gradient(90deg, transparent, var(--color-card-background) 70%) 100% 0,
/* Shadows */
linear-gradient(90deg, rgb(0, 0, 0, 15%), rgb(0, 0, 0, 0%)),
linear-gradient(90deg, rgb(0, 0, 0, 0), rgb(0, 0, 0, 15%)) 100% 0;
background-repeat: no-repeat;
background-color: var(--color-card-background);
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}

.table-ui-wrapper:focus-visible {
outline: 1.5px solid var(--color-teal-dark);
.table-ui-wrapper:focus {
outline: 1.5px dotted var(--color-teal-dark);
outline-offset: 1.5px;
}

.table-ui {
width: 100%;
margin: 1rem 0;
border-collapse: collapse;
}

Expand Down Expand Up @@ -1198,6 +1208,7 @@ select {

.component-filters select {
font-size: 1rem;
line-height: 1.25em;
}

/* -------------------- */
Expand Down Expand Up @@ -1295,7 +1306,7 @@ select {
}

.data-sections {
background-image: linear-gradient(var(--color-bg-gradient), rgba(238, 238, 238, 0));
background-image: linear-gradient(var(--color-bg-gradient), rgb(238, 238, 238, 0));
background-size: 100% 50rem;
background-repeat: no-repeat;
background-position: 0 0;
Expand Down Expand Up @@ -1630,6 +1641,11 @@ path.highcharts-tick {
height: 0;
}

.check-wrapper:has(input:focus-visible) {
outline: 1.5px solid var(--focus-default);
outline-offset: 1.5px;
}

.check-wrapper input::after {
position: absolute;
top: 0;
Expand Down
Loading