#1 Cambios en diseño y correcciones menores

public/frontend/css/style.css

@@ -862,6 +862,7 @@ header.masthead-kushki {
 }
 
 /* Mensaje de alertas */
+.alert{background-color: white !important;}
 .alert-ok {
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 1.1em;
@@ -869,7 +870,7 @@ header.masthead-kushki {
   padding: 20px;
   overflow:hidden;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  /* background-color:#8dc081; /* Verde */
+  background-color: white !important; /* Verde */
   color: red;
   margin-bottom: 15px;
 }

templates/frontend/base.html.twig

@@ -5,10 +5,10 @@
 
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <meta name="description" content="">
-        <meta name="author" content="">
+        <meta name="description" content="Sitio UMusic. Suscribete a listas de música">
+        <meta name="author" content="Gearlabs SpA">
 
-        <title>Compra Mùsica</title>
+        <title>UMusic</title>
 
         <!-- Bootstrap core CSS -->
 
@@ -36,7 +36,8 @@
 <!-- Footer -->
 <footer class="py-5 bg-black">
     <div class="container">
-        <p class="m-0 text-center text-white small">Copyright &copy; Universal Music Entertaiment Todos los derechos reservados Gearlabs {{ "now"|date('Y') }}</p>
+        <p class="m-0 text-center text-white small">Copyright &copy; Gearlabs SpA. </p>
+        <p>Todos los derechos reservados {{ "now"|date('Y') }}</p>
     </div>
     <!-- /.container -->
 </footer>

templates/frontend/paginas/listado.html.twig

-{% extends 'frontend/base.html.twig' %}
-{% block title %}Mi Cuenta{% endblock %}
-{% block stylesheets %}
-    <link href="{{ asset('frontend/NewDataTables/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
-    <link href="{{ asset('frontend/NewDataTables/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
-{% endblock %}
-{% block body %}
-    <header class="masthead-rock-listado text-center text-white">
-
-
-    <div class="container">
-
-
-      <!-- Actual search box -->
-      <!-- <div class="form-group has-search">
-        <span class="form-control-feedback"><img src="img/destacados/lupa-busqueda.svg" width="28" class="mr-3 img-fluid" alt="..."></span>
-        <input type="text" class="buscador-top form-control" placeholder="Busca por artista, álbum o canción">
-      </div>
-    </div> -->
-
-    <!-- header con mensaje -->
-
-    <div class="container subheader-info">
-      <div class="row">
-          <div class="col-12">
-            <p class="titulo-genero">
-            {{ lista.lisNombre }}
-          </p>
-          </div>
-
-          <div class="rock-listado-container">
-            Descarga tu canción por $0
-          </div>
-
-        </div>
-      </div>
-
-    <!-- cierre con mensaje -->
-
-    <div class="masthead-content">
-
-
-
-
-
-    <div class="row borde-superior borde-inferior pt 10">
-
-
-      <!-- audio player listado (oculto) -->
-
-      <!-- Script Music Player -->
-      <script type="text/javascript" src="js/script-musicPlayer.js"></script>
-
-
-     <table class="table table-striped discos-destacados-top">
-
-       <tbody>
-       {% set i = 1 %}
-       {% for cancion in cancionesLista %}
-         <tr data-href="#">
-           <th scope="col" class="fila-class-top"><img src="http://newbackendcontenidos.gearlabs.cl/{{cancion.getCanPathImagenAlbum()}}" width="80px" height="80px"></th>
-           <td scope="col" class="fila-class-top">
-             <h5 class="dest-top">{{ "%02d"|format(i) }}&nbsp;{{cancion.getIdOriginal().getCon().getConNombre()}}</h5>
-            <span class="disco-top">{{cancion.getIdOriginal().getCon().getAlb().getAlbNombre()}}</span>
-          </td>
-       <!--    <td class="flecha"><a href="{{ path('mostrar_reproductor', { 'lisId': lista.lisId }) }}" target="_blank"><img src="../../frontend/img/destacados/icono-play.svg" width="28" class="mr-3 img-fluid" alt="..."> </img></td> -->
-         </tr>   
-         {% set i = i + 1 %}      
-         {% endfor %} 
-       </tbody>
-     </table>
-    </div>
-
-
-</div>
-  </header>
-    
-{% endblock %}
+{% extends 'frontend/base.html.twig' %}
+{% block title %}Mi Cuenta{% endblock %}
+{% block stylesheets %}
+    <link href="{{ asset('frontend/NewDataTables/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
+    <link href="{{ asset('frontend/NewDataTables/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
+{% endblock %}
+{% block body %}
+    <header class="masthead-rock-listado text-center text-white">
+
+
+        <div class="container">
+
+
+            <!-- Actual search box -->
+            <!-- <div class="form-group has-search">
+              <span class="form-control-feedback"><img src="img/destacados/lupa-busqueda.svg" width="28" class="mr-3 img-fluid" alt="..."></span>
+              <input type="text" class="buscador-top form-control" placeholder="Busca por artista, álbum o canción">
+            </div>
+          </div> -->
+
+            <!-- header con mensaje -->
+
+            <div class="container subheader-info">
+                <div class="row">
+                    <div class="col-12">
+                        <p class="titulo-genero">
+                            {{ lista.lisNombre }}
+                        </p>
+                    </div>
+
+                    <div class="rock-listado-container">
+                        Canciones que podrás escuchar gratis con tu suscripción.
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- cierre con mensaje -->
+
+            <div class="masthead-content">
+
+
+
+
+
+                <div class="row borde-superior borde-inferior pt 10">
+
+
+                    <!-- audio player listado (oculto) -->
+
+                    <!-- Script Music Player -->
+                    <script type="text/javascript" src="js/script-musicPlayer.js"></script>
+
+
+                    <table class="table table-striped discos-destacados-top">
+
+                        <tbody>
+                            {% set i = 1 %}
+                            {% for cancion in cancionesLista %}
+                                <tr data-href="#">
+                                    <th scope="col" class="fila-class-top"><img src="http://newbackendcontenidos.gearlabs.cl/{{cancion.getCanPathImagenAlbum()}}" width="80px" height="80px"></th>
+                                    <td scope="col" class="fila-class-top">
+                                        <h5 class="dest-top">{{ "%02d"|format(i) }}&nbsp;{{cancion.getIdOriginal().getCon().getConNombre()}}</h5>
+                                        <span class="disco-top">{{cancion.getIdOriginal().getCon().getAlb().getAlbNombre()}}</span>
+                                    </td>
+                                    {#<!--    <td class="flecha"><a href="{{ path('mostrar_reproductor', { 'lisId': lista.lisId }) }}" target="_blank"><img src="../../frontend/img/destacados/icono-play.svg" width="28" class="mr-3 img-fluid" alt="..."> </img></td> -->}#}
+                                </tr>   
+                                {% set i = i + 1 %}      
+                            {% endfor %} 
+                        </tbody>
+                    </table>
+                </div>
+
+
+            </div>
+    </header>
+
+{% endblock %}

templates/frontend/paginas/mi_cuenta.html.twig

@@ -32,11 +32,40 @@
                             </nav>
 
                             {% if app.request.get('error') %}
-                                <div class="alert alert-danger"> {{ app.request.get('error') }} </div>
+
+                                <!-- alertas -->
+                                <div class="alert">
+                                    <div class="row">
+                                        <div class="col-2">
+                                            <img class="icon-one" width="40"  src="{{asset('frontend/alert/alerta-icon.svg')}}" alt=""/>
+                                        </div>
+                                        <div class="col-8">
+                                            <p class="txt-alerta">{{ app.request.get('error') }}</p>
+                                        </div>
+                                        <div class="col-1">
+                                            {#<span class="closebtn-ok" onclick="this.parentElement.parentElement.style.display = 'none';">&times;</span>#}
+                                        </div>
+                                    </div>
+                                </div>
+                                <br> 
                             {% endif %}
 
                             {% if app.request.get('success') %}
-                                <div class="alert alert-success"> {{ app.request.get('success') }} </div>
+                                <!-- alertas -->
+                                <div class="alert-ok">
+                                    <div class="row">
+                                        <div class="col-2">
+                                            <img class="icon-one" width="40"  src="{{asset('frontend/alert/payment-icon.svg')}}" alt=""/>
+                                        </div>
+                                        <div class="col-8">
+                                            <p class="txt-alerta">{{ app.request.get('success') }} </p>
+                                        </div>
+                                        <div class="col-1">
+                                            {#<span class="closebtn-ok" onclick="this.parentElement.parentElement.style.display = 'none';">&times;</span>#}
+                                        </div>
+                                    </div>
+                                </div>
+                                <br>        
                             {% endif %}                 
 
                             <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
@@ -107,9 +136,9 @@
         function modalActualizarDatos(event) {
             event.preventDefault();
             var form = $("#modalDatosUsuario")
-            
+
             form.addClass('was-validated');
-            
+
             form.modal('toggle');
             $("#message-container-datos-usuario").html("");
         }
@@ -155,13 +184,25 @@
 
         function errorMessage(msg, container) {
             console.log(msg);
-            var error = '<div class="alert alert-danger" role="alert">' + msg + '</div>';
+            var error = '<div class="alert">\n\
+                            <div class="row">\n\
+                                <div class="col-2">\n\
+                                    <img class="icon-one" width="40"  src="{{asset('frontend/alert/alerta-icon.svg')}}" alt=""/></div>\n\
+                                    <div class="col-8"><p class="txt-alerta">'+msg+'</p>\n\
+                                    </div>\n\
+                                    <div class="col-1"></div></div></div>';
             $(container).html(error);
         }
 
         function successMessage(msg, container) {
             console.log(msg);
-            var success = '<div class="alert alert-success" role="alert">' + msg + '</div>';
+            var success = '<div class="alert-ok">\n\
+                            <div class="row">\n\
+                                <div class="col-2">\n\
+                                    <img class="icon-one" width="40"  src="{{asset('frontend/alert/alerta-icon.svg')}}" alt=""/></div>\n\
+                                    <div class="col-8"><p class="txt-alerta">'+msg+'</p>\n\
+                                    </div>\n\
+                                    <div class="col-1"></div></div></div>';
             $(container).html(success);
         }
     </script>

templates/frontend/paginas/resultado.html.twig

@@ -91,6 +91,7 @@
                                 </div>
                                 <div class="col-8">
                                     <p class="txt-alerta">Puede utilizar el método de pago que se encuentra en la parte inferior, para poder completar la suscripción.</p>
+                                    <p class="txt-alerta">Suscripción $500 semanal con renovación automática.</p>
                                 </div>
                                 <div class="col-1">
                                     {#<span class="closebtn-ok" onclick="this.parentElement.parentElement.style.display = 'none';">&times;</span>#}