Update Prod

src/main/content/_assets/css/guide-common.scss

@@ -428,7 +428,7 @@
   width: 38px;	
   height: 38px;	
   padding: 8.5px 10px;
-  z-index: 9997;
+  z-index: 7;
   top: 1px;
   right: 1px;
   &:hover {	
@@ -450,6 +450,11 @@
   }
 }
 
+@media screen and (max-width: 899.98px){
+  .code_command .copy_to_clipboard{right: 42px;}
+  .view_code{display: block;}
+}
+
 @media (max-width: 1199.98px) {
   .guide_item {
     width: 100%;
@@ -583,4 +588,23 @@
   .paragraph {
     font-style: italic;
   }
+}
+
+.view_code {
+  @media (min-width: 900px){
+    display: none;
+  }
+  position: absolute;
+  background-color: #eeeff3;
+  width: 38px;
+  height: 38px;
+  padding: 8.5px 10px;
+  z-index: 7;
+  top: 1px;
+  right: 1px;
+  &:hover {	
+    border: solid 1px #b2bbd1;
+    padding: 7.5px 9px;
+    cursor: pointer;
+  }	
 }

src/main/content/_assets/css/guide-multipane-static.scss

@@ -17,15 +17,14 @@
   }
 
   @media screen and (max-width: 899.98px) {
-    position: absolute;
     display: none;
-    left: 0;
-    width: 100%;
-    height: 100%;
 
     &.modal {
       display: block;
       overflow: auto;
+      left: 0 !important;
+      width: 100vw;
+      height: 100vh;
 
       // Remove blur
       #code_column_tabs_container,
@@ -46,13 +45,28 @@
       #dismiss_button {
         position: absolute;
         display: inline-block;
-        top: 0;
-        right: 50px;
-        background: #ffffff;
-        border: 1px solid #96bc32;
-        border-radius: 3px;
-        width: 92px;
-        height: 38px;
+        top: 8px;
+        right: 4px;
+        background: transparent;
+        border: none;
+        color: #5E6B8D;
+        width: 29.5px;
+        height: 30px;
+        font-weight: 540;
+        font-size: 18px;
+        padding: 2px 6px 5px;
+        &:hover {
+          border: solid 1px #b2bbd1;
+          top: 7px;
+          right: 4px;
+        }
+      }
+
+      .copyFileButton{
+        right: 40px;
+        &:hover {
+          right: 39px;
+        }
       }
     }
   }
@@ -113,6 +127,10 @@
     margin-left: 0;
     margin-right: 0;
   }
+
+  .view_code,.copy_to_clipboard{
+    pointer-events: auto;
+  }
 }
 
 @media (min-width: 900px) and (max-width: 1169.98px) {

src/main/content/_assets/js/guide-common.js

@@ -483,6 +483,10 @@ $(document).ready(function () {
         $(this).prepend('<div class="copied_confirmation">Copied to clipboard</div><input type="image" class="copy_to_clipboard" src="/img/guides_copy_button.svg" alt="Copy code block" title="Copy code block"/>');
     });
 
+    $('.code_command .code_block_wrapper').each(function (){
+        $(this).prepend('<div class="view_code" title="View full code"><img src="/img/maximize.svg" alt="View Code"/></div>');
+    });
+
     $(window).on("resize", function () {
         if (!inSingleColumnView()){
             $("#code_column").css("top", "0px");

src/main/content/_assets/js/guide-multipane-static.js

@@ -762,44 +762,23 @@ $(document).ready(function () {
     );
 
     // In mobile view if the user clicks a hotspot it shows a modal of the file with the hotspot code highlighted.
-    $(".hotspot").on("click", function () {
-        if (inSingleColumnView()) {
+    $(".hotspot,.view_code").on("click", function (e) {
+        if (inSingleColumnView() && !$(this).hasClass('code_command')){
             $("body").addClass("unscrollable");
             $("#mobile_toc_accordion_container").css({
-                "pointer-events": "none",
+                "display":"none"
             });
             $("#code_column").addClass("modal");
-
-            var top = $(this).offset().top;
-            var mobile_toc_height = $("#mobile_toc_accordion").height();
-            var scrollTo = top - mobile_toc_height;
-
-            // Scroll the hotspot to the top of the page, with the paragraph encompassing the hotspot shown.
-            $("html, body").stop().animate(
-                {
-                    scrollTop: scrollTo,
-                },
-                400
-            );
-
-            // Set the top of the code to appear underneath the hotspot that was clicked.
-            var hotspot_height = $(this).height();
-            var bottom = scrollTo + window.innerHeight - hotspot_height - 5;
-            var height = bottom - scrollTo;
             $("#code_column").css({
-                top: mobile_toc_height + hotspot_height + 5 + "px",
-                left: "0px",
-                height: height,
+                top: "0px",
             });
-            handleHotspotHover($(this));
+            ($(this).is('.view_code'))?handleHotspotHover($(this).closest('.hotspot')):handleHotspotHover($(this));
         }
     });
 
     $("#dismiss_button").on("click", function () {
         $("body").removeClass("unscrollable");
-        $("#mobile_toc_accordion_container").css({
-            "pointer-events": "auto",
-        });
+        $("#mobile_toc_accordion_container").show();
         $("#code_column").removeClass("modal");
         $("#code_column").css({
             height: "auto",

src/main/content/_layouts/guide-multipane.html

@@ -189,7 +189,7 @@ <h1 id="guide_title">{{ page.title }}</h1>
     </div>
 
     <button id="dismiss_button" aria-label="Back to text" tabindex="0">
-      {% t guides.back_to_text %}
+      X
     </button>
   </div>
 </div>