templates/areas/apk-banner-text/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="uk-container apk-container-1400">
  3.     <div uk-alert>
  4.         <h1 class="uk-h1">APK BANNER TEXT</h1>
  5.     </div>
  6.     <ul uk-tab>
  7.         <li><a href="#">Configurations</a></li>
  8.         <li class="uk-active"><a href="#">Edition</a></li>
  9.     </ul>
  10.     <ul class="uk-switcher uk-margin">
  11.         <li class="apk-size-20 uk-grid-small" uk-grid>
  12.             {# Colonne 1 #}
  13.             <div class="uk-width-1-2@m" uk-margin>
  14.                 <div>Type de heading pour le titre ?</div>
  15.                 {{ pimcore_select("content-heading", {
  16.                     "store" : [
  17.                         ['h1', 'Heading 1'],
  18.                         ['h2', 'Heading 2'],
  19.                     ],
  20.                     "defaultValue" : "h2"
  21.                 }) }}
  22.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  23.                 {{ pimcore_select("content-heading-style", {
  24.                     "store" : [
  25.                         ['h1', 'Heading 1'],
  26.                         ['h2', 'Heading 2'],
  27.                     ],
  28.                     "defaultValue" : "h2"
  29.                 }) }}
  30.                 <div><strong>Alignement</strong> du texte</div>
  31.                 {{ pimcore_select("text-alignment", {
  32.                     "store" : [
  33.                         ['uk-text-left', 'Gauche'],
  34.                         ['uk-text-right', 'Droite'],
  35.                         ['uk-text-center', 'Centré'],
  36.                     ],
  37.                     "defaultValue" : "uk-text-center"
  38.                 }) }}
  39.             
  40.             </div>
  41.             {# Colonne 2 #}
  42.             <div class="uk-width-1-2@m" uk-margin>
  43.                 <div>Largeur du container du texte</div>
  44.                 {{ pimcore_select("text-width", {
  45.                     "store" : [
  46.                         ['apk-container-500', '500px'],
  47.                         ['apk-container-600', '600px'],
  48.                         ['apk-container-700', '700px'],
  49.                         ['apk-container-800', '800px'],
  50.                         ['apk-container-900', '900px'],
  51.                         ['apk-container-1000', '1000px'],
  52.                         ['apk-container-1100', '1100px'],
  53.                         ['apk-container-1200', '1200px'],
  54.                         ['apk-container-1300', '1300px'],
  55.                         ['apk-container-1400', '1400px'],
  56.                     ],
  57.                     "defaultValue" : "apk-container-1400"
  58.                 }) }}
  59.                 
  60.                 <div>Espacement en haut du block</div>
  61.                 {{ pimcore_select("margin-top", {
  62.                     "store" : [
  63.                         ['uk-padding-remove-top', 'Suppression du padding'],
  64.                         ['', 'Aucun'],
  65.                         ['uk-margin-small-top', 'Petit'],
  66.                         ['uk-margin-medium-top', 'Moyen'],
  67.                         ['uk-margin-large-top', 'Grand'],
  68.                         ['uk-margin-xlarge-top', 'Très grand'],
  69.                     ],
  70.                     "defaultValue" : ""
  71.                 }) }}
  72.     
  73.                 <div>Espacement en bas du block</div>
  74.                 {{ pimcore_select("margin-bottom", {
  75.                     "store" : [
  76.                         ['uk-padding-remove-bottom', 'Suppression du padding'],
  77.                         ['', 'Aucun'],
  78.                         ['uk-margin-small-bottom', 'Petit'],
  79.                         ['uk-margin-medium-bottom', 'Moyen'],
  80.                         ['uk-margin-large-bottom', 'Grand'],
  81.                         ['uk-margin-xlarge-bottom', 'Très grand'],
  82.                     ],
  83.                     "defaultValue" : ""
  84.                 }) }}
  85.                 
  86.             </div>
  87.         </li>
  88.     
  89.         <li class="uk-active">
  90.             <div class="uk-margin-large-bottom">
  91.                 <div class="apk-content">
  92.                     <div>Titre</div>
  93.                     <h2 class="uk-h2">
  94.                         {{ pimcore_textarea("content-title",{
  95.                             "nl2br" : true
  96.                         }) }}
  97.                     </h2>
  98.                     
  99.                     <div>Texte</div>
  100.                     {{ pimcore_textarea("content",{
  101.                         "nl2br" : true
  102.                     }) }}
  103.                     <div>Lien</div>
  104.                     <div class="actions">
  105.                         {{ pimcore_link("content-btn", {
  106.                             "class" : "uk-button"
  107.                         }) }}
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         </li>
  112.     </ul>
  113. </div>
  114. {% endif %}
  115. {% if not editmode %}
  116. <div class="apk-container-banner-text {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  117.     <div>
  118.         <div class="uk-container {{ pimcore_select("text-width")}}">
  119.             <div class="{{ pimcore_select("text-alignment") }}">
  120.                 
  121.             {% if not pimcore_textarea("content-title").isEmpty %}
  122.                 {% if pimcore_select("content-heading").data == "span" %}
  123.                     <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  124.                         {{ pimcore_textarea("content-title", {
  125.                         "nl2br" : true})|raw }}
  126.                     </span>
  127.                 {% else %}
  128.                     {% set content_heading = pimcore_select("content-heading").getData() %}
  129.                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  130.                         {{ pimcore_textarea("content-title", {
  131.                         "nl2br" : true})|raw }}
  132.                     </{{ content_heading }}>
  133.                 {% endif %}
  134.             {% endif %}
  135.     
  136.             <div class="apk-content">
  137.                 <p>
  138.                 {{ pimcore_textarea("content",{
  139.                     "nl2br" : true
  140.                 }) }}
  141.                 </p>
  142.             </div>
  143.             
  144.     
  145.             {% if not pimcore_link("content-btn").isEmpty() %}
  146.                 <div class="actions">
  147.                     {{ pimcore_link("content-btn", {
  148.                         "class" : "uk-button"
  149.                     }) }}
  150.                 </div>
  151.             {% endif %}
  152.             </div>
  153.     
  154.         </div>
  155.     </div>
  156.     
  157.     
  158. </div>
  159. {% endif %}