app/template/default/Block/ranking.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         .rating-average {
  4.             font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  5.             font-weight: 600;
  6.             font-size: 13px;
  7.             line-height: 30px;
  8.             color: #333333;
  9.         }
  11.         @media (min-width: 768px) {
  12.             .top-ranking__box {
  13.                 background-color: #FFFFFF;
  14.                 width: 100%;
  15.                 padding: 5% 180px;
  16.             }
  18.             .ranking-left {
  19.                 display: inline-block;
  20.                 float: left;
  21.                 width: 22%;
  22.             }
  24.             .ranking-left img {
  25.                 width: 100%;
  26.             }
  28.             .ranking-right {
  29.                 display: inline-block;
  30.                 float: right;
  31.                 width: 75%;
  32.             }
  34.             .row-ranking {
  35.                 margin: 2% 0;
  36.                 display: inline-block;
  37.                 width: 100%;
  38.                 font-weight: 300;
  39.                 font-size: 15px;
  40.                 line-height: 24px;
  41.             }
  43.             .ranking-comment {
  44.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  45.                 font-weight: 600;
  46.                 font-size: 17px;
  47.                 line-height: 24px;
  48.                 color: #333333;
  49.                 margin: 10px 0;
  50.                 overflow: hidden;
  51.                 display: -webkit-box;
  52.                 -webkit-line-clamp: 2;
  53.                 -webkit-box-orient: vertical;
  54.             }
  56.             .ranking-product {
  57.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  58.                 font-weight: 600;
  59.                 font-size: 13px;
  60.                 line-height: 20.8px;
  61.                 color: #666666;
  62.             }
  64.             .ranking-no {
  65.                 display: inline-block;
  66.                 background: #fff;
  67.                 padding: 0 8px;
  68.                 color: #333333;
  69.                 border: 1px solid;
  70.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  71.                 font-style: normal;
  72.                 font-weight: 600;
  73.                 font-size: 12px;
  74.                 /* identical to box height, or 100% */
  75.                 text-align: center;
  76.                 letter-spacing: 0.01em;
  77.                 width: 56px;
  78.                 height: 20px;
  79.                 line-height: 20px;
  80.             }
  82.             .ranking-div {
  83.                 margin-top: 60px;
  84.             }
  85.         }
  87.         @media (max-width: 768px) {
  88.             .top-ranking__box {
  89.                 text-align: left;
  90.                 padding: 10% 20px;
  91.             }
  93.             .ranking-left {
  94.                 display: inline-block;
  95.                 float: left;
  96.                 width: 100%;
  97.             }
  99.             .ranking-left img {
  100.                 width: 100%;
  101.             }
  103.             .ranking-right {
  104.                 display: inline-block;
  105.                 float: right;
  106.                 width: 100%;
  107.                 margin: 10px 0;
  108.             }
  110.             .row-ranking {
  111.                 margin: 5% 0;
  112.                 display: inline-block;
  113.                 font-weight: 300;
  114.                 font-size: 15px;
  115.                 line-height: 24px;
  116.             }
  118.             .ranking-comment {
  119.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  120.                 font-weight: 600;
  121.                 font-size: 17px;
  122.                 line-height: 24px;
  123.                 color: #333333;
  124.                 margin: 10px 0;
  125.             }
  127.             .ranking-product {
  128.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  129.                 font-weight: 600;
  130.                 font-size: 13px;
  131.                 line-height: 20.8px;
  132.                 color: #666666;
  133.             }
  135.             .ranking-no {
  136.                 font-family: "Roboto", "ヒラギノ角ゴ ProN", "メイリオ", "sans-serif";
  137.                 display: inline-block;
  138.                 background: #fff;
  139.                 padding: 0 10px;
  140.                 color: #333333;
  141.                 border: 1px solid;
  142.                 font-style: normal;
  143.                 font-weight: 600;
  144.                 font-size: 12px;
  145.                 text-align: center;
  146.                 width: 56px;
  147.                 height: 20px;
  148.                 line-height: 20px;
  149.             }
  151.             .pc-line {
  152.                 border-top: 3px solid #2379E7;
  153.                 position: relative;
  154.                 top: 0;
  155.                 width: 40px;
  156.                 left: 0;
  157.                 right: 0;
  158.                 margin: 15px auto 20px;
  159.                 border-radius: 8px;
  160.             }
  161.         }
  163.         .gold {
  164.             background: #A0812B !important;
  165.             color: #FFFFFF !important;
  166.             border: none;
  167.         }
  169.         .silver {
  170.             background: #AAAAAA !important;
  171.             color: #FFFFFF !important;
  172.             border: none;
  173.         }
  175.         .bronze {
  176.             background: #7B3808 !important;
  177.             color: #FFFFFF !important;
  178.             border: none;
  179.         }
  180.     </style>
  181.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/star-rating-svg.css', 'user_data') }}">
  182. {% endblock %}
  184. {% block main %}
  185.     {% if pagination.totalItemCount > 0 %}
  186.         <div class="top-ranking__box">
  187.             <h2 class="top-service-title mt-0">人気業者ランキング</h2>
  188.             <div class="pc-line"></div>
  189.             <div class="ranking-div">
  190.                 {% for key,Product in pagination %}
  191.                     <a href="{{ url('product_detail', { id: Product.id }) }}">
  192.                         <div class="row-ranking">
  193.                             <div class="ranking-left">
  194.                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}"
  195.                                      alt="{{ Product.name }}">
  196.                             </div>
  197.                             <div class="ranking-right">
  198.                                 <div class="ranking-no {% if (key + 1 == 1) %}gold{% elseif (key + 1 == 2) %}silver{% elseif (key + 1 == 3) %}bronze{% endif %}">
  199.                                     No.{{ key + 1 }}</div>
  200.                                 <div class="ranking-comment">{{ Product.comment }}</div>
  201.                                 <div class="ranking-product">{{ Product.name }}</div>
  202.                                 <div class="d-flex">
  203.                                     <div class="my-rating" data-rating="{{ Product.review }}"></div>
  204.                                     <div class="review-title rating-average p-1 pt-0 pb-0">{{ Product.review|round(1, 'ceil') }}</div>
  205.                                     <div class="review-title rating-average p-1 pt-0 pb-0">({{ Product.count }})</div>
  206.                                 </div>
  207.                             </div>
  208.                         </div>
  209.                     </a>
  210.                 {% endfor %}
  211.             </div>
  212.         </div>
  213.     {% endif %}
  214. {% endblock %}