templates/blog/articles.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {% if blog_name == ''%} {{ 'blog_title'|trans}} {% else%} {{ blog_name|striptags|raw }} {% endif%}
  6. {% endblock %}
  8. {% block css %}
  9.     <style>
  10.         .card {
  11.             border: none;
  12.             color: #fff;
  13.             border-radius: 12px
  14.         }
  16.         .user-timing {
  17.             right: 9px;
  18.             bottom: 9px;
  19.             color: #fff
  20.         }
  22.         .views-content {
  23.             color: #606271
  24.         }
  26.         .views {
  27.             font-size: 12px
  28.         }
  30.         .dots {
  31.             display: flex;
  32.             height: 10px;
  33.             width: 10px;
  34.             background-color: green;
  35.             border-radius: 50%;
  36.             margin-left: 5px;
  37.             margin-bottom: 6px
  38.         }
  40.         .days-ago {
  41.             margin-top: -10px;
  42.             color: #606271
  43.         }
  45.         .snipimage img {
  46.             height: 150px
  47.         }
  49.         .widget {
  50.             position: relative;
  51.             display: block;
  52.             margin-bottom: 30px;
  53.         }
  55.         .widget_title {
  56.             background-color: #fff;
  57.             z-index: 3;
  58.         }
  60.         .widget_title:after {
  61.             position: relative;
  62.             display: inline-block;
  63.             bottom: 35px;
  64.             left: 52%;
  65.             content: " ";
  66.             width: 50%;
  67.             border-top: 2px solid #eee;
  68.             z-index: 1;
  69.         }
  71.         .widget_black h2:after {
  72.             display: table;
  73.             position: relative;
  74.             left: 50%;
  75.             bottom: 10px;
  76.             height: 2px;
  77.             content: " ";
  78.             text-shadow: none;
  79.             width: 15%;
  80.             background-color: #000;
  81.             z-index: 2;
  82.         }
  84.         .widget i:hover {
  85.             color: #f7510f;
  86.             cursor: pointer;
  87.         }
  89.         .widget_adv {
  90.             text-align: center;
  91.             margin: 30px;
  92.         }
  94.         .widget_advertisement {
  95.             text-align: center;
  96.             margin: 30px 0;
  97.         }
  99.         .widget_body img {
  100.             float: left;
  101.             position: relative;
  102.             margin-right: 25px;
  103.         }
  105.         .widget .add_img {
  106.             display: inline-block;
  107.             padding: 12px 12px;
  108.         }
  110.         .widget .media {
  111.             margin-top: 0;
  112.             margin-bottom: 30px;
  113.         }
  115.         .widget .media-heading {
  116.             margin-bottom: 5px;
  117.             font-size: 15px;
  118.             line-height: 18px;
  119.         }
  121.         .widget .media-date {
  122.             color: #b2b0b0;
  123.         }
  125.         .widget_article_social {
  126.             color: #a5a5a5;
  127.             margin-top: 15px;
  128.         }
  130.         .widget_article_social i {
  131.             padding: 5px;
  132.             margin-right: 5px;
  133.             color: #fff;
  134.             font-size: 10px;
  135.             background-color: #a5a5a5;
  136.         }
  138.         .widget_article_social span {
  139.             margin-right: 10px;
  140.         }
  142.         .widget_article_social a {
  143.             font-weight: bold;
  144.         }
  146.         .widget_img {
  147.             text-align: center;
  148.             margin: 0 auto;
  149.         }
  151.         .widget .adv_img {
  152.             display: inline-block;
  153.         }
  155.         .widget_body .btn {
  156.             border-radius: 0;
  157.         }
  159.         .widget hr {
  160.             border-color: #e0e0e0;
  161.         }
  163.         .widget-title hr {
  164.             border-width: 4px;
  165.             margin-bottom: 0;
  166.         }
  168.         .widget-title hr:before {
  169.             width: 80px;
  170.             background-color: #ddd;
  171.             display: block;
  172.             height: 4px;
  173.             position: relative;
  174.             content: "";
  175.             top: -4px;
  176.         }
  177.         .widget_divider {
  178.             display: inline-block;
  179.             vertical-align: baseline;
  180.             zoom: 1;
  181.             width: 98%;
  182.             position: relative;
  183.             text-align: right;
  184.             text-transform: uppercase;
  185.             font-size: 11px;
  186.         }
  188.         .widget_divider::after {
  189.             content: '';
  190.             display: block;
  191.             width: 75%;
  192.             left: 0;
  193.             text-align: right;
  194.             position: absolute;
  195.             top: 12px;
  196.             border-top: 1px solid #f1f1f1;
  197.         }
  198.         .media-body, .media-left, .media-right{
  199.             display: table-cell;
  200.             vertical-align: top;
  201.         }
  202.         .media-left, .media > .pull-left{
  203.             padding-right: 10px;
  204.         }
  205.         .media-body{
  207.         }
  209.         marquee p {
  210.             display: contents;
  211.         }
  213.         .dot {
  214.             height: 6px;
  215.             width: 6px;
  216.             margin-left: 3px;
  217.             margin-right: 3px;
  218.             margin-top: 2px !important;
  219.             background-color: #7f3e98!important;
  220.             border-radius: 50%;
  221.             display: inline-block
  222.         }
  224.         .padded {
  225.             padding: 100px 0;
  226.         }
  227.         .wrapper-grey {
  228.             background: #F4F4F4;
  229.         }
  230.         .avatar {
  231.             width: 30px;
  232.             border-radius: 50%;
  233.         }
  234.         .avatar-bordered {
  235.             box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  236.             border: white 1px solid;
  237.         }
  238.         .avatar-large {
  239.             width: 50px;
  240.         }
  241.         /* .banner {
  242.           color: white;
  243.           text-align: center;
  244.           height: 100vh;
  245.           background-size: cover !important;
  246.           display: flex;
  247.           align-items: center;
  248.           justify-content: center;
  249.         }
  250.         .banner h1 {
  251.           font-size: 50px;
  252.           font-weight: bold;
  253.           text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  254.         }
  255.         .banner p {
  256.           font-size: 25px;
  257.           font-weight: lighter;
  258.           color: rgba(255, 255, 255, 0.8);
  259.           margin-bottom: 50px;
  260.         } */
  262.         .card {
  263.             height: 250px;
  264.             text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  265.             background-size: cover !important;
  266.             color: white;
  267.             position: relative;
  268.             border-radius: 5px;
  269.             margin-bottom: 20px;
  270.         }
  271.         .card-user {
  272.             position: absolute;
  273.             right: 10px;
  274.             top: 10px;
  275.         }
  276.         .card-category {
  277.             position: absolute;
  278.             top: 10px;
  279.             left: 10px;
  280.             font-size: 20px;
  281.         }
  282.         .card-description {
  283.             position: absolute;
  284.             bottom: 10px;
  285.             left: 10px;
  286.         }
  287.         .card-description h2 {
  288.             font-size: 22px;
  289.         }
  290.         .card-description p {
  291.             font-size: 15px;
  292.         }
  293.         .card-link {
  294.             position: absolute;
  295.             top: 0;
  296.             bottom: 0;
  297.             width: 100%;
  298.             z-index:2;
  299.             background: black;
  300.             opacity: 0;
  301.         }
  302.         .card-link:hover{
  303.             opacity: 0.1;
  304.         }
  305.         .features img {
  306.             width: 100px;
  307.         }
  308.         .features h2 {
  309.             font-size: 20px;
  310.             margin-bottom: 10px;
  311.         }
  312.         .features p {
  313.             font-size: 15px;
  314.             font-weight: lighter;
  315.         }
  317.     </style>
  319. {% endblock %}
  321. {% block body %}
  323.     <div class=" d-flex flex-column flex-row-fluid" >
  324.         <div class="card-body row" style="margin-top: 20px">
  326.             <h1 style="font-weight: bolder;font-size: 38px;margin-bottom: 5px" class="bold text-left text-primary">
  327.                 {% if blog_name == ''%} {{ 'blog_title'|trans}} {% else%} {{ blog_name|raw }} {% endif%}
  328.             </h1>
  329.             {% if school_notifs|length >0 or educati_notifs|length>0 %}
  330.                 <div class="">
  331.                     <div class="row">
  332.                         <div class="col-md-12">
  333.                             <div class="d-flex justify-content-between align-items-center breaking-news " style="
  334.                                     border-bottom-style: solid;border-bottom-color:  #7f3e9824!important;border-bottom-width: 2px;
  335.                                     ">
  337.                                 <marquee style="display: inline-block;font-size: 16px;min-height: 35px; padding-top: 6px;" class="news-scroll" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  338.                                     {% if school_notifs|length >0  %}
  339.                                         {% for no in school_notifs %}
  340.                                             {% if no.startAt is not null %}
  341.                                                 {% if date_now >= no.startAt %}
  342.                                                     {% if no.expiredAt is not null  %}
  343.                                                         {% if no.expiredAt >= date_now %}
  344.                                                             {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  345.                                                         {% endif %}
  346.                                                     {% else %}
  347.                                                         {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  348.                                                     {% endif %}
  350.                                                 {% endif %}
  351.                                             {% else %}
  352.                                                 {% if no.expiredAt is not null  %}
  353.                                                     {% if no.expiredAt >= date_now %}
  354.                                                         {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  355.                                                     {% endif %}
  356.                                                 {% else %}
  357.                                                     {{ no.content|raw}} <i class="dot" style="margin-right: 10px"></i>
  358.                                                 {% endif %}
  359.                                             {% endif %}
  360.                                         {% endfor %}
  361.                                     {% endif %}
  362.                                 </marquee>
  363.                             </div>
  364.                         </div>
  365.                     </div>
  366.                 </div>
  367.             {% endif %}
  370.             <div class="container-fluid categorie-div" style="margin-top: 18px;background: #f3f3f3;">
  371.                 <div class="d-flex align-items-center" style="width: 100%">
  372.                     <div class="flex-shrink-0">
  373.                         <a href="#" class="btn-left btn-link p-2 toggle3 text-dark"><i class="bi bi-caret-left"></i></a>
  374.                     </div>
  375.                     <div class="flex-grow-1  o-hidden" style="overflow-x: scroll">
  376.                         <ul class="nav nav-blog nav-fill small position-relative flex-nowrap div-ul-link" style="margin-bottom: 8px">
  378.                             {%  for cat in categories %}
  379.                                 <li class="nav-item">
  380.                                     <a href="{{ path('app_show_category_articles',{'slug':cat.slug})  }}" class="header-nav-link" style="">{{ cat.name }}</a>
  381.                                 </li>
  382.                             {% endfor %}
  383.                         </ul>
  384.                     </div>
  385.                     <div class="flex-shrink-0">
  386.                         <a href="#" class="btn-right btn-link toggle3 p-2 text-dark"><i class="bi bi-caret-right"></i></a>
  387.                     </div>
  388.                 </div>
  389.             </div>
  390.             <div class="separator" style="border-width: 5px"></div>
  393.             <div class="container mt-4">
  395.                 <div class=" p-3 row">
  396.                     <div class="col-lg-8 col-md-8 col-sm-12">
  397.                         {% for a in articles %}
  398.                             <div class="row mb-8">
  399.                                 <div class="col-md-3 col-lg-3 col-sm-12">
  400.                                     <div class="position-relative snipimage">
  401.                                         <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  402.                                             {% if a.imageCover != '' %}
  403.                                                 <img style="object-fit: cover;width: 300px;" src="{{ asset('uploads/'~a.imageCover) }}" class=" img-fluid  img-responsive">
  404.                                             {% else %}
  405.                                                 <img style="object-fit: cover;width: 300px" src="{{ asset('assets/media/avatars/blank.png') }}" class=" img-fluid img-responsive">
  406.                                             {% endif %}
  408.                                         </a>
  409.                                     </div>
  410.                                 </div>
  411.                                 <div class="col-md-9 col-lg-9 col-sm-12">
  412.                                     <div class="mt-2">
  413.                                         <div class="d-flex justify-content-between align-items-center">
  414.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}"><h5 class="mb-1">{{ a.title}} </h5></a>
  415.                                         </div>
  416.                                         <div class="fs-13 mb-2" style="color: #7a7a7a">
  417.                                             <span class="mr-2 badge badge-primary">{{ a.category.name }} </span>
  418.                                         </div>
  419.                                         <div class="d-flex justify-content-md-start justify-content-between views-content mt-2">
  420.                                             <a href="{{ path('blog_show_article',{'slug':a.slug}) }}">
  421.                                                 {{ a.content|striptags|u.truncate(200, '...')|raw  }}
  422.                                             </a>
  423.                                         </div>
  424.                                         <div class="d-flex align-items-center mb-2">
  425.                                             <div class="ms-3">
  427.                                                 <span class="text-muted fs-7 mb-1"><span class="bi bi-clock"></span> {{ a.date|date('Y-m-d') }}</span>
  428.                                             </div>
  429.                                         </div>
  431.                                     </div>
  432.                                 </div>
  433.                             </div>
  434.                             <div class="separator" style="margin-bottom: 20px; height: 4px"></div>
  435.                         {% endfor %}
  436.                         {{ knp_pagination_render(articles) }}
  437.                     </div>
  439.                     <div class="col-lg-4 col-md-4 col-sm-12">
  440.                         {% include 'blog/ads_list.html.twig' %}
  441.                     </div>
  445.                 </div>
  448.             </div>
  457.         </div>
  459.     </div>
  463. {% endblock %}
  465.  {% block js %}
  466.      <script id="templateAds" type="text/html">
  467.          <div class="col-md-12">
  468.              <div class="card" style="max-height: 220px; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)), url('{{ asset('uploads/') }}[[image]]');">
  469.                  <div class="card-category" style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[title]]</div>
  470.                  <div class="card-description">
  471.                      <p style="text-shadow: 1px 1px 2px #7f3e98, 0 0 1em #7f3e98, 0 0 0.2em #7f3e98;">[[content]]</p>
  472.                  </div>
  473.                  <a target="_blank" class="card-link" href="[[link]]" ></a>
  474.              </div>
  475.          </div>
  476.      </script>
  477.      <script src="{{ asset('assets/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
  479.      <script>
  480.          $('.toggle3').click(function(){
  481.              $('.nav-blog').toggleClass("justify-content-end");
  482.              $('.toggle3').toggleClass("text-light");
  483.          });
  485.          $.ajax({
  486.              url: "{{ path('list_ads_json',{'limit':10,'offset':0}) }}"+'?lang='+getCookie('lang'),
  487.              type: 'GET',
  488.              dataType: 'json',
  489.              success: function(res){
  490.                  let templateRep = document.getElementById("templateAds");
  491.                  let templateRepHtml = templateRep.innerHTML;
  492.                  let listHtml = "";
  493.                  res.data.forEach(function (e){
  494.                      let link = "{{ path('display_ads',{'slug':'0000'}) }}";
  495.                      link = link.replace('0000',e.slug)
  496.                      listHtml += templateRepHtml
  497.                          .replace("[[image]]",e.image)
  498.                          .replace("[[link]]",link)
  499.                          .replace("[[title]]",e.title)
  500.                          .replace("[[content]]",e.description);
  501.                  });
  503.                  $('#ads_list').html(listHtml);
  505.              },
  506.              error :function (error) {
  507.                  console.log(error);
  508.              }
  509.          });
  512.      </script>
  515.  {% endblock %}