better light theme, add another missing features, cosmetic improvement
This commit is contained in:
parent
658868d568
commit
5a30d7e50f
@ -28,7 +28,8 @@ html, body {
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
h1,h2,h3,h4,h5 {
|
||||
|
||||
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -39,6 +40,8 @@ h1,h2,h3,h4,h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
/*top: 1px; /* Twemoji */
|
||||
}
|
||||
.emoji:after {
|
||||
font-variant-emoji: emoji; /* experimental feature and only in firefox :( */
|
||||
@ -47,18 +50,19 @@ h1,h2,h3,h4,h5 {
|
||||
.emoji.Twemoji {
|
||||
font-family: "Twemoji Mozilla Built", sans-serif;
|
||||
font-size: 16px;
|
||||
top: 2px;
|
||||
}
|
||||
.emoji.Noto {
|
||||
font-family: "Noto Color Emoji", sans-serif;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
/*left: -1px;*/
|
||||
top: 0px;
|
||||
}
|
||||
.emoji.OpenMoji {
|
||||
font-family: "OpenMojiDemoFont", sans-serif;
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: 0px;
|
||||
color: #888; /* fix outline */
|
||||
}
|
||||
.emoji.OpenMoji + .text-left-margin {
|
||||
@ -67,7 +71,7 @@ h1,h2,h3,h4,h5 {
|
||||
.emoji.Noto + .text-left-margin {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.emoji.Noto + .emoji.Noto {
|
||||
.sidebar .emoji.Noto + .emoji.Noto {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -169,11 +173,18 @@ table, tr, td, th {
|
||||
height: var(--options-height);
|
||||
}
|
||||
#table { }
|
||||
|
||||
#fail_images {
|
||||
display: grid;
|
||||
justify-content: left;
|
||||
}
|
||||
#fail_images.center,
|
||||
.grid-container.reversed #fail_images.center{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-container.reversed #fail_images {
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: block;
|
||||
@ -191,19 +202,21 @@ table, tr, td, th {
|
||||
.content {
|
||||
grid-area: content;
|
||||
overflow: auto;
|
||||
justify-content: center;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
body.min { /* split feature */
|
||||
|
||||
|
||||
body.mini { /* split feature */
|
||||
width: 75%; margin: 0 auto; /* FIXME */
|
||||
}
|
||||
.min .sidebar {
|
||||
.mini .sidebar {
|
||||
font-size: 12px;
|
||||
}
|
||||
.min .sidebar .panel > div {
|
||||
.mini .sidebar .panel > div {
|
||||
line-height: 20px;
|
||||
}
|
||||
.min .sidebar #options.panel {
|
||||
.mini .sidebar #options.panel {
|
||||
height: var(--options-height-min);
|
||||
}
|
||||
|
||||
@ -374,7 +387,7 @@ th.table-sticky {
|
||||
#options.sticky + #table th.table-sticky {
|
||||
top: calc(var(--options-height) + 0.07em); /* FIXME */
|
||||
}
|
||||
.min .sidebar #options.sticky + #table th.table-sticky {
|
||||
.mini .sidebar #options.sticky + #table th.table-sticky {
|
||||
top: calc(var(--options-height-min) + 0.07em); /* FIXME */
|
||||
}
|
||||
|
||||
|
||||
@ -30,6 +30,10 @@ const emojiFontReplacementTable = {
|
||||
"💎":"Noto",
|
||||
"🏀":"Noto",
|
||||
"🖌":"Noto",
|
||||
//"❌":"Noto",
|
||||
"🏁":"Noto",
|
||||
"🛑":"Noto",
|
||||
"⛔":"Noto",
|
||||
}
|
||||
function emojiFont(emoji) {
|
||||
let emojiFontReplacement = emojiFontReplacementTable[emoji];
|
||||
@ -179,7 +183,7 @@ function buildSummary(data) {
|
||||
const total = data.length;
|
||||
const fails = data.filter((d) => { return !!d.fail; }).length;
|
||||
const fails_pct = fails * 100.0 / total;
|
||||
return [Text(`Tests failed: ${fails} / ${total} (${fails_pct.toFixed(3)}%)`)];
|
||||
return emojiToTag(`🧪 Tests 💥: ${fails}/${total}🏁 (⚠${fails_pct.toFixed(3)}%)`);
|
||||
}
|
||||
|
||||
function buildTestResultImages(data) {
|
||||
@ -229,7 +233,7 @@ function buildData(table, images, data, sort) {
|
||||
|
||||
const saveToLocalStorage = debounce((key, value) => {
|
||||
localStorage.setItem(key, value);
|
||||
});
|
||||
}, ()=>{}, 250);
|
||||
const loadFromLocalStorage = (key, default_option) => {
|
||||
const value = localStorage.getItem(key);
|
||||
if (isNaN(value)) {
|
||||
@ -251,10 +255,14 @@ const loadFromLocalStorage = (key, default_option) => {
|
||||
}
|
||||
|
||||
|
||||
|
||||
function uglyChecked(value) { // fast hack
|
||||
return value ? {"checked": "checked"} : {};
|
||||
}
|
||||
|
||||
|
||||
window.onload = () => {
|
||||
const theme = loadFromLocalStorage("rendertest_theme", "");
|
||||
|
||||
const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
|
||||
function updateLinkRel(linkElements, id) {
|
||||
for (const link of linkElements) {
|
||||
@ -269,20 +277,22 @@ window.onload = () => {
|
||||
for (const linkElement of linkElements) {
|
||||
const themeName = linkElement.getAttribute("data-theme");
|
||||
const emojiTags = emojiToTag(linkElement.title);
|
||||
const checked = !linkElement.rel.includes("alternate") ? {"checked": "checked"} : {};
|
||||
let checked = uglyChecked(!linkElement.rel.includes("alternate"));
|
||||
if (theme) {
|
||||
checked = uglyChecked(theme === themeName);
|
||||
}
|
||||
themes.push(
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "class": "theme-button", "id": themeName, "name": "theme", ...checked}, null, null,
|
||||
"click", (e) => {
|
||||
updateLinkRel(linkElements, e.target.id);
|
||||
saveToLocalStorage("rendertest_theme", e.target.id);
|
||||
}),
|
||||
...emojiTags
|
||||
])
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
|
||||
function changeAnimationDuration(newDuration) {
|
||||
document.documentElement.style.setProperty('--animation-duration', newDuration + 'ms');
|
||||
}
|
||||
@ -300,13 +310,16 @@ window.onload = () => {
|
||||
const switchFrequency = loadFromLocalStorage("rendertest_switchfrequency", 700);
|
||||
const tableSort = loadFromLocalStorage("rendertest_tablesort", false);
|
||||
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos", "left");
|
||||
const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
|
||||
const sidebarSize = loadFromLocalStorage("rendertest_sidebarsize", "default");
|
||||
const vpadding = loadFromLocalStorage("rendertest_vpadding", true);
|
||||
const all_diff = loadFromLocalStorage("rendertest_all_diff", false);
|
||||
const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
|
||||
const diffMode = loadFromLocalStorage("rendertest_diffmode", "click");
|
||||
const imagePosition = loadFromLocalStorage("rendertest_imageposition", "center");
|
||||
let isPaused = loadFromLocalStorage("rendertest_paused", false);
|
||||
function uglyChecked(value) { // fast hack
|
||||
return value ? {"checked": "checked"} : {};
|
||||
|
||||
if (theme) {
|
||||
updateLinkRel(linkElements, theme);
|
||||
}
|
||||
|
||||
// TODO: simplification and bindings
|
||||
@ -423,14 +436,16 @@ window.onload = () => {
|
||||
Tag("span", {"class": "emoji"}, "📏"),
|
||||
Text(" size"),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "always", "checked": "checked"}, null, null, "input", (e) => {
|
||||
document.body.classList.toggle("min");
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "default", ...uglyChecked(sidebarSize == "default")}, null, null, "input", (e) => {
|
||||
document.body.classList.toggle("mini");
|
||||
saveToLocalStorage("rendertest_sidebarsize", e.target.value);
|
||||
}),
|
||||
Text(" default")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "min"}, null, null, "input", (e) => {
|
||||
document.body.classList.toggle("min");
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "mini", ...uglyChecked(sidebarSize == "mini")}, null, null, "input", (e) => {
|
||||
document.body.classList.toggle("mini");
|
||||
saveToLocalStorage("rendertest_sidebarsize", e.target.value);
|
||||
}),
|
||||
Text(" mini")
|
||||
])
|
||||
@ -443,11 +458,17 @@ window.onload = () => {
|
||||
Text(" Image position")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "image_position", "value": "relative", "disabled": "disabled"}),
|
||||
Tag("input", {"type": "radio", "name": "image_position", "value": "relative", ...uglyChecked(imagePosition === "relative")}, null, null, "input", (e) => {
|
||||
images.classList.toggle("center");
|
||||
saveToLocalStorage("rendertest_imageposition", e.target.value);
|
||||
}),
|
||||
Text(" relative")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "image_position", "value": "center", "checked": "checked"}),
|
||||
Tag("input", {"type": "radio", "name": "image_position", "value": "center", ...uglyChecked(imagePosition === "center")}, null, null, "input", (e) => {
|
||||
images.classList.toggle("center");
|
||||
saveToLocalStorage("rendertest_imageposition", e.target.value);
|
||||
}),
|
||||
Text(" center ")
|
||||
]),
|
||||
Tag("b", null, null, [
|
||||
@ -503,7 +524,9 @@ window.onload = () => {
|
||||
Tag("h1", null, "Rendertest report"),
|
||||
Tag("h2", null, "Summary"),
|
||||
Tag("div", {"id": "summary"}, null, [...buildSummary(data)]),
|
||||
Tag("h2", null, "Images of things that are not perfect"),
|
||||
Tag("h2", null, "Images of things that are not perfect ", [
|
||||
Tag("span", {"class": "emoji"}, "⤵")
|
||||
]),
|
||||
images = Tag("div", {"id": "fail_images", "class": "vpadding"})
|
||||
])
|
||||
])
|
||||
@ -512,9 +535,18 @@ window.onload = () => {
|
||||
buildData(table, images, data, tableSort);
|
||||
|
||||
// TODO: remove this
|
||||
if (sidebarPos == "right") {
|
||||
if (sidebarPos === "right") {
|
||||
gridContainer.classList.toggle("reversed");
|
||||
}
|
||||
if (sidebarMode === "always") {
|
||||
sidebarOptions.classList.toggle("sticky");
|
||||
}
|
||||
if (sidebarSize === "mini") {
|
||||
document.body.classList.toggle("mini");
|
||||
}
|
||||
if (imagePosition === "center") {
|
||||
images.classList.toggle("center");
|
||||
}
|
||||
if (!vpadding) {
|
||||
images.classList.toggle("vpadding");
|
||||
}
|
||||
@ -523,12 +555,10 @@ window.onload = () => {
|
||||
//vpaddin_input.disabled = !vpaddin_input.disabled;
|
||||
//images.classList.toggle("vpadding");
|
||||
}
|
||||
if (diffMode == "separate") {
|
||||
if (diffMode === "separate") {
|
||||
images.classList.toggle("diff_separate");
|
||||
}
|
||||
if (sidebarMode == "always") {
|
||||
sidebarOptions.classList.toggle("sticky");
|
||||
}
|
||||
|
||||
changeAnimationDuration(isPaused ? 0 : numberInput.value);
|
||||
|
||||
// stop animation when not in the viewport
|
||||
|
||||
@ -5,9 +5,9 @@ body {
|
||||
|
||||
.panel {
|
||||
background: #FFF;
|
||||
border: #EEE 1px solid;
|
||||
border: #e5f0ff 1px solid;
|
||||
border-radius: 10px;
|
||||
color: cornflowerblue;
|
||||
color: #2d6bdb;
|
||||
}
|
||||
|
||||
.meta-block h3 {
|
||||
@ -17,12 +17,12 @@ body {
|
||||
|
||||
table {
|
||||
color: #eb4300;
|
||||
border: #e100ca 1px solid;
|
||||
border: #ffa6f6 1px solid;
|
||||
border-radius: 6px;
|
||||
}
|
||||
th {
|
||||
background: oklch(62.5% 0.291 308.12);
|
||||
background: linear-gradient(0deg,#b540ff,cornflowerblue);
|
||||
background: linear-gradient(0deg,#d99dff,#c4d7f9);
|
||||
/* box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);*/
|
||||
}
|
||||
a, a:visited {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user