quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-24 17:51: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) { @media (pointer: coarse), (hover: none) {
.DayDetail-gregorian abbr { .DayDetail abbr {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
text-decoration: underline dashed;
&:focus::after { &:focus::after {
content: attr(title); content: attr(title);
position: absolute; position: absolute;
top: 90%; top: 90%;
left: 0;
color: #000; color: #000;
background-color: #fff; background-color: #fff;
border: 1px solid; border: 1px solid;
width: fit-content; width: fit-content;
padding: 3px; 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 { function DayDetail({jdn}: { jdn: number }): JSX.Element {
const lc = jdnLongCount(jdn); const lc = jdnLongCount(jdn);
return <div className="DayDetail"> 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"> <div className="DayDetail-gregorian">
<abbr title="Gregorian date">G.</abbr>{' '} <abbr title="Gregorian date" tabIndex={0}>G.</abbr>{' '}
{formatJG(jdnGregorian(jdn))} {formatJG(jdnGregorian(jdn))}
</div> </div>
{lc && <div className="DayDetail-lc"> {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')} {lc.join('.\u200b')}
</div>} </div>}
{jdn >= frStartJD && jdn <= frEndJD && <div className="DayDetail-fr"> {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))} {frDateFormat(jdnFrench(jdn))}
</div>} </div>}
</div>; </div>;