OTWO-7546 Foundation UI Redesign - Shared Layout & Design System

app/assets/javascripts/api/vulnerability.js.coffee

@@ -118,7 +118,6 @@ $(document).ready ->
       $('.bdsa-search-clear').show()
     else
       $('.bdsa-search-clear').hide()
-    $('.bdsa-search-error').hide()
   $('.bdsa-search-clear').click () ->
     $('.bdsa-search-input').val('').focus()
     $(this).hide()

app/assets/javascripts/application.js.coffee

@@ -31,6 +31,13 @@
 #= require slick.min
 
 
+$(document).on 'click', '.flash-close', (e) ->
+  e.preventDefault()
+  $alert = $(e.currentTarget).closest('.alert')
+  $flashMsg = $alert.closest('#flash-msg')
+  $target = if $flashMsg.length then $flashMsg else $alert
+  $target.fadeOut 200, -> $target.remove()
+
 $(document).on 'page:change', ->
   StackShow.init()
   Expander.init()

app/assets/javascripts/charts.js

@@ -148,6 +148,12 @@ var Charts = {
       width: 950,
       lang: {
         thousandsSep: ','
+      },
+      exporting: {
+        enabled: false
+      },
+      credits: {
+        enabled: false
       }
     })
 
@@ -182,6 +188,7 @@ var Charts = {
     }
 
   },
+
   commit_volume_formatter: function() {
     return '<strong>' + this.series.name + '</strong><br/>' + this.y + ' Commits (' + Math.floor(this.percentage) + '%)';
   }

app/assets/javascripts/compare_accordion.js

@@ -0,0 +1,30 @@
+// Mobile Compare Projects Accordion Functionality
+document.addEventListener('click', function(e) {
+  var accordionHeader = e.target.closest('.accordion-header');
+  if (accordionHeader) {
+    e.preventDefault();
+
+    var section = accordionHeader.parentElement;
+    var content = section.querySelector('.accordion-content');
+    var icon = accordionHeader.querySelector('i');
+    var isOpen = section.classList.contains('active');
+
+    if (isOpen) {
+      // Close this section
+      section.classList.remove('active');
+      content.style.maxHeight = null;
+      if (icon) {
+        icon.classList.remove('icon-chevron-up');
+        icon.classList.add('icon-chevron-down');
+      }
+    } else {
+      // Open this section
+      section.classList.add('active');
+      content.style.maxHeight = content.scrollHeight + 'px';
+      if (icon) {
+        icon.classList.remove('icon-chevron-down');
+        icon.classList.add('icon-chevron-up');
+      }
+    }
+  }
+});

app/assets/javascripts/contributors_cards.js

@@ -0,0 +1,33 @@
+document.addEventListener('click', function(e) {
+  // Handle contributor and enlistment card headers
+  var cardHeader = e.target.closest('.contributor-card-item .card-item-header, .enlistment-card-item .card-item-header');
+  if (cardHeader) {
+    // Skip if clicking a link
+    if (e.target.closest('a, .contributor-link')) {
+      return;
+    }
+    e.preventDefault();
+    cardHeader.closest('.contributor-card-item, .enlistment-card-item').classList.toggle('expanded');
+    return;
+  }
+
+  // Handle about code locations card header
+  var aboutHeader = e.target.closest('.about-code-locations-card .card-header');
+  if (aboutHeader) {
+    aboutHeader.closest('.about-code-locations-card').classList.toggle('expanded');
+    return;
+  }
+
+  // Handle about account basics card header
+  var basicsHeader = e.target.closest('.about-account-basics-card .card-header');
+  if (basicsHeader) {
+    basicsHeader.closest('.about-account-basics-card').classList.toggle('expanded');
+    return;
+  }
+
+  // Handle about project basics card header
+  var projectBasicsHeader = e.target.closest('.about-project-basics-card .card-header');
+  if (projectBasicsHeader) {
+    projectBasicsHeader.closest('.about-project-basics-card').classList.toggle('expanded');
+  }
+});

app/assets/javascripts/demographics.js.coffee

@@ -1,21 +1,51 @@
 ProjectDemographics =
+  chart: null
+
+  DESCRIPTIONS:
+    'Inactive': 'No recent activity'
+    'Very Low': 'Minimal activity'
+    'Low': 'Low activity'
+    'Moderate': 'Moderate activity'
+    'High': 'High activity'
+    'Very High': 'Very high activity'
+    'New': 'Newly added project'
+
   init: () ->
-    return if $('#project_demographics').length == 0
+    return if $('#demographics_chart').length == 0
 
     $.ajax
       url: $('#demographics_chart').data('src')
       cache: false
       success: (data) ->
         return if (data == null)
