diff options
Diffstat (limited to 'src/html.c')
| -rw-r--r-- | src/html.c | 76 |
1 files changed, 32 insertions, 44 deletions
@@ -58,6 +58,7 @@ static void emit_stylesheet(FILE *f) { ".nav-link { color: var(--dim); font-size: 12px; text-decoration: none; }\n" ".nav-link:hover { color: var(--green); }\n" "header form { display: inline; }\n" + ".back::before { content: \"←\"; margin-right: 1ex; vertical-align: 10%%; }\n" "button.logout {\n" " border: none;\n" " background: none;\n" @@ -153,7 +154,6 @@ static void emit_stylesheet(FILE *f) { " padding: 0 12px 10px 12px;\n" " border-bottom: 1px solid var(--bor);\n" "}\n" - ".clients > span:last-child { text-align: right; }\n" ".clients > a {\n" " text-decoration: none;\n" "}\n" @@ -179,20 +179,26 @@ static void emit_stylesheet(FILE *f) { " .clients > a.stale { border-left: 3px solid var(--purple); padding-left: 11px; }\n" " .clients > a.stale .client-name { border-left: none; padding-left: 0; }\n" "}\n" + "\n" ".badge { border: 1px solid; padding: 2px 7px; font-size: 10px; letter-spacing: 1px; justify-self: center; }\n" ".badge.ok { color: var(--green); background: var(--green-bg); border-color: var(--green-bor); }\n" ".badge.run { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow-bor); }\n" ".badge.fail { color: var(--red); background: var(--red-bg); border-color: var(--red-bor); }\n" ".badge.stale { color: var(--purple); background: var(--purple-bg); border-color: var(--purple-bor); }\n" - "/* ADD FORM */\n" - "#add-form > summary {\n" + "\n" + ".rollout-form {\n" + " margin-bottom: 28px" + "}\n" + ".rollout-form > summary {\n" " display: block;\n" " text-align: center;\n" " list-style: none;\n" "}\n" - "#add-form > summary::after {content: \"\"}\n" - "#add-form > summary::marker { display: none; }\n" - "#add-form > form {\n" + // @CLEANUP This is added by a more generic rule. We should remove it + // from there + ".rollout-form > summary::after { content: \"\"; }\n" + ".rollout-form > summary::marker { display: none; }\n" + ".rollout-form > form {\n" " background: var(--sur);\n" " border: solid var(--bor);\n" " border-width: 0px 1px 1px 1px;\n" @@ -201,8 +207,7 @@ static void emit_stylesheet(FILE *f) { " gap: 12px;\n" " flex-direction: column;\n" "}\n" - "#add-form .input { max-width: 280px; }\n" - "/* DETAIL HEADER */\n" + "\n" "article {\n" " background: var(--sur);\n" " border: 1px solid var(--bor);\n" @@ -221,14 +226,14 @@ static void emit_stylesheet(FILE *f) { " color: var(--txt);\n" " word-break: break-all;\n" "}\n" - "/* BACK LINK */\n" + "\n" "main > a { display: inline-block; color: var(--dim); font-size: 12px; margin-bottom: 20px; text-decoration: none; }\n" "main > a:hover { color: var(--green); }\n" - "/* SNIPPETS */\n" - "details {\n" + "\n" + ".rollout {\n" " margin-bottom: 28px;\n" "}\n" - "details summary {\n" + ".rollout summary {\n" " font-size: 11px;\n" " letter-spacing: 2px;\n" " text-transform: uppercase;\n" @@ -239,12 +244,10 @@ static void emit_stylesheet(FILE *f) { " display: flex;\n" " justify-content: space-between;\n" "}\n" - "details summary:hover { color: var(--txt); }\n" - "details summary::after { content: '>'; }\n" - "details[open] summary::after { transform: rotate(90deg); }\n" - "details > div { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }\n" - "details h4 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; font-weight: normal; }\n" - "details pre {\n" + ".rollout summary:hover { color: var(--txt); }\n" + ".rollout summary::after { content: '>'; }\n" + ".rollout[open] summary::after { transform: rotate(90deg); }\n" + "pre {\n" " background: var(--bg);\n" " border: 1px solid var(--bor);\n" " padding: 12px 60px 12px 14px;\n" @@ -255,25 +258,10 @@ static void emit_stylesheet(FILE *f) { " position: relative;\n" " white-space: pre;\n" "}\n" - "details pre .cmd { color: var(--yellow); }\n" - "details pre .flag { color: var(--dim); }\n" - "details pre .url { color: var(--green); }\n" - "details pre .key { color: var(--sky); }\n" - "details pre .val { color: var(--pink); }\n" - "details pre .secret { color: var(--purple); }\n" - "details pre button {\n" - " position: absolute;\n" - " top: 8px; right: 8px;\n" - " background: var(--sur);\n" - " border-color: var(--bor);\n" - " color: var(--dim);\n" - " font-size: 10px;\n" - "}\n" - "details pre button:hover { border-color: var(--green); color: var(--green); background: transparent; }\n" - "/* BACKUP LIST */\n" + "\n" "main > h4 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; font-weight: normal; }\n" ".backups { display: flex; flex-direction: column; gap: 8px; }\n" - ".backups > div {\n" + ".backup {\n" " background: var(--sur);\n" " border: 1px solid var(--bor);\n" " padding: 10px 16px;\n" @@ -281,8 +269,8 @@ static void emit_stylesheet(FILE *f) { " align-items: center;\n" " gap: 12px;\n" "}\n" - ".backups > div > time { color: var(--hi); font-size: 13px; flex: 1; }\n" - ".backups > div > .duration { color: var(--dim); font-size: 12px; min-width: 70px; text-align: right; }\n" + ".backup > .title { color: var(--hi); font-size: 13px; flex: 1; }\n" + ".backups > .duration { color: var(--dim); font-size: 12px; min-width: 70px; text-align: right; }\n" "</style>\n" ); } @@ -359,7 +347,7 @@ char *html_render_clients_page(const struct Request *request, const struct ListC fprintf(f, "</small>\n" " </h2>\n" - " <details id=\"add-form\">\n" + " <details class=\"rollout-form\" id=\"add-form\">\n" " <summary class=\"btn\">New Client</summary>\n" " <form method=\"POST\" action=\"/clients\">\n" " <div>\n" @@ -443,11 +431,11 @@ char *html_render_client_detail_page(const struct Request *request, const struct " <form method=\"POST\" action=\"/logout\"><button type=\"submit\" class=\"logout\">Sign out</button></form>\n" " </header>\n" " <main>\n" - " <a href=\"/clients\">← Back to clients</a>\n" - " <article%s>\n" + " <a class=\"back\" href=\"/clients\">Back to clients</a>\n" + " <article class=\"%s\">\n" " <h3>%s</h3>\n" " <p>%d backups <span class=\"badge %s\">%s</span></p>\n", - is_stale ? " class=\"stale\"" : "", + is_stale ? "stale" : "", client_result->name, backups_result->backups_len, status_to_badge_class(current_status), @@ -463,8 +451,8 @@ char *html_render_client_detail_page(const struct Request *request, const struct fprintf(f, " <code>Secret: %s</code>\n" " </article>\n" - " <details>\n" - " <summary>How To</summary>\n" + " <details class=\"rollout\">\n" + " <summary>Submit backup reports</summary>\n" " <div>\n" " <pre><code>curl -s -X POST %s://%s/api/report \\\n" " -H \"Content-Type: application/json\" \\\n" @@ -497,7 +485,7 @@ char *html_render_client_detail_page(const struct Request *request, const struct struct timespec duration = time_sub(&backups_result->backups[i].completed, &backups_result->backups[i].started); fprintf(f, - " <div><time>%s</time><time class=\"duration\">%s</time><span class=\"badge %s\">%s</span></div>\n", + " <div class=\"backup\"><time class=\"title\">%s</time><time class=\"duration\">%s</time><span class=\"badge %s\">%s</span></div>\n", format_time(backups_result->backups[i].started).buf, duration_valid ? format_duration(duration).buf : "", status_to_badge_class(backups_result->backups[i].status), |