quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-24 09:41:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix abbreviation CSS on mobile

Browse source
This commit is contained in:
Quantum 2023-04-29 03:57:05 -04:00
parent f206cf32fb
commit ff7de4762e
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
jcal/src/Calendar.scss
View file

@ -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;
}
}
}

8
jcal/src/Calendar.tsx
View file

@ -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>;