Updated code block lang order and added extra pascal option

- Fixed modal window sizing/positioning to be properly center and
responsive.

Related to #1730

resources/js/services/code.js

@@ -25,7 +25,7 @@ import 'codemirror/mode/sql/sql';
 import 'codemirror/mode/toml/toml';
 import 'codemirror/mode/xml/xml';
 import 'codemirror/mode/yaml/yaml';
-import 'codemirror/mode/pascal/pascal'
+import 'codemirror/mode/pascal/pascal';
 
 // Addons
 import 'codemirror/addon/scroll/scrollpastend';
@@ -62,6 +62,8 @@ const modeMap = {
     powershell: 'powershell',
     properties: 'properties',
     ocaml: 'mllike',
+    pascal: 'text/x-pascal',
+    pas: 'text/x-pascal',
     php: (content) => {
         return content.includes('<?php') ? 'php' : 'text/x-php';
     },
@@ -79,7 +81,6 @@ const modeMap = {
     xml: 'xml',
     yaml: 'yaml',
     yml: 'yaml',
-    pascal: 'text/x-pascal',
 };
 
 /**

resources/sass/_components.scss

@@ -94,9 +94,10 @@
 .popup-body {
   background-color: #FFF;
   max-height: 90%;
-  width: 1200px;
+  max-width: 1200px;
+  width: 90%;
   height: auto;
-  margin: 2% 5%;
+  margin: 2% auto;
   border-radius: 4px;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
   overflow: hidden;

resources/views/components/code-editor.blade.php

@@ -23,17 +23,17 @@
                             <a @click="updateLanguage('JavaScript')">JavaScript</a>
                             <a @click="updateLanguage('JSON')">JSON</a>
                             <a @click="updateLanguage('Lua')">Lua</a>
-                            <a @click="updateLanguage('PHP')">PHP</a>
-                            <a @click="updateLanguage('Powershell')">Powershell</a>
                             <a @click="updateLanguage('MarkDown')">MarkDown</a>
                             <a @click="updateLanguage('Nginx')">Nginx</a>
+                            <a @click="updateLanguage('PASCAL')">Pascal</a>
+                            <a @click="updateLanguage('PHP')">PHP</a>
+                            <a @click="updateLanguage('Powershell')">Powershell</a>
                             <a @click="updateLanguage('Python')">Python</a>
                             <a @click="updateLanguage('Ruby')">Ruby</a>
                             <a @click="updateLanguage('shell')">Shell/Bash</a>
                             <a @click="updateLanguage('SQL')">SQL</a>
                             <a @click="updateLanguage('XML')">XML</a>
                             <a @click="updateLanguage('YAML')">YAML</a>
-                            <a @click="updateLanguage('PASCAL')">Pascal</a>
                         </small>
                     </div>
                     <input @keypress.enter="save()" id="code-editor-language" type="text" @input="updateEditorMode(language)" v-model="language">