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)