Page MenuHomePhabricator

Boxes act weird if the external id section is small
Closed, ResolvedPublic

Description

If the section on the right with the image and external ids is not too long, apparently the boxes with information take some of the space, but in a very weird way so that nothing is aligned and generally looks like nothing is really on purpose there.

It used to be space for three boxes next to each other and empty space underneath the external id section, now the third box and the external ids's section's space somehow overlap.
Probably a rather easy CSS fix.

Event Timeline

Lucie created this task.Oct 26 2016, 2:16 PM
Restricted Application added a project: Design. · View Herald TranscriptOct 26 2016, 2:16 PM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald Transcript
Lucie moved this task from Incoming to To Do Next on the ArticlePlaceholder board.Oct 26 2016, 2:16 PM
Charlie_WMDE moved this task from Incoming to Incoming WD on the WMDE-Design board.Nov 7 2016, 2:11 PM

Can you share a image describing how it should look like for better understanding ?

Volker_E moved this task from Incoming to WMDE on the Design board.Jan 5 2017, 5:34 PM

I'll take a look at this 😁

(Claimed for Google-Code-In-2016)

jo12bar claimed this task.Jan 16 2017, 4:17 AM

Google-Code-In-2016 is pretty much done, but I wasn't able to finish this task before the deadline (I need to sleep!). If it's alright with everyone, I'll keep working on this - vagrant roles were just giving me a lot of issues. Going to try installing ArticlePlaceholder's dependencies manually.

Thanks!

I keep running into this error after installing ArticlePlaceholder:

MediaWiki internal error.

Original exception: [16c787b6628d058f6d4d527b] /wiki/Special:Version MWException from line 176 of /vagrant/mediawiki/includes/Hooks.php: Invalid callback ArticlePlaceholder\BaseTemplateToolboxHookHandler::onBaseTemplateToolbox in hooks for BaseTemplateToolbox

Backtrace:
#0 /vagrant/mediawiki/includes/skins/BaseTemplate.php(115): Hooks::run(string, array)
#1 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(273): BaseTemplate->getToolbox()
#2 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(195): VectorTemplate->renderPortals(array)
#3 /vagrant/mediawiki/includes/skins/SkinTemplate.php(251): VectorTemplate->execute()
#4 /vagrant/mediawiki/includes/OutputPage.php(2382): SkinTemplate->outputPage()
#5 /vagrant/mediawiki/includes/MediaWiki.php(865): OutputPage->output(boolean)
#6 /vagrant/mediawiki/includes/MediaWiki.php(877): Closure$MediaWiki::main()
#7 /vagrant/mediawiki/includes/MediaWiki.php(519): MediaWiki->main()
#8 /vagrant/mediawiki/index.php(43): MediaWiki->run()
#9 /var/www/w/index.php(5): include(string)
#10 {main}

Exception caught inside exception handler: [16c787b6628d058f6d4d527b] /wiki/Special:Version MWException from line 176 of /vagrant/mediawiki/includes/Hooks.php: Invalid callback ArticlePlaceholder\BaseTemplateToolboxHookHandler::onBaseTemplateToolbox in hooks for BaseTemplateToolbox

Backtrace:
#0 /vagrant/mediawiki/includes/skins/BaseTemplate.php(115): Hooks::run(string, array)
#1 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(273): BaseTemplate->getToolbox()
#2 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(195): VectorTemplate->renderPortals(array)
#3 /vagrant/mediawiki/includes/skins/SkinTemplate.php(251): VectorTemplate->execute()
#4 /vagrant/mediawiki/includes/OutputPage.php(2382): SkinTemplate->outputPage()
#5 /vagrant/mediawiki/includes/exception/MWException.php(174): OutputPage->output()
#6 /vagrant/mediawiki/includes/exception/MWException.php(220): MWException->reportHTML()
#7 /vagrant/mediawiki/includes/exception/MWExceptionHandler.php(71): MWException->report()
#8 /vagrant/mediawiki/includes/exception/MWExceptionHandler.php(139): MWExceptionHandler::report(MWException)
#9 /vagrant/mediawiki/includes/MediaWiki.php(547): MWExceptionHandler::handleException(MWException)
#10 /vagrant/mediawiki/index.php(43): MediaWiki->run()
#11 /var/www/w/index.php(5): include(string)
#12 {main}

