leads, categories, auth and documents templates mobile friendly update

Nar0kan · Jul 9, 2023 · 55d79be · 55d79be
1 parent ae8282e
commit 55d79be
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 153 deletions.
diff --git a/agents/templates/agents/agent_list.html b/agents/templates/agents/agent_list.html
@@ -4,7 +4,7 @@
 {% block content %}
 <div class="bg-[#FCF1F1] dark:bg-[#474E68] py-8">
     <div class="flex justify-center">
-        <p class="text-4xl md:text-5xl text-black dark:text-white mt-5 text-center text-extrabold">Agents</p>
+        <p class="text-4xl md:text-5xl text-black dark:text-white mt-5 text-center font-extrabold">Agents</p>
     </div>
 
 

diff --git a/templates/assign_agent.html b/templates/assign_agent.html
@@ -2,14 +2,14 @@
 {% load tailwind_filters %}
 
 {% block content %}
-  <h1 class="sm:text-3xl text-2xl font-extrabold mb-1 mt-5 text-center text-black dark:text-white border-b-2 border-gray-200 dark:border-green-200">Assign an agent to this lead</h1>
+  <h1 class="text-3xl font-extrabold mb-1 mt-5 text-center text-black dark:text-white border-b-2 border-gray-200 dark:border-green-200">Assign an agent to this lead</h1>
   <br/>
 
-  <div class="m-0 ml-auto mr-auto mt-2">
+  <div class="m-0 mx-auto mt-2 text-center">
     <form method="post">
       {% csrf_token %}
       {{ form|crispy }}
-      <button type="submit" class="flex mx-auto mt-6 mb-6 text-white bg-green-500 border-0 px-8 focus:outline-none hover:bg-cyan-500 hover:text-black rounded text-lg">Submit</button>
+      <button type="submit" class="flex mx-auto my-4 py-2 text-white bg-green-500 border-0 px-8 focus:outline-none hover:bg-cyan-500 hover:text-black rounded text-lg">Submit</button>
       <br/>
     </form>
   </div>

diff --git a/templates/category_detail.html b/templates/category_detail.html
@@ -4,10 +4,10 @@
 {% block content %}
 <div class="py-12 h-full bg-[#FCF1F1] dark:bg-[#474E68]">
   <div class="flex justify-center mt-5">
-    <p class="text-5xl text-extrabold mr-5 mt-5 text-black dark:text-white">{{ category.name }}</p>
+    <p class="text-3xl font-extrabold mt-5 text-black dark:text-white">{{ category.name }}</p>
   </div>
 
-  <div class="flex ml-5 mt-5 space-x-2 justify-left border-b-2 border-gray-200 dark:border-green-200 pb-2">
+  <div class="flex mt-5 space-x-2 justify-left border-b-2 border-gray-200 dark:border-green-200 pb-2">
     <div class="flex">
       <a  href="{% url 'leads:category-list' %}"><button type="button" class="inline-block px-6 pt-2 mt-6 pb-2 bg-yellow-200 text-black font-medium text-xs leading-normal uppercase rounded shadow-md hover:bg-blue-300 hover:shadow-lg focus:bg-blue-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-300 active:shadow-lg transition duration-150 ease-in-out flex align-center">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3 pb-1">
@@ -22,26 +22,26 @@
   {% if category.lead_cat.all %}
     {% for lead in category.lead_cat.all %}
       <a href="{% url 'leads:lead-detail' lead.pk %}">
-        <li class="flex pb-5 pt-5 ml-5 py-4 first:pt-0 last:pb-0 hover:border-l-2 hover:border-blue-300 mb-3 px-5">
+        <li class="block pb-5 pt-5 ml-5 py-4 first:pt-0 last:pb-0 hover:border-l-2 hover:border-blue-300 mb-3 px-5">
+          <div class="block mx-auto md:inline-block">
             {% if lead.photo %}
-              <img src="{{ lead.photo.url }}" alt="{% static 'images/UserPhoto.jpg' %}" class="h-12 w-12" style="border-radius: 50%;"/>
+              <img src="{{ lead.photo.url }}" alt="{% static 'images/UserPhoto.jpg' %}" class="block mx-auto h-12 w-12" style="border-radius: 50%;"/>
             {% else %}
-              <img src="{% static 'images/UserPhoto.jpg' %}" alt="Photo" class="h-12 w-12" style="border-radius: 50%;"/>
+              <img src="{% static 'images/UserPhoto.jpg' %}" alt="Photo" class="block mx-auto h-12 w-12" style="border-radius: 50%;"/>
             {% endif %}
-
-          <div class="ml-3 overflow-hidden">
-            <p class="text-sm font-medium text-black dark:text-white">
-
-                <h3>{{ lead.first_name }} {{ lead.last_name }}</h3><h5 class="mr-9 text-gray-400"><h5>
-
+          </div>
+
+          <div class="block mx-auto text-center md:text-start md:inline-block mt-3 md:ml-3 overflow-hidden">
+            <p class="text-xl font-medium text-black dark:text-white">
+                <h3 class="text-2xl lg:text-xl break-all">{{ lead.first_name }} {{ lead.last_name }}</h3><h5 class="mr-9 text-gray-400"><h5>
             </p>
-            <p class="text-sm truncate text-black dark:text-white">{{ lead.email }}</p>
+            <p class="text-xl lg:text-xs text-black dark:text-white break-all">{{ lead.email }}</p>
           </div>
         </li>
       </a>
     {% endfor %}
   {% else %}
-    <p class="text-sm font-medium text-black dark:text-white border-0"><h3>No matches</h3><h5 class="mr-9 text-gray-400"><h5></p>
+    <p class="text-black dark:text-white border-0"><h3 class="text-2xl font-semibold">No matches</h3><h5 class="mr-9 text-gray-400"><h5></p>
   {% endif %}
 </div>
 

