cncf · cynthia-sg · Mar 27, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025
diff --git a/docs/screenshots/gitjobs1.png b/docs/screenshots/gitjobs1.png
diff --git a/docs/screenshots/gitjobs2.png b/docs/screenshots/gitjobs2.png
diff --git a/docs/screenshots/gitjobs3.png b/docs/screenshots/gitjobs3.png
diff --git a/docs/screenshots/gitjobs4.png b/docs/screenshots/gitjobs4.png
diff --git a/gitjobs-server/static/js/common/common.js b/gitjobs-server/static/js/common/common.js
@@ -1,11 +1,11 @@
 // Show or hide the provided modal.
-export const toggleModalVisibility = (modalId) => {
+export const toggleModalVisibility = (modalId, status) => {
   const modal = document.getElementById(modalId);
-  if (modal.classList.contains("hidden")) {
+  if (status === "open") {
     modal.classList.remove("hidden");
     // This is used to hide body scroll when the modal is open
     modal.dataset.open = "true";
-  } else {
+  } else if (status === "close") {
     modal.classList.add("hidden");
     // This is used to show body scroll when the modal is open
     modal.dataset.open = "false";
@@ -59,20 +59,20 @@ export const unnormalize = (text) => {
   return text.replace(/-/g, " ");
 };
 
-export const addParamToQueryString = (param, value) => {
+export const addParamToQueryString = (param, value, state) => {
   const searchParams = new URLSearchParams(window.location.search);
   if (searchParams.has(param)) {
     searchParams.delete(param);
   }
   searchParams.set(param, value);
-  replaceUrl(searchParams.toString());
+  modifyCurrentUrl(searchParams.toString(), state);
 };
 
-export const removeParamFromQueryString = (param) => {
+export const removeParamFromQueryString = (param, state) => {
   const searchParams = new URLSearchParams(window.location.search);
   if (searchParams.has(param)) {
     searchParams.delete(param);
-    replaceUrl(searchParams.toString());
+    modifyCurrentUrl(searchParams.toString(), state);
   }
 };
 
@@ -81,9 +81,9 @@ export const getParamFromQueryString = (param) => {
   return searchParams.get(param);
 };
 
-export const replaceUrl = (params) => {
+export const modifyCurrentUrl = (params, state) => {
   const newUrl = `${window.location.pathname}${params ? `?${params}` : ""}`;
-  window.history.replaceState({}, "new_url", newUrl);
+  history.pushState(state || {}, "new_url", newUrl);
 };
 
 // Detect if the job preview modal should be displayed

diff --git a/gitjobs-server/static/js/common/header.js b/gitjobs-server/static/js/common/header.js
@@ -0,0 +1,29 @@
+export const onClickDropdown = () => {
+  const dropdownButton = document.getElementById("user-dropdown-button");
+  const dropdown = document.getElementById("dropdown-user");
+  const isHidden = dropdown.classList.contains("hidden");
+
+  if (isHidden) {
+    dropdown.classList.remove("hidden");
+
+    const anchors = dropdown.querySelectorAll("a");
+    anchors.forEach((anchor) => {
+      // Close dropdown actions when clicking on an action before loading the new page
+      anchor.addEventListener("htmx:beforeOnLoad", () => {
+        const dropdown = document.getElementById("dropdown-user");
+        dropdown.classList.add("hidden");
+      });
+    });
+
+    // Close dropdown actions when clicking outside
+    document.addEventListener("click", (event) => {
+      if (!dropdown.contains(event.target) && !dropdownButton.contains(event.target)) {
+        dropdown.classList.add("hidden");
+      }
+    });
+  } else {
+    dropdown.classList.add("hidden");
+    // Remove event listener when dropdown is closed
+    document.removeEventListener("click", () => {});
+  }
+};
diff --git a/gitjobs-server/static/styles/index.css b/gitjobs-server/static/styles/index.css
@@ -33,7 +33,7 @@
 }
 
 .markdown blockquote {
-  margin: 1rem 0;
+  margin: 1.5rem 0;
   padding: 0.5rem 1rem;
   border-left: 3px solid #e7e5e4;
   background-color: #f5f5f4;

diff --git a/gitjobs-server/templates/base.html b/gitjobs-server/templates/base.html
@@ -184,11 +184,26 @@
         }
       });
     </script>
+    <script type="module">
+      import {
+        shouldDisplayJobModal,
+        toggleModalVisibility,
+        getParamFromQueryString
+      } from '/static/js/common/common.js';
+      window.addEventListener("popstate", (event) => {
+        if (event.state && event.state.modal_preview !== undefined) {
+          if (event.state.modal_preview) {
+            toggleModalVisibility('preview-modal', "open");
+          } else {
+            toggleModalVisibility('preview-modal', "close");
+          }
+        }
+      });
+    </script>
   </head>
   <body class="flex flex-col h-screen font-inter bg-stone-100"
         hx-get
         hx-trigger="refresh-body">
-    {# <div class="alert text-primary-800 bg-primary-50 border-b border-primary-500 text-sm/6 py-1 px-10 text-center" role="alert">This is a demo site. The jobs displayed are not real.</div> #}
     {% block content %}
     {% endblock content %}
   </body>

diff --git a/gitjobs-server/templates/dashboard/employer/jobs/add.html b/gitjobs-server/templates/dashboard/employer/jobs/add.html
@@ -497,7 +497,7 @@
   const previewButton = document.getElementById('preview-button');
   previewButton.addEventListener('htmx:afterRequest', (e) => {
     if (isSuccessfulXHRStatus(e.detail.xhr.status)) {
-      toggleModalVisibility('preview-modal');
+      toggleModalVisibility('preview-modal', "open");
     } else {
       // When the preview is not available, show an error message
       showErrorAlert('Something went wrong previewing the job, please try again later.');

diff --git a/gitjobs-server/templates/dashboard/employer/jobs/preview.html b/gitjobs-server/templates/dashboard/employer/jobs/preview.html
@@ -195,7 +195,7 @@
         {% endif %}
 
         {% if let Some(salary_max) = job.salary_max %}
-          <div class="flex items-baseline text-stone-900 text-sm">
+          <div class="flex items-baseline font-medium text-stone-900 text-sm">
             <span class="mx-1">-</span>
             {{ salary_max|humanize_number }}
           </div>

diff --git a/gitjobs-server/templates/dashboard/employer/jobs/update.html b/gitjobs-server/templates/dashboard/employer/jobs/update.html
@@ -519,7 +519,7 @@
   const previewButton = document.getElementById('preview-button');
   previewButton.addEventListener('htmx:afterRequest', (e) => {
     if (isSuccessfulXHRStatus(e.detail.xhr.status)) {
-      toggleModalVisibility('preview-modal');
+      toggleModalVisibility('preview-modal', "open");
     } else {
       // When the preview is not available, show an error message
       showErrorAlert('Something went wrong previewing the job, please try again later.');

diff --git a/gitjobs-server/templates/dashboard/job_seeker/profile/update.html b/gitjobs-server/templates/dashboard/job_seeker/profile/update.html
@@ -384,7 +384,7 @@
   const previewButton = document.getElementById('preview-button');
   previewButton.addEventListener('htmx:afterRequest', (e) => {
     if (isSuccessfulXHRStatus(e.detail.xhr.status)) {
-      toggleModalVisibility('preview-modal');
+      toggleModalVisibility('preview-modal', "open");
     } else {
       // When the preview is not available, show an error message
       showErrorAlert('Something went wrong previewing the profile, please try again later.');

diff --git a/gitjobs-server/templates/header.html b/gitjobs-server/templates/header.html
@@ -159,26 +159,13 @@
   {% endif %}
   {# Dropdown script #}
   <script type="module">
+    import {
+      onClickDropdown
+    } from '/static/js/common/header.js';
     const dropdownButton = document.getElementById('user-dropdown-button');
 
     if (dropdownButton) {
-      dropdownButton.addEventListener('click', () => {
-        const dropdown = document.getElementById('dropdown-user');
-        const isOpen = dropdown.classList.contains('hidden');
-        dropdown.classList.toggle('hidden');
-
-        if (isOpen) {
-          // Close dropdown actions when clicking outside
-          document.addEventListener('click', (event) => {
-            if (!dropdown.contains(event.target) && !dropdownButton.contains(event.target)) {
-              dropdown.classList.add('hidden');
-            }
-          });
-        } else {
-          // Remove event listener when dropdown is closed
-          document.removeEventListener('click', () => {});
-        }
-      });
+      dropdownButton.addEventListener('click', onClickDropdown);
     }
   </script>
   {# End dropdown script #}

diff --git a/gitjobs-server/templates/jobboard/jobs/job_section.html b/gitjobs-server/templates/jobboard/jobs/job_section.html
@@ -201,7 +201,7 @@
         {% endif %}
 
         {% if let Some(salary_max) = job.salary_max %}
-          <div class="flex items-baseline text-stone-900 text-sm">
+          <div class="flex items-baseline font-medium text-stone-900 text-sm">
             <span class="mx-1">-</span>
             {{ salary_max|humanize_number }}
           </div>

diff --git a/gitjobs-server/templates/jobboard/jobs/results_section.html b/gitjobs-server/templates/jobboard/jobs/results_section.html
@@ -91,7 +91,7 @@
                       </div>
 
                       <div class="leading-3 text-stone-600 text-xs font-semibold tracking-wide uppercase">
-                        {{ member.foundation }} {{ member.level }} member
+                        {{ member.foundation }} member
                       </div>
                     </div>
                   {% endif %}
@@ -206,9 +206,12 @@
             {% if let Some(salary_currency) = job.salary_currency %}
               <div class="text-[0.7rem] text-stone-500">{{ salary_currency }}</div>
             {% endif %}
-            <div class="capitalize text-nowrap">
-              {{ salary_min|humanize_number }}
-              {%- if let Some(salary_max) = job.salary_max -%}-{{ salary_max|humanize_number }}{% endif %}
+            <div class="flex gap-x-1 capitalize text-nowrap">
+              <div>{{ salary_min|humanize_number }}</div>
+              {%- if let Some(salary_max) = job.salary_max -%}
+                <div>-</div>
+                <div>{{ salary_max|humanize_number }}</div>
+              {% endif %}
             </div>
             {%- if let Some(salary_period) = job.salary_period -%}
               <div class="text-[0.7rem] text-nowrap">/ {{ salary_period }}</div>
@@ -249,8 +252,8 @@
   previewBtns.forEach((btn) => {
     btn.addEventListener('htmx:afterRequest', (e) => {
       if (isSuccessfulXHRStatus(e.detail.xhr.status)) {
-        toggleModalVisibility('preview-modal');
-        addParamToQueryString('job_id', btn.dataset.jobId);
+        addParamToQueryString('job_id', btn.dataset.jobId, { modal_preview: true });
+        toggleModalVisibility('preview-modal', "open");
       } else {
         // When the preview is not available, show an error message
         showErrorAlert('Something went wrong previewing the job, please try again later.');

diff --git a/gitjobs-server/templates/misc/preview_modal.html b/gitjobs-server/templates/misc/preview_modal.html
@@ -33,10 +33,10 @@
       // Reset the scroll position
       document.getElementById('preview-content').scrollTop = 0;
       // Close the preview modal
-      toggleModalVisibility('preview-modal');
-      {%- if on_close == &"clean_job_id_param" -%}
-        removeParamFromQueryString('job_id');
-      {%- endif -%}
+      {% if on_close == &"clean_job_id_param" -%}
+        removeParamFromQueryString('job_id', { modal_preview: false});
+      {%- endif %}
+      toggleModalVisibility('preview-modal', "close");
     };
 
     // Close the preview modal on backdrop click