From b37b093fdc6ad7fc064c854691b9e3f04f69b1ac Mon Sep 17 00:00:00 2001 From: Daniel Jackson Date: Tue, 8 Oct 2024 14:00:12 +0200 Subject: [PATCH] Add a search button to name search for a11y, and highlight searched text by bolding it. --- app/assets/stylesheets/forms.css | 306 +++++++++--------- .../_filter_on_title.html.erb | 16 +- config/locales/space_filter.nb.yml | 1 + 3 files changed, 167 insertions(+), 156 deletions(-) diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css index d084ec6f..e66253cd 100644 --- a/app/assets/stylesheets/forms.css +++ b/app/assets/stylesheets/forms.css @@ -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 + } } diff --git a/app/views/spaces/index/search_form_fields/_filter_on_title.html.erb b/app/views/spaces/index/search_form_fields/_filter_on_title.html.erb index 227eb948..d8db3d23 100644 --- a/app/views/spaces/index/search_form_fields/_filter_on_title.html.erb +++ b/app/views/spaces/index/search_form_fields/_filter_on_title.html.erb @@ -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" %> +
+ <%= form.text_field :search_for_title, + value: params[:search_for_title], + onchange: "this.form.requestSubmit()", + class: "text_field shadow pr-7 font-bold" %> + +
diff --git a/config/locales/space_filter.nb.yml b/config/locales/space_filter.nb.yml index 870de676..631ff567 100644 --- a/config/locales/space_filter.nb.yml +++ b/config/locales/space_filter.nb.yml @@ -1,5 +1,6 @@ nb: space_filter: + search: "Søk" search_and_filter: "Søk og filtrér" show_spaces: one: 'Vis ett lokale'