Bug 1370594: Sample output, border and buttons changes

docs/feature-toggles.rst

@@ -57,7 +57,7 @@ other advanced criteria.
 * ``spam_testing_mode`` - Tell Akismet that edits are tests, not real content.
 * ``spam_checks_enabled`` - Toggle spam checks site wide.
 * ``spam_submissions_enabled`` - Toggle Akismet spam/spam submission ability.
-* ``wiki_samples`` - Add button to open samples in Codepen or jsFiddle.
+* ``sample_frame`` - Enable .sample-code-frame width, colour, and button styles
 * ``wiki_spam_exempted`` - Exempt users and user groups from checking.
   submissions for spam.
 * ``wiki_spam_training`` - Call Akismet to check submissions, but don't block

etc/sample_db.json

@@ -323,12 +323,6 @@
         "everyone": false,
         "superusers": false,
         "created": "2015-02-25"
-      }, {
-        "name": "wiki_samples",
-        "note": "Add a button to open wiki doc samples in Codepen and/or jsFiddle",
-        "everyone": true,
-        "staff": true,
-        "created": "2015-07-20"
       }, {
         "name": "compat_api",
         "created": "2015-10-01"

kuma/static/js/wiki-samples.js

@@ -1,9 +1,7 @@
 (function(win, doc, $) {
-    "use strict";
+    'use strict';
 
-    if(!win.waffle || !win.waffle.flag_is_active('wiki_samples')) return;
-
-    var sites = ['codepen', 'jsfiddle'];
+    var sites = ['CodePen', 'JSFiddle'];
     var frameLength = 'frame_'.length;
 
     var sourceURL = $('link[rel=canonical]').attr('href') || win.location.href.split('#')[0];
@@ -27,7 +25,7 @@
     });
 
     function openJSFiddle(title, htmlCode, cssCode, jsCode) {
-       var $form = $('<form method="post" action="https://jsfiddle.net/api/mdn/" class="hidden" target="_blank">' +
+        var $form = $('<form method="post" action="https://jsfiddle.net/api/mdn/" class="hidden" target="_blank">' +
             '<input type="hidden" name="html" />' +
             '<input type="hidden" name="css" />' +
             '<input type="hidden" name="js" />' +
@@ -36,35 +34,37 @@
             '<input type="submit" />' +
         '</form>').appendTo(doc.body);
 
-       $form.find('input[name=html]').val(plug + htmlCode);
-       $form.find('input[name=css]').val(cssCode);
-       $form.find('input[name=js]').val(jsCode);
-       $form.find('input[name=title]').val(title);
-       $form.get(0).submit();
+        $form.find('input[name=html]').val(plug + htmlCode);
+        $form.find('input[name=css]').val(cssCode);
+        $form.find('input[name=js]').val(jsCode);
+        $form.find('input[name=title]').val(title);
+        $form.get(0).submit();
     }
 
     function openCodepen(title, htmlCode, cssCode, jsCode) {
-       var $form = $('<form method="post" action="https://codepen.io/pen/define" class="hidden" target="_blank">' +
+        var $form = $('<form method="post" action="https://codepen.io/pen/define" class="hidden" target="_blank">' +
             '<input type="hidden" name="data">' + analytics +
             '<input type="submit" />' +
         '</form>').appendTo(doc.body);
 
-       var data = {'title': title, 'html': plug + htmlCode, 'css': cssCode, 'js': jsCode};
-       $form.find('input[name=data]').val(JSON.stringify(data));
-       $form.get(0).submit();
+        var data = {'title': title, 'html': plug + htmlCode, 'css': cssCode, 'js': jsCode};
+        $form.find('input[name=data]').val(JSON.stringify(data));
+        $form.get(0).submit();
     }
 
     function openSample(sampleCodeHost, section, title, htmlCode, cssCode, jsCode) {
         // replace &nbsp; in CSS Samples to fix bug 1284781
-        var cssCleanCode = cssCode.replace(/\xA0/g, " ");
+        var cssCleanCode = cssCode.replace(/\xA0/g, ' ');
         //track the click and sample code host as event
         mdn.analytics.trackEvent({
             category: 'Samples',
             action: 'open-' + sampleCodeHost,
             label: section
         });
         // add user to segement that has used samples
-        if(win.ga) ga('set', 'dimension8', 'Yes');
+        if(win.ga) {
+            ga('set', 'dimension8', 'Yes');
+        }
 
         if(sampleCodeHost === 'jsfiddle') {
             openJSFiddle(title, htmlCode, cssCleanCode, jsCode);
@@ -107,7 +107,7 @@
                         openSample(sampleCodeHost, section, title, htmlCode, cssCode, jsCode);
                     });
                 });
-            } else if($sample.children().length == 0) {
+            } else if($sample.children().length === 0) {
                 // no content, log error
                 mdn.analytics.trackError('embedLiveSample Error', '$sample was empty', section);
             } else {

kuma/static/styles/base/elements/forms.scss

@@ -100,21 +100,7 @@ input[type='button'] {
     }
 
     &.link {
-        @include vendorize(appearance, none);
-        font-size: inherit;
-        font-weight: inherit;
-        letter-spacing: inherit;
-        line-height: inherit;
-        background-color: transparent;
-        text-transform: inherit;
-        border: 0;
-        padding: 0;
-        color: $link-color;
-
-        &:hover,
-        &:focus {
-            text-decoration: underline;
-        }
+        @include button-link();
     }
 
     &::-moz-focus-inner {

kuma/static/styles/components-skinny/structure/search-form.scss

@@ -53,7 +53,7 @@ Full size form on home and search pages
     .search-form {
 
         &.home-search-form {
-            margin: 0 auto ($grid-spacing * 2) auto;
+            margin: 0 auto 30px auto;
         }
 
         > input#home-q,

kuma/static/styles/components-skinny/wiki/sample-code.scss

@@ -1,5 +1,5 @@
 .sample-code-frame {
-    border: 1px solid #9b9b9b;
+    border: 2px solid #9b9b9b;
     padding: $grid-spacing;
 
     .sample-code-table & {
@@ -10,10 +10,51 @@
 
 .open-in-host {
     @include bidi-style(margin-right, ($grid-spacing / 2), margin-left, 0);
+    margin-bottom: $grid-spacing;
 }
 
 @media print {
     .open-in-host-container {
         display: none;
     }
 }
+
+/* experiment */
+.waffle-sample {
+    .sample-code-frame {
+        border: 1px $code-block-border-style $code-block-border-color;
+        @include bidi-value(border-width, 1px 1px 1px $code-block-border-width, 1px $code-block-border-width 1px 1px);
+        padding: $grid-spacing;
+        width: calc(100% - #{$grid-spacing * 2} - #{1px + $code-block-border-width});
+        max-width: calc(100% - #{$grid-spacing * 2} - #{1px + $code-block-border-width});
+    }
+
+    .sample-code-table .sample-code-frame {
+        @include bidi-value(border-width, 0, 0);
+        max-width: 100%;
+        padding: 0;
+        width: auto;
+    }
+
+    .open-in-host-container {
+        @include bidi-value(text-align, right, left);
+        margin-bottom: $grid-spacing;
+        width: calc(100% - 5px);
+    }
+
+    .open-in-host {
+        @extend %cta-link;
+        width: 100%;
+    }
+
+    @media #{$mq-mobile-and-up} {
+        .open-in-host {
+            @include bidi-style(margin-right, $grid-spacing * 2, margin-left, 0);
+            width: auto;
+
+            &:last-child {
+                @include bidi-style(margin-right, 0, margin-left, 0);
+            }
+        }
+    }
+}

kuma/static/styles/components/structure/search-form.scss

@@ -53,7 +53,7 @@ Full size form on home and search pages
     .search-form {
 
         &.home-search-form {
-            margin: 0 auto ($grid-spacing * 2) auto;
+            margin: 0 auto 30px auto;
         }
 
         > input#home-q,

kuma/static/styles/components/wiki/sample-code.scss

@@ -1,5 +1,5 @@
 .sample-code-frame {
-    border: 1px solid #9b9b9b;
+    border: 2px solid #9b9b9b;
     padding: $grid-spacing;
 
     .sample-code-table & {
@@ -18,3 +18,43 @@
         display: none;
     }
 }
+
+/* experiment */
+.waffle-sample {
+    .sample-code-frame {
+        border: 1px $code-block-border-style $code-block-border-color;
+        @include bidi-value(border-width, 1px 1px 1px $code-block-border-width, 1px $code-block-border-width 1px 1px);
+        padding: $grid-spacing;
+        width: calc(100% - #{$grid-spacing * 2} - #{1px + $code-block-border-width});
+        max-width: calc(100% - #{$grid-spacing * 2} - #{1px + $code-block-border-width});
+    }
+
+    .sample-code-table .sample-code-frame {
+        @include bidi-value(border-width, 0, 0);
+        max-width: 100%;
+        padding: 0;
+        width: auto;
+    }
+
+    .open-in-host-container {
+        @include bidi-value(text-align, right, left);
+        margin-bottom: $grid-spacing;
+        width: calc(100% - 5px);
+    }
+
+    .open-in-host {
+        @extend %cta-link;
+        width: 100%;
+    }
+
+    @media #{$mq-mobile-and-up} {
+        .open-in-host {
+            @include bidi-style(margin-right, $grid-spacing * 2, margin-left, 0);
+            width: auto;
+
+            &:last-child {
+                @include bidi-style(margin-right, 0, margin-left, 0);
+            }
+        }
+    }
+}

kuma/static/styles/includes-skinny/_mixins.scss

@@ -126,6 +126,25 @@ Links
     }
 }
 
+// make a button look like a link
+@mixin button-link() {
+    @include vendorize(appearance, none);
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    text-transform: inherit;
+    border: 0;
+    padding: 0;
+    color: $link-color;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
 
 /*
 Colours
@@ -488,12 +507,12 @@ Placeholders
 }
 
 %cta-link {
+    @include button-link();
     position: relative;
     box-sizing: border-box;
     display: inline-block;
     border-bottom: 2px solid;
-    padding-bottom: 10px;
-    @include bidi-style(padding-right, 30px, padding-left, 0);
+    @include bidi-style(padding, 10px 30px 10px 0, padding-left, 10px 0 10px 30px);
     @include bidi-value(text-align, left, right);
 
     &:after {
@@ -513,6 +532,10 @@ Placeholders
             @include bidi-style(margin-right, -4px, margin-left, 0);
         }
     }
+
+    #{$selector-icon} {
+        margin-top: 4px;
+    }
 }
 
 

kuma/static/styles/includes/_mixins.scss

@@ -126,6 +126,25 @@ Links
     }
 }
 
+// make a button look like a link
+@mixin button-link() {
+    @include vendorize(appearance, none);
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    text-transform: inherit;
+    border: 0;
+    padding: 0;
+    color: $link-color;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
 
 /*
 Colours
@@ -513,12 +532,12 @@ Placeholders
 }
 
 %cta-link {
+    @include button-link();
     position: relative;
     box-sizing: border-box;
     display: inline-block;
     border-bottom: 2px solid;
-    padding-bottom: 10px;
-    @include bidi-style(padding-right, 30px, padding-left, 0);
+    @include bidi-style(padding, 10px 30px 10px 0, padding-left, 10px 0 10px 30px);
     @include bidi-value(text-align, left, right);
 
     &:after {
@@ -538,6 +557,10 @@ Placeholders
             @include bidi-style(margin-right, -4px, margin-left, 0);
         }
     }
+
+    #{$selector-icon} {
+        margin-top: 4px;
+    }
 }
 
 

kuma/static/styles/wiki-wysiwyg.scss

@@ -40,16 +40,6 @@ body {
     }
 }
 
-.summary {
-    background: $light-background-color;
-    font-weight: bold;
-    padding: $grid-spacing;
-    margin-bottom: $grid-spacing;
-
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
 
 /* syntax highlighter update */
 pre {

kuma/wiki/jinja2/wiki/document.html

@@ -47,7 +47,7 @@
   {%- endif -%}
 {% endblock %}
 
-{% block bodyclass %}document {% if is_zone %}zone{% endif %} {% if is_zone_root %}zone-landing{% endif %}{% endblock %}
+{% block bodyclass %}document {% if is_zone %}zone{% endif %} {% if is_zone_root %}zone-landing{% endif %} {% if waffle.flag('sample_frame') %}waffle-sample{% endif %}{% endblock %}
 {% block body_attributes %}data-slug="{{ document.slug }}" contextmenu="edit-history-menu" data-search-url="{{ search_url }}"{% endblock body_attributes %}
 
 {% block main_content_id %}document-main{% endblock %}