I've installed each of ArticlePlaceholder's dependencies separately, and tested each one to make sure that they worked. This error only pops up after installing ArticlePlaceholder to mediawiki/extensions and adding

## ArticlePlaceholder
wfLoadExtension('ArticlePlaceholder');
$wgArticlePlaceholderImageProperty = 'P18';

to my LocalSettings.php file.

Any idea what's going on?

I keep running into this error after installing ArticlePlaceholder:

MediaWiki internal error.

Original exception: [16c787b6628d058f6d4d527b] /wiki/Special:Version MWException from line 176 of /vagrant/mediawiki/includes/Hooks.php: Invalid callback ArticlePlaceholder\BaseTemplateToolboxHookHandler::onBaseTemplateToolbox in hooks for BaseTemplateToolbox

Backtrace:
#0 /vagrant/mediawiki/includes/skins/BaseTemplate.php(115): Hooks::run(string, array)
#1 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(273): BaseTemplate->getToolbox()
#2 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(195): VectorTemplate->renderPortals(array)
#3 /vagrant/mediawiki/includes/skins/SkinTemplate.php(251): VectorTemplate->execute()
#4 /vagrant/mediawiki/includes/OutputPage.php(2382): SkinTemplate->outputPage()
#5 /vagrant/mediawiki/includes/MediaWiki.php(865): OutputPage->output(boolean)
#6 /vagrant/mediawiki/includes/MediaWiki.php(877): Closure$MediaWiki::main()
#7 /vagrant/mediawiki/includes/MediaWiki.php(519): MediaWiki->main()
#8 /vagrant/mediawiki/index.php(43): MediaWiki->run()
#9 /var/www/w/index.php(5): include(string)
#10 {main}

Exception caught inside exception handler: [16c787b6628d058f6d4d527b] /wiki/Special:Version MWException from line 176 of /vagrant/mediawiki/includes/Hooks.php: Invalid callback ArticlePlaceholder\BaseTemplateToolboxHookHandler::onBaseTemplateToolbox in hooks for BaseTemplateToolbox

Backtrace:
#0 /vagrant/mediawiki/includes/skins/BaseTemplate.php(115): Hooks::run(string, array)
#1 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(273): BaseTemplate->getToolbox()
#2 /vagrant/mediawiki/skins/Vector/VectorTemplate.php(195): VectorTemplate->renderPortals(array)
#3 /vagrant/mediawiki/includes/skins/SkinTemplate.php(251): VectorTemplate->execute()
#4 /vagrant/mediawiki/includes/OutputPage.php(2382): SkinTemplate->outputPage()
#5 /vagrant/mediawiki/includes/exception/MWException.php(174): OutputPage->output()
#6 /vagrant/mediawiki/includes/exception/MWException.php(220): MWException->reportHTML()
#7 /vagrant/mediawiki/includes/exception/MWExceptionHandler.php(71): MWException->report()
#8 /vagrant/mediawiki/includes/exception/MWExceptionHandler.php(139): MWExceptionHandler::report(MWException)
#9 /vagrant/mediawiki/includes/MediaWiki.php(547): MWExceptionHandler::handleException(MWException)
#10 /vagrant/mediawiki/index.php(43): MediaWiki->run()
#11 /var/www/w/index.php(5): include(string)
#12 {main}

I've installed each of ArticlePlaceholder's dependencies separately, and tested each one to make sure that they worked. This error only pops up after installing ArticlePlaceholder to mediawiki/extensions and adding

## ArticlePlaceholder
wfLoadExtension('ArticlePlaceholder');
$wgArticlePlaceholderImageProperty = 'P18';

to my LocalSettings.php file.

Any idea what's going on?

@jo12bar Thanks for working on this! :) Have you run composer update in the extension directory of ArticlePlaceholder?

*face palm*

Alright, I'll do that the moment I get home.

Well, magically it's now working! Thanks @Florian! Now I can actually work on the CSS for this - should be a patch on Gerrit in a few hours.

jo12bar added a comment.EditedJan 16 2017, 11:20 PM

Is there any way that I can get a copy of wikidata.org, or (even better) connect the Wikibase Client to wikidata.org for testing purposes?

