versão 00
This commit is contained in:
Thaís Ferreira
parent
cb4a5ab5ab
commit
d5b3b23e49
15
package-lock.json
generated
15
package-lock.json
generated
@ -15,7 +15,8 @@
|
||||
"pinia": "^2.1.3",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
"vuetify": "^3.4.0",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
"vuetify": "^3.7.11",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -11059,10 +11060,16 @@
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-the-mask": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
|
||||
"integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vuetify": {
|
||||
"version": "3.7.8",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.8.tgz",
|
||||
"integrity": "sha512-67p7Ton7EikHKhzauAmpsV1HT/zA2DmG8hjcHmQrktGl1eBrRaQVE+idWLtbhO51jqpTsrKQK9+HuG0KRwIGYQ==",
|
||||
"version": "3.7.11",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.11.tgz",
|
||||
"integrity": "sha512-50Z2SNwPXbkGmve4CwxOs4sySZGgLwQYIDsKx+coSrfIBqz8IyXgxRFQdrvgoehIwUjGTNqaPZymuK5rMFkfHA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^12.20 || >=14.13"
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
"pinia": "^2.1.3",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
"vuetify": "^3.4.0",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
"vuetify": "^3.7.11",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,218 +1,166 @@
|
||||
<!-- ProfilePage.vue -->
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<div class="profile-header">
|
||||
<h1 class="profile-title">{{ $t('profile.title') }}</h1>
|
||||
<p class="profile-subtitle">{{ $t('profile.subtitle') }}</p>
|
||||
<h1 class="profile-title">Perfil do Usuário</h1>
|
||||
<p class="profile-subtitle">Gerencie suas informações pessoais</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
@submit.prevent="submitProfile"
|
||||
class="profile-form"
|
||||
novalidate
|
||||
aria-labelledby="profile-form-title"
|
||||
>
|
||||
<form @submit.prevent="saveProfile" class="profile-form">
|
||||
<div class="profile-grid">
|
||||
<!-- Photo Section with Advanced Upload -->
|
||||
<!-- Coluna da Foto -->
|
||||
<div class="photo-section">
|
||||
<div
|
||||
class="profile-photo-wrapper"
|
||||
:class="{ 'has-error': photoError }"
|
||||
>
|
||||
<img
|
||||
:src="previewPhotoUrl || defaultPhoto"
|
||||
:alt="$t('profile.photoAlt')"
|
||||
class="profile-photo"
|
||||
>
|
||||
<div
|
||||
class="photo-upload-overlay"
|
||||
@click="openFileDialog"
|
||||
@keydown.enter="openFileDialog"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-label="$t('profile.changePhoto')"
|
||||
>
|
||||
<i class="fas fa-camera"></i>
|
||||
<span>{{ $t('profile.changePhoto') }}</span>
|
||||
<div class="profile-photo-container">
|
||||
<div class="photo-wrapper">
|
||||
<img :src="profileData.photoUrl || defaultPhoto" alt="Foto de Perfil" class="profile-photo">
|
||||
<div class="photo-overlay">
|
||||
<span class="photo-text">Alterar foto</span>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
@change="handlePhotoUpload"
|
||||
accept="image/*"
|
||||
ref="photoInput"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
@change="handlePhotoUpload"
|
||||
class="hidden-file-input"
|
||||
class="photo-input"
|
||||
>
|
||||
<button type="button" @click="triggerPhotoUpload" class="upload-btn">
|
||||
<i class="fas fa-camera"></i>
|
||||
Alterar Foto
|
||||
</button>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="photoError" class="error-text">
|
||||
{{ photoError }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Profile Information Section -->
|
||||
<div class="profile-information">
|
||||
<!-- Basic Information -->
|
||||
<div class="info-section">
|
||||
<h2 class="section-heading">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
{{ $t('profile.basicInfo') }}
|
||||
</h2>
|
||||
<!-- Coluna das Informações -->
|
||||
<div class="info-section">
|
||||
<!-- Seção de Informações Básicas -->
|
||||
<div class="section-title">
|
||||
<i class="fas fa-user"></i>
|
||||
<h2 class="sub-title">Informações Básicas</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-field">
|
||||
<label for="firstName">{{ $t('profile.firstName') }}</label>
|
||||
<input
|
||||
id="firstName"
|
||||
v-model.trim="profileData.firstName"
|
||||
type="text"
|
||||
:class="{ 'is-invalid': v$.firstName.$error }"
|
||||
@blur="v$.firstName.$touch()"
|
||||
required
|
||||
>
|
||||
<div
|
||||
v-if="v$.firstName.$error"
|
||||
class="validation-error"
|
||||
>
|
||||
{{ $t('validation.requiredField') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="lastName">{{ $t('profile.lastName') }}</label>
|
||||
<input
|
||||
id="lastName"
|
||||
v-model.trim="profileData.lastName"
|
||||
type="text"
|
||||
:class="{ 'is-invalid': v$.lastName.$error }"
|
||||
@blur="v$.lastName.$touch()"
|
||||
required
|
||||
>
|
||||
<div
|
||||
v-if="v$.lastName.$error"
|
||||
class="validation-error"
|
||||
>
|
||||
{{ $t('validation.requiredField') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>ID</label>
|
||||
<input type="text" v-model="profileData.id" readonly class="form-input readonly">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="info-section">
|
||||
<h2 class="section-heading">
|
||||
<i class="fas fa-envelope"></i>
|
||||
{{ $t('profile.contactInfo') }}
|
||||
</h2>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Nome</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="profileData.firstName"
|
||||
required
|
||||
class="form-input"
|
||||
placeholder="Digite seu nome"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-field">
|
||||
<label for="email">{{ $t('profile.email') }}</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model.trim="profileData.email"
|
||||
type="email"
|
||||
:class="{ 'is-invalid': v$.email.$error }"
|
||||
@blur="v$.email.$touch()"
|
||||
required
|
||||
>
|
||||
<div
|
||||
v-if="v$.email.$error"
|
||||
class="validation-error"
|
||||
>
|
||||
{{ $t('validation.invalidEmail') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="phone">{{ $t('profile.phone') }}</label>
|
||||
<input
|
||||
id="phone"
|
||||
v-model="profileData.phone"
|
||||
type="tel"
|
||||
v-mask="'(##) #####-####'"
|
||||
placeholder="(00) 00000-0000"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Sobrenome</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="profileData.lastName"
|
||||
required
|
||||
class="form-input"
|
||||
placeholder="Digite seu sobrenome"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Professional Information -->
|
||||
<div class="info-section">
|
||||
<h2 class="section-heading">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
{{ $t('profile.professionalInfo') }}
|
||||
</h2>
|
||||
<!-- Seção de Contato -->
|
||||
<div class="section-title">
|
||||
<i class="fas fa-address-card"></i>
|
||||
<h2>Informações de Contato</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-field">
|
||||
<label for="role">{{ $t('profile.role') }}</label>
|
||||
<select
|
||||
id="role"
|
||||
v-model="profileData.role"
|
||||
:class="{ 'is-invalid': v$.role.$error }"
|
||||
@blur="v$.role.$touch()"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
{{ $t('profile.selectRole') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="role in roles"
|
||||
:key="role.id"
|
||||
:value="role.id"
|
||||
>
|
||||
{{ role.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div
|
||||
v-if="v$.role.$error"
|
||||
class="validation-error"
|
||||
>
|
||||
{{ $t('validation.requiredField') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="profileData.email"
|
||||
required
|
||||
class="form-input"
|
||||
placeholder="seu@email.com"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="group">{{ $t('profile.group') }}</label>
|
||||
<select
|
||||
id="group"
|
||||
v-model="profileData.group"
|
||||
>
|
||||
<option value="" disabled>
|
||||
{{ $t('profile.selectGroup') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="group in groups"
|
||||
:key="group.id"
|
||||
:value="group.id"
|
||||
>
|
||||
{{ group.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Telefone</label>
|
||||
<input
|
||||
type="tel"
|
||||
v-model="profileData.phone"
|
||||
v-mask="'(##) #####-####'"
|
||||
class="form-input"
|
||||
placeholder="(00) 00000-0000"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seção Profissional -->
|
||||
<div class="section-title">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<h2>Informações Profissionais</h2>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Cargo</label>
|
||||
<select v-model="profileData.role" class="form-select">
|
||||
<option value="" disabled>Selecione um cargo</option>
|
||||
<option v-for="role in roles" :key="role.id" :value="role.id">
|
||||
{{ role.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Grupo</label>
|
||||
<select v-model="profileData.group" class="form-select">
|
||||
<option value="" disabled>Selecione um grupo</option>
|
||||
<option v-for="group in groups" :key="group.id" :value="group.id">
|
||||
{{ group.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Permissão</label>
|
||||
<select v-model="profileData.permission" class="form-select">
|
||||
<option value="" disabled>Selecione uma permissão</option>
|
||||
<option v-for="permission in permissions" :key="permission.id" :value="permission.id">
|
||||
{{ permission.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Turno</label>
|
||||
<select v-model="profileData.shift" class="form-select">
|
||||
<option value="" disabled>Selecione um turno</option>
|
||||
<option value="morning">Manhã</option>
|
||||
<option value="afternoon">Tarde</option>
|
||||
<option value="night">Noite</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="resetForm"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<!-- Botões de Ação -->
|
||||
<div class="button-group">
|
||||
<button type="button" @click="resetForm" class="cancel-btn">
|
||||
<i class="fas fa-times"></i>
|
||||
{{ $t('profile.cancel') }}
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="isSubmitting || !isFormValid"
|
||||
>
|
||||
<button type="submit" class="save-btn">
|
||||
<i class="fas fa-save"></i>
|
||||
{{ $t('profile.save') }}
|
||||
Salvar Alterações
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -220,28 +168,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { required, email } from '@vuelidate/validators'
|
||||
import useProfileService from '@/services/profileService'
|
||||
|
||||
export default {
|
||||
name: 'ProfilePage',
|
||||
setup() {
|
||||
const profileService = useProfileService()
|
||||
const v$ = useVuelidate()
|
||||
const previewPhotoUrl = ref(null)
|
||||
const photoError = ref(null)
|
||||
const isSubmitting = ref(false)
|
||||
|
||||
return {
|
||||
v$,
|
||||
previewPhotoUrl,
|
||||
photoError,
|
||||
isSubmitting,
|
||||
profileService
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultPhoto: '/path/to/default-avatar.png',
|
||||
@ -253,208 +181,321 @@ export default {
|
||||
email: '',
|
||||
phone: '',
|
||||
role: '',
|
||||
group: ''
|
||||
group: '',
|
||||
permission: '',
|
||||
shift: ''
|
||||
},
|
||||
roles: [
|
||||
{ id: 1, name: 'Employee' },
|
||||
{ id: 2, name: 'Intern' },
|
||||
{ id: 3, name: 'Manager' }
|
||||
{ id: 1, name: 'Funcionário' },
|
||||
{ id: 2, name: 'Estagiário' },
|
||||
{ id: 3, name: 'Gerente' }
|
||||
],
|
||||
groups: [
|
||||
{ id: 1, name: 'Beta' },
|
||||
{ id: 2, name: 'Alpha' },
|
||||
{ id: 2, name: 'Alfa' },
|
||||
{ id: 3, name: 'Omega' }
|
||||
],
|
||||
permissions: [
|
||||
{ id: 1, name: 'Administrador' },
|
||||
{ id: 2, name: 'Editor' },
|
||||
{ id: 3, name: 'Visualizador' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isFormValid() {
|
||||
return !this.v$.$error &&
|
||||
this.profileData.firstName &&
|
||||
this.profileData.lastName &&
|
||||
this.profileData.email &&
|
||||
this.profileData.role
|
||||
}
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
profileData: {
|
||||
firstName: { required },
|
||||
lastName: { required },
|
||||
email: { required, email },
|
||||
role: { required }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadProfile() {
|
||||
try {
|
||||
const profile = await this.profileService.getProfile()
|
||||
this.profileData = { ...profile }
|
||||
this.previewPhotoUrl = profile.photoUrl
|
||||
const response = await fetch('/api/profile');
|
||||
const data = await response.json();
|
||||
this.profileData = { ...data };
|
||||
} catch (error) {
|
||||
this.handleError(error)
|
||||
console.error('Erro ao carregar perfil:', error);
|
||||
}
|
||||
},
|
||||
openFileDialog() {
|
||||
this.$refs.photoInput.click()
|
||||
triggerPhotoUpload() {
|
||||
this.$refs.photoInput.click();
|
||||
},
|
||||
handlePhotoUpload(event) {
|
||||
const file = event.target.files[0]
|
||||
this.photoError = null
|
||||
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const maxSize = 5 * 1024 * 1024 // 5MB
|
||||
const validTypes = ['image/jpeg', 'image/png', 'image/webp']
|
||||
|
||||
if (file.size > maxSize) {
|
||||
this.photoError = this.$t('validation.photoSizeTooLarge')
|
||||
return
|
||||
}
|
||||
|
||||
if (!validTypes.includes(file.type)) {
|
||||
this.photoError = this.$t('validation.invalidPhotoType')
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.previewPhotoUrl = e.target.result
|
||||
this.profileData.photoUrl = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
this.profileData.photoUrl = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
},
|
||||
async submitProfile() {
|
||||
this.v$.$touch()
|
||||
|
||||
if (this.v$.$invalid) return
|
||||
|
||||
this.isSubmitting = true
|
||||
|
||||
async saveProfile() {
|
||||
try {
|
||||
await this.profileService.updateProfile(this.profileData)
|
||||
this.$emit('profile-updated')
|
||||
this.$toast.success(this.$t('profile.updateSuccess'))
|
||||
await fetch('/api/profile', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(this.profileData)
|
||||
});
|
||||
|
||||
this.$emit('profile-updated');
|
||||
this.showNotification('Perfil atualizado com sucesso!', 'success');
|
||||
} catch (error) {
|
||||
this.handleError(error)
|
||||
} finally {
|
||||
this.isSubmitting = false
|
||||
console.error('Erro ao salvar perfil:', error);
|
||||
this.showNotification('Erro ao salvar perfil. Tente novamente.', 'error');
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.v$.$reset()
|
||||
this.loadProfile()
|
||||
this.previewPhotoUrl = this.profileData.photoUrl
|
||||
this.loadProfile();
|
||||
},
|
||||
handleError(error) {
|
||||
console.error('Profile error:', error)
|
||||
this.$toast.error(
|
||||
error.response?.data?.message ||
|
||||
this.$t('profile.updateError')
|
||||
)
|
||||
showNotification(message,type) {
|
||||
// Implementar sistema de notificação de sua preferência
|
||||
alert(message);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadProfile()
|
||||
this.loadProfile();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.profile-title {
|
||||
font-size: 2.5rem;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.profile-subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
background: #fff;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.profile-photo-wrapper {
|
||||
.photo-section {
|
||||
padding: 30px;
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.photo-wrapper {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.photo-upload-overlay {
|
||||
.photo-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0 0 100px 100px;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.hidden-file-input {
|
||||
.photo-text {
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.photo-wrapper:hover .photo-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photo-wrapper:hover .profile-photo {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 30px 0 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e1e8ed;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
color: #3498db;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 1.2rem;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e1e8ed;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input.readonly {
|
||||
background-color: #f8f9fa;
|
||||
cursor: not-allowed;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.photo-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field select {
|
||||
.upload-btn {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.validation-error {
|
||||
color: #dc3545;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 12px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
.upload-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: flex-end;
|
||||
padding: 30px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.save-btn,
|
||||
.cancel-btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #2ecc71;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
.save-btn:hover {
|
||||
background: #27ae60;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
.cancel-btn:hover {
|
||||
background: #c0392b;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.photo-section {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.save-btn,
|
||||
.cancel-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user