diff options
| author | Henry Jameson <me@hjkos.com> | 2020-10-29 21:13:31 +0200 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2020-10-29 22:54:28 +0200 |
| commit | 633349ddff2fd96298ce26ac2d3c404edb1ebbf3 (patch) | |
| tree | 858919765ceb8a77d8ef07e8f5851aa4b3227fff /src/components/search_bar | |
| parent | 0f8a7037eae6c1237b759430bacb8381604e74b7 (diff) | |
Refactor desktop navbar into a component, change layout to grid for
better compatibility with search field and simpler CSS
Diffstat (limited to 'src/components/search_bar')
| -rw-r--r-- | src/components/search_bar/search_bar.vue | 77 |
1 files changed, 40 insertions, 37 deletions
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index f1c3fd7a..8d971287 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -1,46 +1,47 @@ <template> - <div> - <div class="search-bar-container"> - <a - v-if="hidden" - href="#" - class="nav-icon" - :title="$t('nav.search')" +<div + class="SearchBar" + :class="{ '-expanded': !hidden }" + > + <a + v-if="hidden" + href="#" + class="nav-icon" + :title="$t('nav.search')" ><FAIcon fixed-width class="fa-scale-110 fa-old-padding" icon="search" @click.prevent.stop="toggleHidden" - /></a> - <template v-else> - <input - id="search-bar-input" - ref="searchInput" - v-model="searchTerm" - class="search-bar-input" - :placeholder="$t('nav.search')" - type="text" - @keyup.enter="find(searchTerm)" + /></a> + <template v-else> + <input + id="search-bar-input" + ref="searchInput" + v-model="searchTerm" + class="search-bar-input" + :placeholder="$t('nav.search')" + type="text" + @keyup.enter="find(searchTerm)" > - <button - class="btn search-button" - @click="find(searchTerm)" + <button + class="btn search-button" + @click="find(searchTerm)" > - <FAIcon - fixed-width - icon="search" + <FAIcon + fixed-width + icon="search" /> - </button> - <span> - <FAIcon - fixed-width - icon="times" - class="cancel-icon fa-scale-110 fa-old-padding" - @click.prevent.stop="toggleHidden" + </button> + <span> + <FAIcon + fixed-width + icon="times" + class="cancel-icon fa-scale-110 fa-old-padding" + @click.prevent.stop="toggleHidden" /> - </span> - </template> - </div> + </span> + </template> </div> </template> @@ -49,21 +50,23 @@ <style lang="scss"> @import '../../_variables.scss'; -.search-bar-container { - max-width: 100%; +.SearchBar { display: inline-flex; align-items: baseline; vertical-align: baseline; justify-content: flex-end; + &.-expanded { + width: 100%; + } + .search-bar-input, .search-button { height: 29px; } .search-bar-input { - // TODO: do this properly without a rough guesstimate of 2 icons + paddings - max-width: calc(100% - 30px - 30px - 20px); + flex: 1 0 auto; } .cancel-icon { |