@jo12bar As far as _I_ know: No :/ You would need to setup your testing environment by yourself. Probably @Lucie has a better idea.

Lucie added a comment.EditedJan 22 2017, 4:34 PM

I am afraid it is not possible to connect to wikidata.org.
However, you could import test data from Wikidata to your Wikibase repository with the extension https://github.com/filbertkm/WikibaseImport
Thanks for working on this!

jo12bar added a comment.EditedJan 23 2017, 5:45 AM

Alright, thanks for the tip. I'll definitely look into using that extension - guess I didn't do enough research 😅

(Also, sorry that this is taking so long - I've got a lot of exams this week, so I've been studying like mad. I'll definitely have the code ready by Saturday at the latest.)

Lucie added a comment.Jan 23 2017, 1:22 PM

Ah, the extension is indeed a bit hidden, we should push it more. Maybe it would be helpful to link it on the installation page?

And don't worry, take your time, I am happy you work on it. Good luck with the exams!

Hey @Lucie, could you maybe send me the exact config in LocalSettings.php that you use when testing? I've followed the instructions at https://www.mediawiki.org/wiki/Wikibase/Installation to the letter, and even implemented a change mentioned in this comment on this issue in the WikibaseImport repo, but I am still unable to succesfully import an entity and have ArticlePlaceholder see it. Here's some of the issues I'm having:

  • If the entity contains some value that has an unit (such as 'year' in the Canada entity), then the import script fails with Illeagal value: http://www.wikidata.org/entity/Q577. However, ArticlePlaceholder shows a page for the entity - just not the right one:
  • If the entity does not contain a value that has some sort of unit (for example, this unlabled entity) then WikibaseImport is able to import it without an issue, but ArticlePlaceholder complains that "This is not a valid item ID":

I am honestly at a loss about what is happening here. The logs don't seem to reveal anything, though I'm not that good at reading them. The only information I could find on this was the previously-mentioned issue from WikibaseImport's repo, but the fixes suggested in it do not seem to work.

Below is the relevant part of my LocalSettings.php file, where I set up Wikibase (client & repo), WikibaseImport, and ArticlePlaceholder:

## Wikibase (client)
# Repo
require_once "$IP/extensions/Wikibase/repo/Wikibase.php";
require_once "$IP/extensions/Wikibase/repo/ExampleSettings.php";
$wgEnableWikibaseRepo = true;
$wikibaseRepoConfig = array(
	'conceptBaseUri' => 'http://www.wikidata.org/entity/'
);
array_replace($wgWBRepoSettings, $wikibaseRepoConfig);

# WikibaseImport
require_once "$IP/extensions/WikibaseImport/WikibaseImport.php";

# Client
require_once "$IP/extensions/Wikibase/client/WikibaseClient.php";
require_once "$IP/extensions/Wikibase/client/ExampleSettings.php";
$wgEnableWikibaseClient = true;
$wikibaseClientConfig = array(
	'siteGlobalID' => 'enwiki',
);
array_replace($wgWBClientSettings, $wikibaseClientConfig);


## ArticlePlaceholder
wfLoadExtension('ArticlePlaceholder');
$wgArticlePlaceholderImageProperty = 'P18';

Just for reference, I've also uploaded the whole file:

Could you maybe take a look and see what you think? I'm pretty stuck right now...

hoo added a subscriber: hoo.Jan 30 2017, 3:29 PM

You will need to assign the return value of your array_replace calls to something, so changing array_replace($wgWBRepoSettings, $wikibaseRepoConfig); to $wgWBRepoSettings = array_replace($wgWBRepoSettings, $wikibaseRepoConfig); should do.

Thanks @hoo - guess I had a brain-fart ;)

I am still having difficulties with accessing some Special:AboutTopic pages. For example, if I visit the Special:AboutTopic page for "flag of Canada" (Q984 on my wiki), then I automatcally get redirected to the (non-existent) page for Flag of Canada (/wiki/Flag_of_Canada), with a regular link to create it.

