Some minor UI improvements (#287)

- Add missing keyboard arrow selection
- Fix embed hover border highlighting
- Prevent Osano button scroll behavior
- Add validation error when upstream commitment value is greater than open source
- Add validation error when salary max range is less than salary min
- Add loading spinner to search members/projects
- Fix stats legend on jobs daily chart

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

gitjobs-server/static/css/styles.src.css

@@ -282,6 +282,15 @@ select.aligned-right option {
 /* End select styles */
 
 
+/* Input styles */
+
+input[type="range"]:focus-visible {
+  outline: 0;
+}
+
+/* End input styles */
+
+
 /* Icons */
 
 .svg-icon {
@@ -776,19 +785,9 @@ select.aligned-right option {
 }
 
 .osano-cm-widget {
-  height: 30px !important;
-  width: 30px !important;
-  right: 30px !important;
-  bottom: 30px !important;
-  position: absolute !important;
   display: none;
 }
 
-/* Osano widget is only visible on pages with footer */
-body:has(footer) .osano-cm-widget {
-  display: block;
-}
-
 .osano-cm-widget svg {
   width: 30px !important;
   height: 30px !important;

gitjobs-server/static/images/icons/cookie.svg

@@ -1,4 +1,4 @@
-import { html } from "/static/vendor/js/lit-all.v3.2.1.min.js";
+import { html, createRef, ref } from "/static/vendor/js/lit-all.v3.2.1.min.js";
 import { unnormalize } from "/static/js/common/common.js";
 import { LitWrapper } from "/static/js/common/lit-wrapper.js";
 import { getBenefits, getSkills } from "/static/js/common/data.js";
@@ -19,6 +19,7 @@ export class MultiSelect extends LitWrapper {
    * @property {string[]} visibleOptions - Filtered options based on search
    * @property {boolean} visibleDropdown - Dropdown visibility state
    * @property {string} legend - Helper text below input
+   * @property {number|null} activeIndex - Index of currently highlighted option for keyboard navigation
    */
   static properties = {
     name: { type: String },
@@ -29,8 +30,12 @@ export class MultiSelect extends LitWrapper {
     visibleOptions: { type: Array },
     visibleDropdown: { type: Boolean },
     legend: { type: String },
+    activeIndex: { type: Number | null },
   };
 
+  /** @type {import('lit').Ref<HTMLInputElement>} Reference to input element */
+  inputRef = createRef();
+
   constructor() {
     super();
     this.name = "name";
@@ -41,6 +46,7 @@ export class MultiSelect extends LitWrapper {
     this.visibleOptions = [];
     this.visibleDropdown = false;
     this.legend = undefined;
+    this.activeIndex = null;
   }
 
   connectedCallback() {
@@ -66,6 +72,7 @@ export class MultiSelect extends LitWrapper {
     } else {
       this.visibleOptions = this.options;
     }
+    this.activeIndex = null;
   }
 
   /**
@@ -95,6 +102,7 @@ export class MultiSelect extends LitWrapper {
   _handleClickOutside = (event) => {
     if (!this.contains(event.target)) {
       this.visibleDropdown = false;
+      this.activeIndex = null;
     }
   };
 
@@ -117,6 +125,58 @@ export class MultiSelect extends LitWrapper {
     this.selected = this.selected.filter((selectedOption) => selectedOption !== option);
   }
 
+  /**
+   * Highlights suggestion item for keyboard navigation.
+   * @param {'up'|'down'} direction - Navigation direction
+   * @private
+   */
+  _highlightItem(direction) {
+    if (this.visibleOptions && this.visibleOptions.length > 0) {
+      if (this.activeIndex === null) {
+        this.activeIndex = direction === "down" ? 0 : this.visibleOptions.length - 1;
+      } else {
+        let newIndex = direction === "down" ? this.activeIndex + 1 : this.activeIndex - 1;
+        if (newIndex >= this.visibleOptions.length) {
+          newIndex = 0;
+        }
+        if (newIndex < 0) {
+          newIndex = this.visibleOptions.length - 1;
+        }
+        this.activeIndex = newIndex;
+      }
+    }
+  }
+
+  /**
+   * Handles keyboard navigation and selection.
+   * @param {KeyboardEvent} event - Keyboard event
+   * @private
+   */
+  _handleKeyDown(event) {
+    switch (event.key) {
+      // Highlight the next item in the list
+      case "ArrowDown":
+        this._highlightItem("down");
+        break;
+      // Highlight the previous item in the list
+      case "ArrowUp":
+        this._highlightItem("up");
+        break;
+      // Select the highlighted item
+      case "Enter":
+        event.preventDefault();
+        if (this.activeIndex !== null && this.visibleOptions) {
+          const activeItem = this.visibleOptions[this.activeIndex];
+          if (activeItem) {
+            this._onClickOption(activeItem);
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
   /**
    * Adds an option to selected list.
    * @param {string} option - Option to add, or uses entered value if empty
@@ -126,7 +186,12 @@ export class MultiSelect extends LitWrapper {
     this.selected.push(option || this.enteredValue);
     this.enteredValue = "";
     this.visibleDropdown = false;
+    this.activeIndex = null;
     this._filterOptions();
+    const input = this.inputRef.value;
+    if (input) {
+      input.blur(); // Remove focus from input after selection
+    }
   }
 
   render() {
@@ -157,7 +222,9 @@ export class MultiSelect extends LitWrapper {
                 </span> `,
             )}
             <input
+              ${ref(this.inputRef)}
               type="text"
+              @keydown="${this._handleKeyDown}"
               @input=${this._onInputChange}
               @focus=${() => (this.visibleDropdown = true)}
               .value="${this.enteredValue}"
@@ -179,14 +246,20 @@ export class MultiSelect extends LitWrapper {
           }`}
         >
           <ul class="text-sm text-stone-700 overflow-x-auto max-h-[150px]">
-            ${this.visibleOptions.map((option) => {
+            ${this.visibleOptions.map((option, index) => {
               const isSelected = this.selected.includes(option);
-              return html`<li>
+              return html`<li
+                class="group ${this.activeIndex === index ? "active" : ""}"
+                data-index="${index}"
+              >
                 <button
                   @click=${() => this._onClickOption(option)}
+                  @mouseover=${() => (this.activeIndex = index)}
                   type="button"
                   class=${`${
-                    isSelected ? "bg-stone-100 opacity-50" : "cursor-pointer hover:bg-stone-100"
+                    isSelected
+                      ? "bg-stone-100 opacity-50"
+                      : "cursor-pointer hover:bg-stone-100 group-[.active]:bg-stone-100"
                   } capitalize block w-full text-left px-4 py-2`}
                   ?disabled="${isSelected}"
                 >

gitjobs-server/static/js/common/multiselect.js

@@ -18,6 +18,7 @@ export class DashboardSearch extends LitWrapper {
    * @property {boolean} visibleDropdown - Dropdown visibility state
    * @property {number|null} activeIndex - Active suggestion index
    * @property {string} selectedFoundation - Selected foundation filter
+   * @property {boolean} isLoading - Loading state for suggestions
    */
   static properties = {
     type: { type: String },
@@ -28,6 +29,7 @@ export class DashboardSearch extends LitWrapper {
     visibleDropdown: { type: Boolean },
     activeIndex: { type: Number | null },
     selectedFoundation: { type: String },
+    isLoading: { type: Boolean },
   };
 
   /** @type {string} Default foundation when none selected */
@@ -44,6 +46,7 @@ export class DashboardSearch extends LitWrapper {
     this.visibleDropdown = false;
     this.activeIndex = null;
     this.selectedFoundation = this.defaultFoundation;
+    this.isLoading = false;
   }
 
   connectedCallback() {
@@ -60,7 +63,7 @@ export class DashboardSearch extends LitWrapper {
    * Fetches projects or members from server based on search criteria.
    * @private
    */
-  async _getProjects() {
+  async _getItems() {
     const url = `${this.type === "members" ? "/dashboard/members/search?member=" : "/projects/search?project="}${encodeURIComponent(this.enteredValue)}&foundation=${this.selectedFoundation}`;
     try {
       const response = await fetch(url);
@@ -74,6 +77,7 @@ export class DashboardSearch extends LitWrapper {
       // TODO: Implement error handling
     } finally {
       this.visibleDropdown = true;
+      this.isLoading = false;
     }
   }
 
@@ -101,7 +105,8 @@ export class DashboardSearch extends LitWrapper {
    */
   _filterOptions() {
     if (this.enteredValue.length > 2) {
-      debounce(this._getProjects(this.enteredValue), 300);
+      this.isLoading = true;
+      debounce(this._getItems(this.enteredValue), 300);
     } else {
       this.visibleOptions = [];
       this.visibleDropdown = false;
@@ -265,6 +270,29 @@ export class DashboardSearch extends LitWrapper {
                   <div class="svg-icon size-5 bg-stone-400 hover:bg-stone-700 icon-close"></div>
                 </button>
               </div>
+              ${this.isLoading
+                ? html`<div class="absolute end-7 top-1">
+                    <div role="status">
+                      <svg
+                        aria-hidden="true"
+                        class="inline size-5 text-stone-200 animate-spin fill-primary-600"
+                        viewBox="0 0 100 101"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                          fill="currentColor"
+                        />
+                        <path
+                          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                          fill="currentFill"
+                        />
+                      </svg>
+                      <span class="sr-only">Loading...</span>
+                    </div>
+                  </div>`
+                : ""}
               <div class="absolute z-10 start-0 end-0">
                 <div
                   class="${!this.visibleDropdown

gitjobs-server/static/js/dashboard/common/dashboard-search.js

@@ -40,12 +40,30 @@ export const checkSalaryBeforeSubmit = () => {
   salaryField.removeAttribute("required");
   salaryMinField.removeAttribute("required");
   salaryMaxField.removeAttribute("required");
+  salaryMaxField.setCustomValidity(""); // Clear any previous error
 
   if (selectedSalaryType.id === "range") {
     // Range salary: clear exact value, set requirements for range fields
     salaryField.value = "";
 
     if (salaryMinField.value !== "" || salaryMaxField.value !== "") {
+      // If min and max are set, validate that max is not less than min
+      if (
+        salaryMaxField.value &&
+        salaryMinField.value &&
+        parseInt(salaryMaxField.value) < parseInt(salaryMinField.value)
+      ) {
+        salaryMaxField.setCustomValidity("Maximum salary cannot be less than minimum salary.");
+
+        // Clear error when user interacts with fields
+        salaryMaxField.addEventListener("input", () => {
+          salaryMaxField.setCustomValidity(""); // Clear error on input
+        });
+        salaryMinField.addEventListener("input", () => {
+          salaryMaxField.setCustomValidity(""); // Clear error on input
+        });
+      }
+
       salaryMinField.setAttribute("required", "required");
       salaryMaxField.setAttribute("required", "required");
       salaryPeriodField.setAttribute("required", "required");
@@ -62,6 +80,33 @@ export const checkSalaryBeforeSubmit = () => {
       salaryCurrencyField.setAttribute("required", "required");
     }
   }
+
+  const jobsForm = document.getElementById("jobs-form");
+  jobsForm.reportValidity(); // Trigger validation on the form
+};
+
+/**
+ * Validates open source and upstream commitment values.
+ * Ensures that upstream commitment is not greater than open source value.
+ */
+export const checkOpenSourceValues = () => {
+  const openSource = document.querySelector('input[name="open_source"]');
+  const upstreamCommitment = document.querySelector('input[name="upstream_commitment"]');
+
+  // Ensure both fields are present before proceeding
+  if (!openSource || !upstreamCommitment) {
+    return;
+  }
+
+  // Clear any previous custom validity messages
+  upstreamCommitment.setCustomValidity("");
+
+  if (openSource.value && upstreamCommitment.value) {
+    // If both fields are filled, validate that upstream commitment is not greater than open source
+    if (parseInt(upstreamCommitment.value) > parseInt(openSource.value)) {
+      upstreamCommitment.setCustomValidity("Upstream commitment cannot be greater than open source value.");
+    }
+  }
 };
 
 /**

gitjobs-server/static/js/dashboard/employer/jobs.js

@@ -567,7 +567,7 @@ const renderBarDailyChart = (data, max, min) => {
       ...getBarStatsOptions().tooltip,
       formatter: (params) => {
         const chartdate = echarts.time.format(params.data[0], "{dd} {MMM}'{yy}");
-        return `${chartdate}<br />Jobs: ${prettifyNumber(params.data[1])}`;
+        return `${chartdate}<br />Views: ${prettifyNumber(params.data[1])}`;
       },
     },
     xAxis: {

gitjobs-server/static/js/jobboard/stats.js

@@ -6,12 +6,28 @@
     <meta name="description"
           content="GitJobs is an open source job board focused on open source job opportunities.">
     <meta name="keywords" content="community, organization, jobs, job">
+
+    {#- OG tags #}
     <meta property="og:type" content="website">
     <meta property="og:title" content="GitJobs">
+    <meta property="og:url" content="https://gitjobs.dev/">
     <meta property="og:description"
           content="GitJobs is an open source job board focused on open source job opportunities.">
     <meta property="og:image"
           content="https://gitjobs.dev/static/images/index/gitjobs.png">
+    {#- End OG tags  #}
+
+    {#- Twitter tags #}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content="gitjobs.dev">
+    <meta property="twitter:url" content="https://gitjobs.dev">
+    <meta name="twitter:title" content="GitJobs">
+    <meta name="twitter:description"
+          content="GitJobs is an open source job board focused on open source job opportunities.">
+    <meta name="twitter:image"
+          content="https://gitjobs.dev/static/images/index/gitjobs.png">
+    {#- End Twitter tags #}
+
     <link rel="icon"
           href="https://gitjobs.dev/static/images/index/favicon.ico"
           sizes="any">