mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2024-11-22 15:42:02 +00:00
Hipster's HTML
This commit is contained in:
parent
9f8b0bf149
commit
c6071f247a
@ -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>
|
||||
"""
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user