Make bus color primary and update styles of api docs

resources/styles/api.scss

@@ -0,0 +1,48 @@
+#formats {
+  font-family: Open Sans, sans-serif;
+}
+
+.swagger-ui .opblock-tag,
+.swagger-ui .opblock .opblock-section-header label,
+.swagger-ui .opblock .opblock-section-header h4,
+.swagger-ui .opblock .opblock-summary-method,
+.swagger-ui .tab li,
+.swagger-ui .scheme-container .schemes > label,
+.swagger-ui .loading-container .loading:after,
+.swagger-ui .btn,
+.swagger-ui .btn.cancel,
+.swagger-ui select,
+.swagger-ui label,
+.swagger-ui .dialog-ux .modal-ux-content h4,
+.swagger-ui .dialog-ux .modal-ux-header h3,
+.swagger-ui section.models h4,
+.swagger-ui section.models h5,
+.swagger-ui .model-title,
+.swagger-ui .parameter__name,
+.swagger-ui .topbar a,
+.swagger-ui .topbar .download-url-wrapper .download-url-button,
+.swagger-ui .info .title small pre,
+.swagger-ui .scopes h2,
+.swagger-ui .errors-wrapper hgroup h4 {
+  font-family: Open Sans, sans-serif !important;
+}
+
+body {
+  margin: 0;
+}
+
+header {
+  display: none;
+}
+
+header::before, #swagger-ui.api-platform .opblock.opblock-get .opblock-summary-method {
+  background: #005ea8;
+}
+
+#swagger-ui.api-platform .info .title {
+  color: #005ea8;
+}
+
+.swagger-ui section.models {
+  border-radius: 0;
+}

resources/styles/main.scss

@@ -5,13 +5,16 @@ $border-radius-sm: $border-radius;
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
+$primary: #005ea8;
+
 $custom-control-indicator-checked-bg: $dark;
 $custom-control-indicator-active-bg: $dark;
 
+
 $line-types: (
   'trolleybus': #419517,
   'tram':       #cd2e12,
-  'bus':        #005ea8,
+  'bus':        $primary,
   'train':      $yellow,
   'unknown':    $dark
 );
@@ -23,6 +26,8 @@ $headings-margin-bottom: $default-spacing;
 
 $container-max-widths: map-merge($container-max-widths, ( xl: 1320px ));
 
+$link-color: #005ea8;
+
 @import "~bootstrap/scss/bootstrap";
 
 @mixin headings {

resources/ts/app.ts

@@ -1,6 +1,7 @@
 /// <reference path="types/webpack.d.ts"/>
 
 import '../styles/main.scss'
+
 import "leaflet/dist/leaflet.css";
 
 import Popper from 'popper.js';

templates/base.html.twig

@@ -40,7 +40,8 @@
             {% block footer %}
                 <span>
                     <img src="{{ asset('images/logo.png') }}" alt="czydojade logo"/>
-                    v. {{ version() }}
+                    v. {{ version() }} &bullet;
+                    <a href="{{ url('app.swagger_ui') }}">API</a>
                 </span>
                 <span class="copyright flex flex-space-left justify-content-end">
                     <a href="https://kadet.net"><img src="{{ asset('images/kadet-net-logo.png') }}" alt="kadet.net logo" class="mx-1"/></a>
@@ -50,6 +51,6 @@
         </footer>
 
         {% block javascripts %}{% endblock %}
-        <script src="{{ asset('dist/bundle.js') }}"></script>
+        <script src="{{ asset('dist/main.js') }}"></script>
     </body>
 </html>

templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig

@@ -1,36 +1,9 @@
 {% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}
 
-{% block stylesheets %}
+{% block header '' %}
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700">
-    {{ parent() }}
-    <style type="text/css" rel="stylesheet">
-        #formats {
-            font-family: Open Sans,sans-serif;
-        }
 
-        .swagger-ui .opblock-tag,
+{% block stylesheets %}
-        .swagger-ui .opblock .opblock-section-header label,
+    {{ parent() }}
-        .swagger-ui .opblock .opblock-section-header h4,
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700">
-        .swagger-ui .opblock .opblock-summary-method,
+    <link rel="stylesheet" href="{{ asset('dist/api.css') }}" />
-        .swagger-ui .tab li,
-        .swagger-ui .scheme-container .schemes>label,
-        .swagger-ui .loading-container .loading:after,
-        .swagger-ui .btn,
-        .swagger-ui .btn.cancel,
-        .swagger-ui select,
-        .swagger-ui label,
-        .swagger-ui .dialog-ux .modal-ux-content h4,
-        .swagger-ui .dialog-ux .modal-ux-header h3,
-        .swagger-ui section.models h4,
-        .swagger-ui section.models h5,
-        .swagger-ui .model-title,
-        .swagger-ui .parameter__name,
-        .swagger-ui .topbar a,
-        .swagger-ui .topbar .download-url-wrapper .download-url-button,
-        .swagger-ui .info .title small pre,
-        .swagger-ui .scopes h2,
-        .swagger-ui .errors-wrapper hgroup h4 {
-            font-family: Open Sans,sans-serif!important;
-        }
-    </style>
 {% endblock stylesheets %}

webpack.config.js

@@ -8,12 +8,13 @@ const { GenerateSW } = require('workbox-webpack-plugin');
 const config = {
     entry: {
         main: ['./resources/ts/app.ts'],
+        api: ['./resources/styles/api.scss']
     },
     output: {
         path: path.resolve('./public/dist/'),
         publicPath: "/dist/",
-        filename: "bundle.js",
+        filename: "[name].js",
-        chunkFilename: 'bundle.[chunkhash:8].js'
+        chunkFilename: '[name].[chunkhash:8].js'
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],