silentmode/sirius
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(sirius-x): phone layouts for the dashboard and market; real market empty state

Browse source 
Reviewed both pages at desktop and phone widths. Desktop was fine; on
phones three things were wrong. The top bar wrapped into four rows
because the font-comparison pill and full-size links all stayed; on
screens under 640px the pill is hidden and links and buttons tighten.
The dashboard menu rendered as five full-width blocks because the
wide-screen width:100% rule outranked the phone override; it is now a
row of pills, the wallet block collapses to one line (short address,
live balance, refresh), and the sub-tabs scroll sideways instead of
wrapping. The long address had also been pushing the whole page wider
than the viewport, fixed with minmax(0,1fr) on the grid column.

The market showed an empty filter bar and a one-line status when there
were no listings; it now shows a proper empty state with the two things
a visitor can do (sell from the dashboard, register a new name) and
hides the filters until there is something to filter. Buy buttons go
full width on phones.
This commit is contained in:
Local Dev 2026-09-20 00:58:25 +02:00
parent 034281fc9d
commit bc8c5114dc
15 changed files with 89 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/index.html
View file

@ -92,7 +92,7 @@
<script type="importmap"> <script type="importmap">
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
</script> </script>
<script src="../js/i18n.js?v=20260917i"></script> <script src="../js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
@ -607,6 +607,6 @@ process.exit(0);"</pre>
<script src="../js/pricing.js?v=20260917market"></script> <script src="../js/pricing.js?v=20260917market"></script>
<script defer src="../js/site-footer.js?v=20260917market"></script> <script defer src="../js/site-footer.js?v=20260917market"></script>
<script defer src="../js/theme.js?v=20260910font"></script> <script defer src="../js/theme.js?v=20260910font"></script>
<script defer src="../js/profile-menu.js?v=20260917wide"></script> <script defer src="../js/profile-menu.js?v=20260920m"></script>
</body> </body>
</html> </html>

6
i18n/de.json
View file

@ -585,5 +585,9 @@
"Request declined": "Anfrage abgelehnt", "Request declined": "Anfrage abgelehnt",
"Open dashboard →": "Dashboard öffnen →", "Open dashboard →": "Dashboard öffnen →",
"incl.": "inkl.", "incl.": "inkl.",
"sat unconfirmed · spendable now": "Sat unbestätigt · sofort verfügbar" "sat unconfirmed · spendable now": "Sat unbestätigt · sofort verfügbar",
"Nothing is for sale right now": "Derzeit steht nichts zum Verkauf",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Namen kommen in den Verkauf, wenn ihre Besitzer sie im Dashboard anbieten. Hast du einen zu verkaufen — oder lieber einen neuen registrieren?",
"Sell a name from your dashboard →": "Einen Namen im Dashboard verkaufen →",
"Register a new name": "Neuen Namen registrieren"
} }

6
i18n/el.json
View file

@ -585,5 +585,9 @@
"Request declined": "Το αίτημα απορρίφθηκε", "Request declined": "Το αίτημα απορρίφθηκε",
"Open dashboard →": "Άνοιγμα πίνακα ελέγχου →", "Open dashboard →": "Άνοιγμα πίνακα ελέγχου →",
"incl.": "συμπ.", "incl.": "συμπ.",
"sat unconfirmed · spendable now": "sat ανεπιβεβαίωτα · διαθέσιμα τώρα" "sat unconfirmed · spendable now": "sat ανεπιβεβαίωτα · διαθέσιμα τώρα",
"Nothing is for sale right now": "Τίποτα δεν πωλείται αυτή τη στιγμή",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Τα ονόματα βγαίνουν προς πώληση όταν οι ιδιοκτήτες τους τα καταχωρούν από τον πίνακα ελέγχου. Έχεις ένα να πουλήσεις ή προτιμάς ένα καινούργιο;",
"Sell a name from your dashboard →": "Πούλησε ένα όνομα από τον πίνακα ελέγχου →",
"Register a new name": "Καταχώρηση νέου ονόματος"
} }

6
i18n/es.json
View file

