templates/project/crud/gallery.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .mbody {
  3.         display: flex;
  4.         align-items: center;
  5.         justify-content: center;
  6.         background: black;
  7.         border-radius: 10px;
  8.     }
  10.     .modal-image-body {
  11.         display: flex;
  12.         align-items: center;
  13.         justify-content: center;
  14.         border-radius: 10px;
  15.         height: 600px;
  16.         width: 100%;
  17.         align-items: center;
  18.         flex-direction: column;
  19.         justify-content: center;
  20.     }
  22.     .modal-image-body img {
  23.         height: 100%;
  24.         object-fit: cover;
  25.     }
  27.     .drag-area {
  28.         border: 2px dashed #fff;
  29.         height: 400px;
  30.         width: 100%;
  31.         border-radius: 5px;
  32.         display: flex;
  33.         align-items: center;
  34.         justify-content: center;
  35.         flex-direction: column;
  36.     }
  38.     .drag-area.active {
  39.         border: 2px solid #fff;
  40.     }
  42.     .drag-area .icon {
  43.         font-size: 100px;
  44.         color: #fff;
  45.     }
  47.     .drag-area header {
  48.         font-size: 24px;
  49.         font-weight: 500;
  50.         color: #fff;
  51.     }
  53.     .drag-area span {
  54.         font-size: 22px;
  55.         font-weight: 500;
  56.         color: #fff;
  57.         margin: 10px 0 15px;
  58.     }
  60.     .drag-area button {
  61.         padding: 10px 25px;
  62.         font-size: 20px;
  63.         font-weight: 500;
  64.         border: none;
  65.         outline: none;
  66.         background: #fff;
  67.         color: black;
  68.         border-radius: 5px;
  69.         cursor: pointer;
  70.     }
  72.     .drag-area img {
  73.         height: 100%;
  74.         /* width: 100%; */
  75.         object-fit: cover;
  76.         border-radius: 5px;
  77.     }
  79.     .btn-black {
  80.         background-color: black !important;
  81.         color: white !important;
  82.     }
  84.     .btn-black:hover {
  85.         background-color: black !important;
  86.         color: white !important;
  87.     }
  88. </style>
  90. <div class="modal fade" id="modal-gallery" tabindex="-1" aria-labelledby="previewRecapModalLabel" aria-hidden="true">
  91.     <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
  92.         <div class="modal-content">
  93.             <div class="modal-header">
  94.                 <h5 class="modal-title" id="previewRecapModalLabel">Banque d'images</h5>
  95.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  96.             </div>
  98.             <div class="modal-body" style="max-height: 48rem;">
  99.                 <div class="container-fluid">
  100.                     <div class="">
  102.                         <ul class="nav nav-tabs justify-content-end">
  103.                             <li class="nav-item">
  104.                                 <button type="button" class="nav-link active" id="select-image" data-bs-toggle="tab" data-bs-target="#select-image-pane" type="button" role="tab" aria-controls="select-image-pane" aria-selected="true">Sélectionnez une image</button>
  105.                             </li>
  106.                             <li class="nav-item">
  107.                                 <button type="button" class="nav-link" id="upload-image" data-bs-toggle="tab" data-bs-target="#upload-image-pane" type="button" role="tab" aria-controls="upload-image-pane" aria-selected="false">Télécharger une nouvelle image</button>
  108.                             </li>
  109.                         </ul>
  111.                         <div class="tab-content" id="myTabContent">
  113.                             <div
  114.                                 class="tab-pane fade py-3" id="upload-image-pane" role="tabpanel" aria-labelledby="upload-image" tabindex="0">
  116.                                 {# Upload image #}
  118.                                 <div class="modal-body mbody" id="dragArea">
  119.                                     <div class="drag-area">
  120.                                         <div class="icon">
  121.                                             <i class="fas fa-cloud-upload-alt"></i>
  122.                                         </div>
  123.                                         <header>Drag & Drop pour télécharger le fichier</header>
  124.                                         <span>OU</span>
  125.                                         <button type="button">Parcourir le Fichier</button>
  126.                                         <input type="file" name="fileToUpload" id="fileToUpload" accept="application/json" hidden>
  127.                                     </div>
  128.                                 </div>
  130.                                 <div class="modal-image-body d-none" id="dropImageArea">
  132.                                     <div id="uploadedimgdisplay" class="h-75"><img src="" id="imageToUpload"></div>
  134.                                     <div class="modal-footer justify-content-center w-100 mt-3" id="uploadbtns">
  135.                                         <button type="button" class="btn btn-light text-black" onclick="resetuploadvalues()">
  136.                                             Reset</button>
  137.                                         <button type="button" class="btn btn-black" onclick="setuploadimgvalue()" data-bs-dismiss="modal">Valider</button>
  138.                                     </div>
  139.                                 </div>
  142.                             </div>
  144.                             <div
  145.                                 class="tab-pane fade  show active py-3" id="select-image-pane" role="tabpanel" aria-labelledby="select-image" tabindex="0">
  147.                                 {# links paths #}
  148.                                 <div id="dirPathNiveauIndicator"></div>
  150.                                 {# content images #}
  151.                                 <div class="tab-content mb-2">
  152.                                     <div class="" id="valdircontent"></div>
  153.                                 </div>
  154.                             </div>
  155.                         </div>
  156.                     </div>
  157.                 </div>
  158.             </div>
  161.             <div
  162.                 class="modal-footer">
  163.                 {# <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> #}
  164.                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Terminer</button>
  165.             </div>
  167.         </div>
  168.     </div>
  169. </div>