jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixe lg SearchBar.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-31 00:29:21 -04:00
parent 7123cee4cb
commit 4a46faa293
1 changed files with 70 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/main/Header.vue
View File

@@ -3,7 +3,6 @@
class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20" class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"
@click.stop @click.stop
> >
<div class="flex items-center"> <div class="flex items-center">
<v-app-bar-nav-icon @click.stop="sideBarStore.toggle()"> <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
</v-app-bar-nav-icon> </v-app-bar-nav-icon>
@@ -26,30 +25,45 @@
></v-img> ></v-img>
</RouterLink> </RouterLink>
</div> </div>
<!-- SmallScreen Searchbar -->
<div class="flex-grow flex items-center justify-center relative">
<div class="flex-grow flex items-center justify-center relative"> <div v-if="showSearch && isSmallScreen" class="search-bar-wrapper">
<div v-if="showSearch || !isSmallScreen" class="flex-grow flex justify-center items-center " > <v-text-field
<template v-if="showSearch"> density="compact"
<v-text-field rounded
density="compact" variant="outlined"
rounded v-model="searchQuery"
variant="outlined" placeholder="Recherche"
v-model="searchQuery" hide-details
placeholder="Recherche" clearable
hide-details append-inner-icon="mdi-magnify"
clearable @click.stop
append-inner-icon="mdi-magnify" @click:append-inner="onSearch"
@click.stop @keyup.enter="onSearch"
@click:append-inner="onSearch" >
@keyup.enter="onSearch" </v-text-field>
>
</v-text-field>
</template>
</div> </div>
<div v-if="!isSmallScreen || !showSearch" class="absolute-center flex"> <!-- largeScreen Searchbar -->
<div v-if="showSearch && !isSmallScreen" class="search-bar-large-screen">
<v-text-field
density="compact"
rounded
variant="outlined"
v-model="searchQuery"
placeholder="Recherche"
hide-details
clearable
append-inner-icon="mdi-magnify"
@click.stop
@click:append-inner="onSearch"
@keyup.enter="onSearch"
>
</v-text-field>
</div>
<!-- Buttons -->
<div v-if="!showSearch" class="absolute-center flex">
<v-btn <v-btn
v-if="authStore.isAuthenticated" v-if="authStore.isAuthenticated"
variant="plain" variant="plain"
@@ -59,8 +73,6 @@
> >
<v-icon>mdi-television</v-icon> <v-icon>mdi-television</v-icon>
</v-btn> </v-btn>
<v-btn <v-btn
variant="plain" variant="plain"
icon icon
@@ -71,7 +83,7 @@
</v-btn> </v-btn>
</div> </div>
</div> </div>
<div class="flex items-center space-x-4 search-container"> <div class="flex items-center space-x-4 search-container">
<template v-if="!showSearch"> <template v-if="!showSearch">
<v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon> <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
@@ -79,7 +91,7 @@
<v-btn <v-btn
variant="text" variant="text"
class="p-0 mx-0 min-w-0" class="p-0 mx-0 min-w-0"
@click="toggleLanguage" @click="toggleLanguage"
> >
{{ selectedLanguage === 'fr' ? 'Fr' : 'En' }} {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
@@ -97,7 +109,8 @@
alt="Profile Image" alt="Profile Image"
class="ml-2 rounded-full" class="ml-2 rounded-full"
width="32" width="32"
height="32"> height="32"
/>
</div> </div>
</template> </template>
@@ -147,7 +160,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onBeforeUnmount, onBeforeMount } from "vue"; import { ref, onBeforeUnmount, onBeforeMount, watch } from "vue";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useSideBarStore } from '@/stores/sideBarStore.js'; import { useSideBarStore } from '@/stores/sideBarStore.js';
import { useUserStore } from "@/stores/userStore.js"; import { useUserStore } from "@/stores/userStore.js";
@@ -166,6 +179,10 @@ const searchQuery = ref("");
const showSearch = ref(false); const showSearch = ref(false);
const isSmallScreen = ref(smAndDown.value); const isSmallScreen = ref(smAndDown.value);
watch(smAndDown, (val) => {
isSmallScreen.value = val;
});
let selectedLanguage = ref(locale.value); let selectedLanguage = ref(locale.value);
initializeLocale(); initializeLocale();
@@ -232,20 +249,39 @@ function toggleLanguage() {
@apply bg-[#903175] text-gray-200; @apply bg-[#903175] text-gray-200;
} }
/* Explorer & feed others */
.absolute-center { .absolute-center {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
gap: 6px; gap: 6px;
align-items: center; align-items: center;
} }
/* Explorer & feed center mobile */ .search-bar-wrapper {
@media (max-width: 640px) { position: absolute;
width: 100%;
max-width: 700px;
z-index: 50;
}
.search-bar-large-screen {
display: flex;
width: 600px;
z-index: 50;
}
@media (min-width: 1024px) {
.search-bar-large-screen {
display: flex;
margin-left: auto;
width: 600px;
}
}
@media (max-width: 640px) {
.absolute-center { .absolute-center {
left: 65%; left: 65%;
transform: translateX(-55%); transform: translateX(-55%);
} }
} }