diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 8fc6be1de8dd975f9547de615809222236be4b70..76ba96e45c9e16291a6ccd8096fdd01b274c1560 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -1321,55 +1321,53 @@ async fn vote_compare_inner(
.expect("vote compare rpc json");
let body = html! {
- section class="vote-compare-shell" {
- h2 { "compare" }
- div class="vote-compare-pair" {
- a class="vote-compare-item" href=(nav.garden_item_href(&left)) {
- code { (item_display_path(left.as_str())) }
- }
- span class="vote-compare-vs" { "vs" }
- a class="vote-compare-item" href=(nav.garden_item_href(&right)) {
- code { (item_display_path(right.as_str())) }
- }
- }
- div id="vote-edge-history-region" {
- (edge_history)
- }
- @if can_post {
- form id="vote-compare-form" method="POST" action="/ui" {
- input type="hidden" name=(UI_RPC_FIELD) value=(rpc_json);
- div class="vote-thread-picker" {
- label class="vote-thread-picker-label" { "thread" }
- select id="vote-thread-select" name="thread_tag" aria-label="Thread to post vote into" {
- @if thread_tags.is_empty() {
- option value="vote" selected { "#vote" }
- }
- @for t in &thread_tags {
- @if *t == auto_thread {
- option value=(t) selected { "#" (t) }
- } @else {
- option value=(t) { "#" (t) }
- }
- }
- }
+ h2 { "compare" }
+ div class="vote-compare-pair" {
+ a class="vote-compare-item" href=(nav.garden_item_href(&left)) {
+ code { (item_display_path(left.as_str())) }
+ }
+ span class="vote-compare-vs" { "vs" }
+ a class="vote-compare-item" href=(nav.garden_item_href(&right)) {
+ code { (item_display_path(right.as_str())) }
+ }
+ }
+ div id="vote-edge-history-region" {
+ (edge_history)
+ }
+ @if can_post {
+ form id="vote-compare-form" method="POST" action="/ui" {
+ input type="hidden" name=(UI_RPC_FIELD) value=(rpc_json);
+ div class="vote-thread-picker" {
+ label class="vote-thread-picker-label" { "thread" }
+ select id="vote-thread-select" name="thread_tag" aria-label="Thread to post vote into" {
+ @if thread_tags.is_empty() {
+ option value="vote" selected { "#vote" }
}
- input type="hidden" name="ratio_left" id="vote-ratio-left" value="50";
- input type="hidden" name="ratio_right" id="vote-ratio-right" value="50";
- label class="vote-compare-slider-label" {
- span id="vote-slider-left-label" { (item_display_path(left.as_str())) }
- input type="range" id="vote-preference-slider" min="0" max="100" value="50"
- aria-valuemin="0" aria-valuemax="100";
- span id="vote-slider-right-label" { (item_display_path(right.as_str())) }
+ @for t in &thread_tags {
+ @if *t == auto_thread {
+ option value=(t) selected { "#" (t) }
+ } @else {
+ option value=(t) { "#" (t) }
+ }
}
- label class="vote-explain-label" { "reason (required)" }
- textarea name="explanation" id="vote-explain" rows="5" placeholder="why this split?" required {}
- div id="vote-compare-errors" {}
- p { button type="submit" { "post vote" } }
}
- } @else {
- p class="muted" { a href="/login" { "log in" } " to post this vote." }
}
+ input type="hidden" name="ratio_left" id="vote-ratio-left" value="50";
+ input type="hidden" name="ratio_right" id="vote-ratio-right" value="50";
+ label class="vote-compare-slider-label" {
+ span id="vote-slider-left-label" { (item_display_path(left.as_str())) }
+ input type="range" id="vote-preference-slider" min="0" max="100" value="50"
+ aria-valuemin="0" aria-valuemax="100";
+ span id="vote-slider-right-label" { (item_display_path(right.as_str())) }
+ }
+ label class="vote-explain-label" { "reason (required)" }
+ textarea name="explanation" id="vote-explain" rows="5" placeholder="why this split?" required {}
+ div id="vote-compare-errors" {}
+ p { button type="submit" { "post vote" } }
}
+ } @else {
+ p class="muted" { a href="/login" { "log in" } " to post this vote." }
+ }
};
let page = layout_full_bleed_chromeless(
diff --git a/server/static/theme_default.css b/server/static/theme_default.css
index a441c4f79d8cf88f5a8240f9992f47dbbd1ab46b..fdcde86c718eb53cce8273e45a9844c2d8041f88 100644
--- a/server/static/theme_default.css
+++ b/server/static/theme_default.css
@@ -1270,8 +1270,12 @@ body.view-ontology-dark .ont-ranking-list li {
body.view-ontology-dark .ont-ranking-list li::before {
color: var(--meta);
content: counter(ont-rank) ".";
- font-size: 11px;
- min-width: 18px;
+ flex-shrink: 0;
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
text-align: right;
}
body.view-ontology-dark .ont-rank-score {
@@ -1424,8 +1428,12 @@ body.view-ontology-light .ont-ranking-list li {
body.view-ontology-light .ont-ranking-list li::before {
color: var(--meta);
content: counter(ont-rank) ".";
- font-size: 11px;
- min-width: 18px;
+ flex-shrink: 0;
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
text-align: right;
}
body.view-ontology-light .ont-rank-score {
diff --git a/server/static/theme_retro.css b/server/static/theme_retro.css
index 373f15bbd75b62604cdd14b9f0fadda2d6176991..61e1448b2f66a075c0e33325d6980448712fc927 100644
--- a/server/static/theme_retro.css
+++ b/server/static/theme_retro.css
@@ -135,6 +135,30 @@ body.view-ontology nav.breadcrumb a:hover {
body.view-ontology nav.breadcrumb a.bc-current { color: #111; font-weight: 600; }
body.view-ontology nav.breadcrumb .bc-sep { color: #888; padding: 0 2px; }
+body.view-ontology ol.ont-ranking-list {
+ counter-reset: ont-rank;
+ list-style: none;
+ margin: 0.5rem 0;
+ padding: 0;
+}
+body.view-ontology ol.ont-ranking-list li {
+ align-items: baseline;
+ counter-increment: ont-rank;
+ display: flex;
+ gap: 0.35rem;
+}
+body.view-ontology ol.ont-ranking-list li::before {
+ flex-shrink: 0;
+ color: #666;
+ content: counter(ont-rank) ".";
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
+ text-align: right;
+}
+
nav.breadcrumb.ont-sibling-nav {
margin-top: 0;
width: 100%;
diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css
index 6eb9222184a8795d67a5d09d41de08c8ac1b148f..7da102040484c887833158a37c307d078205c701 100644
--- a/server/static/theme_retro_craft.css
+++ b/server/static/theme_retro_craft.css
@@ -742,12 +742,32 @@ body.view-ontology button.ont-garden-pin-ico:focus-visible {
outline-offset: 2px;
}
+body.view-ontology ol.ont-ranking-list {
+ counter-reset: ont-rank;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
body.view-ontology ol.ont-ranking-list li,
body.view-ontology ul.ont-group-list li {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
+body.view-ontology ol.ont-ranking-list li {
+ counter-increment: ont-rank;
+}
+body.view-ontology ol.ont-ranking-list li::before {
+ flex-shrink: 0;
+ color: #5c574e;
+ content: counter(ont-rank) ".";
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
+ text-align: right;
+}
body.view-ontology ol.ont-ranking-list li .item-link,
body.view-ontology ul.ont-group-list li .item-link {
flex: 1;