Page MenuHomePhabricator

label of map shows on top of article text
Open, Needs TriagePublic

Description

Steps:
1-open the app in english , search for "Carlos Casares Partido" and open the article
2-go to the language option and change to Cebuano
3-go down 2 pages

  • Issue

the label of the map appears on top of the article


map on the article

Wikitext for the map:

{{Location map|Argentina |float = right  |width=300 | caption = Nahimutangan sa Partido de Carlos Casares sa Argentina. | label = Partido de Carlos Casares|position=right|background=white|lat=-35.75|long=-61.25}}

Event Timeline

Jpita created this task.Nov 10 2020, 11:48 AM
Restricted Application added a project: Inuka-Team. · View Herald TranscriptNov 10 2020, 11:48 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
AMuigai moved this task from Backlog to Bugs on the Inuka-Team board.Nov 18 2020, 1:31 PM
SBisson moved this task from Bugs to Q2-2020 on the Inuka-Team board.Nov 25 2020, 1:24 AM
AMuigai moved this task from Q2-2020 to Kanban on the Inuka-Team board.Dec 1 2020, 6:03 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
hueitan claimed this task.Dec 15 2020, 12:54 PM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
hueitan added a comment.EditedTue, Jan 5, 8:54 PM

This is yet another form of image with the template that we never handle before

class name thumbcaption is for the caption

<div class="thumb tright" about="#mwt27">
    <div class="thumbinner" style="width:302px; ">
        <div style="position: relative; border: 1px solid lightgray">
            <figure-inline>
                <a href="/wiki/Payl:Argentina_location_map.svg" class="image">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/300px-Argentina_location_map.svg.png" data-file-width="1418" data-file-height="2412" data-file-type="drawing" height="510" width="300" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/600px-Argentina_location_map.svg.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/450px-Argentina_location_map.svg.png 1.5x">        
                </a>
            </figure-inline>
            <div style="position: absolute; z-index: 2; top: 41.5%; left: 63.5%; height: 0; width: 0; margin: 0; padding: 0;">
                <div style="position: relative; text-align: center; left: -4px; top: -4px; width: 8px; font-size: 8px; line-height: 0; z-index:100;" title="">
                    <figure-inline>
                        <span>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/8px-Red_pog.svg.png" data-file-width="64" data-file-height="64" data-file-type="drawing" height="8" width="8" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/16px-Red_pog.svg.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/12px-Red_pog.svg.png 1.5x">
                        </span>
                    </figure-inline>
                </div>
                <div style="font-size: %; line-height: 110%; z-index:90; position: relative; top: -1.5em; width: 6em; left: 0.5em; text-align: left;">        
                    <span style="padding: 1px; background-color: white;">Partido de Carlos Casares</span>
                </div>
            </div>
        </div>
        <div class="thumbcaption">Nahimutangan sa Partido de Carlos Casares sa Argentina.</div>
    </div>
</div>

There are more examples share the similar template but different view

  1. Cat - History and mythology
  2. Dog - Education and appreciation
  3. United States - Sports
  4. more

to make it to be the general image in the app, it takes expensive dom manipulation to remove ALL inline style and handle it case by case in each thumb elements.

especially this div element, can't find the unique id or class or markup

<div style="font-size: %; line-height: 110%; z-index:90; position: relative; top: -1.5em; width: 6em; left: 0.5em; text-align: left;">        
    <span style="padding: 1px; background-color: white;">Partido de Carlos Casares</span>
</div>

So, I don't know whether it's worth to go into the details of this template <div class="thumb"> format,

@SBisson what do you see here?

hueitan added a comment.EditedMon, Jan 18, 10:29 AM

(EDIT)

the response of this thumb section is below, it has slightly different and helps but can't 100% sure this is unique or general case

<div class="thumb tright pcs-widen-image-ancestor" about="#mwt27">
    <div class="thumbinner pcs-widen-image-ancestor" style="width: 302px;">
        <div style="position: relative; border: 1px solid lightgray;" class="pcs-widen-image-ancestor">
            <figure-inline class="pcs-widen-image-ancestor">
                <a href="./Payl:Argentina_location_map.svg" class="pcs-widen-image-ancestor">
                    <img
                        class="pcs-widen-image-override pcs-lazy-load-image-loaded"
                        src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/640px-Argentina_location_map.svg.png"
                        srcset="
                            //upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/1280px-Argentina_location_map.svg.png 2x,
                            //upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Argentina_location_map.svg/960px-Argentina_location_map.svg.png  1.5x
                        "
                        width="640"
                        height="1088"
                        data-file-width="1418"
                        data-file-height="2412"
                    />
                </a>
            </figure-inline>
            <div style="position: absolute; z-index: 2; top: 41.5%; left: 63.5%; height: 0; width: 0; margin: 0; padding: 0;">
                <div style="position: relative; text-align: center; left: -4px; top: -4px; width: 8px; font-size: 8px; line-height: 0; z-index: 100;" title="">
                    <figure-inline>
                        <span>
                            <img
                                alt=""
                                resource="./Payl:Red_pog.svg"
                                src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/8px-Red_pog.svg.png"
                                data-file-width="64"
                                data-file-height="64"
                                data-file-type="drawing"
                                height="8"
                                width="8"
                                srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/16px-Red_pog.svg.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Red_pog.svg/12px-Red_pog.svg.png 1.5x"
                            />
                        </span>
                    </figure-inline>
                </div>
                <div style="font-size: %; line-height: 110%; z-index: 90; position: relative; top: -1.5em; width: 6em; left: 0.5em; text-align: left;">
                    <span style="padding: 1px; background-color: white;" class="notheme">Partido de Carlos Casares</span>
                </div>
            </div>
        </div>
        <div class="thumbcaption">Nahimutangan sa Partido de Carlos Casares sa Argentina.</div>
    </div>
</div>