Merge branch 'release/2.5.4'

CHANGELOG.md

@@ -3,6 +3,9 @@ CHANGELOG
 
 This changelog references the relevant changes and bug fixes.
 
+* 2.5.4 (2015-08-19)
+ * #357 Missing print function in contact box fix IE9 bug
+
 * 2.5.3 (2015-08-17)
  * #375 add .clearfix class to the infobox element to avoid overflowing elements when floated !markup
  * #374 remove clearing of search-field when clicking on body element, enhance its clear button

VERSION

@@ -1 +1 @@
-2.5.3
+2.5.4

assets/examples/functions.scss

@@ -31,6 +31,11 @@ You can target a specific element to isolate and print by adding a `data-print="
 
   - change the `onclick="window.print()"` by `onclick="$.printPreview.printPreview()"`
   - add an optional target to the printPreview function: `onclick="$.printPreview.printPreview('target id')"`
+
+  <br>
+  **2.5.4:**
+
+  - place a title like `<h3 class="visible-print-block">Contact</h3>` at the top of your `.tab-pane` elements to display only when printing
 </div>
 
 

assets/js/print.js

@@ -28,10 +28,10 @@
 
       // if an element is passed, we want it to be the only thing to print out
       if (element) {
-        element = $('[data-print=' + element + ']');
-        var header = $('header');
+        element = $('[data-print=' + element + ']').clone(); // clone to fix issue with IE render
+        var header = $('header').clone(); // clone to fix issue with IE render
             title = element.attr('data-title') ? '<h1>' + element.attr('data-title') + '</h1>' : '';
-        $container.addClass('print-element').html('').append(header).append(title).append(element);
+        $container.addClass('print-element').html('').append(header, title, element);
       }
 
       $body.addClass('print-preview');
@@ -67,7 +67,7 @@
         var target = $(this).attr('href');
         target = String(target);
 
-        if (target != "undefined" && target.indexOf("http") >= 0) {
+        if (target != "undefined" && target.indexOf("http") === 0) {
           linksIndex ++;
           footnoteLinks += '<li>'+target+'</li>';
           $('<sup class="link-ref">('+linksIndex+')</sup>').insertAfter(this);

assets/pages/detail.twig

@@ -122,6 +122,7 @@
       <!-- Tab panes -->
       <div class="tab-content tab-border">
         <div class="tab-pane active" id="documents">
+          <h3 class="visible-print-block">Documents</h3>
           <article>
             <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
@@ -135,13 +136,15 @@
           </article>
         </div>
         <div class="tab-pane" id="links">
+          <h3 class="visible-print-block">Links</h3>
           <p><a href="#" class="icon icon--after icon--external">external link</a></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.</p>
           <hr>
           <p><a href="#" class="icon icon--after icon--external">external link</a></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.</p>
         </div>
         <div class="tab-pane" id="news">
+          <h3 class="visible-print-block">News</h3>
           <!-- Add .clearfix class to prevent errors with floated elements -->
           <article class="clearfix">
             <h4><a href="#">Title Lorem ipsum</a></h4>

assets/pages/layout.twig

@@ -449,7 +449,8 @@
 
                   <!-- Tab panes -->
                   <div class="tab-content tab-border" data-print="contact" data-title="Contact info">
-                    <div class="tab-pane active" id="contact" title="Contact">
+                    <div class="tab-pane active" id="contact">
+                      <h2 class="visible-print-block">Contact</h2>
                       <address itemprop="address" itemscope="itemscope" itemtype="http://data-vocabulary.org/Address">
                         <strong itemprop="name">UNO-Mission New York</strong>
                         <span>Permanent Mission of Switzerland to the UN</span><br>
@@ -476,13 +477,14 @@
                       closed</p>
                       <p><a href="#" onclick="$.printPreview.printPreview('contact')" class="icon icon--before icon--print">Print contact infos</a></p>
                     </div>
-                    <div class="tab-pane" id="map" title="Map">
+                    <div class="tab-pane" id="map">
+                      <h2 class="visible-print-block">Map</h2>
                       <h3>UNO-Mission New York</h3>
                       <p>633, Third Avenue<br>
                       New York, NY10017-6706</p>
                       <p><img src="http://placehold.it/158x120" alt="Map"></p>
                       <p><a href="#" class="icon icon--after icon--external">See on the map</a></p>
-                      <p><a href="#" class="icon icon--before icon--print">Print contact infos</a></p>
+                      <p><a href="#" onclick="$.printPreview.printPreview('contact')" class="icon icon--before icon--print">Print contact infos</a></p>
                     </div>
                   </div>
                   <br>

assets/sass/print/print-general.scss

@@ -72,10 +72,11 @@ unbedingt Reihenfolge behalten
     color: blue !important;
     text-decoration: underline;
   }
-  a:not([name="context-sidebar"]):after{
+  a:not([name="context-sidebar"]):not([href="#"]):after{
     content:" (" attr(href) ") " !important;
     font-size:0.8em;
     font-weight:normal;
+    font-family: sans-serif;
   }
   a[href*="tel:"]:after {content: none !important;}
   .breadcrumb li:not(:nth-last-child(3)) a:after,
@@ -99,12 +100,7 @@ unbedingt Reihenfolge behalten
   .tab-content>.tab-pane {
     display: block !important;
     visibility: visible;
-    border-top: 1px dashed #6d6d6d;
     margin-bottom: 15px;
-    &:before {
-      content: attr(title) ' tab:';
-      opacity: .6;
-    }
   }
   .tab-content, .tab-content.tab-border {
     padding: 0;
@@ -121,12 +117,15 @@ unbedingt Reihenfolge behalten
   .news-feed .scroll-y {
     max-height: 10000000000000px !important;
   }
-
+  address {padding: 0;}
   .link-ref {display: none;}
   &.print-footnotes .link-ref {display: inline;}
   &.print-footnotes a:after {content: none !important;}
   #print-settings .btn {display: inline-block !important;}
   #print-settings .pagination-container {display: block !important;}
+  .visible-print-inline {display: inline !important;}
+  .visible-print-block {display: block !important;}
+  .visible-print-inline-block {display: inline-block !important;}
 }
 
 .print-preview {

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "swiss-styleguide",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "homepage": "http://swiss.github.io/styleguide",
   "authors": "Antistatique.net",
   "description": "Swiss Admin Styleguide",

build/js/main.js

@@ -277,10 +277,10 @@ function disableControl(element) {
 
       // if an element is passed, we want it to be the only thing to print out
       if (element) {
-        element = $('[data-print=' + element + ']');
-        var header = $('header');
+        element = $('[data-print=' + element + ']').clone(); // clone to fix issue with IE render
+        var header = $('header').clone(); // clone to fix issue with IE render
             title = element.attr('data-title') ? '<h1>' + element.attr('data-title') + '</h1>' : '';
-        $container.addClass('print-element').html('').append(header).append(title).append(element);
+        $container.addClass('print-element').html('').append(header, title, element);
       }
 
       $body.addClass('print-preview');
@@ -316,7 +316,7 @@ function disableControl(element) {
         var target = $(this).attr('href');
         target = String(target);
 
-        if (target != "undefined" && target.indexOf("http") >= 0) {
+        if (target != "undefined" && target.indexOf("http") === 0) {
           linksIndex ++;
           footnoteLinks += '<li>'+target+'</li>';
           $('<sup class="link-ref">('+linksIndex+')</sup>').insertAfter(this);