Many display issues with best practices on symfony.com

[wouterj]

@javiereguiluz I'm not sure you are already aware of these issues, but there are lots of design problems with the best practices guide:

• No title
• Version switcher isn't showed as a dropdown list
• Titles have the same font family as the text, not the usual title font family
• Anchors in title are always shown
• Best practices are not shown nor available in the source
• Footer (page navigation and license note) are not styled
• Table of contents is not styled

I think most problems are caused due to the fact that the body doesn't get a doc class. This is properbly an easy fix in symfony.com's source.

You can view it here: http://symfony.com/doc/master/best_practices/index.html

[javiereguiluz]

@wouterj thanks for your errors report. The main problem is that the PR that integrates the best practices on symfony.com hasn't been merged yet. Most of the things that you mentioned are working on my local computer ... but I'll check this list once the PR is merged. Thanks!

[xabbuh]

The only thing that is missing now is the rendering of the best practice directive, right?

[wouterj]

@javiereguiluz could you please do the following things to fix the best practice directive styling on symfony.com?

1. Update the submodules, @xabbuh's fix of duplicate admonition titles is not used atm

2. Change this in the stylesheet (not sure if I put everything in the right order, just wanted to point out the CSS changes required):

   - p.admonition-title {
   -     display: none;
   - }
   
   - div.best-practice {
   + div.admonition-best-practice {
   -     background: #fff8dc url(/images/admonition/bestpractice.svg) no-repeat 10px 15px;
   +     background: #fff8dc;
   -     background-size: 48px auto;
         border: 1px solid #e0dcbf;
   -     margin: 2em 0;
   -     padding: 15px 10px 0 70px;
   -     width: 100%;
    }
   
   - div.note, div.caution, div.tip, div.sidebar, div.seealso {
   + div.note, div.caution, div.tip, div.sidebar, div.seealso, div.best-practice {
         height: 51px;
         left: 0;
         position: absolute;
         top: 0;
         width: 51px;
    }
   
   + div.best-practice {
   +     background: url(/images/admonition/bestpractice.svg) no-repeat 0px 0px;
   + }

3. Update the best-practice admonition visitor to just only use admonition-wrapper as class instead of adding admonition-best-practices. It would probebly look like something like this:

     def visit_best_practices(self, node):
   -     self.body.append(self.starttag(node, 'div', CLASS=('admonition-wrapper admonition-best-practices')))
   +     self.body.append(self.starttag(node, 'div', CLASS=('admonition-wrapper')))
         self.body.append('<div class="best-practicies"></div>')
         self.body.append('<div class="admonition admonition-best-practices">')
         self.set_first_last(node)

[javiereguiluz]

@wouterj thanks for compiling all the errors and for providing solutions. I'll fix all this very soon.

[javiereguiluz]

@wouterj I finally fixed this issue without having to change again the HTML structure of the best practice admonition. It will be available after the next website deploy.

[xabbuh]

All is looking well now. Thank you, @javiereguiluz!