Issue 5690 - Create Article Template for help.eyeo.com

templates/article.tmpl

+{% extends "templates/default" %}
+
+{% set product = products[product_id] %}
+
+{% block body %}
+[Breadcrumbs]

[ire, 2017/09/26 09:16:43]

Placeholder. I can remove it if it's preferred to just leave the place blank
until the content is added in the relevant commits.

(same for placeholders below)

[juliandoucette, 2017/10/09 12:54:00]

Acknowledged.

+
+<main id="main" class="container">
+  <div class="row">

[ire, 2017/09/26 09:16:43]

This row class is removing the margins added by the container. I don't
completely understand why the negative margins exist on the rows actually.
Assuming there is a valid reason for having them, should we create a modifier
class in website-defaults on the row that doesn't do this?

[juliandoucette, 2017/10/09 12:54:00]

This is expected.
The negative margin exists to negate the first and last column padding.

Components should handle horizontal padding and columns should handle horizontal
margin.

Imagine the following:

div.container (padding: 0 1em)
    p (padding: 1em 0)
    .row (margin: 0 -1em)
        .column.one-half (padding: 0 1em)
            p
        .column.one-half
            p

If .container and .column both have 1em padding then the .one-half p will have
2em padding at the beginning and end of the row (provided by the .container).
.row negates the padding on the .container in-order-to align the .container p
with the .column p(s).

It works the same way with components. Text within components will align like
this unless they are supposed to have more padding - which can/should be
provided by the specific component.
We could do that. But .row and .column are not married (.column is styled, not
.row > .column). You could just omit the .row if you don't want the negative
margin.

[ire, 2017/10/09 19:48:06]

Ah okay. This makes sense (obviously :p). I will omit it and add a .clearfix
class to the #main instead, as that's all I really need for the .columns to
function properly

+    <article class="article card {{ product_id }}-card section column two-thirds">

[juliandoucette, 2017/10/09 12:53:59]

NIT/Thinking-out-loud: We could add a product specific class to the root element
and then modify children instead. e.g. .abp a {color: red} .abp .card
{border-top: red}

[ire, 2017/10/09 19:48:06]

This would work on some cases, but when we support other products, there will be
pages (e.g. the homepage) in which not all .cards will belong to one product. So
I don't think we could always guarantee that a page will *only* have content for
one product

+        <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") }}">

[juliandoucette, 2017/10/09 12:53:59]

NIT: This doesn't seem to be vertically centred

[ire, 2017/10/09 19:48:06]

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

[ire, 2017/10/09 19:48:07]

I will create a separate issue for this as it could apply to all .heading-icon
images

+
+          {{ title | translate( get_page_name(page) + "-title", "Article title") }}
+        </h1>
+        
+        {% if hide_browser_selector is not defined %}

[juliandoucette, 2017/10/09 12:53:59]

Neat

[ire, 2017/10/09 19:48:06]

Thanks :)

+        <div class="article-browser-selector">
+          [Browser selector]
+        </div>
+        {% endif %}
+
+        <div class="article-body content">
+            {{ body | safe }}
+        </div>
+    </article>
+    <aside class="section column one-third">
+      [Topics Accordion]
+    </aside>
+  </div>
+</main>
+{% endblock %}