Nulo/gitea
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Fix heatmap rendering in Chrome and Safari (#13645)

Browse source 
* Fix heatmap rendering in Chrome and Safari

Apparently SVG inside flexbox renders slightly different across browsers
where Firefox would stretch to fit the parent while Chrome and safari
wouldn't. Stretch the SVG to the width of the parent for consistent
rendering.

Also did a few minor tweaks on the min-height of the box so it takes up
less space on smaller responsive breakpoints.

Fixes: https://github.com/go-gitea/gitea/issues/13634
Fixes: https://github.com/go-gitea/gitea/pull/13637

* position tweak

Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind 2020-11-23 23:41:09 +01:00 committed by GitHub
parent f88a2eae97
commit 24330f71b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web_src/less/features/heatmap.less
View file

@ -7,6 +7,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
> svg {
width: 100%;
}
svg:not(:root) { svg:not(:root) {
overflow: inherit; overflow: inherit;
padding: 0 !important; padding: 0 !important;
@ -16,13 +20,6 @@
fill: currentColor !important; fill: currentColor !important;
} }
@media @mediaLgAndDown {
&,
& + .divider {
display: none;
}
}
.total-contributions { .total-contributions {
font-size: 11px; font-size: 11px;
position: absolute; position: absolute;
@ -31,16 +28,22 @@
} }
@media @mediaLgAndDown { @media @mediaLgAndDown {
& {
min-height: 105px;
}
.total-contributions { .total-contributions {
left: 21px; left: 21px;
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
& {
min-height: 80px;
}
.total-contributions { .total-contributions {
font-size: 10px; font-size: 10px;
left: 17px; left: 17px;
bottom: -2px; bottom: -4px;
} }
} }
} }
@ -48,3 +51,15 @@
.user.profile #user-heatmap { .user.profile #user-heatmap {
min-height: 135px; min-height: 135px;
} }
@media @mediaLgAndDown {
.user.profile #user-heatmap {
min-height: 115px;
}
}
@media (max-width: 1000px) {
.user.profile #user-heatmap {
min-height: 90px;
}
}