Mejora en el aspecto del detalle de la noticia

JugarAlPadel/gestion_reservas/templates/detalle_noticia.html

@@ -2,13 +2,15 @@
 
 {% block content %}
     <div class="container-xl">
-        <div class="app-card-body p-3 p-lg-4">
-            <h2>{{ noticia.titulo }}</h2>
-            <div class="row gx-5 gy-3">
-                <p>{{ noticia.contenido }}</p>
-                <p><small>Publicado el {{ noticia.fecha_publicacion|date:"d M Y" }} por {{ noticia.autor }}</small></p>
+        <h1 class="app-page-title">{{ noticia.titulo }}</h1>
+        <div class="app-card shadow-sm mb-4">
+            <div class="app-card-body p-3 p-lg-4">
+                <div class="row gx-5 gy-3">
+                    <p>{{ noticia.contenido }}</p>
+                    <p><small>Publicado el {{ noticia.fecha_publicacion|date:"d M Y" }} por {{ noticia.autor }}</small></p>
+                </div>
             </div>
-            <a class="btn btn-primary" href="{% url 'principal' %}">Volver a noticias</a>
         </div>
+        <a class="btn btn-primary" href="{% url 'principal' %}">Volver a noticias</a>
     </div>
 {% endblock %}

JugarAlPadel/gestion_reservas/templates/index.html

@@ -7,33 +7,51 @@
 {% block content %}
 
 <div class="container-xl">
-			    
-    <h1 class="app-page-title">Introducción</h1>
-
-    <div class="app-card alert alert-dismissible shadow-sm mb-4 border-left-decoration" role="alert">
-        <div class="inner">
-            <div class="app-card-body p-3 p-lg-4">
-                <h3 class="mb-3">¡Bienvenido a Jugar al Pádel entre amigos!</h3>
-                <div class="row gx-5 gy-3">
-                    <h2>Noticias Recientes</h2>
-                    <div class="news-container">
-                        {% for noticia in noticias %}
-                            <div class="news-item">
-                                <h3>{{ noticia.titulo }}</h3>
-                                <p>{{ noticia.contenido|truncatewords:20 }}</p> <!-- Muestra solo 20 palabras del contenido -->
-                                <p><small>Publicado el {{ noticia.fecha_publicacion|date:"d M Y" }} por {{ noticia.autor }}</small></p>
-                                <a href="{% url 'eventos:detalle_noticia' noticia.id %}">Leer más</a>
-                            </div>
-                        {% empty %}
-                            <p>No hay noticias disponibles.</p>
-                        {% endfor %}
-                    </div>
-                </div><!--//row-->
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div><!--//app-card-body-->
-        </div><!--//inner-->
-    </div><!--//app-card-->
+    <div class="position-relative mb-3">
+        <div class="row g-3 justify-content-between">
+            <div class="col-auto">
+                <h1 class="app-page-title">Noticias</h1>
+            </div>
+        </div>
+    </div>
+
+
+                {% for noticia in noticias %}
+    <div class="app-card app-card-notification shadow-sm mb-4">
+        <div class="app-card-header px-4 py-3">
+            <div class="row g-3 align-items-center">
+                <div class="col-12 col-lg-auto text-center text-lg-start">
+                    <img class="profile-image" src="{{ noticia.autor.foto.url}}" alt="">
+                </div><!--//col-->
+
+                <div class="col-12 col-lg-auto text-center text-lg-start">
+                    <!--<div class="notification-type mb-2"><span class="badge bg-info">Project</span></div>-->
+                        <h4 class="notification-title mb-1">{{ noticia.titulo }}</h4>
+
+                        <ul class="notification-meta list-inline mb-0">
+                            <li class="list-inline-item">{{ noticia.fecha_publicacion|date:"d M Y" }}</li>
+                            <li class="list-inline-item">|</li>
+                            <li class="list-inline-item">{{ noticia.autor.nombre }}</li>
+                        </ul>
 
+                </div><!--//col-->
+            </div><!--//row-->
+        </div><!--//app-card-header-->
+
+
+        <div class="app-card-body p-4">
+            <p>{{ noticia.contenido|truncatewords:20 }}</p> <!-- Muestra solo 20 palabras del contenido -->
+        </div><!--//app-card-body-->
+
+        <div class="app-card-footer px-4 py-3">
+            <a class="action-link" href="{% url 'eventos:detalle_noticia' noticia.id %}">Leer más<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+            svg></a>
+        </div><!--//app-card-footer-->
+    </div><!--//app-card-->
+            {% empty %}
+                <p>No hay noticias disponibles.</p>
+            {% endfor %}
 </div><!--//container-fluid-->
 
 {% endblock %}