Finish v15.7-gaston

.gitignore

@@ -18,6 +18,8 @@ base.db
 
 /.tmp
 
+/scripts/release_summary.md
+
 # Front files
 /node_modules
 /dist

Gulpfile.js

@@ -1,6 +1,6 @@
 var gulp = require("gulp"),
     $ = require("gulp-load-plugins")(),
-    sprite = require("css-sprite").stream,
+    sprite = require("sprity"),
     path = require("path"),
     del = require("del");
 
@@ -12,7 +12,7 @@ var sourceDir = "assets",
     scriptsDir = "js",
     vendorsDir = "vendors",
     spriteDir = "sprite",
-    stylesFiles = ["main.scss", "only-ie.scss"],
+    stylesFiles = ["main.scss"],
     vendorsCSS = ["node_modules/normalize.css/normalize.css"],
     vendorsJS = ["node_modules/jquery/dist/jquery.js", "node_modules/cookies-eu-banner/dist/cookies-eu-banner.js"],
     autoprefixerConfig = ["last 1 version", "> 1%", "ff >= 20", "ie >= 8", "opera >= 12", "Android >= 2.2"],
@@ -113,16 +113,15 @@ gulp.task("errors", ["clean-errors"], function() {
  * Generates Sprite files (SASS + image)
  */
 gulp.task("sprite", function() {
-  return gulp.src(path.join(sourceDir, imagesDir, spriteDir, "*"))
-    .pipe(sprite({
-      name: "sprite",
-      style: "_sprite.scss",
+  return sprite.src({
       cssPath: "../" + imagesDir + "/",
-      retina: true,
-      prefix: "sprite-icon",
-      processor: "scss",
-      template: path.join(sourceDir, sassDir, "sprite-template.mustache")
-    }))
+      dimension: [{ ratio: 1, dpi: 72 },
+                  { ratio: 2, dpi: 192 }],
+      margin: 0,
+      src: path.join(sourceDir, imagesDir, spriteDir, "*"),
+      style: "_sprite.scss",
+      template: path.join(sourceDir, sassDir, "sprite-template.hbs")
+    })
     .pipe($.if("*.png", gulp.dest(path.join(destDir, imagesDir)), gulp.dest(path.join(sourceDir, sassDir))));
 });
 

assets/js/accessibility-links.js

@@ -6,12 +6,16 @@
 
 (function($, undefined){
     "use strict";
-    
-    $("#accessibility a").on("focus", function(){
+
+    $("#accessibility a").on("focus", function() {
         $(".dropdown:visible").parent().find(".active").removeClass("active");
         $("#accessibility").addClass("focused");
-    });
-    $("#accessibility a").on("blur", function(){
+    }).on("blur", function() {
         $("#accessibility").removeClass("focused");
+    }).on("click", function() {
+        var link = $(this).attr("href");
+        setTimeout(function() { // Forces the focus on next tick
+            $(link).find(":tabbable").first().focus(); // Focus the first focusable element
+        });
     });
-})(jQuery);
+})(jQuery);

assets/scss/base/_high-pixel-ratio.scss

@@ -13,7 +13,7 @@
     .breadcrumb ol li:not(:last-child):after,
     input[type=radio]:checked,
     input[type=checkbox]:checked {
-        @include sprite-retina();
+        @include sprite-2x();
     }
 }
 
@@ -25,7 +25,7 @@
        only screen and (min-resolution: 2dppx) and #{$media-mobile-tablet} {
 
     .js.enable-mobile-menu .mobile-menu-hide .page-container .mobile-menu-btn:after {
-        @include sprite-retina();
+        @include sprite-2x();
     }
 
     .page-container .header-logo-link {

assets/scss/components/_content-item.scss

@@ -323,12 +323,14 @@ $content-reaction-offset: -14px; // -30px to not offset the meta
             .content-meta {
                 padding-top: 1px;
 
-                .content-pubdate {
-                    display: none;
-                }
-
-                &:not(.inline) > * {
-                    display: block;
+                &:not(.inline) {
+                    .content-pubdate {
+                        display: none;
+                    }
+
+                    & > * {
+                        display: block;
+                    }
                 }
             }
         }
@@ -337,9 +339,13 @@ $content-reaction-offset: -14px; // -30px to not offset the meta
 
 @media only screen and #{$media-mobile-tablet} {
     .full-content-wrapper .content-item {
-        .content-info * {
-            margin: 0 !important;
-            padding: 0 !important;
+        .content-info {
+            h3 {
+                padding: 0 !important;
+            }
+            p:not(.content-meta) {
+                margin: 0 !important;
+            }
         }
     }
 }

assets/scss/components/_featured-item.scss

@@ -89,3 +89,10 @@
         flex: 1;
     }
 }