@ -585,5 +585,9 @@
"Request declined": "Solicitud rechazada", "Request declined": "Solicitud rechazada",
"Open dashboard →": "Abrir panel →", "Open dashboard →": "Abrir panel →",
"incl.": "incl.", "incl.": "incl.",
"sat unconfirmed · spendable now": "sat sin confirmar · disponibles ya" "sat unconfirmed · spendable now": "sat sin confirmar · disponibles ya",
"Nothing is for sale right now": "Ahora mismo no hay nada en venta",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Los nombres salen a la venta cuando sus dueños los publican desde el panel. ¿Tienes uno para vender, o prefieres uno nuevo?",
"Sell a name from your dashboard →": "Vender un nombre desde tu panel →",
"Register a new name": "Registrar un nombre nuevo"
} }

6
i18n/fr.json
View file

@ -585,5 +585,9 @@
"Request declined": "Demande refusée", "Request declined": "Demande refusée",
"Open dashboard →": "Ouvrir le tableau de bord →", "Open dashboard →": "Ouvrir le tableau de bord →",
"incl.": "dont", "incl.": "dont",
"sat unconfirmed · spendable now": "sat non confirmés · disponibles maintenant" "sat unconfirmed · spendable now": "sat non confirmés · disponibles maintenant",
"Nothing is for sale right now": "Rien n'est à vendre pour l'instant",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Les noms sont mis en vente lorsque leurs propriétaires les listent depuis le tableau de bord. Vous en avez un à vendre, ou vous en voulez un tout neuf ?",
"Sell a name from your dashboard →": "Vendre un nom depuis le tableau de bord →",
"Register a new name": "Enregistrer un nouveau nom"
} }

6
i18n/pt.json
View file

@ -585,5 +585,9 @@
"Request declined": "Pedido recusado", "Request declined": "Pedido recusado",
"Open dashboard →": "Abrir painel →", "Open dashboard →": "Abrir painel →",
"incl.": "incl.", "incl.": "incl.",
"sat unconfirmed · spendable now": "sat por confirmar · disponíveis já" "sat unconfirmed · spendable now": "sat por confirmar · disponíveis já",
"Nothing is for sale right now": "De momento não há nada à venda",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Os nomes são postos à venda quando os donos os anunciam a partir do painel. Tem um para vender, ou prefere um novo?",
"Sell a name from your dashboard →": "Vender um nome a partir do painel →",
"Register a new name": "Registar um nome novo"
} }

6
i18n/ru.json
View file

@ -585,5 +585,9 @@
"Request declined": "Запрос отклонён", "Request declined": "Запрос отклонён",
"Open dashboard →": "Открыть панель →", "Open dashboard →": "Открыть панель →",
"incl.": "вкл.", "incl.": "вкл.",
"sat unconfirmed · spendable now": "сат не подтверждено · доступно сейчас" "sat unconfirmed · spendable now": "сат не подтверждено · доступно сейчас",
"Nothing is for sale right now": "Сейчас ничего не продаётся",
"Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?": "Имена появляются в продаже, когда владельцы выставляют их из панели. Есть что продать — или лучше зарегистрировать новое?",
"Sell a name from your dashboard →": "Продать имя из панели →",
"Register a new name": "Зарегистрировать новое имя"
} }

4
index.html
View file

@ -130,7 +130,7 @@
.verify dd{margin:2px 0 0;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;color:var(--ink)} .verify dd{margin:2px 0 0;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;color:var(--ink)}
footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
</style> </style>
<script src="./js/i18n.js?v=20260917i"></script> <script src="./js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
@ -515,6 +515,6 @@ process.exit(0);"</pre>
<script src="./js/pin-escrow.js?v=20260909pin"></script> <script src="./js/pin-escrow.js?v=20260909pin"></script>
<script defer src="./js/theme.js?v=20260910font"></script> <script defer src="./js/theme.js?v=20260910font"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script> <script defer src="./js/site-footer.js?v=20260917market"></script>
<script defer src="./js/profile-menu.js?v=20260917wide"></script> <script defer src="./js/profile-menu.js?v=20260920m"></script>
</body> </body>
</html> </html>

2
js/i18n.js
View file