I have managed a work-around though. If I visit the Special:AboutTopic page for "Wikidata property related to law and justice" (Q16 on my wiki), then I don't get redirected - there just aren't any .articleplaceholder-statementgroup's or top images. So what I did was rip some of the html off of https://nap.wikipedia.org/wiki/Speci%C3%A0le:AboutTopic?entityid=Q80110 and wrote a snippet in Chrome DevTools that I can use to sort-of create a "layout testing page." Something like this:

ArticlePlaceholder-Test-Page-Setup.js
document.querySelector("#mw-content-text").innerHTML = `
  <!-- HTML mostly ripped from https://nap.wikipedia.org/wiki/Speci%C3%A0le:AboutTopic?entityid=Q80110 -->
  <div class="articleplaceholer-description">
    <p>national flag</p>
  </div>

  <div class="articleplaceholder-sidebar">
    <div class="articleplaceholder-topimage">
      <div class="thumb tright">
        <div class="thumbinner" style="width:302px;">
          <a href="/wiki/Fi%C3%B9ra:Flag_of_Canada.svg" class="image">
            <img alt="Flag of Canada.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Canada.svg/300px-Flag_of_Canada.svg.png" width="300" height="150" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Canada.svg/450px-Flag_of_Canada.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Canada.svg/600px-Flag_of_Canada.svg.png 2x" data-file-width="1000" data-file-height="500">
          </a>
          <div class="thumbcaption">
            <div class="magnify">
              <a href="/wiki/Fi%C3%B9ra:Flag_of_Canada.svg" class="internal" title="Ingrandisce"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="articleplaceholder-identifierlist">
      <h2><span class="mw-headline" id="Risorse_esterne">Risorse esterne</span></h2>
      <table>
        <tbody>
          <tr>
            <td class="articleplaceholder-id-prop">identificativo Freebase</td>
            <td class="articleplaceholder-id-value">
              <div class="articleplaceholder-statement">
                <span><a rel="nofollow" class="external text" href="https://g.co/kg/m/0p0sz">/m/0p0sz</a></span><sup id="cite_ref-rb5af95b0_1-0" class="reference"><a href="#cite_note-rb5af95b0-1">[1]</a></sup>
              </div>
            </td>
          </tr>

          <tr>
            <td class="articleplaceholder-id-prop">identificativo Flags of the World</td>
            <td class="articleplaceholder-id-value">
              <div class="articleplaceholder-statement">
                <span><a rel="nofollow" class="external text" href="http://flagspot.net/flags/ca.html">ca</a></span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="articleplaceholder-statementgrouplist">
    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="no_tipo_.27e">no tipo 'e</span></h2>
      <div class="articleplaceholder-statement">
        <span>bandiera nazionale</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="genere">genere</span></h2>
      <div class="articleplaceholder-statement">
        <span>Canadian pale</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="data_di_fondazione.2Fcreazione.2Fcostruzione">data di fondazione/creazione/costruzione</span></h2>
      <div class="articleplaceholder-statement">
        <span>15 Fre 1965</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="appartiene_alla_giurisdizione">appartiene alla giurisdizione</span></h2>
      <div class="articleplaceholder-statement">
        <span><a href="/wiki/Canad%C3%A0" title="Canadà">Canadà</a></span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="creatore">creatore</span></h2>
      <div class="articleplaceholder-statement">
        <span>George Stanley</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="colore">colore</span></h2>
      <div class="articleplaceholder-statement">
        <span>rosso</span>
      </div>
      <div class="articleplaceholder-statement">
        <span><a href="/wiki/Ghiangh" title="Ghiangh">Ghiangh</a></span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="raffigura">raffigura</span></h2>
      <div class="articleplaceholder-statement">
        <span>Foglia d'acero</span>
        <div class="articleplaceholder-qualifier">
          <p>colore: <span><span>rosso</span></span></p>
        </div>
      </div>
      <div class="articleplaceholder-statement">
        <span>campo dello scudo</span>
        <div class="articleplaceholder-qualifier">
          <p>colore: <span><span>rosso</span></span></p>
        </div>
      </div>

      <div class="articleplaceholder-statement">
        <span>palo</span>
        <div class="articleplaceholder-qualifier">
          <p>colore: <span><span><a href="/wiki/Ghiangh" title="Ghiangh">Ghiangh</a></span></span></p>
        </div>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="ha_sostituito">ha sostituito</span></h2>
      <div class="articleplaceholder-statement">
        <span>Canadian Red Ensign</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="altezza">altezza</span></h2>
      <div class="articleplaceholder-statement">
        <span>1</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="progettista">progettista</span></h2>
      <div class="articleplaceholder-statement">
        <span>George Stanley</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="carattere_Unicode">carattere Unicode</span></h2>
      <div class="articleplaceholder-statement">
        <span>🇨🇦</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="larghezza">larghezza</span></h2>
      <div class="articleplaceholder-statement">
        <span>2</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="galleria_su_Commons">galleria su Commons</span></h2>
      <div class="articleplaceholder-statement">
        <span>Flags of Canada / Drapeaux du Canada</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="categoria_su_Commons">categoria su Commons</span></h2>
      <div class="articleplaceholder-statement">
        <span>Flags of Canada</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="categoria_principale_dell.27argomento">categoria principale dell'argomento</span></h2>
      <div class="articleplaceholder-statement">
        <span>Categoria:Bandiere del Canada</span>
      </div>
    </div>

    <div class="articleplaceholder-statementgroup">
      <h2><span class="mw-headline" id="consiste_di">consiste di</span></h2>
      <div class="articleplaceholder-statement">
        <span>banda</span>
        <div class="articleplaceholder-qualifier">
          <p>
            colore: <span><span>rosso</span>, <span><a href="/wiki/Ghiangh" title="Ghiangh">Ghiangh</a></span></span>
          </p>
        </div>
        <div class="articleplaceholder-qualifier">
          <p>direzione: <span><span>vertical direction</span></span></p>
        </div>
        <div class="articleplaceholder-qualifier">
          <p>numero: <span><span>3</span></span></p>
        </div>
      </div>
    </div>
  </div>

  <h2><span class="mw-headline" id="Riferimento">Riferimento</span></h2>

  <ol class="references">
    <li id="cite_note-rb5af95b0-1">
      <span class="mw-cite-backlink"><a href="#cite_ref-rb5af95b0_1-0"><span class="cite-accessibility-label">Zompa ncopp'a </span>↑</a></span> <span class="reference-text"><span><span>Freebase Data Dumps</span>, <span>28 ott 2013</span></span></span>
    </li>
  </ol>


  <div class="mw-articleplaceholder-createarticle-buttons">
    <div id="new-article-button" class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive oo-ui-buttonWidget" aria-disabled="false" data-ooui="">
      <a class="oo-ui-buttonElement-button" role="button" tabindex="0" aria-disabled="false" href="/w/index.php?title=Speci%C3%A0le:CreateTopicPage/Bandiera_del_Canada&amp;ref=button" target="blank" rel="nofollow">
        <span class="oo-ui-iconElement-icon oo-ui-image-invert"></span>
        <span class="oo-ui-labelElement-label">Crea una voce</span>
        <span class="oo-ui-indicatorElement-indicator oo-ui-image-invert"></span>
      </a>
    </div>
  </div>
`;

TL;DR: I figured out a way to actually work on this, I seriously need to work on my back-end skills, and I should have a patch uploaded soon.

Change 336052 had a related patch set uploaded (by Jo12bar):
Prevent overlap of sidebar column with everything else

https://gerrit.wikimedia.org/r/336052

One concern I do have: with my current solution, only one column of boxes is shown at fairly standard desktop screen sizes (anything under 1109px in width). However, there is still a very large gap on the side of that column, so that it looks like another column should fit there:

I can fix this to a degree with percentage-based left and right margins, but this ruins the uniform-margin look we had before. If the .articleplaceholder-statementgroup's had a fluid width, then it may fix the problem but then we may have to debate column sizes, number of columns, etc... Basically, lots of headaches.

Any ideas? Or is my current solution good?

Ladsgroup closed this task as Resolved.Aug 16 2017, 12:52 PM
Ladsgroup removed a project: Patch-For-Review.

Change 336052 merged by jenkins-bot:
[mediawiki/extensions/ArticlePlaceholder@master] Prevent overlap of sidebar column with everything else

https://gerrit.wikimedia.org/r/336052

hoo moved this task from To Do Next to Done on the ArticlePlaceholder board.Sep 19 2017, 3:13 PM