+
+@media only screen and #{$media-mobile} {
+    .featured-resource-edit-form {
+        flex-direction: column;
+        align-items: unset;
+    }
+}

assets/scss/components/_header-search.scss

@@ -92,8 +92,8 @@
         }
         form {
             input {
-                padding: 8px 10px;
-                height: 14px;
+                padding: 6px 10px;
+                height: 18px;
                 width: 150px;
             }
             button {
@@ -112,4 +112,4 @@
             line-height: 30px;
         }
     }
-}
+}

assets/scss/components/_topic-list.scss

@@ -157,7 +157,7 @@
         .topic-title,
         .topic-subtitle {
             display: block;
-            margin: 0;
+            margin: 0 !important;
             padding: 0;
         }
         .topic-title {
@@ -350,4 +350,4 @@
             }
         }
     }
-}
+}

assets/scss/layout/_content.scss

@@ -458,4 +458,11 @@
             }
         }
     }
-}
+}
+
+@media only screen and #{$media-mobile} {
+    .main .content-container .article-content .btn {
+        float: none;
+        text-align: center;
+    }
+}

assets/scss/layout/_header.scss

@@ -409,7 +409,7 @@
 
     .header-container header .header-menu {
         float: left;
-        width: 34%;
+        width: 40%;
         margin-left: .5%;
 
         .header-menu-list > li > a {
@@ -466,7 +466,6 @@
 
 @media only screen and #{$media-extra-wide} {
     .header-container header .header-menu {
-        width: 40%;
         margin-left: 5%;
     }
 }

assets/scss/layout/_sidebar.scss

@@ -148,7 +148,8 @@
                     border-right: 7px solid transparent;
                 }
 
-                img, span {
+                img,
+                span:not(.wide) {
                     vertical-align: middle;
                 }
 

assets/scss/pages/_home.scss

@@ -259,8 +259,7 @@ $content-width: 1145px;
             &:after {
                 margin: 16px;
                 @include sprite-position($search);
-                //@include sprite-width($search);
-                width: 17px; // sprite-width's output (16px) isn't correct for some reason...
+                @include sprite-width($search);
                 @include sprite-height($search);
             }
         }

assets/scss/sprite-template.hbs

@@ -0,0 +1,32 @@
+{{! Based on https://github.com/sprity/sprity-sass/blob/master/template/scss.hbs }}
+
+{{#each layouts}}
+  {{#each layout.items}}
+    ${{#if ../../opt.split}}{{cssesc ../../name}}-{{/if}}{{cssesc meta.name}}: -{{baseDim x}}px -{{baseDim y}}px {{baseDim width}}px {{baseDim height}}px;
+  {{/each}}
+{{/each}}
+
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 3);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 4);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 1);
+  $sprite-offset-y: nth($sprite, 2);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+{{#each layouts}}
+  {{#each sprites}}
+    @mixin sprite{{#if dpi}}-{{ratio}}x{{/if}}() {
+      background-image: url('{{escimage url}}');
+      {{#if dpi}}
+      background-size: {{baseWidth}}px {{baseHeight}}px;
+      {{/if}}
+    }
+  {{/each}}
+{{/each}}