avancement boutons pages
This commit is contained in:
@@ -15,7 +15,7 @@ import {LoginService} from "../../login.service";
|
||||
selector: 'login-form',
|
||||
templateUrl: 'login-form.component.html',
|
||||
styleUrls: ['login-form.component.css'],
|
||||
imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent,],
|
||||
imports: [IonButton, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent,],
|
||||
})
|
||||
export class LoginFormComponent {
|
||||
|
||||
|
||||
@@ -1,29 +1,21 @@
|
||||
.hamburger-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
align-self: flex-start;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 17px;
|
||||
|
||||
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
|
||||
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
|
||||
|
||||
/* Légère ombre rosée */
|
||||
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
|
||||
|
||||
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rosybrown;
|
||||
cursor: pointer;
|
||||
margin-bottom: 28px;
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
|
||||
/* Transitions pour l'hover */
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.hamburger-btn:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
|
||||
}
|
||||
|
||||
.hamburger-btn:active {
|
||||
transform: scale(0.97);
|
||||
&:active {
|
||||
transform: scale(0.94);
|
||||
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +1,21 @@
|
||||
.hamburger-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
align-self: flex-start;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 17px;
|
||||
|
||||
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
|
||||
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
|
||||
|
||||
/* Légère ombre rosée */
|
||||
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
|
||||
|
||||
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rosybrown;
|
||||
cursor: pointer;
|
||||
margin-bottom: 28px;
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
|
||||
/* Transitions pour l'hover */
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.hamburger-btn:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
|
||||
}
|
||||
|
||||
.hamburger-btn:active {
|
||||
transform: scale(0.97);
|
||||
&:active {
|
||||
transform: scale(0.94);
|
||||
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
|
||||
}
|
||||
}
|
||||
@@ -2,13 +2,34 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#f9e8e8 0%,
|
||||
#f2c4c4 35%,
|
||||
#e89898 70%,
|
||||
#d97070 100%
|
||||
);
|
||||
padding: 26px;
|
||||
gap: 12px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.header {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.param {
|
||||
|
||||
@@ -2,15 +2,34 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#f9e8e8 0%,
|
||||
#f2c4c4 35%,
|
||||
#e89898 70%,
|
||||
#d97070 100%
|
||||
);
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.header {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<div class="page-mess">
|
||||
|
||||
<div class="topbar">
|
||||
<div class="header">
|
||||
<app-messages-menu/>
|
||||
<div class="param">
|
||||
<app-messages-infouser/>
|
||||
</div>
|
||||
<app-messages-infouser/>
|
||||
</div>
|
||||
|
||||
<div class="messages">
|
||||
|
||||
@@ -1,29 +1,21 @@
|
||||
.hamburger-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
align-self: flex-start;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 17px;
|
||||
|
||||
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
|
||||
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
|
||||
|
||||
/* Légère ombre rosée */
|
||||
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
|
||||
|
||||
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rosybrown;
|
||||
cursor: pointer;
|
||||
margin-bottom: 28px;
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
|
||||
/* Transitions pour l'hover */
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.hamburger-btn:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
|
||||
}
|
||||
|
||||
.hamburger-btn:active {
|
||||
transform: scale(0.97);
|
||||
&:active {
|
||||
transform: scale(0.94);
|
||||
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
|
||||
}
|
||||
}
|
||||
+60
-11
@@ -3,42 +3,91 @@
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 7px 105px 7px 5px;
|
||||
border: none;
|
||||
border: 1.5px solid rgba(201, 112, 112, 0.25);
|
||||
cursor: pointer;
|
||||
border-radius: 50px;
|
||||
background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
|
||||
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
background: #fce8e8;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(180, 80, 80, 0.12),
|
||||
0 2px 8px rgba(180, 80, 80, 0.08);
|
||||
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
font-family: 'Nunito', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.coordinates-btn:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
|
||||
background: #ffebeb;
|
||||
box-shadow: 0 6px 28px rgba(180, 80, 80, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.coordinates-btn:active {
|
||||
transform: scale(0.98);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #c07070;
|
||||
background-color: #f4cece;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(180, 80, 80, 0.2);
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
filter: brightness(0) invert(1); /* rend l'icône blanche */
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.coordinates-btn .username {
|
||||
font-size: 18px;
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
color: #c07070;
|
||||
color: #7a3a3a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.coordinates-btn {
|
||||
padding: 8px 120px 8px 6px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.coordinates-btn .username {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.coordinates-btn {
|
||||
padding: 9px 140px 9px 7px;
|
||||
gap: 18px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.coordinates-btn .icon-wrapper img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.coordinates-btn .username {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,13 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#f9e8e8 0%,
|
||||
#f2c4c4 35%,
|
||||
#e89898 70%,
|
||||
#d97070 100%
|
||||
);
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 60px 16px 24px;
|
||||
font-family: 'Nunito', 'Segoe UI', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
padding: 60px 24px 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 80px 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff8f8;
|
||||
border-radius: 20px;
|
||||
padding: 28px 21px 28px;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(180, 80, 80, 0.12),
|
||||
0 2px 8px rgba(180, 80, 80, 0.08),
|
||||
inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
padding: 28px 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: 400px;
|
||||
padding: 32px 28px;
|
||||
border-radius: 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-bottom: 4px;
|
||||
@media (min-width: 480px) {
|
||||
gap: 18px;
|
||||
margin-bottom: 4px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: #c97878;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(180, 80, 80, 0.2);
|
||||
|
||||
@media (min-width: 480px) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-btn {
|
||||
background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
|
||||
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
|
||||
color: #c97070;
|
||||
border: 1.5px solid rgba(201, 112, 112, 0.25);
|
||||
border-radius: 50px;
|
||||
padding: 9px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
padding: 9px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 10px 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #f8d8d8;
|
||||
box-shadow: 0 2px 8px rgba(180, 80, 80, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
background: #fdf4f4;
|
||||
border: 1.5px solid rgba(201, 112, 112, 0.15);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(201, 112, 112, 0.3);
|
||||
box-shadow: 0 2px 8px rgba(180, 80, 80, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
.bio-field {
|
||||
min-height: 90px;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
min-height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-value {
|
||||
flex: 1;
|
||||
color: #7a3a3a;
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bio-value {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #7a3a3a;
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bio-textarea {
|
||||
min-height: 60px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
||||
.edit-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #c97070;
|
||||
padding: 2px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s, transform 0.15s;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
@@ -1 +1,68 @@
|
||||
<p>parameters-profile works!</p>
|
||||
<div class="card-wrapper">
|
||||
<div class="card">
|
||||
|
||||
<!-- Avatar + Photo button -->
|
||||
<div class="avatar-row">
|
||||
<div class="avatar">
|
||||
<img *ngIf="profileImage()" [src]="profileImage()" alt="Photo de profil" />
|
||||
<svg *ngIf="!profileImage()" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="40" cy="30" r="16" fill="rgba(255,255,255,0.55)" />
|
||||
<ellipse cx="40" cy="68" rx="26" ry="18" fill="rgba(255,255,255,0.55)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button class="photo-btn" (click)="triggerFileInput()">
|
||||
Modifier la photo de profil
|
||||
</button>
|
||||
<input id="photoInput" type="file" accept="image/*" hidden (change)="onPhotoChange($event)" />
|
||||
</div>
|
||||
|
||||
<!-- Username field -->
|
||||
<div class="field">
|
||||
<ng-container *ngIf="!editingUsername(); else editUsernameBlock">
|
||||
<span class="field-value">{{ username() }}</span>
|
||||
</ng-container>
|
||||
<ng-template #editUsernameBlock>
|
||||
<input
|
||||
class="field-input"
|
||||
[(ngModel)]="username"
|
||||
[ngModel]="username()"
|
||||
(ngModelChange)="username.set($event)"
|
||||
(blur)="toggleEditUsername()"
|
||||
(keydown.enter)="toggleEditUsername()"
|
||||
autofocus
|
||||
/>
|
||||
</ng-template>
|
||||
<button class="edit-btn" (click)="toggleEditUsername()" title="Modifier">
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Bio field -->
|
||||
<div class="field bio-field">
|
||||
<ng-container *ngIf="!editingBio(); else editBioBlock">
|
||||
<span class="field-value bio-value">{{ bio() }}</span>
|
||||
</ng-container>
|
||||
<ng-template #editBioBlock>
|
||||
<textarea
|
||||
class="field-input bio-textarea"
|
||||
[value]="bio()"
|
||||
(input)="bio.set($any($event.target).value)"
|
||||
(blur)="toggleEditBio()"
|
||||
autofocus
|
||||
></textarea>
|
||||
</ng-template>
|
||||
<button class="edit-btn" (click)="toggleEditBio()" title="Modifier">
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,45 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, signal} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-parameters-profile',
|
||||
imports: [],
|
||||
imports: [FormsModule, CommonModule],
|
||||
templateUrl: './parameters-profile.component.html',
|
||||
styleUrl: './parameters-profile.component.css'
|
||||
})
|
||||
export class ParametersProfileComponent {
|
||||
username = signal('Doggeybag');
|
||||
bio = signal('Joueur Valorant');
|
||||
|
||||
editingUsername = signal(false);
|
||||
editingBio = signal(false);
|
||||
|
||||
profileImage = signal<string | null>(null);
|
||||
|
||||
onPhotoChange(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.profileImage.set(e.target?.result as string);
|
||||
};
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
triggerFileInput(): void {
|
||||
const input = document.getElementById('photoInput') as HTMLInputElement;
|
||||
input?.click();
|
||||
}
|
||||
|
||||
toggleEditUsername(): void {
|
||||
this.editingUsername.update((v) => !v);
|
||||
}
|
||||
|
||||
toggleEditBio(): void {
|
||||
this.editingBio.update((v) => !v);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -13,11 +13,6 @@ import {Router} from "@angular/router";
|
||||
selector: 'app-register-form',
|
||||
imports: [
|
||||
IonButton,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonCardSubtitle,
|
||||
IonInput,
|
||||
IonContent,
|
||||
IonItem
|
||||
|
||||
@@ -1 +1,16 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
@media (min-width: 480px) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user