Refactor event template styles for improved layout and responsiveness; remove unused Masonry script.

django_app/core/shell.py

@@ -37,9 +37,7 @@ def build_sidebar(app_code: str, request: HttpRequest):
     current_path = request.path
     if app_code == "account":
         items = [
-            {"href": "/login/?reload_user=1", "label": "Recargar cuenta"},
             {"href": "/logout/", "label": "Cerrar sesion"},
-            {"href": "/login/?logout=1", "label": "Limpiar sesion"},
         ]
     elif app_code == "aulatek":
         items = [

django_app/templates/club/event.html

@@ -1,18 +1,24 @@
 {% extends 'core/base.html' %}
 
 {% block page_css %}
+  #club-event-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 12px;
+    align-items: start;
+  }
+
   .club-event-grid-item {
-    width: 240px;
-    display: inline-block;
-    margin-bottom: 10px;
+    width: 100%;
     border: 3px solid black;
     border-radius: 6.5px;
-    box-sizing: content-box;
+    box-sizing: border-box;
     background: white;
     overflow: hidden;
   }
+
   .club-event-grid-item img {
-    width: 240px;
+    width: 100%;
     height: auto;
     object-fit: contain;
     background: #fff;
@@ -52,17 +58,3 @@
     </div>
   </div>
 {% endblock %}
-
-{% block extra_scripts %}
-  <script>
-    if (typeof Masonry !== 'undefined' && document.getElementById('club-event-grid')) {
-      const msnry = new Masonry('#club-event-grid', {
-        columnWidth: 240,
-        itemSelector: '.club-event-grid-item',
-        gutter: 10,
-        transitionDuration: 0
-      });
-      setInterval(function() { msnry.layout(); }, 1000);
-    }
-  </script>
-{% endblock %}