Skip to content

Commit e5f0de5

Browse files
andrewandrew
authored
Merge pull request #230 from ecosyste-ms/search-design
Search design
2 parents a551a0f + 08fbf21 commit e5f0de5

File tree

4 files changed

+187
-37
lines changed

4 files changed

+187
-37
lines changed

‎app/assets/images/dashed-stones-small.svg‎

Lines changed: 42 additions & 0 deletions
Loading

‎app/assets/stylesheets/application.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,4 +163,4 @@
163163
border-radius: 5px;
164164
color: $color-white;
165165
padding: 0.25rem 0.5rem;
166-
}
166+
}

‎app/assets/stylesheets/ecosystems.scss‎

Lines changed: 80 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -718,27 +718,97 @@ body {
718718
&:hover {
719719
color: $color-purple;
720720
}
721-
}
722-
.page-link.active, .active > .page-link {
721+
}
722+
723+
.page-link.active, .active > .page-link {
723724
background-color: $color-purple-dark;
724725
border-color: $color-purple-dark;
725726
}
726727

727-
.badge-warning {
728+
.badge-warning {
728729
background-color: $bootstrap-warning;
729-
}
730+
}
730731

731-
.badge-danger {
732+
.badge-danger {
732733
background-color: $bootstrap-danger;
733734
color: $color-white;
734-
}
735+
}
735736

736-
.badge-dark {
737+
.badge-dark {
737738
background-color: $color-black;
738739
color: $color-white;
739-
}
740+
}
740741

