ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add Search Icon

This commit is contained in:
Lorenz Padberg 2023-08-25 09:31:59 +02:00
parent 0297d49e0c
commit 77aede3948
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/icons/SearchMagnifyingGlass.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<svg
id="a"
data-name="shape"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<path
d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
/>
</svg>
</template>

12
client/src/components/instruments/FilterBar.vue
View File

@ -8,7 +8,7 @@
@input="debouncedUpdate" @input="debouncedUpdate"
placeholder="Suchbegriff eingeben..." placeholder="Suchbegriff eingeben..."
/> />
<NoteIcon class="filter-bar__search-icon"></NoteIcon> <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
<!-- Font Awesome search icon as an example --> <!-- Font Awesome search icon as an example -->
</div> </div>
<pill-radio-buttons <pill-radio-buttons
@ -22,10 +22,10 @@
<script setup lang="ts"> <script setup lang="ts">
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { ref, watchEffect } from 'vue'; import { ref, watchEffect } from 'vue';
import NoteIcon from '@/components/icons/NoteIcon.vue'; import NoteIcon from '@/components/icons/NoteIcon.vue';
import PillRadioButtons from '@/components/ui/PillRadioButtons.vue'; import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
import SearchMagnifyingGlass from "@/components/icons/SearchMagnifyingGlass.vue";
const props = defineProps({ const props = defineProps({
searchText: { searchText: {
@ -78,16 +78,16 @@ const debouncedUpdate = debounce((event: Event) => {
padding: 1rem; padding: 1rem;
border-radius: $input-border-radius; border-radius: $input-border-radius;
border: 1px solid $color-silver; border: 1px solid $color-silver;
font-size: 1rem; font-size: $base-font-size-pixels;
} }
&__search-icon { &__search-icon {
position: absolute; position: absolute;
right: 1rem; width: $default-icon-dimension;
height: $default-icon-dimension;
right: $medium-spacing;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 1rem;
color: $color-silver;
} }
&__language-selection { &__language-selection {