фикс списка пола
This commit is contained in:
Professional
parent
ad149e571c
commit
76c9505ab1
@ -150,18 +150,37 @@
|
||||
<div class="info-item">
|
||||
<label for="editGender">Пол</label>
|
||||
<span v-if="!isEditMode">{{ getGenderText(profileData.gender) }}</span>
|
||||
<select
|
||||
v-else
|
||||
class="form-input form-select"
|
||||
<div v-else class="city-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
class="form-input"
|
||||
id="editGender"
|
||||
v-model="editableProfileData.gender"
|
||||
v-model="genderSearchQuery"
|
||||
placeholder="Выберите пол..."
|
||||
@focus="showGenderList = true; filteredGenders = genderOptions"
|
||||
@input="onGenderSearch"
|
||||
:disabled="profileLoading"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="city-clear-btn"
|
||||
@click="clearGenderSelection"
|
||||
v-if="editableProfileData.gender"
|
||||
:disabled="profileLoading"
|
||||
>
|
||||
<option value="">Не выбрано</option>
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
<option value="other">Другой</option>
|
||||
</select>
|
||||
<i class="bi-x"></i>
|
||||
</button>
|
||||
<div class="city-dropdown" v-if="showGenderList && filteredGenders.length > 0">
|
||||
<div
|
||||
v-for="option in filteredGenders"
|
||||
:key="option.value"
|
||||
class="city-option"
|
||||
@click="selectGender(option)"
|
||||
>
|
||||
{{ option.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label for="editCity">Город</label>
|
||||
@ -375,6 +394,16 @@ const showCityList = ref(false);
|
||||
const filteredCities = ref([]);
|
||||
let cities = []; // для хранения списка городов
|
||||
|
||||
// Для выпадающего списка пола
|
||||
const genderOptions = ref([
|
||||
{ value: 'male', text: 'Мужской' },
|
||||
{ value: 'female', text: 'Женский' },
|
||||
{ value: 'other', text: 'Другой' }
|
||||
]);
|
||||
const genderSearchQuery = ref('');
|
||||
const showGenderList = ref(false);
|
||||
const filteredGenders = ref([]);
|
||||
|
||||
// Computed properties
|
||||
const mainPhoto = computed(() => {
|
||||
return profileData.value?.photos?.find(photo => photo.isProfilePhoto) ||
|
||||
@ -866,6 +895,24 @@ const clearCitySelection = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Методы для выбора пола
|
||||
const onGenderSearch = () => {
|
||||
filteredGenders.value = genderOptions.value.filter(option =>
|
||||
option.text.toLowerCase().includes(genderSearchQuery.value.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
const selectGender = (genderOption) => {
|
||||
genderSearchQuery.value = genderOption.text;
|
||||
editableProfileData.value.gender = genderOption.value;
|
||||
showGenderList.value = false;
|
||||
};
|
||||
|
||||
const clearGenderSelection = () => {
|
||||
genderSearchQuery.value = '';
|
||||
editableProfileData.value.gender = '';
|
||||
};
|
||||
|
||||
const clearProfileMessages = () => {
|
||||
profileActionError.value = '';
|
||||
profileActionSuccess.value = '';
|
||||
@ -1352,14 +1399,6 @@ onMounted(async () => {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
|
||||
/* Стили для выпадающего списка городов */
|
||||
.city-input-wrapper {
|
||||
position: relative;
|
||||
@ -1544,113 +1583,6 @@ onMounted(async () => {
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* Медиа-запросы для адаптивности */
|
||||
@media (max-width: 1024px) {
|
||||
.profile-layout {
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 1.2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
.main-content {
|
||||
padding: 1rem 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили кнопок действий */
|
||||
.action-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: linear-gradient(45deg, #f5365c, #f56036);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.small {
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.add-photo-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.add-photo-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* Стили для предупреждений и сообщений */
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user