Merge pull request #11 from aabboudi/dev

Enhanced user experience
aabboudi · Sep 14, 2024 · d890682 · d890682
2 parents 033db09 + 7e999ac
commit d890682
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 30 deletions.
diff --git a/executive/models.py b/executive/models.py
@@ -9,18 +9,20 @@ class BoardMember(models.Model):
     bio = models.CharField(max_length=100, blank=True, null=True)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
+    linkedin_link = models.URLField(verbose_name="LinkedIn Profile", max_length=200, blank=True, null=True)
 
     def __str__(self):
         return self.name
 
 class Manager(models.Model):
     active = models.BooleanField(default=False)
     name = models.CharField(max_length=100)
-    program = models.ForeignKey(Program, related_name='managers', on_delete=models.CASCADE, null=True)
+    program = models.ForeignKey(Program, related_name='managers', on_delete=models.SET_NULL, null=True)
     avatar = models.ImageField(upload_to='people/', blank=True, default='people/default-avatar.png', help_text='A default avatar is used if left empty.')
     bio = models.CharField(max_length=100, blank=True, null=True)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
+    linkedin_link = models.URLField(verbose_name="LinkedIn Profile", max_length=200, blank=True, null=True)
 
     def __str__(self):
         return self.name
diff --git a/ui/static/css/input.css b/ui/static/css/input.css
@@ -63,4 +63,12 @@ npm run watch:css
       dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600
   }
   /* END CONTACT PAGE */
+
+  /* LEADERSHIP CARD */
+  .leadership-social-link-icon {
+    @apply inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200
+    text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none
+    dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700
+  }
+  /* END LEADERSHIP CARD */
 }
diff --git a/ui/templates/about/leadership.html b/ui/templates/about/leadership.html
@@ -21,7 +21,7 @@ <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Exec
     <!-- Grid -->
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
       {% for board_member in board_members %}
-        {% include "components/leadershipCard.html" with avatar=board_member.avatar name=board_member.name title=board_member.title bio=board_member.bio %}
+        {% include "components/leadershipCard.html" with avatar=board_member.avatar name=board_member.name title=board_member.title bio=board_member.bio linkedin=board_member.linkedin_link %}
       {% endfor %}
     </div>
     <!-- End Grid -->

diff --git a/ui/templates/components/leadershipCard.html b/ui/templates/components/leadershipCard.html
@@ -1,9 +1,10 @@
 <div class="flex flex-col rounded-xl p-4 md:p-6 bg-white border-2 border-gray-200 dark:bg-neutral-900 dark:border-neutral-700">
   <div class="flex items-center gap-x-4">
     <img
-    class="rounded-full size-20"
-    src={% if avatar %} {{ avatar.url }} {% endif %}
-    alt="Avatar">
+      class="rounded-full size-20"
+      src={% if avatar %} {{ avatar.url }} {% endif %}
+      alt="Avatar"
+    />
     <div class="grow">
     <h3 class="font-medium text-gray-800 dark:text-neutral-200">
       {{ name }}
@@ -14,31 +15,16 @@ <h3 class="font-medium text-gray-800 dark:text-neutral-200">
     </div>
   </div>
 
-  <p class="mt-3 text-gray-500 dark:text-neutral-500">
-    {% if bio %} {{ bio }} {% endif %}
-  </p>
+  {% if bio %}
+  <p class="mt-3 text-gray-500 dark:text-neutral-500">{{ bio }}</p>
+  {% endif %}
 
-  <!-- Social Brands -->
+  {% if linkedin %}
   <div class="mt-3 space-x-1">
-    <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
-    <i data-lucide="linkedin" class="shrink-0 size-3.5 text-gray-800 dark:text-neutral-200" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"></i>
-    </a>
-    <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
-    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-      <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
-    </svg>
-    </a>
-    <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
-    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
-    </svg>
-    </a>
-    <a class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
-    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-      <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
-    </svg>
+    <a class="leadership-social-link-icon" href={{ linkedin }} target="_blank">
+      <i data-lucide="linkedin" class="shrink-0 size-3.5 text-gray-800 dark:text-neutral-200" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"></i>
     </a>
   </div>
-  <!-- End Social Brands -->
+  {% endif %}
 </div>
-<!-- End Col -->
+ 
diff --git a/ui/templates/contact/message-sent.html b/ui/templates/contact/message-sent.html
@@ -9,8 +9,17 @@
 {% block content %}
 
 <!-- Message Sent -->
-<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
-  <p class="text-black dark:text-white">Your message was sent successfully.</p>
+<div class="max-w-[85rem] min-h-[90vh] flex flex-col justify-center items-center px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+  <div class="max-w-[30rem] p-8 rounded-lg border-2 border-neutral-500">
+    <div class="flex flex-col gap-4 text-center text-black dark:text-white">
+      <i data-lucide="circle-check-big" class="shrink-0 size-12 mx-auto stroke-blue-600"></i>
+      <p class="text-balance">Your message was sent successfully. Thank you for writing to us!</p>
+      <a href="{% url 'home' %}" class="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none mx-auto">
+        Home page
+        <i data-lucide="chevron-right" class="shrink-0 size-4 mt-1"></i>
+      </a>
+    </div>
+  </div>
 </div>
 <!-- End Message Sent -->