templates/frontend/static/about.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {{ 'about_us'|trans }}
  6. {% endblock %}
  8. {% block css %}
  9.     <style>
  11.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  12.             border-color: transparent!important;
  13.         }
  14.         .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
  15.             border: transparent!important;
  16.         }
  18.         .main-timeline{
  19.             font-family: 'Sanchez', serif;
  20.             position: relative;
  21.         }
  22.         .main-timeline:before{
  23.             content: '';
  24.             height: 100%;
  25.             width: 2px;
  26.             border: 2px solid {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  27.             transform: translateX(-50%);
  28.             position: absolute;
  29.             left: 50%;
  30.             top: 0;
  31.         }
  32.         .main-timeline:after{
  33.             content: '';
  34.             display: block;
  35.             clear: both;
  36.         }
  37.         .main-timeline .timeline{
  38.             width: 50.05%;
  39.             display:inline-block;
  40.             float: left;
  41.             position: relative;
  42.             z-index: 1;
  43.         }
  44.         .main-timeline .timeline:before,
  45.         .main-timeline .timeline:after{
  46.             content: '';
  47.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  48.             border-radius: 50%;
  49.             transform: translateY(-50%);
  50.             position: absolute;
  51.             top: 50%;
  52.             right: -12px;
  53.         }
  54.         .main-timeline .timeline:after{
  55.             height: 5px;
  56.             width: 100px;
  57.             border-radius: 0;
  58.             right: 0;
  59.         }
  60.         .main-timeline .timeline-content{
  61.             text-align: justify;
  62.             min-height: 155px;
  63.             max-height: 300px;
  64.             padding: 20px 230px 15px 12px;
  65.             display:block;
  66.             overflow: hidden;
  67.         }
  68.         .main-timeline .timeline-content:hover{ text-decoration: none; }
  69.         .main-timeline .timeline-year{
  70.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  71.             background-color: #fff;
  72.             font-size: 14px;
  73.             font-weight: 600;
  74.             text-align: center;
  75.             line-height: 50px;
  76.             height: auto;
  77.             width: 120px;
  78.             border: 2px solid {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  79.             transform: translateY(-50%);
  80.             position: absolute;
  81.             right: 50px;
  82.             top: 50%;
  83.             z-index: 1;
  84.         }
  85.         .main-timeline .title{
  86.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  87.             font-size: 22px;
  88.             font-weight: 600;
  89.             text-transform: capitalize;
  90.             letter-spacing: 1px;
  91.             margin: 0 0 5px;
  92.         }
  93.         .main-timeline .description{
  94.             color: #101010;
  95.             font-size: 15px;
  96.             letter-spacing: 1px;
  97.             margin: 0;
  98.             background-color: #fcfcfd;
  99.         }
  100.         .main-timeline .timeline:nth-child(even){ float: right; }
  101.         .main-timeline .timeline:nth-child(even):before{
  102.             right: auto;
  103.             left: -12px;
  104.         }
  105.         .main-timeline .timeline:nth-child(even):after{
  106.             right: auto;
  107.             left: 0;
  108.         }
  109.         .main-timeline .timeline:nth-child(even) .timeline-content{
  110.             padding: 20px 12px 15px 230px;
  111.             text-align: left;
  112.         }
  113.         .main-timeline .timeline:nth-child(even) .timeline-year{
  114.             right: auto;
  115.             left: 100px;
  116.         }
  117.         .main-timeline .timeline:nth-child(5n+2):before,
  118.         .main-timeline .timeline:nth-child(5n+2):after{
  119.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  120.         }
  121.         .main-timeline .timeline:nth-child(5n+2) .timeline-year{
  122.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  123.             border-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  124.         }
  125.         .main-timeline .timeline:nth-child(5n+2) .title{ color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}; }
  126.         .main-timeline .timeline:nth-child(5n+3):before,
  127.         .main-timeline .timeline:nth-child(5n+3):after{
  128.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  129.         }
  130.         .main-timeline .timeline:nth-child(5n+3) .timeline-year{
  131.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  132.             border-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  133.         }
  134.         .main-timeline .timeline:nth-child(5n+3) .title{ color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}; }
  135.         .main-timeline .timeline:nth-child(5n+4):before,
  136.         .main-timeline .timeline:nth-child(5n+4):after{
  137.             background-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  138.         }
  139.         .main-timeline .timeline:nth-child(5n+4) .timeline-year{
  140.             color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  141.             border-color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %};
  142.         }
  143.         .main-timeline .timeline:nth-child(5n+4) .title{ color: {% if first_color != ''%}{{first_color}}{% else %}#7f3e98{% endif %}; }
  144.         @media screen and (max-width:990px){
  145.             .main-timeline .timeline-year{ right: 30px; }
  146.             .main-timeline .timeline-content{ padding: 15px 160px 15px 15px; }
  147.             .main-timeline .timeline:nth-child(even) .timeline-year{ left: 30px; }
  148.             .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 15px 15px 15px 160px; }
  149.         }
  150.         @media screen and (max-width:767px){
  151.             .main-timeline:before{
  152.                 transform: translateX(0);
  153.                 left: -3px;
  154.             }
  155.             .main-timeline .timeline{
  156.                 width: 100%;
  157.                 margin-bottom: 20px;
  158.             }
  159.             .main-timeline .timeline:before,
  160.             .main-timeline .timeline:after,
  161.             .main-timeline .timeline:nth-child(even):before,
  162.             .main-timeline .timeline:nth-child(even):after{
  163.                 transform: translateY(0);
  164.                 top: 14px;
  165.             }
  167.             .main-timeline .timeline:before,
  168.             .main-timeline .timeline:after{
  169.                 right: auto;
  170.                 left: -12px;
  171.             }
  172.             .main-timeline .timeline:after{ left: 0; }
  173.             .main-timeline .timeline:after,
  174.             .main-timeline .timeline:nth-child(even):after{
  175.                 width: 50px;
  176.                 top: 17px;
  177.             }
  178.             .main-timeline .timeline .timeline-content,
  179.             .main-timeline .timeline:nth-child(even) .timeline-content{
  180.                 text-align: left;
  181.                 padding: 70px 10px 10px 20px;
  182.             }
  183.             .main-timeline .timeline .timeline-year,
  184.             .main-timeline .timeline:nth-child(even) .timeline-year{
  185.                 line-height: 40px;
  186.                 height: 50px;
  187.                 width: 120px;
  188.                 border-width: 5px;
  189.                 transform: translateY(0);
  190.                 top: 0;
  191.                 left: 45px;
  192.             }
  193.         }
  195.         .team3 {
  197.             font-size: 16px;
  198.         }
  200.         .team3 h1,
  201.         .team3 h2,
  202.         .team3 h3,
  203.         .team3 h4,
  204.         .team3 h5,
  205.         .team3 h6 {
  206.             color: #3e4555;
  207.         }
  209.         .team3 .font-weight-medium {
  210.             font-weight: 500;
  211.         }
  213.         .team3 .bg-light {
  214.             background-color: #f4f8fa !important;
  215.         }
  217.         .team3 .subtitle {
  218.             color: #8d97ad;
  219.             line-height: 24px;
  220.             font-size: 13px;
  221.         }
  223.         .team3 ul {
  224.             margin-top: 30px;
  225.         }
  227.         .team3 h5 {
  228.             line-height: 22px;
  229.             font-size: 18px;
  230.         }
  232.         .team3 ul li a {
  233.             color: #8d97ad;
  234.             padding-right: 15px;
  235.             -webkit-transition: 0.1s ease-in;
  236.             -o-transition: 0.1s ease-in;
  237.             transition: 0.1s ease-in;
  238.         }
  240.         .team3 ul li a:hover {
  241.             -webkit-transform: translate3d(0px, -5px, 0px);
  242.             transform: translate3d(0px, -5px, 0px);
  243.             color: #316ce8;
  244.         }
  246.         .team3 .title {
  247.             margin: 30px 0 0 0;
  248.         }
  250.         .team3 .subtitle {
  251.             margin: 0 0 0px 0;
  252.             font-size: 13px;
  253.         }
  257.     </style>
  259. {% endblock %}
  261. {% block body %}
  266.     <div class=" d-flex flex-column flex-row-fluid">
  267.         <div class="card-body row pt-head">
  268.             {% if page_about is not null %}
  269.                 <div class="row container-fluid scrool-div" id="{{ page_about.slug }}">
  270.                     <div class="richText">
  271.                         <h2 class="bold text-center text-primary mt-5 mb-5">{{ page_about.name }}</h2>
  272.                         <div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-read-only ck-blurred" lang="en" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" contenteditable="false">
  273.                             {{ page_about.richText|raw }}
  274.                         </div>
  275.                     </div>
  276.                 </div>
  277.             {% endif %}
  280.             <div class="row container-fluid " style="margin-top: 80px;">
  281.                 {% if page_story is not null %}
  283.                     <div class="container scrool-div" id="{{ page_story.slug }}">
  284.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_story.name }}</h2>
  285.                         <div class="row">
  286.                             <div class="col-md-12">
  287.                                 <div class="main-timeline">
  288.                                     {%  for s in stories %}
  290.                                         <div class="timeline">
  291.                                             <a href="javascript:void(0)" class="timeline-content btn-show" data-id="{{ s.id }}" >
  292.                                                 <span class="timeline-year">{{ s.storyDate }}</span>
  293.                                                 {% if s.image != '' %}
  294.                                                     <img style="max-width: 300px;max-height: 190px" src="{{ asset('uploads/'~s.image) }}"/>
  296.                                                 {% endif %}
  298.                                                 <p class="description" style="text-align: {% if loop.index % 2 ==0 %} justify {% else %} justify {% endif %}">
  299.                                                     {{ s.description|striptags|u.truncate(100, '...')|raw }}
  300.                                                 </p>
  301.                                             </a>
  302.                                         </div>
  303.                                     {% endfor %}
  305.                                 </div>
  306.                             </div>
  307.                         </div>
  308.                     </div>
  309.                 {% endif %}
  313.             </div>
  314.             <div class="row container-fluid"  style="margin-top: 80px;">
  315.                 {% if page_team is not null %}
  316.                     <div class="container scrool-div" id="{{ page_team.slug }}">
  317.                         <h2 class="bold text-center text-primary mb-5 mt-5">{{ page_team.name }}</h2>
  319.                         <div class="py-5 team3 ">
  320.                             <div class="container">
  322.                                 <div class="row">
  323.                                     {% for t in teams %}
  324.                                         <div class="col-lg-3 col-md-4 mb-4">
  325.                                             <div class="row">
  326.                                                 <div class="col-md-12">
  327.                                                     {% if t.image ==''  %}
  328.                                                         <img style="width: 270px;height: 250px" src="{{ asset('assets/media/avatars/user.png') }}" alt="wrapkit" class="img-thumbnail img-fluid" />
  329.                                                     {% else %}
  330.                                                         <img style="width: 270px;height: 250px" src="{{ asset('uploads/'~t.image) }}" alt="wrapkit" class="img-thumbnail img-fluid" />
  331.                                                     {% endif %}
  333.                                                 </div>
  334.                                                 <div class="col-md-12">
  335.                                                     <div class="pt-2">
  336.                                                         <h3 class="mt-4 font-weight-medium mb-0">{{ t.name }}</h3>
  337.                                                         <h4 class="subtitle">{{ t.position.name }}</h4>
  338.                                                         <h4 class="subtitle">{{ t.department.name }}</h4>
  339.                                                         <a style="display: block" href = "mailto: {{ t.email }}" class="subtitle"> {{ t.email }}</a>
  340.                                                         <a  style="display: block" href = "tel: {{ t.phone }}" class="subtitle"> {{ t.phone }}</a>
  342.                                                     </div>
  343.                                                 </div>
  344.                                             </div>
  345.                                         </div>
  346.                                     {% endfor %}
  347.                                 </div>
  348.                             </div>
  349.                         </div>
  352.                     </div>
  354.                 {% endif %}
  357.             </div>
  360.         </div>
  362.     </div>
  364.     <div class="modal fade" data-bs-focus="false" tabindex="-1" id="kt_modal_show">
  365.         <div class="modal-dialog modal-fullscreen">
  366.             <div class="modal-content">
  368.                 <div class="modal-header">
  369.                     <h5 class="modal-title" id="modal_show_title">
  370.                         <span class="fa fa-spin fa-satellite"></span>
  371.                     </h5>
  373.                     <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  374.                         <span class="fa fa-window-close"></span>
  375.                     </div>
  376.                     <!--end::Close-->
  377.                 </div>
  378.                 <div class="modal-body">
  379.                     <div class=" d-flex flex-column flex-row-fluid " id="modal_show_img">
  380.                     </div>
  381.                     <div class=" d-flex flex-column flex-row-fluid" id="modal_show_content">
  382.                     </div>
  384.                 </div>
  386.                 <div class="modal-footer">
  387.                     <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ 'close'|trans }}</button>
  388.                 </div>
  389.             </div>
  390.         </div>
  391.     </div>
  395. {% endblock %}
  397.  {% block js %}
  398.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  400.      <script>
  401.          $(document).ready(function (){
  403.          })
  407.      </script>
  408.      <script>
  409.          $(document).ready(function (){
  410.              let modalShow = bootstrap.Modal.getOrCreateInstance(document.getElementById('kt_modal_show'));
  411.              $(modalShow).on('hidden.bs.modal', function (event) {
  412.                  ;
  413.                  $('#modal_show_title').html('<span class="fa fa-spin fa-satellite"></span>');
  414.                  $('#modal_show_content').html('');
  415.                  $('#modal_show_img').html('');
  416.              });
  418.              $('.btn-show').on('click', function () {
  419.                  let url = "{{ path('get_one_entity',{'entity':'story','id':'00000'}) }}";
  420.                  url = url.replace('00000',this.getAttribute('data-id'));
  421.                  $.ajax({
  422.                      url: url,
  423.                      type: 'GET',
  424.                      dataType: 'json',
  425.                      success: function(res){
  426.                          $('#modal_show_title').html(res.data.story_date);
  427.                          $('#modal_show_content').html(res.data.description);
  428.                          if(res.data.image !== ""){
  429.                              let img='<img class="img-responsive img" style="max-width: 400px;max-height: 300px" src="'+"{{ asset('uploads/') }}"+res.data.image +'"'+' />';
  430.                              $('#modal_show_img').html(img);
  431.                          }
  432.                          else{
  433.                              $('#modal_show_img').html('');
  434.                          }
  435.                          modalShow.show();
  436.                      },
  437.                      error :function (error) {
  438.                          Swal.fire({
  439.                              text: "{{ 'object_not_found'|trans }}",
  440.                              icon: "error",
  441.                              buttonsStyling: false,
  442.                              confirmButtonText: "{{ 'close'|trans }}",
  443.                              customClass: {
  444.                                  confirmButton: "btn btn-primary"
  445.                              }
  446.                          });
  447.                      }
  448.                  });
  450.              });
  451.          })
  456.      </script>
  459.  {% endblock %}