Commit 9120b49d authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Avoid conflict with CodeMirror styles for <pre>. 

CodeMirror just defines the rule:

    .CodeMirror pre { ... }

This selector has quite low specificity, so it's easy to accidentally
override it.  And this indeed happened when the selector for normal pre
elements was changed from:

    .class-overview pre { ... }

to:

    .class-overview .x-panel-body pre { ... }

The result was that a <pre> inside CodeMirror editor received unwanted
rounded corners etc, rendering the editor pretty-much unusable.

Resolved this by only styling pre.prettyprint and pre.notpretty.
(The latter class is now added to all not-to-be-prettified pre-s, which
distinguishes them from pre-s used inside CodeMirror component.)
parent ab7c3bcd

template/app/Syntax.js

+14 −6
Original line number Diff line number Diff line
@@ -12,12 +12,20 @@ Ext.define("Docs.Syntax", { 
     * which to perform the highlighting.

     */

    highlight: function(root) {

        Ext.Array.forEach(Ext.query("pre > code", root.dom || root), function(code) {

            code = Ext.get(code);

            var pre = code.parent();

        Ext.Array.forEach(Ext.query("pre", root.dom || root), function(pre) {

            pre = Ext.get(pre);



            if (pre.child("code")) {

                // Don't prettify inline examples that have preview enabled.

                if (!(pre.hasCls("inline-example") && pre.hasCls("preview"))) {

                code.addCls("prettyprint");

                    pre.addCls("prettyprint");

                }

            }

            else if (!pre.parent(".CodeMirror")) {

                // For normal pre-s add "notpretty" class so they can be

                // distinguished in CSS from any other <pre> element

                // that might appear on page.

                pre.addCls("notpretty");

            }

        });

        prettyPrint();

template/resources/sass/viewport.scss

+3 −5
Original line number Diff line number Diff line
@@ -65,13 +65,13 @@ 
      td {

        color: #484848;

        padding: 2px 20px 2px 0; } }

    pre {

    pre.notpretty, pre.prettyprint {

      background-color: #f7f7f7;

      border: solid 1px #e8e8e8;

      @include border-radius(5px);

      color: #314e64;

      font-family: $docs-monospace-font;

      padding: 10px 20px;

      padding: 10px 12px;

      line-height: 1.3em;

      margin: 10px 0 14px 0;

      max-width: 900px;
@@ -80,9 +80,7 @@ 
      code {

        font-family: $docs-monospace-font; }

      i, em {

        font-style: normal; } }

    pre.prettyprint {

      padding: 10px 12px; } } }

        font-style: normal; } } } }



@import "class_overview";