clipboard: adjust line-breaking for inline code between code and button #175

layouts/partials/stylesheet.html

@@ -17,10 +17,10 @@
     {{- end }}
     <style>
     {{- if .Site.Params.disableInlineCopyToClipBoard }}
-      :not(pre) > code.copy-to-clipboard-inline + span.copy-to-clipboard {
+      :not(pre) > code.copy-to-clipboard-code + span.copy-to-clipboard-button {
         display: none;
       }
-      :not(pre) > code.copy-to-clipboard-inline {
+      :not(pre) > code.copy-to-clipboard-code {
         border-bottom-right-radius: 2px;
         border-top-right-radius: 2px;
         border-right-width: 1px;

static/css/print.css

@@ -21,7 +21,7 @@ pre code {
     /* remove page padding - this can be set exactly in the print setup */
     padding: 0;
 }
-code.copy-to-clipboard-inline {
+code.copy-to-clipboard-code {
     border-bottom-right-radius: 2px;
     border-top-right-radius: 2px;
     border-right-width: 1px;
@@ -46,7 +46,7 @@ pre {
 #body #breadcrumbs .links {
     overflow-x: hidden;
 }
-.copy-to-clipboard {
+.copy-to-clipboard-button {
     display: none;
 }
 

static/css/theme.css

@@ -694,7 +694,11 @@ code {
     white-space: nowrap;
 }
 
-code.copy-to-clipboard-inline {
+.copy-to-clipboard {
+    display: inline-block;
+}
+
+code.copy-to-clipboard-code {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-width: 0;
@@ -1042,7 +1046,7 @@ a[aria-disabled="true"] {
     }
 }
 
-.copy-to-clipboard {
+.copy-to-clipboard-button {
     background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
     border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
     border-radius: 0 2px 2px 0;
@@ -1053,24 +1057,24 @@ a[aria-disabled="true"] {
     padding-left: 22px;
 }
 
-.copy-to-clipboard > i {
+.copy-to-clipboard-button > i {
     font-family: "Font Awesome 6 Free";
     font-size: 92%;
     font-weight: 500;
     margin-left: -22px;
 }
 
-.copy-to-clipboard-inline + .copy-to-clipboard > i {
+.copy-to-clipboard-code + .copy-to-clipboard-button > i {
     padding-left: 5px;
     padding-right: 5px;
 }
 
-.copy-to-clipboard:hover {
+.copy-to-clipboard-button:hover {
     background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
     color: #fffae9; /* var(--CODE-INLINE-BG-color) */
 }
 
-pre .copy-to-clipboard {
+pre .copy-to-clipboard-button {
     background-color: rgba( 160, 160, 160, .2 );
     border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
     border-radius: 2px;
@@ -1081,7 +1085,7 @@ pre .copy-to-clipboard {
     top: 4px;
 }
 
-pre .copy-to-clipboard:hover {
+pre .copy-to-clipboard-button:hover {
     background-color: #486ac9; /* var(--MAIN-LINK-color) */
     border-color: #486ac9; /* var(--MAIN-LINK-color) */
     color: #000000; /* var(--CODE-BLOCK-color) */

static/css/variant.css

@@ -130,23 +130,23 @@ div.featherlight .featherlight-content{
     background-color: var(--MAIN-BG-color, #ffffff);
 }
 
-.copy-to-clipboard {
+.copy-to-clipboard-button {
     background-color: var(--CODE-INLINE-BG-color, #fffae9);
     border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
     color: var(--CODE-INLINE-color, #5e5e5e);
 }
 
-.copy-to-clipboard:hover {
+.copy-to-clipboard-button:hover {
     background-color: var(--CODE-INLINE-color, #5e5e5e);
     color: var(--CODE-INLINE-BG-color, #fffae9);
 }
 
-pre .copy-to-clipboard {
+pre .copy-to-clipboard-button {
     border-color: var(--CODE-BLOCK-BORDER-color, #d8d8d8);
     color: var(--MAIN-LINK-color, #486ac9);
 }
 
-pre .copy-to-clipboard:hover {
+pre .copy-to-clipboard-button:hover {
     background-color: var(--MAIN-LINK-color, #486ac9);
     border-color: var(--MAIN-LINK-color, #486ac9);
     color: var(--CODE-BLOCK-BG-color, #f8f8f8);

static/js/relearn.js

@@ -338,22 +338,21 @@ jQuery(function() {
 
         if (text.length > 5) {
             if (!clipInit) {
-                var text, clip = new ClipboardJS('.copy-to-clipboard', {
+                var clip = new ClipboardJS('.copy-to-clipboard-button', {
                     text: function(trigger) {
-                        text = $(trigger).prev('code').text();
+                        var text = $(trigger).prev('code').text();
                         return text.replace(/^\$\s/gm, '');
                     }
                 });
 
-                var inPre;
                 clip.on('success', function(e) {
                     e.clearSelection();
-                    inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
+                    var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
                     $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
                 });
 
                 clip.on('error', function(e) {
-                    inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
+                    var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
                     $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
                     $(document).one('copy', function(){
                         $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
@@ -363,9 +362,12 @@ jQuery(function() {
                 clipInit = true;
             }
 
-            code.addClass('copy-to-clipboard-inline');
+            var parent = code.parent();
-            code.after('<span class="copy-to-clipboard" title="Copy to clipboard"><i class="fas fa-copy"></i>');
+            code.addClass('copy-to-clipboard-code');
-            code.next('.copy-to-clipboard').on('mouseleave', function() {
+            code.replaceWith($('<span/>', {'class': 'copy-to-clipboard'}).append(code.clone() ));
+            code = parent.children('.copy-to-clipboard').last().children('.copy-to-clipboard-code');
+            code.after('<span class="copy-to-clipboard-button" title="Copy to clipboard"><i class="fas fa-copy"></i>');
+            code.next('.copy-to-clipboard-button').on('mouseleave', function() {
                 $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
             });
         }