xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 21:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better search appearance

Browse Source
This commit is contained in:
FEARmeR 2023-05-20 15:26:24 +01:00
parent 49ddd38134
commit fd3b57c77e
1 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/Presentation/Sections/PresentationSearch.vue
View File

@ -3,6 +3,7 @@ import { onMounted, onUnmounted } from "vue";
import axios from 'axios';
import { ref } from "vue";
const searchQuery = ref('');
const searchResultProjects = ref([]);
const searchResultUsers = ref([]);
@ -27,9 +28,12 @@ const search = async () => {
<template>
<div class="searchBar">
<input type="text" v-model="searchQuery" placeholder="Поиск по проектам и людям" />
<button type="submit" @click="search">Go</button>
</div>
<!-- Added @keyup.enter="search" to enable searching by pressing Enter key -->
<!-- Added class searchInput for styling -->
<input class="searchInput" type="text" v-model="searchQuery" @keyup.enter="search" placeholder="Поиск по проектам и людям" />
<!-- Added class searchButton for styling -->
<button class="searchButton" type="submit" @click="search">Go</button>
</div>
<div>
<h2>Найдено проектов: {{ searchResultProjects.length}} </h2>
@ -55,10 +59,43 @@ const search = async () => {
</template>
<style scoped>
.searchBar{
display: flex;
justify-content: center;
.searchBar {
display: flex;
justify-content: center;
align-items: center;
}
.searchInput {
/* Makes the search input take up the maximum available width */
flex-grow: 1;
/* Adds some padding inside the input field */
padding: 10px;
/* Adds some margin to the right side of the input field */
margin-right: 10px;
/* Increased the font size a bit */
font-size: 16px;
}
.searchButton {
/* Adds some padding inside the button */
padding: 10px 20px;
/* Changes the font size */
font-size: 16px;
/* Changes the background color of the button */
background-color: #007BFF;
/* Changes the color of the text inside the button */
color: white;
/* Makes the border corners rounded */
border-radius: 4px;
/* Removes the default button border */
border: none;
/* Changes the cursor to a hand pointer when hovering over the button */
cursor: pointer;
}
.searchButton:hover {
/* Changes the background color of the button when hovering over it */
background-color: #0056b3;
}
</style>