minor #1420 Update the design of the source code modal (javiereguiluz)

This PR was squashed before being merged into the main branch.

Discussion
----------

Update the design of the source code modal

The modal window that displays the source code of controller/template is nice. But the current design is troublesome. It displays the controller code on top of the template code. It doesn't look good many times because controller/templates are too long:

![source-code-modal-before](https://user-images.githubusercontent.com/73419/236446446-8981f360-ee43-4230-ad99-13cc068a623b.png)

This PR proposes to use tabs to display controller and template side-by-side:

![source-code-modal-after](https://user-images.githubusercontent.com/73419/236446491-313ab2e9-0fed-4632-9419-afe87959f80f.png)

Commits
-------

37d7a1c Update the design of the source code modal

Author: javiereguiluz

assets/app.js

@@ -4,6 +4,7 @@ import './styles/app.scss';
 import 'bootstrap/js/dist/alert';
 import 'bootstrap/js/dist/collapse';
 import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/tab';
 import 'bootstrap/js/dist/modal';
 import 'jquery'
 

assets/styles/app.scss

@@ -18,7 +18,7 @@
 @import "~bootstrap/scss/button-group";
 @import "~bootstrap/scss/input-group";
 // @import "~bootstrap/scss/custom-forms";
-// @import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 // @import "~bootstrap/scss/card";
 @import "~bootstrap/scss/breadcrumb";
@@ -289,25 +289,38 @@ footer #footer-resources i {
   margin-left: 0.5em
 }
 
-#sourceCodeModal h3 {
-  font-size: $font-default;
-  margin-top: 0
-}
+#sourceCodeModal {
+  .modal-header {
+    border-bottom: 0;
+    padding: 1rem 1rem 0;
 
-#sourceCodeModal h3 small {
-  color: $gray-700;
-  font-size: 80%
-}
+    h3 { font-size: 18px; margin-top: 0; }
+  }
 
