Thiemo Mättig (WMDE) has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/392628 )
Change subject: Fix flash of unstyled content (FOUC) on sitelinkgroupview ...................................................................... Fix flash of unstyled content (FOUC) on sitelinkgroupview To see this issue, go to an item with multiple sitelinks (e.g. https://www.wikidata.org/wiki/Q9410185 ), and watch the page loading. You will see the word "[Collapse]" appear for a second before it is replaced with an arrow. This is because the .css file that replaces the word with the arrow is loaded to late, via JS instead of in the head. This patch moves the relevant CSS to a .css file that is loaded in the head. I argue this is a good place for this CSS because the relevant "mw-collapsible" is set on this specific "sitelinkgroupview" template. Bug: T158059 Change-Id: I7ab015ae1e2bc6a7401c37620c7eebea23b055a3 --- M view/resources/jquery/wikibase/themes/default/jquery.wikibase.sitelinkgroupview.css M view/resources/jquery/wikibase/toolbar/themes/default/jquery.wikibase.toolbaritem.css 2 files changed, 32 insertions(+), 32 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Wikibase refs/changes/28/392628/1 diff --git a/view/resources/jquery/wikibase/themes/default/jquery.wikibase.sitelinkgroupview.css b/view/resources/jquery/wikibase/themes/default/jquery.wikibase.sitelinkgroupview.css index a73cb9d..b7484ae 100644 --- a/view/resources/jquery/wikibase/themes/default/jquery.wikibase.sitelinkgroupview.css +++ b/view/resources/jquery/wikibase/themes/default/jquery.wikibase.sitelinkgroupview.css @@ -47,3 +47,35 @@ position: static; width: auto; } + +.wikibase-toolbar-item .mw-collapsible-toggle { + background-position: right; + background-repeat: no-repeat; + height: 24px; + overflow: hidden; + text-indent: 24px; + width: 24px; +} + +.wikibase-toolbar-item .mw-collapsible-toggle, +.wikibase-toolbar-item .mw-collapsible-toggle-expanded { + /* SVG support using a transparent gradient to guarantee cross-browser + * compatibility (browsers able to understand gradient syntax support also SVG). + * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */ + background-image: url( ../toolbar/themes/default/images/icons/oojs-ui/collapse.png ); + /* @embed */ + background-image: -webkit-linear-gradient( transparent, transparent ), url( ../toolbar/themes/default/images/icons/oojs-ui/collapse.svg ); + /* @embed */ + background-image: linear-gradient( transparent, transparent ), url( ../toolbar/themes/default/images/icons/oojs-ui/collapse.svg ); +} + +.wikibase-toolbar-item .mw-collapsible-toggle-collapsed { + /* SVG support using a transparent gradient to guarantee cross-browser + * compatibility (browsers able to understand gradient syntax support also SVG). + * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */ + background-image: url( ../toolbar/themes/default/images/icons/oojs-ui/expand.png ); + /* @embed */ + background-image: -webkit-linear-gradient( transparent, transparent ), url( ../toolbar/themes/default/images/icons/oojs-ui/expand.svg ); + /* @embed */ + background-image: linear-gradient( transparent, transparent ), url( ../toolbar/themes/default/images/icons/oojs-ui/expand.svg ); +} diff --git a/view/resources/jquery/wikibase/toolbar/themes/default/jquery.wikibase.toolbaritem.css b/view/resources/jquery/wikibase/toolbar/themes/default/jquery.wikibase.toolbaritem.css index b5df796..82ae747 100644 --- a/view/resources/jquery/wikibase/toolbar/themes/default/jquery.wikibase.toolbaritem.css +++ b/view/resources/jquery/wikibase/toolbar/themes/default/jquery.wikibase.toolbaritem.css @@ -6,35 +6,3 @@ .wikibase-toolbarlabel.ui-state-disabled { color: #72777d; } - -.wikibase-toolbar-item .mw-collapsible-toggle { - background-position: right; - background-repeat: no-repeat; - height: 24px; - overflow: hidden; - text-indent: 24px; - width: 24px; -} - -.wikibase-toolbar-item .mw-collapsible-toggle, -.wikibase-toolbar-item .mw-collapsible-toggle-expanded { - /* SVG support using a transparent gradient to guarantee cross-browser - * compatibility (browsers able to understand gradient syntax support also SVG). - * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */ - background-image: url( images/icons/oojs-ui/collapse.png ); - /* @embed */ - background-image: -webkit-linear-gradient( transparent, transparent ), url( images/icons/oojs-ui/collapse.svg ); - /* @embed */ - background-image: linear-gradient( transparent, transparent ), url( images/icons/oojs-ui/collapse.svg ); -} - -.wikibase-toolbar-item .mw-collapsible-toggle-collapsed { - /* SVG support using a transparent gradient to guarantee cross-browser - * compatibility (browsers able to understand gradient syntax support also SVG). - * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */ - background-image: url( images/icons/oojs-ui/expand.png ); - /* @embed */ - background-image: -webkit-linear-gradient( transparent, transparent ), url( images/icons/oojs-ui/expand.svg ); - /* @embed */ - background-image: linear-gradient( transparent, transparent ), url( images/icons/oojs-ui/expand.svg ); -} -- To view, visit https://gerrit.wikimedia.org/r/392628 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I7ab015ae1e2bc6a7401c37620c7eebea23b055a3 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Wikibase Gerrit-Branch: master Gerrit-Owner: Thiemo Mättig (WMDE) <thiemo.kr...@wikimedia.de> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
