templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>{% block title %}Welcome!{% endblock %}</title>
  6.         {# Run `composer require symfony/webpack-encore-bundle`
  7.            and uncomment the following Encore helpers to start using Symfony UX #}
  8.         {% block stylesheets %}
  9.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  10.             <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
  11.             {#{{ encore_entry_link_tags('app') }}#}
  12.             <style>
  13.                 /* Start by setting display:none to make this hidden.
  14.    Then we position it in relation to the viewport window
  15.    with position:fixed. Width, height, top and left speak
  16.    for themselves. Background we set to 80% white with
  17.    our animation centered, and no-repeating */
  18.                 .modal {
  19.                     display:    none;
  20.                     position:   fixed;
  21.                     z-index:    1000;
  22.                     top:        0;
  23.                     left:       0;
  24.                     height:     100%;
  25.                     width:      100%;
  26.                     background: rgba( 255, 255, 255, .8 ) 
  27.                         url('http://i.stack.imgur.com/FhHRx.gif') 
  28.                         50% 50% 
  29.                         no-repeat;
  30.                 }
  32.                 /* When the body has the loading class, we turn
  33.                    the scrollbar off with overflow:hidden */
  34.                 body.loading .modal {
  35.                     overflow: hidden;   
  36.                 }
  38.                 /* Anytime the body has the loading class, our
  39.                    modal element will be visible */
  40.                 body.loading .modal {
  41.                     display: block;
  42.                 }
  43.             </style>
  45.         {% endblock %}
  47.         {% block javascripts %}
  48.             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  49.             <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  50.             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  51.             {#{{ encore_entry_script_tags('app') }}#}
  52.             <script>
  53.                 $body = $("body");
  55.                 $(document).on({
  56.                     ajaxStart: function () {
  57.                         $body.addClass("loading");
  58.                     },
  59.                     ajaxStop: function () {
  60.                         $body.removeClass("loading");
  61.                     }
  62.                 });
  63.             </script>
  64.         {% endblock %}
  65.     </head>
  66.     <body>
  67.         {% block body %}{% endblock %}
  68.         <div class="modal"><!-- Place at bottom of page --></div>
  69.     </body>
  70. </html>