From e4f4a779892e6b976381622939807762825ff8cf Mon Sep 17 00:00:00 2001
From: zahiramanzur <zahiimanzur@gmail.com>
Date: Thu, 17 May 2018 10:40:46 -0300
Subject: [PATCH] Custom cover

---
 banner/templates/event_list.html | 49 ++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/banner/templates/event_list.html b/banner/templates/event_list.html
index 6d0d2e6..4cd110c 100644
--- a/banner/templates/event_list.html
+++ b/banner/templates/event_list.html
@@ -21,7 +21,6 @@ <h2>Editar banner</h2>
         {% endif %}
       </div>
     </div>
-
   </div>
   <div class="create-banner-body">
     <div class="container">
@@ -34,23 +33,33 @@ <h2>Editar banner</h2>
             </div>
           {% endif %}
           <div class="row">
-            <div class="section-title">
+            <div class="col col-md-7 section-title">
               <h2>Información del banner</h2>
               <p>Ingresa aquí la información correspondiente para que luego
               puedas identificar este banner y su contenido.</p>
+
+                {% for field in form %}
+                        {% bootstrap_field field %}
+                {% endfor %}
             </div>
-          {% for field in form %}
-              <div class="col-md-12">
-                  {% bootstrap_field field %}
-              </div>
-          {% endfor %}
-          </tr>
-      </div>
+                </tr>
+                <div class="col col-md-5" style="padding-top: 22px">
+                  <div class="section-custom-cover-page" style="margin-left: 75px">
+                    <h2>Portada para el banner</h2>
+                    <p>En esta sección puedes seleccionar una portada para tu banner.</p>
+
+                    <form action="/action_page.php" class="formPreviewImage">
+                      <input type="file" onchange="readURL(this);" name="pic" accept="image/*">
+                      <img class="imagePreview" src="http://placehold.it/180" alt="your image" style="max-width:180px;" />
+                    </form>
+                  </div>
+                </div>
+          </div>
       {{ formset.management_form }}
       {{ formset.media }}
       <div class="row">
           <div class="row" style="margin-top: 40px;">
-            <div class="col-md-7">
+            <div class="col col-md-7">
             <div class="section-title" style="width:500px">
               <h2>Seleccionar eventos</h2>
               <p>Selecciona los eventos que quieres que aparezcan cuando el banner esté
@@ -58,7 +67,7 @@ <h2>Seleccionar eventos</h2>
                  <input class="form-control js-input-search" id="InputSearch" type="text" placeholder="Buscar" aria-label="Search" >
             </div>
           </div>
-          <div class="col-md-5">
+          <div class="col col-md-5">
             <div class="section-title">
               <h2 style="margin-left:65px">Buscar eventos</h2>
               <p style="margin-left:65px">Busca eventos de otros organizadores a traves de Eventbrite</p>
@@ -139,6 +148,8 @@ <h4 style="padding-top: 4px" >Descripción</h4>
         {% endif %}
       </div>
   </div>
+
+
 </form>
 {% endif %}
 
@@ -205,10 +216,24 @@ <h4 style="padding-top: 4px" >Descripción</h4>
 </script>
 <script>
   $(document).ready(function() {
-    debugger
     $(document).on('click', '.evb_id_input', function(e) {
       document.getElementsByClassName("error_label")[0].classList.add('d-none')
     })
   })
 </script>
+<script>
+  function readURL(input) {
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function (e) {
+                    $('.imagePreview')
+                        .attr('src', e.target.result);
+                };
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+</script>
+
 {% endblock %}