Removed unused CSS and optimize responsive layout

Removed unnecessary/unused CSS classes in our styles.css which was causing performance issue. Updated templates to adopt grid layout for more efficient and easy arrangement of documents in CSS. This is accompanied by enhancing responsiveness at different breakpoints. This optimizes webpage loading speed and improve user experience for devices with different screen sizes.

Cuentas/templates/alumni.html

@@ -7,43 +7,40 @@
 {% endblock %}
 
 {% block content %}
-    <div class="grid h-full grid-cols-12 grid-rows-6 font-primary">
-
-    {% include 'components/header.html' with header_title='Alumnes' %}
+    <div class="grid h-full grid-cols-12 font-primary">
+        <div class="col-span-1">
+            {% include 'components/sidebar.html' %}
+        </div>
+        <div class="col-start-2 col-span-full">
+            {% include 'components/header.html' with header_title='Alumnes' %}
+        </div>
 
-    <div class="container col-start-1 col-end-2 row-span-full my-1">
-        {% include 'components/sidebar.html' %}
-    </div>
 
-    <div id="content"
-         class="col-start-2 col-span-full row-start-1 mt-20 mr-8 row-span-full
-             items-start grid grid-rows-2 gap-3 h-full">
+        <div id="content"
+             class="col-start-2 col-span-full
+             items-start grid grid-rows-2 gap-3 pr-2">
 
-        <div id="tercero" class="relative row-start-1 flex flex-row border-4 p-1 border-bauyellow">
-            <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center bg-bauyellow">
+            <div id="tercero" class="relative row-span-1 flex flex-row border-4 p-1 border-bauyellow">
+                <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center bg-bauyellow">
                  <span class="flex h-full w-full items-center justify-center self-center text-center">
                     TERCERO
                 </span>
+                </div>
+                <div class="ml-24">
+                    {% include 'components/user_list.html' with users=users|filter_by_year:"3" %}
+                </div>
             </div>
-            <div class="ml-24">
-                {% include 'components/user_list.html' with users=users|filter_by_year:"3" %}
-            </div>
-        </div>
 
-        <div id="cuarto" class="relative row-start-2 flex flex-row border-4 p-1 border-baublue">
-            <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center text-zinc-50 bg-baublue">
+            <div id="cuarto" class="relative row-span-1 flex flex-row border-4 p-1 border-baublue">
+                <div class="absolute inset-0 left-0 mr-12 flex h-full w-24 items-center justify-center text-zinc-50 bg-baublue">
                 <span class="flex h-full w-full items-center justify-center self-center text-center">
                     CUARTO
                 </span>
+                </div>
+                <div class="ml-24">
+                    {% include 'components/user_list.html' with users=users|filter_by_year:"4" %}
+                </div>
             </div>
-            <div class="ml-24">
-                {% include 'components/user_list.html' with users=users|filter_by_year:"4" %}
-            </div>
-        </div>
 