diff --git a/templates/category_list.html b/templates/category_list.html
@@ -3,9 +3,9 @@
 
 
 {% block content %}
-  <section class="h-full text-gray-500 body-font bg-[#FCF1F1] dark:bg-[#474E68] py-12 px-2">
+  <section class="text-gray-500 body-font bg-[#FCF1F1] dark:bg-[#474E68] py-12 px-2">
     <div class="flex justify-center mb-10 mt-5">
-      <p class="text-5xl text-extrabold mr-5 mt-5 text-black dark:text-white">Categories</p>
+      <p class="text-5xl font-extrabold mr-5 mt-5 text-black dark:text-white">Categories</p>
     </div>
 
     <div class="w-full container py-8 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">

diff --git a/templates/document_delete.html b/templates/document_delete.html
@@ -4,23 +4,28 @@
 {% block content %}
   <div class="my-8 grid grid-cols-8 gap-4 w-full bg-gray-200 border border-gray-200 rounded-lg shadow dark:bg-[#474E68] dark:border-gray-800">
     <label for="agent" class="text-center px-4 py-4 col-span-8 text-black dark:text-white">Are you sure, that you want to delete '{{ document.title }}'?</label>
-    <form method="post" enctype="multipart/form-data" autocomplete="off" class="col-start-4 px-2">
-      {% csrf_token %}
-        {{ form|crispy }}
-        <p>
-          <button type="submit" class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800">
-            <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gray-200 dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
-                DELETE
-            </span>
-          </button>
-        </p>
-    </form>
-    <a href="{% url 'leads:document-detail' document.pk %}" class="col-start-5 px-2">
-      <button type="cancel" class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
-        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
-            CANCEL
-        </span>
-      </button>
-    </a>
+    <div class="col-span-8 md:col-span-4 mx-auto px-2">
+      <form method="post" enctype="multipart/form-data" autocomplete="off" class="col-start-4 px-2">
+        {% csrf_token %}
+          {{ form|crispy }}
+          <p>
+            <button type="submit" class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800">
+              <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gray-200 dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                  DELETE
+              </span>
+            </button>
+          </p>
+      </form>
+    </div>
+
+    <div class="col-span-8 md:col-span-4 mx-auto px-2">
+      <a href="{% url 'leads:document-detail' document.pk %}" class="col-start-5 px-2">
+        <button type="cancel" class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
+          <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+              CANCEL
+          </span>
+        </button>
+      </a>
+    </div>
   </div>
 {% endblock content %}
diff --git a/templates/document_detail.html b/templates/document_detail.html
@@ -3,9 +3,9 @@
 
 {% block content %}
 
-    <div class="py-12 h-full bg-[#FCF1F1] dark:bg-[#474E68] px-2">
-        <div class="flex justify-center">
-            <p class="text-5xl text-extrabold mr-5 text-black dark:text-white">{{ document.title }}</p>
+    <div class="py-12 bg-[#FCF1F1] dark:bg-[#474E68] px-2">
+        <div class="flex justify-center my-2">
+            <p class="text-3xl font-semibold text-black dark:text-white">{{ document.title }}</p>
         </div>
 
         <div class="flex space-x-2 justify-left border-b-2 border-gray-200 dark:border-green-200 pb-4">
@@ -18,39 +18,42 @@
                 </button></a>
             </div>
         </div>
+
+        <div class="flex justify-center w-full text-center md:text-left text-2xl mb-2">
+            <div class="block w-full mx-auto">
+                <p class="my-2 text-2xl"><em class="break-all block">Description:</em>
+                {{ document.description }}</p>
+                <p class="my-2 text-2xl"><em class="break-all block">Secret:</em>
+                {{ document.is_secret }}</p>
+                <a href="{{ document.file.url }}" class="block mx-auto" download>
+                    <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-xl font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800">
+                        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                            Download
+                        </span>
+                    </button>
+                </a>
+            </div>
+        </div>
 
-        <div class="flex mx-auto justify-center">
-            <div class="sm:w-2/3 sm:pl-8 sm:py-8 mt-4 pt-4 sm:mt-0 text-center sm:text-left">
-                <p class="mr-4 leading-relaxed text-lg font-medium mb-2">
-                    <div class="sm:w-2/3 sm:pl-8 ml-2">
-                        <p><em>Description</em>: {{ document.description }}</p><br/>
-                        <p><em>Secret</em>: {{ document.is_secret }}</p><br/>
-                        <a href="{{ document.file.url }}" download>
-                            <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800">
-                                <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
-                                    Download
-                                </span>
-                            </button>
-                        </a>
-                    </div>
-                </p>
-                <p class="flex justify-end mr-4 sm:w-5/6 leading-relaxed text-lg font-medium mb-2">
-                    <a href="{% url 'leads:document-update' document.pk %}">
-                        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800">
-                            <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
-                                Update
-                            </span>
-                        </button>
-                    </a>
-                    <a href="{% url 'leads:document-delete' document.pk %}">
-                        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800">
-                            <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
-                                Delete
-                            </span>
-                        </button>
-                    </a>
-                </p>
+        <div class="block mx-auto w-full my-2">
+            <div class="flex justify-center md:block md:mx-auto md:float-left my-2">
+                <a href="{% url 'leads:document-update' document.pk %}">
+                    <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-xl font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800">
+                        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                            Update
+                        </span>
+                    </button>
+                </a>
+            </div>
 
+            <div class="flex justify-center md:block md:mx-auto md:float-left my-2">
+                <a href="{% url 'leads:document-delete' document.pk %}">
+                    <button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-xl font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800">
+                        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                            Delete
+                        </span>
+                    </button>
+                </a>
             </div>
         </div>
     </div>