Skip to content

Commit

Permalink
Add a search button to name search for a11y, and highlight searched t…
Browse files Browse the repository at this point in the history 
…ext by bolding it.
  • Loading branch information
@DanielJackson-Oslo
DanielJackson-Oslo committed Oct 8, 2024
1 parent 63c26f7 commit b37b093
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 156 deletions.
306 changes: 154 additions & 152 deletions app/assets/stylesheets/forms.css
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,179 @@
.button {
@apply cursor-pointer;
@apply rounded-lg py-2 px-3;
@apply bg-gray-100 border border-gray-100;
@apply inline-flex gap-2 content-center items-center;
@apply text-gray-700;
&:hover {
@apply shadow-md;
@apply border border-pink-700;
&.collapsable {
.text {
max-width: 200px;
margin-right: 0.5em;
@layer components {
.button {
@apply cursor-pointer;
@apply rounded-lg py-2 px-3;
@apply bg-gray-100 border border-gray-100;
@apply inline-flex gap-2 content-center items-center;
@apply text-gray-700;
&:hover {
@apply shadow-md;
@apply border border-pink-700;
&.collapsable {
.text {
max-width: 200px;
margin-right: 0.5em;
}
}
}
}
&.hidden {
display: none;
}
&.submit,
&[type=submit]:not(.no-submit-styling) {
@apply bg-pink-700 text-white;
&:hover {
@apply bg-pink-600 border-pink-600;
&.hidden {
display: none;
}
}
&.disabled,
&[disabled] {
@apply bg-gray-300 text-gray-600 cursor-default;
&:hover, &:focus {
@apply bg-gray-300 text-gray-600 cursor-not-allowed border-gray-300 shadow-none;
&.submit,
&[type=submit]:not(.no-submit-styling) {
@apply bg-pink-700 text-white;
&:hover {
@apply bg-pink-600 border-pink-600;
}
}
&.disabled,
&[disabled] {
@apply bg-gray-300 text-gray-600 cursor-default;
&:hover, &:focus {
@apply bg-gray-300 text-gray-600 cursor-not-allowed border-gray-300 shadow-none;
}
}
@extend .focused-outline;
&.button--white {
@apply bg-white border-gray-200;
}
}
@extend .focused-outline;
&.button--white {
@apply bg-white border-gray-200;
}
}

.focused-outline {
@apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lnu-pink
}
.focused-outline {
@apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lnu-pink
}

/* Form wrappers: */
/* Form wrappers: */

/*
Forms where the label is on top of the input element:
*/
.dropdown,
.vertical_form {
.label {
@apply block;
@apply mt-3 mb-1;
/*
Forms where the label is on top of the input element:
*/
.dropdown,
.vertical_form {
.label {
@apply block;
@apply mt-3 mb-1;
}
@apply mb-3;
}
@apply mb-3;
}

/*
Input for boolean (aka checkboxes)
*/
.boolean_form {
@extend .vertical_form;
@apply mb-4 flex items-center;
.label {
@apply mt-1.5 mb-1.5;
/*
Input for boolean (aka checkboxes)
*/
.boolean_form {
@extend .vertical_form;
@apply mb-4 flex items-center;
.label {
@apply mt-1.5 mb-1.5;
}
}
}

/*
Collection input for radio buttons and check boxes
*/
.collection_form {
@extend .vertical_form;
@apply flex items-center;
@apply mb-0.5;
/*
Collection input for radio buttons and check boxes
*/
.collection_form {
@extend .vertical_form;
@apply flex items-center;
@apply mb-0.5;

.item_label {
@apply my-1 ml-2 block text-sm;
}
.item_label_wrapper {
@apply my-4;
.item_label {
@apply my-1 ml-2 block text-sm;
}
.item_label_wrapper {
@apply my-4;
}
}
}

.check_boxes {
.legend {
@apply block;
@apply mt-3 mb-2;
@apply text-current font-bold;
.check_boxes {
.legend {
@apply block;
@apply mt-3 mb-2;
@apply text-current font-bold;
}
}
}

.field_set {
legend {
@apply h3 font-bold mb-1.5;
.field_set {
legend {
@apply h3 font-bold mb-1.5;
}
}
}

/*
Meta (helper text around fields)
*/
.meta_text {
@apply mt-2 text-xs italic;
}
/*
Meta (helper text around fields)
*/
.meta_text {
@apply mt-2 text-xs italic;
}

/*
Errors:
*/
.error_notification {
@apply text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400;
}
.error_field {
@apply border-red-500;
}
.error_text {
@apply text-red-500;
}
/*
Errors:
*/
.error_notification {
@apply text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400;
}
.error_field {
@apply border-red-500;
}
.error_text {
@apply text-red-500;
}

/*
Valid:
*/
.valid_field {
@apply border-green-400;
}
.valid_text {
@apply text-green-400;
}
/*
Valid:
*/
.valid_field {
@apply border-green-400;
}
.valid_text {
@apply text-green-400;
}

/*
Labels
*/
.label {
@apply text-sm font-medium text-gray-600;
}
.label--error {
@extend .error_text;
}
/*
Labels
*/
.label {
@apply text-sm font-medium text-gray-600;
}
.label--error {
@extend .error_text;
}

/*
Fields
*/
.text_field {
@apply appearance-none rounded relative block w-full px-3 py-2 sm:text-sm;
@apply border border-gray-300 placeholder-gray-500 text-gray-900 ;
@apply focus:outline-none focus:border-lnu-pink focus:ring-lnu-pink;
}
.file_field {
@apply w-full text-gray-500 px-3 py-2 border rounded;
@extend .focused-outline;
}
.checkbox-wrapper {
@apply flex items-center h-5;
}
.checkbox {
@extend .focused-outline;
@apply h-4 w-4 text-lnu-pink focus:ring-lnu-pink border-gray-300 rounded;
}
.range_field_wrapper {
@apply flex items-center h-5;
}
.range_field {
@extend .focused-outline;
@apply rounded-lg overflow-hidden appearance-none bg-gray-400 h-3 w-full text-gray-300;
}
.legend {
@apply text-sm font-medium text-gray-600;
}
/*
Fields
*/
.text_field {
@apply appearance-none rounded relative block w-full px-3 py-2 sm:text-sm;
@apply border border-gray-300 placeholder-gray-500 text-gray-900 ;
@apply focus:outline-none focus:border-lnu-pink focus:ring-lnu-pink;
}
.file_field {
@apply w-full text-gray-500 px-3 py-2 border rounded;
@extend .focused-outline;
}
.checkbox-wrapper {
@apply flex items-center h-5;
}
.checkbox {
@extend .focused-outline;
@apply h-4 w-4 text-lnu-pink focus:ring-lnu-pink border-gray-300 rounded;
}
.range_field_wrapper {
@apply flex items-center h-5;
}
.range_field {
@extend .focused-outline;
@apply rounded-lg overflow-hidden appearance-none bg-gray-400 h-3 w-full text-gray-300;
}
.legend {
@apply text-sm font-medium text-gray-600;
}

.multi_select_wrapper {
@apply inline-flex space-x-1;
}
.multi_select {
@extend .focused-outline;
@apply flex w-auto w-auto shadow appearance-none border border-gray-300;
@apply rounded w-full p-2 bg-white;
@apply text-gray-400 leading-4 transition-colors duration-200 ease-in-out
.multi_select_wrapper {
@apply inline-flex space-x-1;
}
.multi_select {
@extend .focused-outline;
@apply flex w-auto w-auto shadow appearance-none border border-gray-300;
@apply rounded w-full p-2 bg-white;
@apply text-gray-400 leading-4 transition-colors duration-200 ease-in-out
}
}
16 changes: 12 additions & 4 deletions app/views/spaces/index/search_form_fields/_filter_on_title.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<%# locals: (form:) %>
<%= form.label t("space_filter.title"), for: :search_for_title, class: "text-xs font-bold mb-3 block text-lnu-blue" %>
<%= form.text_field :search_for_title,
value: params[:search_for_title],
onchange: "this.form.requestSubmit()",
class: "text_field shadow" %>
<div class="relative">
<%= form.text_field :search_for_title,
value: params[:search_for_title],
onchange: "this.form.requestSubmit()",
class: "text_field shadow pr-7 font-bold" %>
<button
title="<%= t("space_filter.title") %>"
class="absolute right-1 top-1 bottom-1 px-1 rounded bg-transparent hover:bg-lnu-pink focus:ring focus:ring-offset-2 focus:ring-lnu-pink text-lnu-blue hover:text-white">
<%= inline_svg_tag "search.svg", class: "h-4 w-4", alt: "" %>
<span class="sr-only"><%= t("space_filter.search") %></span>
</button>
</div>
1 change: 1 addition & 0 deletions config/locales/space_filter.nb.yml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
nb:
space_filter:
search: "Søk"
search_and_filter: "Søk og filtrér"
show_spaces:
one: 'Vis ett lokale'
Expand Down

0 comments on commit b37b093

Please sign in to comment.