-        chart = new Highcharts.Chart(data);
-        ProjectDemographics.tooltip_formatter(chart)
+        data.tooltip ||= {}
+        data.tooltip.formatter = () ->
+          name = if @point?.name then @point.name else @series?.name or ''
+          pct  = if @y? then @y else 0
+          desc = ProjectDemographics.DESCRIPTIONS[name] or ''
+          isMobile = window.innerWidth <= 768
+          if isMobile
+            "<span class='hc-tooltip-name'>#{name}</span><span class='hc-tooltip-value'>#{pct}%</span>"
+          else
+            descHtml = if desc then "<span class='hc-tooltip-desc'>#{desc}</span>" else ''
+            "<span class='hc-tooltip-name'>#{name}</span>#{descHtml}<span class='hc-tooltip-value'>#{pct}%</span>"
+
+        # On touch/mobile devices, disable allowPointSelect so tap shows tooltip
+        # instead of triggering slice selection animation
+        isTouch = 'ontouchstart' of window or navigator.maxTouchPoints > 0
+        if isTouch
+          data.plotOptions ||= {}
+          data.plotOptions.pie ||= {}
+          data.plotOptions.pie.allowPointSelect = false
+          data.plotOptions.pie.stickyTracking = true
 
-  tooltip_formatter: (chart) ->
-    chart.tooltip.options.formatter = () ->
-      if this.point.name
-        "#{this.point.name}: #{this.y}%"
-      else
-        "#{this.series.name}: #{this.y}%"
+        ProjectDemographics.chart = new Highcharts.Chart(data)
+
+  reflow: () ->
+    ProjectDemographics.chart.reflow() if ProjectDemographics.chart
 
 $(document).on 'page:change', ->
   ProjectDemographics.init()
+
+$(window).on 'resize', ->
+  ProjectDemographics.reflow()

app/assets/javascripts/dropdown_handler.js

@@ -0,0 +1,71 @@
+// Dropdown menu handler for logged user menu
+(function($) {
+  'use strict';
+
+  function initDropdown() {
+    var $dropdown = $('#logged_user_menu');
+
+    if ($dropdown.length === 0) {
+      return; // Dropdown not found (user not logged in)
+    }
+
+    var $toggle = $dropdown.find('.dropdown-toggle');
+    var $menu = $dropdown.find('.dropdown-menu');
+
+    // Remove any existing event handlers
+    $toggle.off('click.userDropdown');
+    $(document).off('click.userDropdown keydown.userDropdown');
+    $menu.find('a').off('click.userDropdown');
+
+    // Toggle dropdown on click
+    $toggle.on('click.userDropdown', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var wasOpen = $dropdown.hasClass('open');
+
+      // Close all dropdowns first
+      $('.dropdown').removeClass('open');
+
+      // Toggle this dropdown
+      if (!wasOpen) {
+        $dropdown.addClass('open');
+      }
+
+      return false;
+    });
+
+    // Close dropdown when clicking outside
+    $(document).on('click.userDropdown', function(e) {
+      var $target = $(e.target);
+      if (!$dropdown.is($target) && $dropdown.has($target).length === 0) {
+        $dropdown.removeClass('open');
+      }
+    });
+
+    // Close dropdown when clicking a menu item
+    $menu.find('a').on('click.userDropdown', function() {
+      setTimeout(function() {
+        $dropdown.removeClass('open');
+      }, 150);
+    });
+
+    // Close dropdown on ESC key
+    $(document).on('keydown.userDropdown', function(e) {
+      if (e.keyCode === 27) {
+        $dropdown.removeClass('open');
+      }
+    });
+  }
+
+  // Initialize when DOM is ready
+  $(document).ready(function() {
+    initDropdown();
+  });
+
+  // Re-initialize on Turbolinks page change
+  $(document).on('page:change', function() {
+    initDropdown();
+  });
+
+})(jQuery);

app/assets/javascripts/enlistments.js.coffee

@@ -14,7 +14,7 @@ class App.EnlistmentSelect
   showSpinnerAndSubmit = ->
     $(this).attr('disabled', 'disabled')
     $('.enlistment .spinner').show()
-    $('.well.enlistment form').submit()
+    $('.enlistment form').submit()
 
   hideAllScmInfo = ->
     $('.enlistment .scm_info').hide()

app/assets/javascripts/explore.js.coffee

@@ -1,6 +1,19 @@
+$(document).on 'click', '.tag-search-btn', ->
+  tag = $(this).siblings('.tag-input').val()
+  if tag.length > 0
+    window.location.href = '/tags?names=' + encodeURIComponent(tag)
+  return false
+
+$(document).on 'keydown', '.tag-input', (e) ->
+  if e.which == 13
+    e.preventDefault()
+    tag = $(this).val()
+    if tag.length > 0
+      window.location.href = '/tags?names=' + encodeURIComponent(tag)
+    return false
 App.Explore =
   init: () ->
