Let mobile users scroll Jenkinsfile examples

Some snippets are too wide to see on small screens. Let users scroll.
Includes some other minor style improvements.

Author: spadgett

Diff for: app/scripts/services/modals.js

@@ -35,7 +35,8 @@ angular.module("openshiftConsole")
         $uibModal.open({
           animation: true,
           templateUrl: 'views/modals/jenkinsfile-examples-modal.html',
-          controller: 'JenkinsfileExamplesModalController'
+          controller: 'JenkinsfileExamplesModalController',
+          size: 'lg'
         });
       },
 

Diff for: app/styles/_core.less

@@ -1019,6 +1019,18 @@ a.disabled-link {
   }
 }
 
+.jenkinsfile-examples-modal {
+  .jenkinsfile-examples p:last-child {
+    // Use `modal-body` bottom margin and padding.
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  .modal-footer {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+
 .ace-inline {
   height: 300px;
 }

Diff for: app/styles/_forms.less

@@ -29,8 +29,14 @@
   border: 1px solid @color-pf-black-300;
 }
 
-.jenkinsfile-examples .copy-to-clipboard {
-  margin-top: 3px;
+.jenkinsfile-examples {
+  p {
+    // Show scrollbars as needed on small screens.
+    overflow: auto;
+  }
+  .copy-to-clipboard {
+    margin-top: 3px;
+  }
 }
 
 .compute-resource {

Diff for: app/views/modals/jenkinsfile-examples-modal.html

@@ -1,4 +1,4 @@
-<div>
+<div class="jenkinsfile-examples-modal">
   <div class="modal-body">
     <h2>Jenkinsfile Examples</h2>
     <ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>

Diff for: dist/scripts/scripts.js

@@ -4117,7 +4117,8 @@ showJenkinsfileExamples:function() {
 a.open({
 animation:!0,
 templateUrl:"views/modals/jenkinsfile-examples-modal.html",
-controller:"JenkinsfileExamplesModalController"
+controller:"JenkinsfileExamplesModalController",
+size:"lg"
 });
 },
 showComputeUnitsHelp:function() {

Diff for: dist/scripts/templates.js

@@ -10076,7 +10076,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/modals/jenkinsfile-examples-modal.html',
-    "<div>\n" +
+    "<div class=\"jenkinsfile-examples-modal\">\n" +
     "<div class=\"modal-body\">\n" +
     "<h2>Jenkinsfile Examples</h2>\n" +
     "<ng-include src=\"'views/edit/jenkinsfile-examples.html'\"></ng-include>\n" +

Diff for: dist/styles/main.css

@@ -3585,6 +3585,7 @@ to{transform:rotate(359deg)}
 .copy-to-clipboard-multiline pre{background-color:#fff;max-width:100%;overflow-x:auto}
 .input-group-addon.wildcard-prefix{padding-left:10px}
 .editor-examples{padding:19px;margin-bottom:20px;border:1px solid #d1d1d1}
+.jenkinsfile-examples p{overflow:auto}
 .jenkinsfile-examples .copy-to-clipboard{margin-top:3px}
 .compute-resource{margin-bottom:5px}
 @media (max-width:767px){.compute-resource .inline-select{margin-top:5px}
@@ -3974,6 +3975,8 @@ a.disabled-link:active,a.disabled-link:focus,a.disabled-link:hover{color:#bbb;te
 .modal-debug-terminal .modal-body .empty-state-message{margin-top:60px}
 .modal-debug-terminal .modal-body kubernetes-container-terminal{text-align:center;overflow:hidden}
 .modal-debug-terminal .modal-footer{padding-top:0}
+.jenkinsfile-examples-modal .jenkinsfile-examples p:last-child{margin-bottom:0;padding-bottom:0}
+.jenkinsfile-examples-modal .modal-footer{margin-top:0;padding-top:0}
 .ace-inline{height:300px}
 .ace-inline-small{height:200px}
 #from-file .editor{height:350px}