Flesh out twig-template for custom data-collector #5115
Conversation
|
Side question: Is there specific maximum/ideal pixel-size for profiler icons? The largest ones seem to be around 42x30. |
| {# the web debug toolbar content #} | ||
| {# Used for the menu items along the bottom of the screen. #} | ||
| {% set icon %} | ||
| <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAQAAADVGmdYAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffAxkBCDStonIVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAHpJREFUOMtj3PWfgXRAuqZd/5nIsIdhVBPFmgqIjCuYOrJsYtz1fxuUOYER2TQID8afwIiQ8YIkI4TzCv5D2AgaWSuExJKMIDbA7EEVhQEWXJ6FKUY4D48m7HYU/EcWZ8JlE6qfMELPDcUJuEMPxvYazYTDWRMjOcUyAEswO+VjeQQaAAAAAElFTkSuQmCC" alt=""/></span> |
There was a problem hiding this comment.
you should recommend using a SVG image IMO, as done in the latest version of Symfony
There was a problem hiding this comment.
I think it's better to just add a comment here instead of the image, this will avoid scrollbars. E.g:
{% block toolbar %}
{# used for the menu items along the bottom of the screen. #}
{% set icon %}
<span class="icon">
<!-- ... your icon image, it is recommended to use an SVG image for best quality -->
</span>
{% endset %}
There was a problem hiding this comment.
I agree with both of you. I also think that we need to explicitly tell the user that the common practice is to inline icon contents, no matter if it's a base64-encoded PNG or inlined SVG file.
There was a problem hiding this comment.
@stof I think that would be good for the 2.7 branch of the documentation, but for the 2.6-version of each cookbook entry should reflect the 2.6 practice, which as far as I can tell is all PNGs. In other words, let's do that as a separate pull-request.
@wouterj I'd rather keep the actual image, because it provides the user a concrete, working example to build from. Having a scrollbar appear within the black code-sample box is a very small price to pay, especially since most users will probably copy-paste the whole thing and tinker with it outside the web-browser.
…rove roll-over data example.
|
Is there more than needs to happen to this for it to be ready for 2.6? For the SVG-icon issue, I'd like to do that as as a separate pull-request against the 2.7 branch. |
|
Ping. |
|
Is there anything I can do to help move this forward? |
|
I think this is good to be merged. Thank you for working on it @DHager. |
|
I think this is just awesome - great work Darien! |
…en Hager) This PR was submitted for the 2.6 branch but it was merged into the 2.3 branch instead (closes #5115). Discussion ---------- Flesh out twig-template for custom data-collector I think this template will make it easier for people to get started, since it demonstrates a greater range of visual features. Users less-experienced in twig may have problems with the old skeleton, since it removes the default CSS styles when visiting the main panel. Adding `{{parent()}}` to the `head` block makes it friendlier. Commits ------- ffaff9b Remove indentations for all-whitespace lines. b0e2b83 Fix incorrect instructions regarding linking to the "full panel", improve roll-over data example. cc5ae6a Flesh out twig-template for custom data-collector
|
Oh, and I agree with what you say about the icons, etc - I think it's a small detail anyways, the real-world example that you have is the most important thing. Thanks! |
I think this template will make it easier for people to get started, since it demonstrates a greater range of visual features.
Users less-experienced in twig may have problems with the old skeleton, since it removes the default CSS styles when visiting the main panel. Adding
{{parent()}}to theheadblock makes it friendlier.