Hipster's HTML

This commit is contained in:
Alexey Milovidov 2023-01-06 04:19:10 +01:00
parent 9f8b0bf149
commit c6071f247a

View File

@ -2,33 +2,43 @@
import os
import datetime
### FIXME: BEST FRONTEND PRACTICIES BELOW
### BEST FRONTEND PRACTICES BELOW
HTML_BASE_TEST_TEMPLATE = """
<!DOCTYPE html>
<html>
<style>
body {{ font-family: "DejaVu Sans", "Noto Sans", Arial, sans-serif; background: #EEE; }}
.gradient {{
background-image: linear-gradient(90deg, #8F8, #F88);
background-size: 100%;
background-repeat: repeat;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
}}
body {{ font-family: "DejaVu Sans", "Noto Sans", Arial, sans-serif; background: linear-gradient(180deg, hsl(190deg, 90%, 10%), hsl(190deg, 90%, 0%)); color: white; }}
h1 {{ margin-left: 10px; }}
th, td {{ border: 0; padding: 5px 10px 5px 10px; text-align: left; vertical-align: top; line-height: 1.5; background-color: #FFF;
td {{ white-space: pre; font-family: Monospace, Courier New; }}
border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 25px -5px rgba(0, 0, 0, 0.1); }}
a {{ color: #06F; text-decoration: none; }}
a:hover, a:active {{ color: #F40; text-decoration: underline; }}
table {{ border: 0; }}
p.links a {{ padding: 5px; margin: 3px; background: #FFF; line-height: 2; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 25px -5px rgba(0, 0, 0, 0.1); }}
th, td {{ border: 0; padding: 5px 10px 5px 10px; text-align: left; vertical-align: top; line-height: 1.5; background: hsl(190deg, 90%, 15%); }}
th {{ background: hsl(180deg, 90%, 15%); }}
a {{ color: white; text-decoration: none; }}
a:hover, a:active {{ color: #F40; text-decoration: none; }}
table {{ border: 0; box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 1); }}
p.links a {{ padding: 5px; margin: 3px; background: hsl(190deg, 90%, 20%); line-height: 2.5; white-space: nowrap; box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 1); }}
p.links a:hover {{ background: hsl(190deg, 100%, 50%); color: black; }}
th {{ cursor: pointer; }}
tr:hover {{ filter: brightness(120%); }}
.failed {{ cursor: pointer; }}
.failed-content.open {{}}
.failed-content {{ display: none; }}
#fish {{ display: none; float: right; position: relative; top: -20em; right: 10vw; margin-bottom: -20em; width: 30vh; filter: brightness(3%); z-index: -1; }}
</style>
<title>{title}</title>
</head>
<body>
<div class="main">
<h1>{header}</h1>
<h1><span class="gradient">{header}</span></h1>
<p class="links">
<a href="{raw_log_url}">{raw_log_name}</a>
<a href="{commit_url}">Commit</a>
@ -37,7 +47,7 @@ th {{ cursor: pointer; }}
<a href="{job_url}">Job (github actions)</a>
</p>
{test_part}
</body>
<img id="fish" src="https://presentations.clickhouse.com/images/fish.png" />
<script type="text/javascript">
/// Straight from https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript
@ -53,7 +63,6 @@ th {{ cursor: pointer; }}
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {{
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
@ -66,7 +75,12 @@ th {{ cursor: pointer; }}
content.classList.toggle("failed-content.open");
content.classList.toggle("failed-content");
}}));
if (document.body.clientHeight > 3000) {{
document.getElementById('fish').style.display = 'block';
}}
</script>
</body>
</html>
"""