src/ApplicationBundle/Resources/views/voucherTemplate/shared_components.html.twig line 1

Open in your IDE?
  1. {% verbatim %}
  2. <script id="tpl-drawer-header" type="text/template">
  3.     <div class="hb-doc-card hb-doc-card-header-card">
  4.         <div class="hb-doc-card-topline">
  5.             <span class="hb-doc-card-title">{{entityAlias}}</span>
  6.             <span class="hb-doc-card-status">{{statusBadge}}</span>
  7.         </div>
  8.         <div class="hb-doc-card-document">{{documentHash}}</div>
  9.         <div class="hb-doc-card-meta-line">{{createdDate}} <span class="hb-doc-card-meta-dot">-</span> {{createdTime}}</div>
  10.     </div>
  11. </script>
  13. <script id="tpl-drawer-footer" type="text/template">
  14.     <div class="hb-doc-card hb-doc-card-stack">
  15.         <div class="hb-doc-person">
  16.             <div class="hb-doc-avatar" style="{{avatarStyle}}">{{avatarContent}}</div>
  17.             <div class="hb-doc-person-body">
  18.                 <div class="hb-doc-person-name">{{createdBy}}</div>
  19.                 <div class="hb-doc-person-label">Created by</div>
  20.             </div>
  21.         </div>
  22.         <div class="hb-doc-priority-row">
  23.             <span class="hb-doc-priority-label">Priority</span>
  24.             {{priorityBadge}}
  25.         </div>
  26.         <div class="hb-doc-note">
  27.             {{noteHtml}}
  28.         </div>
  29.     </div>
  30. </script>
  32. <script id="tpl-drawer-action-bar" type="text/template">
  33.     <div class="hb-doc-action-bar">
  34.         <button type="button" class="btn btn-success trigger_approval_btn hb-doc-action-primary"
  35.              data-entity="{{entity}}"
  36.              data-entity-id="{{entityId}}"
  37.              data-approval-id="{{approvalId}}">&#10003; Approve</button>
  38.         {{attachmentBtn}}
  39.         <a href="{{url}}" target="_blank" class="hb-doc-action-secondary">Full page &#8599;</a>
  40.     </div>
  41. </script>
  43. <script id="tpl-drawer-kv-table" type="text/template">
  44.     <div class="hb-doc-card hb-doc-kv-card">
  45.         <table class="hb-doc-kv-table">
  46.             <thead>
  47.                 <tr>
  48.                     <th>Field</th>
  49.                     <th>Value</th>
  50.                 </tr>
  51.             </thead>
  52.             <tbody>{{rows}}</tbody>
  53.         </table>
  54.     </div>
  55. </script>
  57. <script id="tpl-drawer-kv-row" type="text/template">
  58.     <tr>
  59.         <td class="hb-doc-kv-key">{{key}}</td>
  60.         <td class="hb-doc-kv-value">{{value}}</td>
  61.     </tr>
  62. </script>
  64. <script id="tpl-drawer-amount-card" type="text/template">
  65.     <div class="hb-doc-card hb-doc-card-summary">
  66.         <div class="hb-doc-card-label">{{label}}</div>
  67.         <div class="hb-doc-card-value" style="color:{{color}};">{{amount}}</div>
  68.     </div>
  69. </script>
  71. <style>
  72.     .hb-doc-card {
  73.         background: #fff;
  74.         border: 1px solid #e5e5e5;
  75.         border-radius: 12px;
  76.         overflow: hidden;
  77.         margin-bottom: 16px;
  78.     }
  79.     .hb-doc-card-header-card {
  80.         padding: 14px 16px;
  81.         background: linear-gradient(180deg, #fbfbfa 0%, #ffffff 100%);
  82.     }
  83.     .hb-doc-card-topline {
  84.         display: flex;
  85.         align-items: center;
  86.         justify-content: space-between;
  87.         gap: 12px;
  88.         margin-bottom: 6px;
  89.     }
  90.     .hb-doc-card-title {
  91.         font-size: var(--cp-fs-micro, 10px);
  92.         font-weight: 700;
  93.         letter-spacing: 0.09em;
  94.         text-transform: uppercase;
  95.         color: #6a6a6a;
  96.     }
  97.     .hb-doc-card-status {
  98.         display: inline-flex;
  99.         align-items: center;
  100.         justify-content: flex-end;
  101.     }
  102.     .hb-doc-card-document {
  103.         font-size: 18px;
  104.         font-weight: 700;
  105.         line-height: 1.2;
  106.         color: #1a1a1a;
  107.         word-break: break-word;
  108.     }
  109.     .hb-doc-card-meta-line {
  110.         margin-top: 3px;
  111.         font-size: 11px;
  112.         color: #9a9a9a;
  113.     }
  114.     .hb-doc-card-meta-dot {
  115.         margin: 0 4px;
  116.     }
  117.     .hb-doc-card-stack {
  118.         padding: 0;
  119.     }
  120.     .hb-doc-person {
  121.         display: flex;
  122.         align-items: center;
  123.         gap: 12px;
  124.         padding: 14px 16px 12px;
  125.         border-bottom: 1px solid #f0f0ee;
  126.     }
  127.     .hb-doc-avatar {
  128.         width: 36px;
  129.         height: 36px;
  130.         border-radius: 50%;
  131.         flex-shrink: 0;
  132.         display: flex;
  133.         align-items: center;
  134.         justify-content: center;
  135.         font-size: 12px;
  136.         font-weight: 700;
  137.         color: #2f6f96;
  138.         background: #eaf4fb;
  139.         background-size: cover;
  140.         background-position: center;
  141.     }
  142.     .hb-doc-person-body {
  143.         min-width: 0;
  144.     }
  145.     .hb-doc-person-name {
  146.         font-size: var(--cp-fs-base, 13px);
  147.         font-weight: 700;
  148.         color: #222;
  149.         line-height: 1.2;
  150.     }
  151.     .hb-doc-person-label {
  152.         font-size: 11px;
  153.         color: #9a9a9a;
  154.         margin-top: 2px;
  155.     }
  156.     .hb-doc-priority-row {
  157.         padding: 12px 16px;
  158.         border-bottom: 1px solid #f0f0ee;
  159.         display: flex;
  160.         justify-content: space-between;
  161.         align-items: center;
  162.         gap: 12px;
  163.     }
  164.     .hb-doc-priority-label {
  165.         font-size: 12px;
  166.         color: #6a6a6a;
  167.     }
  168.     .hb-doc-note {
  169.         padding: 12px 16px;
  170.         display: flex;
  171.         align-items: flex-start;
  172.         gap: 12px;
  173.     }
  174.     .hb-doc-action-bar {
  175.         display: flex;
  176.         gap: 8px;
  177.         padding-top: 4px;
  178.     }
  179.     .hb-doc-action-primary {
  180.         flex: 1;
  181.         padding: 9px 12px;
  182.         font-size: var(--cp-fs-base, 13px);
  183.         border-radius: 10px;
  184.         border: none;
  185.     }
  186.     .hb-doc-action-secondary {
  187.         flex: 1;
  188.         padding: 9px 12px;
  189.         font-size: var(--cp-fs-base, 13px);
  190.         text-align: center;
  191.         border-radius: 10px;
  192.         border: 1px solid #e5e5e5;
  193.         color: #3a3a3a;
  194.         text-decoration: none;
  195.         display: flex;
  196.         align-items: center;
  197.         justify-content: center;
  198.         background: #fff;
  199.     }
  200.     .hb-doc-kv-card {
  201.         padding: 0;
  202.     }
  203.     .hb-doc-kv-table {
  204.         width: 100%;
  205.         border-collapse: collapse;
  206.     }
  207.     .hb-doc-kv-table thead th {
  208.         padding: 10px 16px;
  209.         font-size: var(--cp-fs-micro, 10px);
  210.         font-weight: 700;
  211.         letter-spacing: 0.08em;
  212.         text-transform: uppercase;
  213.         color: #9a9a9a;
  214.         background: #fafaf8;
  215.         border-bottom: 1px solid #f0f0ee;
  216.     }
  217.     .hb-doc-kv-table tbody td {
  218.         border-bottom: 1px solid #f5f5f5;
  219.     }
  220.     .hb-doc-kv-table tbody tr:last-child td {
  221.         border-bottom: none;
  222.     }
  223.     .hb-doc-kv-key {
  224.         padding: 10px 16px;
  225.         font-size: 12px;
  226.         color: #6a6a6a;
  227.         white-space: nowrap;
  228.         width: 34%;
  229.     }
  230.     .hb-doc-kv-value {
  231.         padding: 10px 16px;
  232.         font-size: 12px;
  233.         color: #222;
  234.         word-break: break-word;
  235.     }
  236.     .hb-doc-card-summary {
  237.         padding: 14px 16px;
  238.     }
  239.     .hb-doc-card-label {
  240.         font-size: var(--cp-fs-micro, 10px);
  241.         font-weight: 700;
  242.         letter-spacing: 0.08em;
  243.         text-transform: uppercase;
  244.         color: #9a9a9a;
  245.         margin-bottom: 4px;
  246.     }
  247.     .hb-doc-card-value {
  248.         font-size: 22px;
  249.         font-weight: 700;
  250.         line-height: 1.1;
  251.         color: #1a1a1a;
  252.     }
  253.     .hb-doc-card-value-positive {
  254.         color: #4baa6b;
  255.     }
  256.     .hb-doc-card-value-negative {
  257.         color: #c05350;
  258.     }
  259.     .hb-doc-metric-grid {
  260.         display: grid;
  261.         grid-template-columns: repeat(2, minmax(0, 1fr));
  262.         gap: 8px;
  263.         margin-bottom: 16px;
  264.     }
  265.     .hb-doc-metric-card {
  266.         background: #fafaf8;
  267.         border: 1px solid #f0f0ee;
  268.         border-radius: 10px;
  269.         padding: 10px 12px;
  270.     }
  271.     .hb-doc-metric-label {
  272.         font-size: var(--cp-fs-micro, 10px);
  273.         font-weight: 700;
  274.         letter-spacing: 0.08em;
  275.         text-transform: uppercase;
  276.         color: #9a9a9a;
  277.         margin-bottom: 3px;
  278.     }
  279.     .hb-doc-metric-value {
  280.         font-size: 14px;
  281.         font-weight: 700;
  282.         color: #1a1a1a;
  283.         line-height: 1.2;
  284.         word-break: break-word;
  285.     }
  286.     .hb-doc-section-header {
  287.         padding: 10px 16px;
  288.         background: #fafaf8;
  289.         border-bottom: 1px solid #f0f0ee;
  290.         font-size: var(--cp-fs-micro, 10px);
  291.         font-weight: 700;
  292.         letter-spacing: 0.08em;
  293.         text-transform: uppercase;
  294.         color: #6a6a6a;
  295.     }
  296.     .hb-doc-table-wrap {
  297.         overflow: auto;
  298.     }
  299.     .hb-doc-table {
  300.         width: 100%;
  301.         border-collapse: collapse;
  302.     }
  303.     .hb-doc-table thead th {
  304.         padding: 10px 16px;
  305.         font-size: var(--cp-fs-micro, 10px);
  306.         font-weight: 700;
  307.         letter-spacing: 0.08em;
  308.         text-transform: uppercase;
  309.         color: #9a9a9a;
  310.         background: #fafaf8;
  311.         border-bottom: 1px solid #f0f0ee;
  312.         white-space: nowrap;
  313.     }
  314.     .hb-doc-table tbody td {
  315.         padding: 10px 16px;
  316.         border-bottom: 1px solid #f5f5f5;
  317.         font-size: 12px;
  318.         color: #3a3a3a;
  319.         vertical-align: middle;
  320.     }
  321.     .hb-doc-table tbody tr:last-child td {
  322.         border-bottom: none;
  323.     }
  324.     .hb-doc-table .text-right {
  325.         text-align: right;
  326.         white-space: nowrap;
  327.     }
  328. </style>
  329. {% endverbatim %}