| Cenarium | |
| Mar 7 2016, 5:48 AM |
| F43674277: image.png | |
| Thu, Mar 28, 3:41 PM |
| F43674156: image.png | |
| Thu, Mar 28, 3:41 PM |
| F43643887: image.png | |
| Thu, Mar 28, 11:12 AM |
| F43643850: image.png | |
| Thu, Mar 28, 11:12 AM |
| F43317898: Screenshot_20240325-104550.png | |
| Mar 25 2024, 10:48 AM |
| F9102649: image.png | |
| Aug 17 2017, 11:24 PM |
| F8722709: iPhone 7 Copy.png | |
| Jul 12 2017, 8:29 PM |
| F8708253: 2017-07-12.png | |
| Jul 12 2017, 1:21 AM |
When references containing math formulas are shown with JavaScript, the formulas can be unreadable. This the case in safari and in chrome.
Example: https://en.m.wikipedia.org/wiki/Reflexive_space#Reflexive_locally_convex_spaces (click [17] - there is a hidden math icon at the end of the reference)
Per @alexhollender_WMF in T129054#8363253 we would like to convert the reference drawer to use the gray background. This would require updates to the Drawer component.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Remove black background from references drawer | mediawiki/extensions/MobileFrontend | master | +5 -18 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T287412 [GOAL, placeholder] Fix bugs relating to user experience in Minerva impacting mobile users | |||
| Open | Esanders | T129054 Math formulas can be unreadable in references in mobile view |
.references img.mwe-math-fallback-image-inline.tex {
background-color:#fff;
padding:2px;
}result:
and for modern browsers we can use this
.references img.mwe-math-fallback-image-inline.tex {
-webkit-filter: invert(1);
}result:
The task has been imported as a Code In task at https://codein.withgoogle.com/dashboard/tasks/5359356637872128.
actually, i thought about it and we should use white drawers instead of black. there is no reason for using dark themed drawers
I propose we use the same drawer pattern as of warning messages like this >
We can borrow the dismiss mechanism + browser support + fallback
Here's how the citations will look with the above drawer pattern
Only one drawback of this
We won't have a title that says "citation"
right now we have a very grey uppercase random icon and title which doesn't work. I don't think it's adding much value.
being said that, we do have drawer use cases where we _do_ need a title, in that case we should redo the title part of our drawer pattern.
for this task, let's just re-use it.
@Cenarium what do you think?
awaiting more feedback on 3 possible solutions in the description. we can decide which solution to pick based on effort and value.
moving it to needs analysis till then
@Nirzar :
CSS filters are not supported in IE <= 12 according to http://caniuse.com/css-filters/embed
Given the number of IE based mobile browsers, it might be acceptable to minimise this bug to all older browsers. We currently do support IE9 but in future that will change.
Solution 1 is the easiest and has the most widest support.
Solution 3 is really up to you and a choice of design (this is previously how they looked). Reusing drawer pattern does however simplify our codebase at the expense of some additional work now.
Your choice! All 3 would work but solution 1 has the least cons.
I was surprised to find mobile references drawer on black background. Not sure, what the reason behind it was, though have a strong preference towards solution #3.
Not only does it seem not as disconnected from rest of UI as the black ones, it also has quite some maintenance advantages over the others.
References drawer external links didn't show external link icon (usefulness of this is another topic), my guess isn't only for design, but also because it's icon wasn't supported on black background.
@Volker_E just for reference, the reason was to distinguish between normal page previews drawers on mobile (which we never shipped) and the reference drawer. so as to reduce confusion. but i don't think are have that problem anymore and it can solved with strong iconography if needed
This is effectively the same as T111222.
Once again, inlining equation SVGs would help here, too (since they would become white on black just as the text).
@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.
CSS filters are quite widely supported now if we wanted to do the fix suggested in https://phabricator.wikimedia.org/T129054#2095664 now.
(Related issue in app T295624)
Can you clarify which 3 options you are referring to? Any options that allows the formulas to display is fine with me.
There are 3 solutions in the task description. Note, that question was from over a year ago, so I am not considering this for a technical goal right now.
@Jdlrobson it seems like all 3 options use the drawer, and the differences are whether the drawer is white or black, and whether the math formula has a white background? I'm not sure what the rules are on when the drawer is black vs when it is white, but the white one is much easier to read, so we should use that if possible:
if we can't use that this is fine:
For reference, the Android app also uses light drawers, with and additional dark overlay for the content area:
...as does MobileFrontend for the CTA drawer, used for redlinks, and actions while logged
 |  |
Change #1015287 had a related patch set uploaded (by Esanders; author: Esanders):
[mediawiki/extensions/MobileFrontend@master] Remove black background from references drawer
Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/560a719650/wiki/Reflexive_space?mobile_action=toggle_view_mobile#Reflexive_locally_convex_spaces
Above patch removing the black background in favour of the default:
Note that equations are still sometimes not visible due to a newer issue with lazy loading (T361212):
