@* opens sideways and downwards: opened upwards, the first card's menu was cut off by the top of the feed *@
+ @if (IncludeExpand)
+ {
+
+
+ @Localizer["Thread"]
+
+ }
+
+
+ @Localizer["Bookmark"]
+
@if (status.Url is { Length: > 0 } url)
{
@@ -368,7 +398,7 @@
@if (IncludeExpand)
{
-
diff --git a/Extensions/GenericExtensions.cs b/Extensions/GenericExtensions.cs
index 0ce8722..f596d0a 100644
--- a/Extensions/GenericExtensions.cs
+++ b/Extensions/GenericExtensions.cs
@@ -57,6 +57,15 @@ public static class GenericExtensions
};
}
+ // a count as a phone's narrow action buttons show it: 999, 1.2k, 12k, 1.2M
+ public static string Compact(this int count) => count switch
+ {
+ < 1000 => count.ToString(CultureInfo.CurrentCulture),
+ < 10_000 => (count / 1000d).ToString("0.#", CultureInfo.CurrentCulture) + "k",
+ < 1_000_000 => (count / 1000).ToString(CultureInfo.CurrentCulture) + "k",
+ _ => (count / 1_000_000d).ToString("0.#", CultureInfo.CurrentCulture) + "M"
+ };
+
public static string GetFileSize(this long size, CoalescingStringLocalizer localizer) => size switch
{
>= 1_048_576 => localizer["{0}MB", size / 1_048_576],
diff --git a/Styles/touch.css b/Styles/touch.css
index 56cd157..1b7f305 100644
--- a/Styles/touch.css
+++ b/Styles/touch.css
@@ -9,6 +9,25 @@
fields are 44px tall; the extra small buttons and the badges that act stay 36px to the eye and reach 44px through a
transparent ::after, so the rows that hold them leave 8px between them on touch (pointer-coarse:gap-2), or two hit
areas would overlap. */
+/* A small text link or button (a name, "edited") keeps its size to the eye and gets a 44px hit area, a transparent box
+ centred on it, on touch only. Not for one that truncates its text: its overflow clips the box, so such a link takes
+ padding instead (pointer-coarse:py-3.5). */
+@utility touch-target {
+ @media (pointer: coarse) {
+ position: relative;
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: max(100%, 2.75rem);
+ height: max(100%, 2.75rem);
+ translate: -50% -50%;
+ }
+ }
+}
+
@layer utilities {
/* At every width: a checkbox's, radio's or toggle's label wraps (daisyUI's .label never does, and a long one ran past
a phone's edge), and the control keeps its size beside it. */
@@ -36,6 +55,7 @@
--fontsize: .875rem;
}
+ /* (the ::after is placed against the padding box, 34px inside a 1px border: 5px around it makes 44) */
.btn-xs,
:is(button, a).badge {
--size: 2.25rem;
@@ -45,10 +65,14 @@
&::after {
content: "";
position: absolute;
- inset: -4px;
+ inset: -5px;
}
}
+ .btn-xs {
+ --fontsize: .875rem;
+ }
+
:is(button, a).badge {
padding-inline: .75rem;
}
+
+ }
+