app/template/akracing/Block/cm_blog_block_pro.twig line 1

Open in your IDE?
  1. {% set config = repository('Plugin\\CMBlogPro42\\Entity\\Config').get() %}
  2. {% set blogs = repository('Plugin\\CMBlogPro42\\Entity\\Blog').getList() %}
  3. {% set categoryLisst = repository('Plugin\\CMBlogPro42\\Entity\\Category').getFrontCategoryList() %}
  7. {% block javascript %}
  8. <script>
  9. $(function(){
  10.     $(".ak-news_header li").on("click",function(){
  11.         console.log($(this).attr("id"));
  12.         $(".ak-news_header li").removeClass("active");
  13.         $(this).addClass("active");
  14.         clikcId = $(this).attr("id");
  15.         $(".ak-news_body").removeClass("active");
  16.         $("." + clikcId ).addClass("active");
  17.     })
  18.     $("#headlint").addClass("active");
  19.     $(".headlint").addClass("active");
  20. })
  21. </script>
  23. {% endblock %}
  25. {% block stylesheet %}
  26. <style>
  27. /* style by mark */
  31. .ak-news_header{
  32.     display:flex;
  33. }
  34. #cm_blog_plugin .ak-news_header .active{
  35.     background-color:#1F1F1F
  36. }
  37. .ak-news_header h3{
  38.     font-size:14px;
  39.     margin:0;
  40.     padding:0.5em;
  41. }
  42. .ec-shelfRole{
  43.     background-color:#000;
  44. }
  45. #cm_blog_plugin .ak-news_body{
  46.     display:none;
  47.     padding:1em;
  48. }
  49. .ak-news_body li{
  50.     padding:0.5em;
  51.     font-size:14px;
  52.     display:flex;
  53.     flex-wrap: wrap;
  54.     position:relative;
  55. }
  57. .ak-news_body li span{
  58.     display:inline-block;
  59.     width:6em;
  60. }
  61. .ak-news_body li a{
  62.     width:calc(100% - 6em );
  63. }
  64. #cm_blog_plugin .ak-news_body.active{
  65.     display:block;
  66.     background-color:#1F1F1F;
  67. }
  68. /*
  69. #cm_blog_plugin{
  70.     position: absolute;
  71.     bottom:50px;
  72.     right:0;
  73.     padding:0;
  74.     max-width:700px;
  75.     z-index:500;
  76. }
  77. */
  78. #newsList{
  79.     position:relative;
  80. }
  81. #newsList::before{
  82.     content : "";
  83.     display:block;
  84.     width:100%;
  85.     padding-bottom:40%;
  86.     /* background-color:#F00;*/
  87. }
  88. #cm_blog_plugin{
  89.     position: relative;
  90.     bottom:40px;
  91.     right:0;
  92.     padding:0;
  93.     max-width:700px;
  94.     z-index:500;
  95.     margin-left:auto;
  96. }
  97. #cm_blog_plugin .ec-shelfRole,
  98. #cm_blog_plugin .ec-role,
  99. #cm_blog_plugin .ec-shelfRole{
  100.     margin:0;
  101.     padding:0;
  102. }
  103. #cm_blog_plugin ul.ak-news_header li.newsTitle{
  104.     padding:15px 110px 15px 15px;
  105. }
  106. #cm_blog_plugin ul.ak-news_header li{
  107.     padding:21px 15px 15px 15px;
  108. }
  109. #cm_blog_plugin ul.ak-news_header li.newsTitle h3{
  110.     font-size:26px;
  111.     padding:0;
  112. }
  113. #cm_blog_plugin ul.ak-news_header li.newsTitle h3::before{
  114.     content:none;
  115. }
  116. #cm_blog_plugin ul.ak-news_header li h3{
  117.     padding: 0 0 0 1em;
  118.     position: relative;
  119.     line-height:0.5;
  120. }
  121. #cm_blog_plugin ul.ak-news_header li h3::before {
  122.     position: absolute;
  123.     content: "";
  124.     color: #fff;
  125.     background-color: #fff;
  126.     width: 0.5em;
  127.     height: 2px;
  128.     top: 0.2em;
  129.     left: 0;
  130.   }
  131. .ak-news_body a{
  132.     position:relative;
  133. }
  134. .ak-news_body .new::before{
  135.     content: "NEW";
  137.     background-color:#c60a1c;
  138.     padding:0.3em;
  139.     margin:0 0.5em 0 0;
  140.     border-radius:0.3em;
  141.     font-size:10px;
  142. }
  145. @media (max-width: 1023px){
  146.     #newsList{
  147.         padding:0 20px;
  148.         margin: 50px 0 0 0;
  149.     }
  150.     #newsList::before{
  151.         content:none;
  152.     }
  154.     #cm_blog_plugin{
  155.         position: static;
  156.         bottom:0;
  157.         right:0;
  158.         padding:0;
  159.         max-width:none;
  160.         width:100%;
  161.         z-index:0;
  162.         margin-left:0;
  163.     }
  166.     #cm_blog_plugin ul.ak-news_header li.newsTitle{
  167.         padding:15px 15px 15px 15px;
  168.         flex-basis:100%;
  169.     }
  171.     .ak-news_header{
  172.         display:flex;
  173.         flex-wrap:wrap;
  174.         justify-content:space-between;
  175.     }
  176. }
  177. @media (max-width: 576px){
  178.     #cm_blog_plugin ul.ak-news_header li h3{
  179.         padding:0;
  180.     }
  181.     #cm_blog_plugin ul.ak-news_header li h3::before{
  182.         content:none;
  183.     }
  184.     #cm_blog_plugin ul.ak-news_header li#campaign{
  185.         flex-basis:49%;
  186.     }
  187.     #cm_blog_plugin ul.ak-news_header li{
  188.         padding:1em 0;
  189.         flex-basis: 17%;
  190.     }
  191.     #newsList h3{}
  192. }
  193. </style>
  194. {% endblock %}
  196. {% if blogs is defined and blogs|length > 0 %}
  198. <div id="newsList">
  199.     <div id="cm_blog_plugin" class="ec-categoryRole ">
  201.         <div class="ec-role">
  203.             <div class="ec-shelfRole">
  204.                 <ul class="ak-news_header">
  205.                     <li id="headlint" class="newsTitle"><h3 class="ec-secHeading__en">{{config.getTitleEn}}</h3></li>
  206.                     {% for i in [3,1,2,0] %}
  207.                     <li id = "{{categoryLisst[i].class}}"><h3>{{ categoryLisst[i].getName() }}</h3></li>
  208.                     {% endfor %}
  209.                 </ul>
  210.                     <ul  class="ak-news_body headlint" >
  211.                     {% set getHeadLine = repository('Plugin\\CMBlogPro42\\Entity\\Blog').getHeadLine(is_granted('ROLE_USER')) %}
  212.                     {% for blog in getHeadLine %}
  213.                             <li>
  214.                             {# blog #}
  215.                             <span class="news_release_date">{{ blog.release_date|date_day }}</span>                                
  216.                                 {% if blog.linkurl != null %}
  217.                                     {% if blog.release_date != null and blog.release_date|date('Y-m-d') > 'now'|date_modify('-1 month')|date('Y-m-d') %}
  218.                                 <a class="news_title new" href="{{ blog.linkurl }}" target="_blank">
  219.                                     {% else %}
  220.                                 <a class="news_title" href="{{ blog.linkurl }}" target="_blank">
  221.                                     {% endif %}
  222.                                     {# blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw #}
  223.                                     {{ blog.getTitle|raw }}
  224.                                 </a>
  225.                                 {% else %}
  226.                                     {% if blog.release_date != null and blog.release_date|date('Y-m-d') > 'now'|date_modify('-1 month')|date('Y-m-d') %}
  227.                                 <a class="news_title new" href="{{ url('cm_blog_page_detail', {'id': blog.id}) }}">
  228.                                     {% else %}
  229.                                 <a class="news_title" href="{{ url('cm_blog_page_detail', {'id': blog.id}) }}">
  230.                                     {% endif %}
  231.                                     {# blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw #}
  232.                                     {{ blog.getTitle|raw }}
  233.                                 </a>
  234.                                 {% endif %}    
  235.                             </li>
  236.                     {% endfor %}
  237.                     </ul>
  238.                 {% for categoryVal in categoryLisst %}
  239.                     {% set categoryValId = categoryVal.getId() %}
  240.                     <ul class="ak-news_body {{categoryVal.class}}">
  241.                     {% set news = repository('Plugin\\CMBlogPro42\\Entity\\Blog').getListTop(categoryValId,is_granted('ROLE_USER')) %}
  242.                     {% for blog in news %}
  243.                         {% for category in blog.getBlogCategories %}
  244.                             {% if category.getCategory().getId() == categoryValId %}
  245.                             {# dump(blog.release_date) #}
  246.                             <li>
  247.                             <span class="news_release_date">{{ blog.release_date|date_day }}</span>                                
  248.                                 {% if blog.linkurl != null %}
  249.                                     {% if blog.release_date != null and blog.release_date|date('Y-m-d') > 'now'|date_modify('-1 month')|date('Y-m-d') %}
  250.                                 <a class="news_title new" href="{{ blog.linkurl }}" target="_blank">
  251.                                     {% else %}
  252.                                 <a class="news_title" href="{{ blog.linkurl }}" target="_blank">
  253.                                     {% endif %}
  254.                                     {# blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw #}
  255.                                     {{ blog.getTitle|raw }}
  256.                                 </a>
  257.                                 {% else %}
  258.                                     {% if blog.release_date != null and blog.release_date|date('Y-m-d') > 'now'|date_modify('-1 month')|date('Y-m-d') %}
  259.                                 <a class="news_title new" href="{{ url('cm_blog_page_detail', {'id': blog.id}) }}">
  260.                                     {% else %}
  261.                                 <a class="news_title" href="{{ url('cm_blog_page_detail', {'id': blog.id}) }}">
  262.                                     {% endif %}
  263.                                     {# blog.getTitle|length > 45 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw #}
  264.                                     {{ blog.getTitle|raw }}
  265.                                 </a>
  266.                                 {% endif %}    
  267.                             </li>
  268.                             {% endif %}
  269.                         {% endfor %}
  270.                     
  271.                     {% endfor %}
  272.                     </ul>
  273.                 {% endfor %}
  274.             </div>
  275.         </div>
  276.     </div>
  277. </div>
  278. {% endif %}