From 0a542a01d7cb95ab4dd6f0b71e87dc6af6fe8aea Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Thu, 16 Oct 2025 19:03:29 +0530
Subject: [PATCH] [UPDT] PROJECT: Added styles for v2 and formated the page

---
 project/templates/cbv/projects/projects.html | 261 +++++++++++--------
 1 file changed, 149 insertions(+), 112 deletions(-)

diff --git a/project/templates/cbv/projects/projects.html b/project/templates/cbv/projects/projects.html
index 60beaa810..ed0476aa2 100644
--- a/project/templates/cbv/projects/projects.html
+++ b/project/templates/cbv/projects/projects.html
@@ -1,73 +1,95 @@
 {% extends "index.html" %}
-{% load i18n %}{% load static %}
-
+{% load i18n static %}
 
 {% block content %}
 <style>
-  .expired--dot{
-    background-color:gray;
-  }
-  .cancelled--dot{
-    background-color:red;
-  }
-  .on-hold--dot{
-    background-color:orange;
-  }
-  .completed--dot{
-    background-color:yellowgreen;
-  }
-  .in-progress--dot{
-    background-color: rgb(103, 171, 238);
-  }
-  .new--dot{
-    background-color: cyan;
-  }
-  .status-completed{
-    border-left: 3.4px solid yellowgreen !important;
-    border-radius: 4px 0 0 4px;
+    .expired--dot{
+        background-color:gray;
+    }
+    .cancelled--dot{
+        background-color:red;
+    }
+    .on-hold--dot{
+        background-color:orange;
+    }
+    .completed--dot{
+        background-color:yellowgreen;
+    }
+    .in-progress--dot{
+        background-color: rgb(103, 171, 238);
+    }
+    .new--dot{
+        background-color: cyan;
+    }
+    .status-completed{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
 
-  }
-  .status-cancelled {
+    }
+    .status-cancelled {
 
-    border-left: 3.4px solid red !important;
-    border-radius: 4px 0 0 4px;
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
 
-  }
-  .status-expired {
+    }
+    .status-expired {
 
-    border-left: 3.4px solid gray !important;
-    border-radius: 4px 0 0 4px;
+        border-left: 3.4px solid gray !important;
+        border-radius: 4px 0 0 4px;
 
-  }
-  .status-on_hold {
+    }
+    .status-on_hold {
 
-    border-left: 3.4px solid orange !important;
-    border-radius: 4px 0 0 4px;
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
 
-  }
-  .status-in_progress {
+    }
+    .status-in_progress {
 
-    border-left: 3.4px solid rgb(103, 171, 238); !important;
-    border-radius: 4px 0 0 4px;
+        border-left: 3.4px solid rgb(103, 171, 238); !important;
+        border-radius: 4px 0 0 4px;
 
-  }
-  .status-new {
+    }
+    .status-new {
 
-    border-left: 3.4px solid cyan !important;
-    border-radius: 4px 0 0 4px;
+        border-left: 3.4px solid cyan !important;
+        border-radius: 4px 0 0 4px;
 
-  }
+    }
+    .oh-badge {
+        display: inline-block;
+        padding: 0.25rem;
+        text-align: center;
+    }
+    .oh-badge--small {
+        margin-top: 0px !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        display: flex !important;
+        font-size: 0.7rem !important;
+        align-items: center !important;
+        width: fit-content;
+        justify-content: center !important;
+        padding: 0.1rem 0.5rem;
+        height: fit-content;
+        border-radius: 30px;
+    }
+
+    .oh-badge--round {
+        display: flex;
+        justify-content: center;
+    }
+
+    .oh-badge--secondary {
+        background-color: hsl(8, 77%, 56%);
+        color: hsl(0, 0%, 100%);
+    }
 </style>
-<meta name="csrf-token" content="{{ csrf_token }}">
-
-
-
- <div hx-get="{% url 'project-nav-view' %}?{{request.GET.urlencode}}" hx-trigger="load">
-</div>
-
-
-{% include "generic/components.html" %}
 
