Skip to content

Commit

Permalink
Address UX feedback on location-based search form
Browse files Browse the repository at this point in the history 
Why these changes are being introduced:

This is in response to a UX review of location-based search.

Relevant ticket(s):

* [GDT-136](https://mitlibraries.atlassian.net/browse/GDT-136)

How this addresses that need:

* Removes top margin from all `details` elements except the first.
* Bolds labels.
* Moves placeholder text to description `span` elements and changes
"e.g." to "Ex:".
* Changes language for distance description/hint.
* Changes summary labels for geobox and geodistance.
* Removes red asterisks as indicators of required classes, and
instead adds a `p` tag indicating as much below each `legend`.

Side effects of this change:

None.
  • Loading branch information
@jazairi
jazairi committed Mar 19, 2024
1 parent 44c86b5 commit 6dd44a4
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 23 deletions.
16 changes: 9 additions & 7 deletions app/assets/stylesheets/partials/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
padding: 2.4rem 2rem 1rem 2.4rem;

details {
margin-top: 1rem;
&:first-of-type {
margin-top: 1rem;
}

.field-container {
margin-top: 1rem;
Expand Down Expand Up @@ -78,16 +80,16 @@

#geobox-search-panel,
#geodistance-search-panel {
label::after {
color: $red-muted;
content: '*';
}
.geo-label,
.geo-desc {
.geo-desc,
.hint {
display: block;
color: $black;
}
.geo-label {
font-weight: $fw-bold;
}
.geo-desc {
font-size: $fs-xsmall;
margin-bottom: 2rem;
}
#maxLat-desc,
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/search_form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function disableGeobox() {
field.setAttribute('aria-required', false);
});
geobox_label.classList = 'closed';
geobox_label.innerText = 'Bounding box search';
geobox_label.innerText = 'Geospatial bounding box search';
};

function enableGeobox() {
Expand Down Expand Up @@ -94,7 +94,7 @@ function enableGeodistance() {
field.setAttribute('aria-required', true);
});
geodistance_label.classList = 'open';
geodistance_label.innerText = 'Close geospatial distance search';
geodistance_label.innerText = 'Close distance search';
};


Expand Down
36 changes: 22 additions & 14 deletions app/views/search/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ if params[:advanced] == "true"
search_required = false
end

geobox_label = "Bounding box search"
geobox_label = "Geospatial bounding box search"
geobox_label_class = "closed"
if params[:geobox] == "true"
geobox_label = "Close bounding box search"
Expand All @@ -27,7 +27,7 @@ end
geodistance_label = "Geospatial distance search"
geodistance_label_class = "closed"
if params[:geodistance] == "true"
geodistance_label = "Close geospatial distance search"
geodistance_label = "Close distance search"
geodistance_label_class = "open"
geodistance_required = true
search_required = false
Expand All @@ -50,6 +50,7 @@ end
<input id="geobox-search-field" type="hidden" name="geobox" value="<%= params[:geobox] %>">
<fieldset>
<legend>Search within a geospatial bounding box</legend>
<p>All fields in this section are required</p>
<div class="gridband layout-2c">
<div class="field-wrap grid-item">
<label class="geo-label" for="geobox-minLongitude">
Expand All @@ -59,9 +60,10 @@ end
class="field field-text <%= "required" if geobox_required %>"
id="geobox-minLongitude" name="geoboxMinLongitude" value="<%= params[:geoboxMinLongitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="minLong-desc" placeholder="E.g., -73.507239">
aria-describedby="minLong-desc">
<span class="geo-desc" id="minLong-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -73.507239)
<span class="hint">Western hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -72,9 +74,10 @@ end
class="field field-text <%= "required" if geobox_required %>"
id="geobox-minLatitude" name="geoboxMinLatitude" value="<%= params[:geoboxMinLatitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="minLat-desc" placeholder="E.g., 41.239083">
aria-describedby="minLat-desc">
<span class="geo-desc" id="minLat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0 (Ex: 41.239083)
<span class="msg-required">Southern hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -85,9 +88,10 @@ end
class="field field-text <%= "required" if geobox_required %>"
id="geobox-maxLongitude" name="geoboxMaxLongitude" value="<%= params[:geoboxMaxLongitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="maxLong-desc" placeholder="E.g., -69.928713">
aria-describedby="maxLong-desc">
<span class="geo-desc" id="maxLong-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -69.928713)
<span class="hint">Western hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -100,7 +104,8 @@ end
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="maxLat-desc" placeholder="e.g., 42.886759">
<span class="geo-desc" id="maxLat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0
<span class="hint">Southern hemisphere is negative</span>
</span>
</div>
</div>
Expand All @@ -113,6 +118,7 @@ end
<input id="geodistance-search-field" type="hidden" name="geodistance" value="<%= params[:geodistance] %>">
<fieldset>
<legend>Search within a distance of a geographic point</legend>
<p>All fields in this section are required</p>
<div class="gridband layout-2c">
<div class="field-wrap grid-item">
<label class="geo-label" for="geodistance-latitude">Latitude</label>
Expand All @@ -121,9 +127,10 @@ end
id="geodistance-latitude" name="geodistanceLatitude"
value="<%= params[:geodistanceLatitude] %>" aria-describedby="lat-desc"
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="lat-desc" placeholder="E.g., 42.279594">
aria-describedby="lat-desc">
<span class="geo-desc" id="lat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0 (Ex: 42.279594)
<span class="hint">Southern hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -133,9 +140,10 @@ end
id="geodistance-longitude" name="geodistanceLongitude"
value="<%= params[:geodistanceLongitude] %>" aria-describedby="long-desc"
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="long-desc" placeholder="E.g., -83.732124">
aria-describedby="long-desc">
<span class="geo-desc" id="long-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -83.732124)
<span class="hint">Western hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -146,7 +154,7 @@ end
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="distance-desc" placeholder="E.g., 160mi">
<span class="geo-desc" id="distance-desc">
Include units; e.g., '100km' or'50mi' (default unit is meters)
Distance is in meters by default; add other units if preferred (Ex: '100km' or'50mi')
</span>
</div>
</div>
Expand Down

0 comments on commit 6dd44a4

Please sign in to comment.