8445 individual topic page

app/assets/javascripts/application.js

@@ -15,3 +15,4 @@
 //= require wizard
 //= require clipboard.min
 //= require snippets
+//= require collapse-button

app/assets/javascripts/collapse-button.js

@@ -0,0 +1,121 @@
+// collapse.js
+$(document).ready(function() {
+    const collapseButtons = $('.js-collapse-trigger');
+
+    collapseButtons.each(function() {
+        const $trigger = $(this);
+        const $content = $trigger.next('.js-collapse-content');
+
+        // This section is for the content inside .js-collapse-content when it has input elements. The idea is to detect if the user is using the fields inside. If he is, then when the page reloads, the .js-collapse-content will be open, and the user will be able to see the active fields and change/clear them instead of having to reopen the collapsed content to be able to change them again. This would be more helpful, especially for users who are making multiple searches.
+        // Check if any inputs in the content area have values that match URL parameters
+        function hasActiveInputs() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const inputs = $content.find('input, select, textarea');
+
+            return inputs.toArray().some(input => {
+                const paramValue = urlParams.get(input.name);
+                return paramValue !== null && paramValue !== '';
+            });
+        }
+
+        // Set initial state based on inputs
+        const shouldBeOpen = hasActiveInputs();
+        $content.attr('hidden', !shouldBeOpen);
+        $trigger.attr('aria-expanded', shouldBeOpen);
+
+        if (shouldBeOpen) {
+            $content.show();
+        }
+
+        $trigger.on('click', function() {
+            const isExpanded = $trigger.attr('aria-expanded') === 'true';
+
+            // Toggle aria-expanded
+            $trigger.attr('aria-expanded', !isExpanded);
+
+            // Toggle visibility
+            if (isExpanded) {
+                $content.attr('hidden', true);
+                $content.slideUp(300);
+            } else {
+                $content.removeAttr('hidden');
+                $content.slideDown(300);
+            }
+        });
+
+        // This an optional feature in case the content inside js-collapse-content has input fields and easier to reset them.
+        const $clearButton = $content.find('.js-clear-collapse-section');
+        $clearButton.on('click', function(e) {
+            e.preventDefault();
+
+            // Find all form inputs within this specific collapse content
+            const $inputs = $content.find('input, select, textarea');
+
+            // Clear each input
+            $inputs.each(function() {
+                const $input = $(this);
+
+                switch($input.prop('type')) {
+                    case 'text':
+                    case 'date':
+                    case 'datetime-local':
+                    case 'email':
+                    case 'number':
+                    case 'tel':
+                    case 'time':
+                    case 'url':
+                    case 'search':
+                        $input.val('');
+                        break;
+                    case 'checkbox':
+                    case 'radio':
+                        $input.prop('checked', false);
+                        break;
+                    case 'select-one':
+                    case 'select-multiple':
+                        $input.prop('selectedIndex', 0);
+                        break;
+                }
+            });
+
+            $content.closest('form').submit();
+        });
+    });
+});
+
+/* 
+Usage here:
+
+<div class="collapse-wrapper">
+  <!-- Trigger button -->
+  <button class="js-collapse-trigger button" 
+          aria-expanded="false"
+          aria-controls="collapse-1"
+          id="trigger-1">
+    Advanced Filters
+  </button>
+
+  <!-- Collapsible content -->
+  <div class="js-collapse-content collapse-content" 
+       id="collapse-1"
+       role="region" 
+       aria-labelledby="trigger-1"
+       hidden>
+
+    <!-- Your form fields -->
+    <div class="list-filter-item">
+      <label for="date-from">From:</label>
+      <input type="date" id="date-from" name="date_from">
+
+      <label for="date-to">To:</label>
+      <input type="date" id="date-to" name="date_to">
+    </div>
+
+    <!-- Optional in case there input fields inside the form -->
+    <button type="button" class="js-clear-section">
+      Clear Filters
+    </button>
+  </div>
+</div>
+
+*/

app/assets/stylesheets/responsive/_collapse_button_style.scss

@@ -0,0 +1,14 @@
+.collapse {
+    &-wrapper {
+        margin-bottom: 2rem;
+    }
+
+    &-content {
+        padding: 1rem;
+        margin-top: 0.25rem;
+        background-color: #fff;
+        border: 1px solid #dee2e6;
+        border-radius: 0.25rem;
+        display: none;
+    }
+}

