templates/dossier/itineraire/_preview_v2.html.twig line 1

Open in your IDE?
  1. <style>
  2.     /* The switch - the box around the slider */
  3.     .switch {
  4.     position: relative;
  5.     display: inline-block;
  6.     width: 30px;
  7.     height: 17px;
  8.     }
  10.     /* Hide default HTML checkbox */
  11.     .switch input {
  12.     opacity: 0;
  13.     width: 0;
  14.     height: 0;
  15.     }
  17.     /* The slider */
  18.     .slider {
  19.     position: absolute;
  20.     cursor: pointer;
  21.     top: 0;
  22.     left: 0;
  23.     right: 0;
  24.     bottom: 0;
  25.     background-color: #ccc;
  26.     -webkit-transition: .4s;
  27.     transition: .4s;
  28.     }
  30.     .slider:before {
  31.     position: absolute;
  32.     content: "";
  33.     height: 13px;
  34.     width: 13px;
  35.     left: 2px;
  36.     bottom: 2px;
  37.     background-color: white;
  38.     -webkit-transition: .4s;
  39.     transition: .4s;
  40.     }
  42.     input:checked + .slider {
  43.     background-color: #f39c12;
  44.     }
  46.     input:focus + .slider {
  47.     box-shadow: 0 0 1px #2196F3;
  48.     }
  50.     input:checked + .slider:before {
  51.     -webkit-transform: translateX(13px);
  52.     -ms-transform: translateX(13px);
  53.     transform: translateX(13px);
  54.     }
  56.     /* Rounded sliders */
  57.     .slider.round {
  58.     border-radius: 34px;
  59.     }
  61.     .slider.round:before {
  62.     border-radius: 50%;
  63.     }
  65.     .opacity-customs
  66.     {
  67.         opacity: 0.5;
  68.     }
  69. </style>
  70. <div class="col-md-3" id="itineraire-content">
  71.     {% if document is not null and document.documentGeneratorPages|length > 0 %}
  72.     <ul class="nav nav-tabs" id="previewTab" role="tablist" style="display:flex;justify-content:flex-start">
  73.         <li class="nav-item">
  74.             <a class="nav-link active" id="prev-content-tab" data-toggle="tab" href="#prev-content" role="tab" aria-controls="prev-content" aria-selected="true">Contenus</a>
  75.         </li>
  76.         <li class="nav-item">
  77.             <a class="nav-link" id="prev-pattern-tab" data-toggle="tab" href="#prev-pattern" role="tab" aria-controls="prev-pattern" aria-selected="false">Patterns</a>
  78.         </li>
  79.         <li style="margin-left: auto;display:flex;align-items:center">
  80.             <label class="switch">
  81.                 <input id="switch-border" type="checkbox">
  82.                 <span class="slider round"></span>
  83.             </label>
  84.         </li>
  85.     </ul>
  86.     <div class="tab-content border-left border-right border-bottom" id="preview-content">
  87.       <div class="tab-pane fade show active" id="prev-content" role="tabpanel" aria-labelledby="prev-content-tab">
  88.           <div class="day p-3">
  89.               <h3>CONTENUS DISPONIBLES</h3>
  90.               <span class="info" id="info"></span>
  91.               <div class="day-document pt-3" id="services-activites" data-target="" style="">
  92.               </div>
  93.               <span class="info">Contenus libres</span>
  94.               <div class="container">
  95.                   <div class="row">
  96.                       <div class="col-10">
  97.                       <input id="editorial-search" class="form-input form-control" placeholder="Rechercher dans les contenus libres">
  98.                       </div>
  99.                       <div class="col-2">
  100.                       <button id="editorial-search-button" class="form-control" type="button"><i class="fa fa-search"></i></button>
  101.                       </div>
  102.                   </div>
  103.               </div>
  104.               <div class="day-document pt-3" id="custom" data-target="" style="">
  105.                   <ul>
  106.                   {% for custom in customs.custom  %}
  107.                   <li class="custom" onclick="clickDrop(event)" draggable="true" ondragstart="drag(event)" id="custom_{{ custom.editorialId }}" data-id="{{ custom.editorialId }}">
  108.                           <div class="custom-drag float-left">
  109.                                   <i class="fas fa-grip-vertical"></i>&nbsp;
  110.                           </div>
  111.                           <div class="drag-info">
  112.                               <strong>{{ custom.libelle }}</strong>
  113.                           </div>
  114.                           <div style="clear: both;"></div>
  115.                   </li>
  116.                   {% endfor %}
  117.                   </ul>
  118.               </div>
  119.               <!--span class="info">Images</span>
  121.               <div class="day-document pt-3" id="images" data-target="" style="">
  122.                   {% for index, image in customs.images  %}
  123.                       <li class="image" style="position: relative;"><div draggable="true" ondragstart="drag(event)"><a href="#" id="image_{{index}}"><img class="image-preview" src="/{{ image[0] }}"><i class="fas fa-grip-vertical"></i>&nbsp;</a></div></li>
  124.                   {% endfor %}
  125.               </div-->
  126.           </div>
  127.       </div>
  128.       <div class="tab-pane fade" id="prev-pattern" role="tabpanel" aria-labelledby="prev-pattern-tab">
  129.           <div class="p-3">
  130.               <div id="mask-drag" style="position: absolute; width: 100%; height: 100%; z-index: 999999999; display: none;">
  131.               </div>
  132.               <h3>PATTERNS DISPONIBLES</h3>
  133.               <span class="info">{% if patterns|length == 0 %}Aucune pattern{% else %}{{ patterns|length }} pattern{% if patterns|length > 1 %}s{% endif %} disponible{% if patterns|length > 1 %}s{% endif %}{% endif %}</span>
  135.               <nav class="nav nav-pills nav-justified" id="mode">
  136.                   <a class="nav-link active" href="#" data-mode="texte">Mode texte</a>
  137.                   <a class="nav-link" href="#" data-mode="code">Mode code</a>
  138.               </nav>
  139.               <ul style="max-height: 500px; overflow: hidden; overflow-y: scroll;">                      
  140.               {% for pattern, data in patterns %} 
  141.                   <li class="{% if data.value is null %} opacity-customs {% endif %} custom" draggable="true" onclick="clickDrop(event)" ondragstart="drag(event)" id="pattern_{{ pattern }}">
  142.                           <div class="custom-drag float-left">
  143.                                   <i class="fas fa-grip-vertical"></i>&nbsp;
  144.                           </div>
  145.                           <div class="drag-info">
  146.                               <strong>[[{{ pattern }}]]</strong>
  147.                   
  148.                               {% if data.description|length != 0 %}
  149.                                   &nbsp;{{ data.description }}
  150.                               {% endif %}
  151.                           </div>
  152.                           <div style="clear: both;"></div>
  153.                   </li>
  154.               {% endfor %}
  155.               </ul>
  156.           </div>
  158.       </div>
  159.     </div>
  160.     {% endif %}
  164. </div>