-#sourceCodeModal pre {
-  margin-bottom: 2em;
-  padding: 0;
-  display: block;
-  word-break: break-all;
-  word-wrap: break-word;
+  .nav-tabs {
+    border-bottom-color: #95a5a6;
+    margin-bottom: 15px;
+
+    .nav-link { font-size: 16px; }
+    .nav-link.active { border-color: #95a5a6 #95a5a6 #fff; }
+    .nav-link:not(.active):hover { border-color: transparent; text-decoration: underline; }
+  }
+
+  .tab-content {
+    .file-link { font-size: 16px; margin: 0 0 10px 5px; }
+  }
+
+  pre {
+    margin-bottom: 0;
+    padding: 0;
+    display: block;
+    word-break: break-all;
+    word-wrap: break-word;
 
-  code {
-    white-space: pre-wrap;
+    code {
+      border-radius: 6px;
+      white-space: pre-wrap;
+    }
   }
 }
 

public/build/42.5aced7b3.js

@@ -22,6 +22,12 @@
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
 
+/*!
+  * Bootstrap tab.js v4.6.2 (https://getbootstrap.com/)
+  * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
 /*!
   * Bootstrap util.js v4.6.2 (https://getbootstrap.com/)
   * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)

public/build/928.0e3059b2.js

@@ -4,12 +4,12 @@
       "js": [
         "/build/runtime.5feae901.js",
         "/build/41.64983f8e.js",
-        "/build/42.5aced7b3.js",
-        "/build/app.8d5ecae9.js"
+        "/build/928.0e3059b2.js",
+        "/build/app.09886d85.js"
       ],
       "css": [
-        "/build/42.76194c5a.css",
-        "/build/app.e7ad18f4.css"
+        "/build/928.76194c5a.css",
+        "/build/app.3a149582.css"
       ]
     },
     "admin": {
@@ -27,10 +27,10 @@
   "integrity": {
     "/build/runtime.5feae901.js": "sha384-Dj9HEwBUNZIrIUOJJ4vOrf8e+X7fhJTYGYb0F/RJLrIo5qMTyh/mBApfQI4FmH8F",
     "/build/41.64983f8e.js": "sha384-XfOM8D6kvkEmauUMaczMxByKTBpbb9/aDqt1hPMgWDJh1X2ZQu5rIyRn3Ipx+rmn",
-    "/build/42.5aced7b3.js": "sha384-wqPte8ueaLTZwKszn5yK/iS5GuSBYNuwZtNs5G6BWGzGI17VoFv2lXNHwQbeTCWh",
-    "/build/app.8d5ecae9.js": "sha384-2UhLzumRcZ9rIylCmaGHxKCG1IFSEarrvMs4G6qEzE0Hl0lnrNc+e9jB8gZijjaf",
-    "/build/42.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
-    "/build/app.e7ad18f4.css": "sha384-AX8sd4a5GkOjaVooLq9t+zDI/fqugWjeU5OP+fHkycws0R/G5zaM8UZ4qx32gTNi",
+    "/build/928.0e3059b2.js": "sha384-KjnlXhwQ0i93knq1SMzG1q6DBwLVJszQEwEQQhCSkiWbtamCjJIwvE/EQf+Sj7tL",
+    "/build/app.09886d85.js": "sha384-4l0f6J9YNcH3yqxVehcZCX4fNgWG3y3lvsGqK0kxdMJvcFUZwtauRSDYlL4PBLCJ",
+    "/build/928.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
+    "/build/app.3a149582.css": "sha384-nfrD0DNMpZazGQQAucFPYcE1VsR4Gg5Wut28sAVfEpTl6T5xVyF5D0qoc7GtumrW",
     "/build/384.af623ff4.js": "sha384-DTkf7hVvZ08YUepoH5wzP+thJm6maRzLe8KxUgIc2OajdJkoSDct0pJMEPYcEEeF",
     "/build/admin.747eb0c9.js": "sha384-vDe3FhM5HnWbM4nEdbmSv8AB5n/PfPJv0y0Goloka7w6jppc6di5LpKD1A252aFg",
     "/build/admin.2b1a6c83.css": "sha384-ikQwASTRPK0sjWtW//EXsUjqkjNxc2Yndtt0m5a/I/qE+qEoikXP5ailZKDaqtN9"

public/build/42.5aced7b3.js.LICENSE.txt renamed to public/build/928.0e3059b2.js.LICENSE.txt

@@ -1,13 +1,13 @@
 {
-  "build/app.css": "/build/app.e7ad18f4.css",
-  "build/app.js": "/build/app.8d5ecae9.js",
+  "build/app.css": "/build/app.3a149582.css",
+  "build/app.js": "/build/app.09886d85.js",
   "build/admin.css": "/build/admin.2b1a6c83.css",
   "build/admin.js": "/build/admin.747eb0c9.js",
   "build/runtime.js": "/build/runtime.5feae901.js",
   "build/206.b003fa5f.js": "/build/206.b003fa5f.js",
   "build/41.64983f8e.js": "/build/41.64983f8e.js",
-  "build/42.76194c5a.css": "/build/42.76194c5a.css",
-  "build/42.5aced7b3.js": "/build/42.5aced7b3.js",
+  "build/928.76194c5a.css": "/build/928.76194c5a.css",
+  "build/928.0e3059b2.js": "/build/928.0e3059b2.js",
   "build/630.ed629036.js": "/build/630.ed629036.js",
   "build/384.af623ff4.js": "/build/384.af623ff4.js",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.7a8b4f13.svg",

public/build/42.76194c5a.css renamed to public/build/928.76194c5a.css

@@ -11,23 +11,37 @@
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h4 class="modal-title"><i class="fa fa-code" aria-hidden="true"></i> {{ 'title.source_code'|trans }}</h4>
+                    <h5 class="modal-title"><i class="fa fa-code" aria-hidden="true"></i> {{ 'title.source_code'|trans }}</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'action.close'|trans }}">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
 
                 <div class="modal-body">
-                    {% if controller %}
-                        <h3><a href="https://symfony.com/doc/current/controller.html" target="_blank">{{ 'title.controller_code'|trans }}</a><small class="float-right">{{ controller.file_path|format_file(controller.starting_line) }}</small></h3>
-                        <pre><code class="php">{{ controller.source_code }}</code></pre>
-                    {% else %}
-                        <h3><a href="https://symfony.com/doc/current/controller.html">{{ 'title.controller_code'|trans }}</a></h3>
-                        <pre><code>{{ 'not_available'|trans }}</code></pre>
-                    {% endif %}
+                    <ul class="nav nav-tabs" id="myTab" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link active" id="controller-tab" data-toggle="tab" href="#controller-code" role="tab" aria-controls="home" aria-selected="true" target="_blank">{{ 'title.controller_code'|trans }}</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" id="template-tab" data-toggle="tab" href="#template-code" role="tab" aria-controls="profile" aria-selected="false" target="_blank">{{ 'title.twig_template_code'|trans }}</a>
+                        </li>
+                    </ul>
 
-                    <h3><a href="https://symfony.com/doc/current/templates.html" target="_blank">{{ 'title.twig_template_code'|trans }}</a><small class="float-right">{{ template.file_path|format_file(template.starting_line) }}</small></h3>
-                    <pre><code class="twig">{{ template.source_code }}</code></pre>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane show active" id="controller-code" role="tabpanel" aria-labelledby="controller-tab">
+                            {% if controller %}
+                                <p class="file-link">{{ controller.file_path|format_file(controller.starting_line) }}</p>
+                                <pre><code class="php">{{ controller.source_code }}</code></pre>
+                            {% else %}
+                                <pre><code>{{ 'not_available'|trans }}</code></pre>
+                            {% endif %}
+                        </div>
+
+                        <div class="tab-pane" id="template-code" role="tabpanel" aria-labelledby="template-tab">
+                            <p class="file-link">{{ template.file_path|format_file(template.starting_line) }}</p>
+                            <pre><code class="twig">{{ template.source_code }}</code></pre>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>