-    </div>
-{% endblock content %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
-{% endblock %}
+        </div>
+{% endblock content %}

Cuentas/templates/components/header.html

@@ -1,4 +1,4 @@
-<div class="-z-10 col-span-full col-start-2 row-start-1 -ml-12 px-8">
+<div class="-z-10 col-span-full col-start-2 row-span-1 -ml-2 mr-2">
     <div class="h-12 w-full">
         <div id="header" class="items-center justify-center border-2 text-center border-baublack py-1.5 font-primary">
             <span class="text-center text-xl font-bold text-baublack">{{ header_title }}</span>

Cuentas/templates/components/user_card.html

@@ -3,27 +3,21 @@
 <a href="{% url 'Cuentas:user_detail' user.pk %}">
     {% if user.role == 'A' %}
         {% if user.studentprofile.year == '4' %}
-            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baublue hover:rounded-lg">
+            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baublue hover:rounded-lg aspect-[1/1]">
                 {% elif user.studentprofile.year == '3' %}
-            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-bauyellow hover:rounded-lg">
+            <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-bauyellow hover:rounded-lg aspect-[1/1]">
         {% endif %}
     {% else %}
-        <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baured hover:rounded-lg">
+        <li class="my-1 self-center border-4 bg-zinc-100 bg-opacity-30 p-2 text-center transition-all duration-200 border-baublack hover:border-baured hover:rounded-lg aspect-[1/1]">
     {% endif %}
 
-    <div class="relative flex h-full w-full flex-col items-center justify-center px-1 text-center pt-1.5">
+    <div class="relative flex h-full w-full flex-col items-center justify-center px-1 text-center pt-1.5 pb-2">
         <span>{{ user.first_name }} <b>{{ user.last_name }}</b></span>
         <hr>
         {% thumbnail user.avatar "200x200" crop="center" as im %}
-            <img class="self-center" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
+            <img class="self-center aspect-[1/1] p-1" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                  alt="{{ user.first_name }} avatar">
         {% endthumbnail %}
     </div>
-    <div class="flex flex-col">
-        {#<span>{{ user.email }}</span>#}
-        {#            <span>{{ user.pronouns }}</span>#}
-        <span>{{ user.studentprofile.get_year_display }}</span>
-        {#<span>{{ user.get_role_display }}</span>#}
-    </div>
     </li>
 </a>

Cuentas/templates/profesores.html

@@ -7,24 +7,20 @@
 {% endblock %}
 
 {% block content %}
-    <div class="grid h-full grid-cols-12 grid-rows-6 font-primary">
-        <div class="container col-start-1 col-end-2 row-span-full my-1">
+    <div class="grid h-full grid-cols-12 font-primary">
+        <div class="col-span-1">
             {% include 'components/sidebar.html' %}
         </div>
-
-
-        {% include 'components/header.html' with header_title='Profesores' %}
+        <div class="col-start-2 col-span-full">
+            {% include 'components/header.html' with header_title='Profesores' %}
+        </div>
 
 
         <div id="content"
-             class="col-start-2 col-span-full row-start-1 mt-20 mr-8 row-span-full
-             items-start grid grid-rows-2 gap-3 h-full">
+             class="col-start-2 col-span-full
+             items-start grid grid-rows-2 gap-3 pr-2">
             <!-- Teachers -->
             {% include 'components/user_list.html' with users=users|filter_by_role:"P" title="Profesores" %}
         </div>
     </div>
-{% endblock content %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
-{% endblock %}
+{% endblock content %}

Fichas/templates/components/ficha-list-card.html

@@ -2,7 +2,7 @@
 <div @mouseover="showInfo{{ forloop.counter0 }} = true"
      @mouseleave="showInfo{{ forloop.counter0 }} = false"
      @click="window.location.href = '{% url 'Fichas:ficha-detail' ficha.student.user.id ficha.assignment.id %}'"
-     class="relative h-64 w-64 cursor-pointer p-4 text-center ring-2 ring-baublack"
+     class="relative cursor-pointer p-2 text-center ring-2 ring-baublack col-span-1 row-span-1 aspect-[1/1]"
      id="card">
     <div id="card-content">
         <span class="inset-0 z-10 block h-full w-full cursor-pointer truncate font-semibold bg-bauyellow font-primary hover:text-baublue">{{ ficha.title }}</span>

Fichas/templates/ficha_list.html

@@ -2,19 +2,17 @@
 {% load static %}
 {% block title %}<title>Fichas</title>{% endblock %}
 {% block content %}
-    <div id="page" class="grid h-48 grid-flow-row-dense grid-cols-12 grid-rows-6">
-        <div class="z-30 col-start-1 col-end-2 row-span-full my-1">
+    <div id="page" class="grid grid-cols-12">
+        <div class="col-span-1 row-span-full my-1">
             {% include 'components/sidebar.html' %}
         </div>
         {% if request.resolver_match.view_name == 'my-fichas' %}
             {% include 'components/header.html' with header_title=request.user.first_name %}
         {% else %}
             {% include 'components/header.html' with header_title='Fichas' %}
         {% endif %}
-
-
         <div id="content"
-             class="col-start-2 col-end-12 row-start-1 my-1 mt-12 flex grid-flow-row-dense auto-rows-auto flex-row flex-wrap place-content-start items-center justify-evenly gap-2 p-4"
+             class="col-start-2 col-span-full grid-flow-row-dense grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 mr-4"
              x-data="{
                  {% for e in fichas %}
                      showInfo{{ forloop.counter0 }}: false,
@@ -25,8 +23,4 @@
             {% endfor %}
         </div>
     </div>
-{% endblock %}
-
-{% block footer %}
-    {% include 'components/footer.html' %}
 {% endblock %}

templates/components/login_modal.html

@@ -4,12 +4,15 @@
 {% block content %}
     <div class="grid grid-cols-3 fixed inset-0 items-center justify-center bg-black bg-opacity-20">
 
-        <div class="container mx-auto justify-items-center rounded-t-xl text-zinc-50 bg-bg-bau accent-baublack col-start-2 col-span-1 w-1/2 h-1/3 drop-shadow-lg"
+        <div class="container mx-auto justify-items-center rounded-t-xl text-zinc-50 bg-bg-bau accent-baublack col-start-2 col-span-1 w-1/2 h-fit drop-shadow-lg -mt-16"
              @click.outside="login_modal = false">
             <form method="post" class="grid grid-cols-3 text-baublack gap-2 place-items-center">
-                <div class="row-start-1 row-span-1 bg-baured col-span-full border-baublack border-b-2 mb-6 rounded-t-xl w-full h-12 flex justify-center items-center -mt-1">
+                <div class="row-start-1 row-span-1 bg-baured col-span-full border-baublack border-b-2 rounded-t-xl w-full h-12 flex justify-center items-center -mt-1">
                     <span class="text-xl font-primary font-bold text-white">Inicia Sesion</span>
                 </div>
+                <div class="row-span-1 col-span-full my-3 w-full h-12 flex justify-center items-center">
+                    <span class="text-3xl font-primary font-bold text-baublack">FPP</span>
+                </div>
                 {% csrf_token %}
                 {% for field in form %}
                     <div class="px-12 row-span-1 col-span-full">
@@ -24,7 +27,7 @@
                 <button type="submit" value="Login"
                         x-data="{t : '>'}"
                         x-text="t"
-                        class="col-span-full row-span-1 mt-6 py-1 px-4 rounded-full text-white font-primary bg-baublue hover:bg-baured hover:text-white transition duration-300 ease-in-out"
+                        class="col-span-full row-span-1 my-6 py-1 px-4 rounded-full text-white font-primary bg-baublue hover:bg-baured hover:text-white transition duration-300 ease-in-out"
                         x-on:submit="login_modal=false"
                         @click="t = ':-)'"
                         x-transition.duration-500>

templates/landing.html

@@ -21,7 +21,7 @@
                 <span class="absolute inset-x-0 bottom-0 justify-self-end pb-3">No has iniciado sesión</span>
             </div>
             <div class="container mx-auto my-auto flex basis-3/4 flex-col gap-12 border-t-4 text-center border-baublack">
-                <a class="mx-auto mt-12 rounded-full px-4 py-2 text-white transition-all bg-baublue font-primary hover:ring-baublack hover:ring-2"
+                <a class="cursor-pointer mx-auto mt-12 rounded-full px-4 py-2 text-white transition-all bg-baublue font-primary hover:ring-baublack hover:ring-2"
                    hx-get="{% url 'lmodal' %}"
                    hx-trigger="click"
                    hx-target="#loginmodal"