+<div
+    hx-get="{% url 'project-nav-view' %}?{{request.GET.urlencode}}"
+    hx-trigger="load"
+></div>
 
 <div
     class="oh-checkpoint-badge mb-2"
@@ -75,75 +97,90 @@
     data-ids="[]"
     data-clicked=""
     style="display: none"
-  ></div>
+></div>
 
-
-  <div
-  class="oh-wrapper"
-  id="listContainer">
-  <div class="animated-background">
-  </div>
+<div class="oh-wrapper" id="listContainer">
+    <div class="animated-background"></div>
 </div>
 
 <div
-  class="oh-modal"
-  id="projectImport"
-  role="dialog"
-  aria-labelledby="projectImport"
-  aria-hidden="true"
-  >
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <h2 class="oh-modal__dialog-title" id="projectImportLavel">
-        {% trans "Import Project" %}
-      </h2>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-      <div class="oh-modal__dialog-body p-0 pt-2" id="projectImportModalBody">
-        <form
+    class="oh-modal"
+    id="projectImport"
+    role="dialog"
+    aria-labelledby="projectImport"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="projectImportLavel">
+                {% trans "Import Project" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div
+                class="oh-modal__dialog-body p-0 pt-2"
+                id="projectImportModalBody"
+            >
+                <form id="projectImportForm" enctype="multipart/form-data">
+                    <div id="loading" style="display: none">
+                        <div id="progress">
+                            <div
+                                class="progress-bar"
+                                role="progressbar"
+                                style="width: 0%"
+                                aria-valuenow="0"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                            ></div>
+                        </div>
+                        <p id="progress-text">{% trans "Uploading..." %}</p>
+                    </div>
 
-          id="projectImportForm"
-          enctype="multipart/form-data"
-        >
-        <div id="loading" style="display: none;">
-          <div id="progress">
-            <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <p id="progress-text">{% trans "Uploading..." %}</p>
+                    <div id="error-container" style="color: red"></div>
+
+                    <div class="modal-body">
+                        {% csrf_token %}
+
+                        <div class="oh-dropdown__import-form">
+                            <label
+                                class="oh-dropdown__import-label"
+                                for="uploadFile"
+                            >
+                                <ion-icon
+                                    name="cloud-upload"
+                                    class="oh-dropdown__import-form-icon md hydrated"
+                                    role="img"
+                                    aria-label="cloud upload"
+                                ></ion-icon>
+                                <span class="oh-dropdown__import-form-title"
+                                    >{% trans "Upload a File" %}</span
+                                >
+                                <span class="oh-dropdown__import-form-text"
+                                    >{% trans "Drag and drop files here" %}</span
+                                >
+                            </label>
+                            <input
+                                type="file"
+                                name="file"
+                                id="projectImportFile"
+                            />
+                        </div>
+                    </div>
+                    <div class="modal-footer d-flex flex-row-reverse">
+                        <input
+                            type="submit"
+                            class="oh-btn oh-btn--secondary"
+                            value="{% trans 'Upload' %}"
+                        />
+                    </div>
+                </form>
+            </div>
         </div>
-
-        <div id="error-container" style='color:red;'></div>
-
-          <div class="modal-body">
-
-            {% csrf_token %}
-
-            <div class="oh-dropdown__import-form">
-              <label class="oh-dropdown__import-label" for="uploadFile">
-                  <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon md hydrated" role="img" aria-label="cloud upload"></ion-icon>
-                  <span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
-                  <span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
-              </label>
-              <input type="file" name="file" id="projectImportFile" />
-          </div>
-          </div>
-          <div class="modal-footer d-flex flex-row-reverse">
-            <input
-              type="submit"
-              class="oh-btn oh-btn--secondary"
-              value='{% trans "Upload" %}'
-            />
-          </div>
-        </form>
-      </div>
     </div>
-  </div>
 </div>
 <script src="{% static 'cbv/deleteFunc.js' %}"></script>
 <script src="{% static '/project/import.js' %}"></script>
 <script src="{% static '/project/project_action.js' %}"></script>
 
-
-
 {% endblock %}