app/assets/stylesheets/responsive/_global_style.scss

@@ -181,6 +181,14 @@ form input[type=url] {
   display: inline-block;
 }
 
+input:focus,
+textarea:focus,
+select:focus {
+  outline: 3px solid #ffd836 !important; //Overrides foundation focus state
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px #000;
+}
+
 /* Reset foundation's styling on <button> elements so that they look like
  * input[type=submit] elements */
 form button {

app/assets/stylesheets/responsive/_request_layout.scss

@@ -142,9 +142,6 @@
 a.track-request-action {
   margin-top: 0;
   width: 100%;
-  @media (min-width: 30em) {
-    margin-left: 1em;
-  }
 }
 
 .action-menu {

app/assets/stylesheets/responsive/_search_layout.scss

@@ -49,6 +49,13 @@
   .results_section {
     @include grid-column(12, $collapse:true);
   }
+  h2.foi_results {
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      margin-bottom: 2rem;
+    }
+  }
 }
 
 #advanced-search input[type=text] {

app/assets/stylesheets/responsive/_search_style.scss

@@ -11,7 +11,7 @@
 
 input.use-datepicker[type=text] {
   width: 130px;
-  background:image-url('calendar.png') no-repeat 100px 5px;
+  background:image-url('calendar.svg') no-repeat 100px 50%;
 }
 
 #ui-datepicker-div.ui-widget {
@@ -65,6 +65,7 @@ input.use-datepicker[type=text] {
 
 #list-filter {
   margin-bottom: 3em;
+  margin-top: 2rem;
 }
 
 #filter_requests_form label.title {
@@ -80,49 +81,60 @@ input.use-datepicker[type=text] {
     display: inline-block;
   }
   ul {
-    border: 1px solid #ccc;
     border-radius: 3px;
     width: 100%;
     font-size: 0;
     border-bottom: 0;
     @include respond-min( 20em ){
       border-right: 0;
     }
-    @include respond-min( 44em ){
-      border-bottom: 1px solid #ccc;
-    }
   }
   li {
     width: 100%;
+
+    a, span {
+      border: 1px solid #696969;
+      border-right: none;
+    }
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      a, span {
+        border-bottom: none;
+      }
+    }
+
+    &:nth-child(even) {
+      a, span {
+        border-right: 1px solid #696969;
+      }
+    }
+
     @include respond-min( 20em ){
       width: 50%;
     }
+
     @include respond-min( 44em ){
       width: auto;
+      &:nth-child(1),
+      &:nth-child(2) {
+        a, span {
+          border-bottom: 1px solid #696969;
+          border-right: none;
+        }
+      }
     }
   }
+
   a, span {
     width: 100%;
     text-align: center;
     display: block;
     font-size: 14px;
     padding: 0.5em 0.75em;
-    border-bottom: 1px solid #ccc;
     text-decoration: none;
     @include respond-min( 20em ){
       display: inline-block;
-      border-right: 1px solid #ccc;
-      border-bottom: 0;
-      &:nth-child(1),
-      &:nth-child(2) {
-        border-bottom: 1px solid #ccc;
-      }
-    }
-
-    @include respond-min( 44em ){
-      &:nth-child(n) {
-        border-bottom: 0;
-      }
     }
   }
   span {
@@ -153,3 +165,17 @@ input.use-datepicker[type=text] {
     margin-top: 1.5em !important;
   }
 }
+
+// On /list we want to display the advanced search bar because is one of the main features.
+.list-page {
+  #advanced-search-collapse-button {
+      display: none;
+  }
+
+  #advanced-search-collapse-content {
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      display: block;
+  }
+}

app/assets/stylesheets/responsive/_sidebar_layout.scss

@@ -51,6 +51,11 @@
     margin-bottom: 1em;
     display: inline-block;
   }
+
+  &_main {
+    // The Follow and RSS button will go right next to each other.
+    display: inline-block;
+  }
 }
 
 /* TODO: Why is this in the layout file for the request page sidebar? */

app/assets/stylesheets/responsive/all.scss