-    return if $('#explore_projects_page').length == 0
+    return if $('#explore_projects_page').length == 0 && $('.explore-projects-page').length == 0
 
     $('#explore_search_form .icon-search').click (e) ->
       e.preventDefault()
@@ -13,22 +26,93 @@ App.Explore =
         $(this).siblings('.icon-search').trigger('click')
         return false
 
-    $('.similar_projects .icon-search').click (e) ->
+    $('.similar_projects .icon-search, .similar-card .search-icon-btn').click (e) ->
       $(this).parents('form:first').trigger('submit')
 
     $('form[rel=similar_project_jump]').submit (e) ->
-      projectId = $("#project").val()
+      projectId = $(this).find('input[name="project"]').val()
       if projectId != ''
         e.preventDefault()
         window.location.href = "/p/#{projectId.toLowerCase()}/similar"
       else
-        $('span.error').removeClass('hidden')
+        $(this).find('span.error').removeClass('hidden')
         false
 
     $('form[rel=sort_filter] select').change () ->
       if $('#explore_projects_page') && $(this).val() == ''
         $(this).attr('disabled', 'disabled')
       $(this).parents('form').attr('action', document.location).submit()
 
+    # Discover More collapsible toggle (mobile/tablet)
+    $(document).on 'click', '.discover-toggle', (e) ->
+      content = $(this).siblings('.discover-content')
+      content.toggleClass('show')
+      chevron = $(this).find('.chevron')
+      chevron.text(if content.hasClass('show') then '▲' else '▼')
+
+    # Language filter dropdown toggle
+    $(document).on 'click', '.language-toggle', (e) ->
+      e.stopPropagation()
+      menu = $(this).siblings('.language-dropdown-menu')
+      menu.toggleClass('show')
+
+    $(document).on 'click', (e) ->
+      unless $(e.target).closest('.language-dropdown').length
+        $('.language-dropdown-menu').removeClass('show')
+
 $(document).on 'page:change', ->
   App.Explore.init()
+
+# ── PAI Tooltip ──────────────────────────────────────────────────────────────
+# Runs once at module level; uses event delegation so no re-binding needed.
+# position:fixed tooltip appended to <body> escapes overflow/transform clipping.
+$('<div id="pai-global-tooltip"></div>').appendTo('body')
+
+stripPaiTitles = ->
+  $('.pai-tooltip-wrapper [title]').each ->
+    $(this).removeAttr('title')
+
+showPaiTooltip = (wrapper) ->
+  text = wrapper.data('tooltip')
+  return unless text
+  # Strip native title to prevent browser double-tooltip
+  wrapper.find('[title]').removeAttr('title')
+  tooltip = $('#pai-global-tooltip')
+  tooltip.text(text)
+  tooltip.css(visibility: 'hidden', display: 'block')
+  tw = tooltip.outerWidth()
+  th = tooltip.outerHeight()
+  tooltip.css(visibility: '', display: 'none')
+  rect = wrapper[0].getBoundingClientRect()
+  left = rect.left + (rect.width / 2) - (tw / 2)
+  top  = rect.top - th - 10
+  left = Math.max(8, Math.min(left, window.innerWidth - tw - 8))
+  if top < 8
+    top = rect.bottom + 10
+  tooltip.css(left: left, top: top).addClass('visible')
+
+hidePaiTooltip = ->
+  $('#pai-global-tooltip').removeClass('visible')
+
+# Desktop hover
+$(document).on 'mouseenter', '.pai-tooltip-wrapper', ->
+  showPaiTooltip($(this))
+$(document).on 'mouseleave', '.pai-tooltip-wrapper', ->
+  hidePaiTooltip()
+
+# Mobile/tablet tap toggle
+$(document).on 'touchstart', '.pai-tooltip-wrapper', (e) ->
+  e.preventDefault()
+  e.stopPropagation()
+  if $('#pai-global-tooltip').hasClass('visible')
+    hidePaiTooltip()
+  else
+    showPaiTooltip($(this))
+$(document).on 'touchstart', (e) ->
+  unless $(e.target).closest('.pai-tooltip-wrapper').length
+    hidePaiTooltip()
+
+# Strip native [title] on every page load (prevents browser double-tooltip)
+document.addEventListener 'DOMContentLoaded', stripPaiTitles
+document.addEventListener 'turbolinks:load',  stripPaiTitles
+document.addEventListener 'page:change',      stripPaiTitles

app/assets/javascripts/home.js.coffee

@@ -2,7 +2,7 @@ $(document).on 'page:change', ->
   divs = $('p[id^="content-"]')
   i = 0
   do ->
-    divs.eq(i).removeClass('hide').fadeIn(400).delay(6000).fadeOut 400, arguments.callee
+    divs.eq(i).removeClass('hide').fadeIn(200).delay(2500).fadeOut 200, arguments.callee
     i = ++i % divs.length
 
   $('#icon_text').click ->