Closed Zodiac1978 closed 1 year ago
Which version? 1.8.4 and/or latest snapshot?
For 1.8.4 it’s defined here: https://github.com/pluginkollektiv/statify/blob/7b5d8ad03d28bad4dfd044ced75f45a34031f616/views/widget-front.php#L20
Now it is handled via JS and the texts are generated here: https://github.com/pluginkollektiv/statify/blob/2ad7be47730090a944a67e1b7c857a2a78187592/inc/class-statify-dashboard.php#L140-L141
Edit
Overlooked the rtl
part. Guess it should affect both versions.
Which version? 1.8.4 and/or latest snapshot?
1.8.4 from the official directory. But if this at the same place the CSS issue still stands.
If I disable this code direction: rtl;
we could restore the right aligned layout of the labels wit this CSS:
#statify_chart .ct-label.ct-vertical.ct-start {
justify-content: flex-end;
}
Changing flex-start
to flex-end
.
Unfortunately the width is not enough and is cropping the label. Need to look why this happens. Maybe someone knows it and can chime in. Not sure how the width is calculated.
There is no visual difference when removing the direction and flex overrides completly. There is a proper label alignment in the Chartist CSS already...
#statify_chart {
color: #a7aaad;
flex: 0 0 100%;
- direction: rtl;
height: 140px;
margin: 1em -0.5em;
overflow-x: auto;
@@ -16,13 +15,6 @@
margin: 1em;
}
-#statify_chart .ct-label.ct-vertical.ct-start {
- -webkit-justify-content: flex-start;
- justify-content: flex-start;
- text-align: left;
- text-anchor: start;
-}
-
Got it.
The rtl
was introduced for scollable charts. Removing the stuff (previous comment) is visually identical, but the scrollbar is at the left end by default. With rtl
it is right.
Could be resolved reverting the direction for all children of the container:
#statify_chart * {
direction: ltr;
}
But what if the locale is right-to-left? Like in Hebrew?
Good point. Taken care of that in the PR:
#statify_chart * {
direction: ltr;
}
body.rtl #statify_chart * {
direction: rtl;
}
This is because of a CSS issue:
#statify_chart { color: #a7aaad; direction: rtl; text-align: center; }
This is wrong
direction: rtl
and is causing the issue.Thanks to @Drivingralle for reporting it to me.
More context: https://github.com/pluginkollektiv/statify/pull/101 https://github.com/pluginkollektiv/statify/commit/9c9fc3d29dd55ebc9f6314a0d1cf543da6c6b2ab