@ -22,7 +22,7 @@
(function () { (function () {
var STORE = "sirius-lang"; var STORE = "sirius-lang";
var CACHE = "sirius-i18n:"; var CACHE = "sirius-i18n:";
var VERSION = "20260917i"; // bump when dictionaries change var VERSION = "20260920a"; // bump when dictionaries change
var LANGS = { var LANGS = {
en: "English", en: "English",
de: "Deutsch", de: "Deutsch",

13
js/market.js
View file

@ -54,7 +54,18 @@ function render() {
rows.sort((a, b) => sort === "name" ? a.name.localeCompare(b.name) : sort === "new" ? Date.parse(b.created_at) - Date.parse(a.created_at) : Number(a.price_sats) - Number(b.price_sats)); rows.sort((a, b) => sort === "name" ? a.name.localeCompare(b.name) : sort === "new" ? Date.parse(b.created_at) - Date.parse(a.created_at) : Number(a.price_sats) - Number(b.price_sats));
$("count").textContent = `${rows.length} of ${listings.length}`; $("count").textContent = `${rows.length} of ${listings.length}`;
const status = $("status"); const status = $("status");
if (!listings.length) { status.className = "status"; status.textContent = "Nothing is for sale right now. Owners list names from their dashboard."; $("list").innerHTML = ""; return; } document.querySelector(".toolbar").hidden = !listings.length;
if (!listings.length) {
status.hidden = true;
$("list").innerHTML = `<div class="empty big">
<div class="ico">🛒</div>
<h3>Nothing is for sale right now</h3>
<p>Names go on sale when their owners list them from the dashboard. Have one to sell, or want a fresh one instead?</p>
<div class="cta"><a class="btn acid" href="./portal.html#domains">Sell a name from your dashboard →</a><a class="btn ghost" href="./#search-input">Register a new name</a></div>
</div>`;
return;
}
status.hidden = false;
status.className = "status"; status.textContent = `${listings.length} name${listings.length === 1 ? "" : "s"} for sale. Prices are set by the sellers; you pay the price plus about 1,300 sat of chain dust and fee.`; status.className = "status"; status.textContent = `${listings.length} name${listings.length === 1 ? "" : "s"} for sale. Prices are set by the sellers; you pay the price plus about 1,300 sat of chain dust and fee.`;
$("list").innerHTML = rows.length ? rows.map((l) => ` $("list").innerHTML = rows.length ? rows.map((l) => `
<div class="row"> <div class="row">

11
js/profile-menu.js
View file

@ -247,6 +247,17 @@
s.id = "profile-menu-css"; s.id = "profile-menu-css";
s.textContent = ` s.textContent = `
.topnav .profile-wrap{position:relative;margin-left:auto} .topnav .profile-wrap{position:relative;margin-left:auto}
/* Phones: the bar was wrapping into four rows. Drop the font-comparison
pill, tighten link padding, and shrink the two buttons. */
@media (max-width:640px){
.topnav{padding:8px 10px;gap:0}
.topnav .font-picker{display:none !important}
.topnav > a{padding:5px 8px;font-size:13px}
.topnav .brand{margin-right:6px}
.topnav .dash-link{padding:5px 9px;font-size:12.5px}
.topnav .profile-wrap button.portal{padding:5px 9px;font-size:12.5px}
.topnav .profile-wrap .wallet-label{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.topnav .dash-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px; .topnav .dash-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none; padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none;
color:var(--ink,#f1f4fa);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} color:var(--ink,#f1f4fa);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}

13
market.html
View file

@ -48,6 +48,13 @@
.btn:disabled{opacity:.45;cursor:not-allowed} .btn:disabled{opacity:.45;cursor:not-allowed}
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;background:rgba(214,255,61,.14);color:var(--acid)} .badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;background:rgba(214,255,61,.14);color:var(--acid)}
.empty{padding:28px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;margin-top:10px} .empty{padding:28px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;margin-top:10px}
.empty.big{padding:40px 24px;border-style:solid;background:var(--panel2)}
.empty.big .ico{font-size:34px;line-height:1;opacity:.8}
.empty.big h3{margin:.6rem 0 .3rem;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.empty.big p{margin:0 auto;max-width:460px;font-size:14px}
.empty.big .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.toolbar[hidden],.status[hidden]{display:none}
@media (max-width:560px){.row > div:nth-child(3){grid-column:1/-1}.row > div:nth-child(3) .btn{width:100%;justify-content:center}}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.6rem} .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.6rem}
.note b{color:var(--ink)} .note b{color:var(--ink)}
/* buy dialog */ /* buy dialog */
@ -67,7 +74,7 @@
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
@media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}} @media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}}
</style> </style>
<script src="./js/i18n.js?v=20260917i"></script> <script src="./js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
<nav class="topnav"> <nav class="topnav">
@ -122,9 +129,9 @@
</script> </script>
<script src="./js/session.js?v=20260917dash"></script> <script src="./js/session.js?v=20260917dash"></script>
<script src="./js/pricing.js?v=20260917market"></script> <script src="./js/pricing.js?v=20260917market"></script>
<script type="module" src="./js/market.js?v=20260917market"></script> <script type="module" src="./js/market.js?v=20260920m"></script>
<script defer src="./js/theme.js?v=20260910font"></script> <script defer src="./js/theme.js?v=20260910font"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script> <script defer src="./js/site-footer.js?v=20260917market"></script>
<script defer src="./js/profile-menu.js?v=20260917wide"></script> <script defer src="./js/profile-menu.js?v=20260920m"></script>
</body> </body>
</html> </html>

24
portal.html
View file

@ -239,15 +239,27 @@
.sheet .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px} .sheet .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
@media (max-width:900px){ @media (max-width:900px){
.dash{grid-template-columns:1fr;gap:14px} /* minmax(0,…) + min-width:0: the nowrap address must never widen the page */
.side{position:static;flex-direction:row;flex-wrap:wrap;gap:6px} .dash{grid-template-columns:minmax(0,1fr);gap:14px}
.side .who,.side .grp,.side .sep{display:none} .side{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.side .item{width:auto;padding:7px 11px;font-size:13px} /* one slim line: short address + live balance + refresh */
.side .who{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;margin:0 0 4px}
.side .who .lbl,.side .who .net.pending{display:none}
.side .who .addr{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:11.5px}
.side .who .net{margin:0;white-space:nowrap}
.side .grp,.side .sep{display:none}
/* the menu becomes a row of pills (the wide-screen rule sets width:100% with higher specificity) */
.side button.item,.side a.item{width:auto;padding:7px 11px;font-size:13px;border-color:var(--line)}
.side .item .cnt{margin-left:4px}
.subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{white-space:nowrap}
.dhead h2{font-size:1.25rem}
.kv{grid-template-columns:1fr} .kv{grid-template-columns:1fr}
.addrow{grid-template-columns:1fr 1fr} .addrow{grid-template-columns:1fr 1fr}
} }
</style> </style>
<script src="./js/i18n.js?v=20260917i"></script> <script src="./js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
@ -670,6 +682,6 @@
<script defer src="./js/theme.js?v=20260910font"></script> <script defer src="./js/theme.js?v=20260910font"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script> <script defer src="./js/site-footer.js?v=20260917market"></script>
<script type="module" src="./js/register-flow.js?v=20260917bal"></script> <script type="module" src="./js/register-flow.js?v=20260917bal"></script>
<script defer src="./js/profile-menu.js?v=20260917bal"></script> <script defer src="./js/profile-menu.js?v=20260920m"></script>
</body> </body>
</html> </html>

2
studio.html
View file

@ -65,7 +65,7 @@
.muted{color:var(--mut);font-size:13px} .muted{color:var(--mut);font-size:13px}
code{font-family:var(--mono);background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12px} code{font-family:var(--mono);background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12px}
</style> </style>
<script src="./js/i18n.js?v=20260917i"></script> <script src="./js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
<div class="bar"> <div class="bar">

4
tld.html
View file

@ -115,7 +115,7 @@
<script type="importmap"> <script type="importmap">
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
</script> </script>
<script src="./js/i18n.js?v=20260917i"></script> <script src="./js/i18n.js?v=20260920a"></script>
</head> </head>
<body> <body>
@ -308,6 +308,6 @@
<script src="./js/pin-escrow.js?v=20260909pin"></script> <script src="./js/pin-escrow.js?v=20260909pin"></script>
<script defer src="./js/theme.js?v=20260910font"></script> <script defer src="./js/theme.js?v=20260910font"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script> <script defer src="./js/site-footer.js?v=20260917market"></script>
<script defer src="./js/profile-menu.js?v=20260917wide"></script> <script defer src="./js/profile-menu.js?v=20260920m"></script>
</body> </body>
</html> </html>