741-
.badge-light {
742+
.badge-light {
742743
background-color: $color-grey-light;
744+
}
745+
746+
.listing {
747+
border: 0;
748+
border-radius: 0;
749+
border-bottom: 3px solid $color-purple-light;
750+
padding: 0;
751+
}
752+
753+
754+
.listing__title {
755+
@include font-size(1rem);
756+
a {
757+
text-decoration: none;
758+
color: $color-black;
759+
}
760+
}
761+
762+
.listing__meta {
763+
font-weight: normal;
764+
color: $color-grey-dark;
765+
@include font-size(0.875rem);
766+
}
767+
768+
.listing__details {
769+
@include font-size(0.875rem);
770+
}
771+
772+
.listing__time {
773+
margin-top: 0.3888888889; //gross number but it aligns the baseline with the severity badge
774+
@include font-size(0.7777777778rem);
775+
}
776+
777+
.listing-filters {
778+
.list-group-item {
779+
@include font-size(0.875rem);
780+
border-color: $color-grey;
781+
word-break: break-word;
782+
}
783+
}
784+
785+
.listing-controls {
786+
background-color: $color-grey-light;
787+
p {
788+
line-height: 2.2222222222rem;
743789
}
744-
790+
.dropdown-item.active,
791+
.dropdown-item:active {
792+
background-color: $color-purple;
793+
}
794+
}
795+
796+
.listing-header__meta__text {
797+
@include font-size(1rem);
798+
line-height: 1.4rem;
799+
}
800+
801+
.listing-header__title {
802+
line-break: anywhere;
803+
}
804+
805+
.rounded-input-group {
806+
.form-control {
807+
border-top-left-radius: 800px; //magic number, but it's consistent with bootstrap
808+
border-bottom-left-radius: 800px;
809+
}
810+
.btn {
811+
border-top-right-radius: 800px;
812+
border-bottom-right-radius: 800px;
813+
}
814+
}

‎app/views/funds/search.html.erb‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,70 @@
1-
<div class="container-sm">
2-
<h1>Funds Search: <%= params[:query] %> </h1>
3-
1+
<div class="purple-grad-bg mb-5 pt-4 pb-4">
2+
<div class="container">
3+
<h1>Find a fund</h1>
4+
<p class="mt-3 mb-4">Search <strong><%= Fund.count %></strong> curated funds to find the projects that need your support</p>
45
<%= form_tag search_funds_path, method: :get, class: "mb-4" do %>
5-
<div class="input-group">
6-
<%= text_field_tag :query, params[:query], class: "form-control", placeholder: "Search funds..." %>
7-
<button type="submit" class="btn btn-primary">Search</button>
6+
<label for="query" class="ps-3 mb-2">Fund name</label>
7+
<div class="input-group rounded-input-group" style="max-width: 500px;">
8+
<%= text_field_tag :query, params[:query], class: "form-control form-control-lg", placeholder: "eg. Django" %>
9+
<button type="submit" class="btn btn-lg btn-danger pe-4">Search</button>
810
</div>
9-
<% end %>
10-
11-
<div class="row mb-5">
12-
<% @funds.each do |fund| %>
13-
<div class="col-lg-6 col-xl-3">
14-
<a href="<%= fund_path(fund) %>" class="card fund-card p-4 mb-3 mb-xl-0 block-link block-link--spesh">
15-
<div class="row align-items-center align-items-stretch">
16-
<div class="col-8">
17-
<h3 class="mb-3 block-link__title spesh-link"><%= fund.name %></h3>
18-
<p><span class="label">Distributed</span><strong class="value"><%= number_to_currency fund.total_distributed_cents/100 %></strong></p>
19-
<p><span class="label">From</span><strong class="value"><%= pluralize fund.total_donors, 'Funder'%></strong></p>
20-
<p><span class="label">To</span><strong class="value"><%= pluralize fund.total_funded_projects, 'Projects' %></strong></p>
11+
<% end %>
12+
</div>
13+
</div>
14+
<div class="container">
15+
<div class="row">
16+
<div class="col-lg-9 pe-lg-5">
17+
<% if params[:query].present? %>
18+
<div class="listing-controls rounded p-3 mb-5">
19+
<p class="mb-0"><%= pluralize(@funds.count, 'result') %> for <strong><%= params[:query] %></strong></p>
20+
</div>
21+
<% if @funds.any? %>
22+
<% @funds.each do |fund| %>
23+
<div class="card mb-4 pb-4 listing d-flex flex-row align-items-center">
24+
<img src="<%= fund.logo_url %>" alt="" class="card-img img-fluid" onerror="this.style.display='none'" style="max-width: 60px;">
25+
<div class="card-body p-0 ms-3">
26+
<h3 class="card-title listing__title mt-3">
27+
<a href="<%= fund_path(fund) %>">
28+
<%= fund.name %> <span class="listing__meta"><%= fund.description %></span>
29+
</a>
30+
</h3>
31+
<div class="mt-3 listing__details">
32+
<div class="d-flex align-items-top">
33+
<%= bootstrap_icon 'box', width: 18, height: 18, class: 'flex-shrink-0 me-2' %>
34+
<span class="me-3"><%= pluralize fund.total_funded_projects, 'Projects' %></span>
35+
<%= bootstrap_icon 'wallet', width: 18, height: 18, class: 'flex-shrink-0 me-2' %>
36+
<%= pluralize fund.total_donors, 'Funder'%>
37+
</div>
38+
</div>
39+
</div>
2140
</div>
22-
<div class="col-4 text-end">
23-
<img src="<%= fund.logo_url %>" alt="" class="card-img-top img-fluid" onerror="this.style.display='none'" style="max-width: 60px;">
41+
<% end %>
42+
<% else %>
43+
<div class="row">
44+
<div class="col-md-4">
45+
<%= image_tag("dashed-stones-small.svg", alt: " ", class: "img-fluid pe-md-3 mb-3", size: "300x245") %>
46+
</div>
47+
<div class="col-lg-8">
48+
<h2 class="h3">We couldn't find any results for &lsquo;<%= params[:query] %>&rsquo;</strong></h2>
49+
<p>Try amending your search to use more general terms</p>
50+
<h2 class="h4 mt-5">Can’t find your fund?</h2>
51+
<p class="small">Contact us to talk about adding a new fund</p>
52+
<a href="mailto:hello@oscollective.org" class="btn btn-primary">Contact us</a>
53+
</div>
2454
</div>
25-
</div>
26-
</a>
55+
56+
<% end %>
57+
<% else %>
58+
<div class="listing-controls rounded p-3 mb-5"><p class="mb-0">Searching <strong><%= Fund.count %></strong> funds</p></div>
59+
<% end %>
60+
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
61+
</div>
62+
<div class="col-lg-3">
63+
<% if @funds.any? %>
64+
<h2 class="h4">Can’t find your fund?</h2>
65+
<p class="small">Contact us to talk about adding a new fund</p>
66+
<a href="mailto:hello@oscollective.org" class="btn btn-primary">Contact us</a>
67+
<% end %>
2768
</div>
28-
<% end %>
2969
</div>
30-
31-
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
32-
</div>
70+
</div>

0 commit comments

Comments
 (0)