From ff7de4762edf90561c2d5f9d490225f540567c23 Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Sat, 29 Apr 2023 03:57:05 -0400
Subject: [PATCH] Fix abbreviation CSS on mobile
---
jcal/src/Calendar.scss | 5 +++--
jcal/src/Calendar.tsx | 8 ++++----
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/jcal/src/Calendar.scss b/jcal/src/Calendar.scss
index 7fc4f2d..29a73f0 100644
--- a/jcal/src/Calendar.scss
+++ b/jcal/src/Calendar.scss
@@ -168,21 +168,22 @@
}
@media (pointer: coarse), (hover: none) {
- .DayDetail-gregorian abbr {
+ .DayDetail abbr {
position: relative;
display: inline-flex;
justify-content: center;
- text-decoration: underline dashed;
&:focus::after {
content: attr(title);
position: absolute;
top: 90%;
+ left: 0;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
+ z-index: 20;
}
}
}
diff --git a/jcal/src/Calendar.tsx b/jcal/src/Calendar.tsx
index dccf3fd..70b5f41 100644
--- a/jcal/src/Calendar.tsx
+++ b/jcal/src/Calendar.tsx
@@ -21,17 +21,17 @@ function WeekdayName({name}: { name: string }): JSX.Element {
function DayDetail({jdn}: { jdn: number }): JSX.Element {
const lc = jdnLongCount(jdn);
return <div className="DayDetail">
- <div className="DayDetail-jdn"><abbr title="Julian day number">JD</abbr> {jdn}</div>
+ <div className="DayDetail-jdn"><abbr title="Julian day number" tabIndex={0}>JD</abbr> {jdn}</div>
<div className="DayDetail-gregorian">
- <abbr title="Gregorian date">G.</abbr>{' '}
+ <abbr title="Gregorian date" tabIndex={0}>G.</abbr>{' '}
{formatJG(jdnGregorian(jdn))}
</div>
{lc && <div className="DayDetail-lc">
- <abbr title="Mesoamerican long count date">LC</abbr>{' '}
+ <abbr title="Mesoamerican long count date" tabIndex={0}>LC</abbr>{' '}
{lc.join('.\u200b')}
</div>}
{jdn >= frStartJD && jdn <= frEndJD && <div className="DayDetail-fr">
- <abbr title="French Republican Calendar">FR</abbr>{' '}
+ <abbr title="French Republican Calendar" tabIndex={0}>FR</abbr>{' '}
{frDateFormat(jdnFrench(jdn))}
</div>}
</div>;