diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss index e09a5aea2cc658c5a20af203a4cbbfa16bdb590d..3eca712924cadcd35ac7a44358850618374a5804 100644 --- a/aleksis/core/static/style.scss +++ b/aleksis/core/static/style.scss @@ -179,11 +179,14 @@ ul.sidenav li.logo > a:hover { box-shadow: none; } -.sidenav li.search .search-wrapper > i.material-icons { +.sidenav li.search .search-wrapper > button.search-button { position: absolute; - top: 21px; + top: calc(50% - 18px); right: 10px; - cursor: pointer; +} + +button.btn-flat.search-button:hover { + background-color: $button-disabled-background; } a.collection-item.search-item { diff --git a/aleksis/core/templates/core/base.html b/aleksis/core/templates/core/base.html index b7a67783254811e53c43c0dfb805c1282a5b7215..27744b77a8d1632865d1cae6ede86462c810c488 100644 --- a/aleksis/core/templates/core/base.html +++ b/aleksis/core/templates/core/base.html @@ -80,8 +80,10 @@ <li class="search"> <form method="get" action="{% url "haystack_search" %}" id="search-form" class="autocomplete"> <div class="search-wrapper"> - <input id="search" name="q" placeholder="{% trans "Search" %}"> - <i class="material-icons">search</i> + <input id="search" name="q" type="search" enterkeyhint="search" placeholder="{% trans "Search" %}"> + <button class="btn btn-flat search-button" type="submit" aria-label="{% trans "Search" %}"> + <i class="material-icons">search</i> + </button> </div> </form> </li>