Make it look much better

Including dark mode!
This commit is contained in:
nora 2025-11-11 19:26:28 +01:00
parent 1d31b9c3fe
commit 310a24aa44
5 changed files with 52 additions and 26 deletions

View file

@ -286,6 +286,7 @@ async fn web_root(State(state): State<AppState>) -> impl IntoResponse {
nightlies: Vec<String>, nightlies: Vec<String>,
version: &'static str, version: &'static str,
build_count: BuildStats, build_count: BuildStats,
notification_pr_url: String,
} }
let targets = state.db.target_list().await?; let targets = state.db.target_list().await?;
@ -297,6 +298,7 @@ async fn web_root(State(state): State<AppState>) -> impl IntoResponse {
nightlies, nightlies,
version: crate::VERSION, version: crate::VERSION,
build_count, build_count,
notification_pr_url: notification::notification_pr_url(),
}; };
Ok(Html(page.render().unwrap()).into_response()) Ok(Html(page.render().unwrap()).into_response())

View file

@ -1,29 +1,48 @@
:root {
color-scheme: light dark;
}
html { html {
font-family: sans-serif; font-family: sans-serif;
margin: 20px;
}
table {
border-spacing: 0;
} }
th, th,
td { td {
border: 1px solid; padding: 2px 5px;
margin: 0; }
tr:not(:last-child) {
th,
td {
border-bottom: 1px solid;
}
} }
.error { .error {
background-color: lightcoral; background-color: light-dark(lightcoral, darkred);
} }
.pass { .pass {
background-color: greenyellow; background-color: light-dark(greenyellow, darkgreen);
} }
.missing { .missing {
background-color: lightgray; background-color: light-dark(lightgray, rgb(85, 85, 85));
} }
.target-header { .target-header {
writing-mode: sideways-lr; writing-mode: sideways-lr;
} }
.build-indicator-big {
padding: 10px;
margin-top: 20px;
}
.build-cell { .build-cell {
font-size: 2rem; font-size: 2rem;
} }
@ -36,13 +55,20 @@ td {
padding: 5px; padding: 5px;
} }
.target-name-col {
white-space: nowrap;
}
.footer { .footer {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
@media (prefers-color-scheme: dark) {
html {
background-color: #1b191c;
color: #e6dae9;
}
a {
color: #e5a5c2;
}
}

View file

@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -6,18 +6,15 @@
<title>Build {{nightly}} {{target}}</title> <title>Build {{nightly}} {{target}}</title>
<link rel="stylesheet" href="/index.css" /> <link rel="stylesheet" href="/index.css" />
<script type="module" defer src="index.js"></script> <script type="module" defer src="index.js"></script>
<style>
.build-indicator-big {
padding: 10px;
}
</style>
</head> </head>
<body> <body>
<h1>Build results for nightly-{{nightly}} target {{target}} {{mode}}</h1> <h1>
Build results for
<a href="/nightly?nightly={{nightly}}">nightly-{{nightly}}</a>, target
<a href="/target?target={{target}}">{{target}}</a> ({{mode}})
</h1>
<a href="/">Home</a> <a href="/">Home</a>
<div style="margin-top: 20px" class="{{status}} build-indicator-big"> <div class="{{status}} build-indicator-big">{{status}}</div>
{{status}}
</div>
{% if let Some(rustflags) = rustflags %} {% if let Some(rustflags) = rustflags %}
<p> <p>
Using rustflags: <b><code>{{rustflags}}</code></b> Using rustflags: <b><code>{{rustflags}}</code></b>

View file

@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -25,6 +25,12 @@
history. history.
</p> </p>
<p>
🔔 does-it-build supports sending notifications to target maintainers via
GitHub issues. You can add yourself with
<a href="{{notification_pr_url}}">a PR</a>. 🔔
</p>
<h1>Nightlies</h1> <h1>Nightlies</h1>
<ul> <ul>
{% for nightly in nightlies.iter().take(5) %} {% for nightly in nightlies.iter().take(5) %}

View file

@ -5,11 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{target}} build history</title> <title>{{target}} build history</title>
<link rel="stylesheet" href="/index.css" /> <link rel="stylesheet" href="/index.css" />
<style>
.build-indicator-big {
padding: 10px;
}
</style>
</head> </head>
<body> <body>
<h1>Target build history for {{target}}</h1> <h1>Target build history for {{target}}</h1>
@ -33,7 +28,7 @@
</p> </p>
<p> <p>
🔔 does-it-build supports sending notifications to target maintainers via GitHub issues. 🔔 does-it-build supports sending notifications to target maintainers via GitHub issues.
You can add yourself with <a href="{{notification_pr_url}}">a PR</a>. You can add yourself with <a href="{{notification_pr_url}}">a PR</a>. 🔔
</p> </p>
{% if let Some(maintainers) = maintainers %} {% if let Some(maintainers) = maintainers %}
<p> <p>