@@ -35,6 +35,8 @@
 @import "responsive/_categorization_game_style";
 @import "responsive/_categorization_game_layout";
 
+@import "responsive/_collapse_button_style";
+
 @import "responsive/_contact_style";
 @import "responsive/_contact_layout";
 

app/views/general/_help_requests.html.erb

@@ -1,5 +1,5 @@
 <div class="help_requests">
-  <h2><%= _('Help Out') %></h2>
+  <h2 class="visually-hidden"><%= _('Help Out') %></h2>
 
   <ul class="search_sidebar_list">
     <li class="search_sidebar_list__item">

app/views/general/_search_latest.html.erb

@@ -1,5 +1,5 @@
 <div class="search_latest">
-  <h2><%= _('Latest') %></h2>
+  <h2 class="visually-hidden"><%= _('Latest') %></h2>
 
   <ul class="search_sidebar_list">
     <li class="search_sidebar_list__item">

app/views/layouts/default.html.erb

@@ -45,7 +45,7 @@
     </script>
     <%= content_for :javascript_head %>
   </head>
-  <body class="<%= 'front' if params[:action] == 'frontpage' %> <% if @in_pro_area %>alaveteli-pro<% end %>">
+  <body class="<%= 'front' if params[:action] == 'frontpage' %> <% if @in_pro_area %>alaveteli-pro<% end %> <%= 'list-page' if request.path == '/list' %>">
     <% if is_admin? %>
       <%= render :partial => 'admin_general/admin_navbar' %>
     <% end %>

app/views/request/_request_search_form.html.erb

@@ -2,22 +2,37 @@
 
 <div id="list-filter" class="list-filter">
   <%= form_tag(request.path, :method => "get", :id=>"filter_requests_form") do %>
-    <div class="list-filter-item">
-      <%= label_tag(:query, _("Keywords"), :class=>"form_label title") %>
-      <%= text_field_tag(:query, params[:query]) %>
-    </div>
 
-    <div class="list-filter-item">
-      <%= label_tag(:query, _("Made between"), :class=>"form_label title") %>
-      <%= text_field_tag(:request_date_after, params[:request_date_after], {:class => "use-datepicker", :size => 10}) %>&nbsp;&nbsp;
-      <%= label_tag(:query, _("and"), :class=>"form_label") %>
-      <%= text_field_tag(:request_date_before, params[:request_date_before], {:class => "use-datepicker", :size => 10}) %>
+    <div class="collapse-wrapper">
+      <button id="advanced-search-collapse-button" class="js-collapse-trigger collapse-trigger button" aria-expanded="false" aria-controls="collapse-content-1" id="collapse-trigger-1" type="button">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1rem" height="1rem" role="presentation" aria-hidden="true">
+          <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="3"/>
+          <line x1="15" y1="16" x2="21" y2="23" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+        </svg>
+        <span>Advanced Search</span>
+      </button>
+
+      <div id="advanced-search-collapse-content" class="js-collapse-content collapse-content"  id="collapse-content-1" role="region"  aria-labelledby="collapse-trigger-1" hidden>
+        <div class="list-filter-item">
+          <%= label_tag(:query, _("Keywords"), :class=>"form_label title") %>
+          <%= text_field_tag(:query, params[:query]) %>
+        </div>
+
+        <div class="list-filter-item">
+          <%= label_tag(:query, _("Made between"), :class=>"form_label title") %>
+          <%= text_field_tag(:request_date_after, params[:request_date_after], {:class => "use-datepicker", :size => 10}) %>&nbsp;&nbsp;
+          <%= label_tag(:query, _("and"), :class=>"form_label") %>
+          <%= text_field_tag(:request_date_before, params[:request_date_before], {:class => "use-datepicker", :size => 10}) %>
+        </div>
+
+        <div class="list-filter-item">
+          <%= button_tag(_("Reset fields"), type: "button", class: "button button-tertiary js-clear-collapse-section") %>
+          <%= submit_tag(_("Search")) %>
+        </div>
+      </div>
     </div>
 
     <%= after_form_fields if defined?(after_form_fields) -%>
 
-    <div class="list-filter-item">
-      <%= submit_tag(_("Search")) %>
-    </div>
   <% end %>
 </div>