Issue 5848 - Fix vertical alignment on .heading-icon images in help.eyeo.com

templates/article.tmpl

Index: templates/article.tmpl
===================================================================
--- a/templates/article.tmpl
+++ b/templates/article.tmpl
@@ -1,48 +1,49 @@
 {% extends "templates/minimal" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
 <nav aria-label="{{ "Breadcrumb" | translate("breadcrumb-label", "Label") }}" class="breadcrumb">
   <ol class="container large-desktop-width clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
     <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-      <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">
-        <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate(product_id+"-logo-alt", "Image alt text") }}">
+      <a class="has-pre-icon" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">
+        <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
         <span itemprop="name">{{ product.full_name | translate(product_id+"-name", "Product name") }}</span>
       </a>
       <meta itemprop="position" content="1" />
     </li>
     <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ page }}" aria-current="page">
         <span itemprop="name">{{ title | translate(get_page_name(page) + "-title", "Article title") }}</span>
       </a>
       <meta itemprop="position" content="2" />
     </li>
   </ol>
 </nav>
 
 <main id="main" class="container clearfix">
   <article class="article card {{ product_id }}-card section column two-thirds">
-      <h1 class="article-heading">
-        <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
-
+    <header class="article-heading">
+      <h1 class="has-pre-icon">
+        <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
         {{ title | translate( get_page_name(page) + "-title", "Article title") }}

[ire, 2017/10/30 09:46:41]

This looks odd when the article title flows on to multiple lines. I will handle
this in a separate issue. I would like to talk to Jeen about how we should
handle it too.

[juliandoucette, 2017/10/31 14:14:35]

Acknowledged.

[ire, 2017/11/01 07:57:25]

https://issues.adblockplus.org/ticket/5963

       </h1>
-      
-      {% if hide_browser_selector is not defined %}
-      <div class="article-browser-selector">
-        [Browser selector]
-      </div>
-      {% endif %}
+    </header>
 
-      <div class="article-body content">
-          {{ body | safe }}
-      </div>
+    {% if hide_browser_selector is not defined %}
+    <div class="article-browser-selector">
+      [Browser selector]
+    </div>
+    {% endif %}
+
+    <div class="article-body content">
+        {{ body | safe }}
+    </div>
   </article>
   <aside class="section column one-third">
     <? include product-topics-accordion ?>
   </aside>
 </main>
 
 <script id="no-content-for-platform-message" type="text/template">
   <p>{{ "Unfortunately, there is no content specific for your current browser. Please use the dropdown menu above to choose a different browser." | translate("no-content-for-platform-message", "paragraph") }}</p>