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