Search design

app/assets/stylesheets/application.scss

@@ -163,4 +163,4 @@
   border-radius: 5px;
   color: $color-white;
   padding: 0.25rem 0.5rem;
-}
+}

app/assets/stylesheets/ecosystems.scss

@@ -718,27 +718,97 @@ body {
 	&:hover {
 	  color: $color-purple;
 	}
-  }
-  .page-link.active, .active > .page-link {
+}
+
+.page-link.active, .active > .page-link {
 	background-color: $color-purple-dark;
 	border-color: $color-purple-dark;
   }
 
-  .badge-warning {
+.badge-warning {
 	background-color: $bootstrap-warning;
-  }
+}
 
-  .badge-danger {
+.badge-danger {
 	background-color: $bootstrap-danger;
 	color: $color-white;
-  }
+}
 
-  .badge-dark {
+.badge-dark {
 	background-color: $color-black;
 	color: $color-white;
-  }
+}
 
-  .badge-light {
+.badge-light {
 	background-color: $color-grey-light;
+}
+
+.listing {
+	border: 0;
+	border-radius: 0;
+	border-bottom: 3px solid $color-purple-light;
+	padding: 0;
+}
+
+
+.listing__title {
+	@include font-size(1rem);
+	a {
+	  text-decoration: none;
+	  color: $color-black;
+	}
+}
+
+.listing__meta {
+  font-weight: normal;
+  color: $color-grey-dark;
+  @include font-size(0.875rem);
+}
+
+.listing__details {
+	@include font-size(0.875rem);
+}
+
+.listing__time {
+	margin-top: 0.3888888889; //gross number but it aligns the baseline with the severity badge
+	@include font-size(0.7777777778rem);
+}
+
+.listing-filters {
+	.list-group-item {
+	  @include font-size(0.875rem);
+	  border-color: $color-grey;
+	  word-break: break-word;
+	}
+}
+
+.listing-controls {
+  background-color: $color-grey-light;
+  p {
+    line-height: 2.2222222222rem;
   }
-
+	.dropdown-item.active,
+	.dropdown-item:active {
+	  background-color: $color-purple;
+	}
+}
+
+.listing-header__meta__text {
+	@include font-size(1rem);
+	line-height: 1.4rem;
+}
+
+.listing-header__title {
+	line-break: anywhere;
+}
+
+.rounded-input-group {
+	.form-control {
+		border-top-left-radius: 800px; //magic number, but it's consistent with bootstrap
+		border-bottom-left-radius: 800px;
+	}
+	.btn {
+		border-top-right-radius: 800px;
+		border-bottom-right-radius: 800px;
+	}
+}

app/views/funds/search.html.erb

@@ -1,32 +1,70 @@
-<div class="container-sm">
-  <h1>Funds Search: <%= params[:query] %> </h1>
-
+<div class="purple-grad-bg mb-5 pt-4 pb-4">
+  <div class="container">
+    <h1>Find a fund</h1>
+    <p class="mt-3 mb-4">Search <strong><%= Fund.count %></strong> curated funds to find the projects that need your support</p>
     <%= form_tag search_funds_path, method: :get, class: "mb-4" do %>
-    <div class="input-group">
-      <%= text_field_tag :query, params[:query], class: "form-control", placeholder: "Search funds..." %>
-      <button type="submit" class="btn btn-primary">Search</button>
+      <label for="query" class="ps-3 mb-2">Fund name</label>
+    <div class="input-group rounded-input-group" style="max-width: 500px;">
+      <%= text_field_tag :query, params[:query], class: "form-control form-control-lg", placeholder: "eg. Django" %>
+      <button type="submit" class="btn btn-lg btn-danger pe-4">Search</button>
     </div>
-  <% end %>
-
-  <div class="row mb-5">
-  <% @funds.each do |fund| %>
-    <div class="col-lg-6 col-xl-3">
-      <a href="<%= fund_path(fund) %>" class="card fund-card p-4 mb-3 mb-xl-0 block-link block-link--spesh">
-        <div class="row align-items-center align-items-stretch">
-          <div class="col-8">
-            <h3 class="mb-3 block-link__title spesh-link"><%= fund.name %></h3>
-            <p><span class="label">Distributed</span><strong class="value"><%= number_to_currency fund.total_distributed_cents/100 %></strong></p>
-            <p><span class="label">From</span><strong class="value"><%= pluralize fund.total_donors, 'Funder'%></strong></p>
-            <p><span class="label">To</span><strong class="value"><%= pluralize fund.total_funded_projects, 'Projects' %></strong></p>
+    <% end %>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-lg-9 pe-lg-5">
+    <% if params[:query].present? %>
+      <div class="listing-controls rounded p-3 mb-5">
+        <p class="mb-0"><%= pluralize(@funds.count, 'result') %> for <strong><%= params[:query] %></strong></p>
+      </div>
+      <% if @funds.any? %>
+        <% @funds.each do |fund| %>
+          <div class="card mb-4 pb-4 listing d-flex flex-row align-items-center">
+            <img src="<%= fund.logo_url %>" alt="" class="card-img img-fluid" onerror="this.style.display='none'" style="max-width: 60px;">
+            <div class="card-body p-0 ms-3">
+              <h3 class="card-title listing__title mt-3">
+                <a href="<%= fund_path(fund) %>">
+                  <%= fund.name %> <span class="listing__meta"><%= fund.description %></span>
+                </a>
+              </h3>
+              <div class="mt-3 listing__details">
+                <div class="d-flex align-items-top">
+                  <%= bootstrap_icon 'box', width: 18, height: 18, class: 'flex-shrink-0 me-2' %>
+                  <span class="me-3"><%= pluralize fund.total_funded_projects, 'Projects' %></span>
+                  <%= bootstrap_icon 'wallet', width: 18, height: 18, class: 'flex-shrink-0 me-2' %>
+                  <%= pluralize fund.total_donors, 'Funder'%>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="col-4 text-end">
-            <img src="<%= fund.logo_url %>" alt="" class="card-img-top img-fluid" onerror="this.style.display='none'" style="max-width: 60px;">
+        <% end %>
+      <% else %>
+          <div class="row">
+            <div class="col-md-4">
+              <%= image_tag("dashed-stones-small.svg", alt: " ", class: "img-fluid pe-md-3 mb-3", size: "300x245") %>
+            </div>
+            <div class="col-lg-8">
+              <h2 class="h3">We couldn't find any results for &lsquo;<%= params[:query] %>&rsquo;</strong></h2>
+              <p>Try amending your search to use more general terms</p>
+              <h2 class="h4 mt-5">Can’t find your fund?</h2>
+              <p class="small">Contact us to talk about adding a new fund</p>
+              <a href="mailto:hello@oscollective.org" class="btn btn-primary">Contact us</a>
+            </div>
           </div>
-        </div>
-      </a>
+
+      <% end %>
+    <% else %>
+      <div class="listing-controls rounded p-3 mb-5"><p class="mb-0">Searching <strong><%= Fund.count %></strong> funds</p></div>
+    <% end %>
+      <%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
+    </div>
+    <div class="col-lg-3">
+      <% if @funds.any? %>
+        <h2 class="h4">Can’t find your fund?</h2>
+        <p class="small">Contact us to talk about adding a new fund</p>
+        <a href="mailto:hello@oscollective.org" class="btn btn-primary">Contact us</a>
+      <% end %>
     </div>
-  <% end %>
   </div>
-
-  <%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>  
-</div>
+</div>