feat: finalize UI/UX
This commit is contained in:
mohamad
@@ -1,64 +1,64 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "portal_base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Profile{% endblock %}
|
||||
{% block title %}Profile & Account{% endblock %}
|
||||
{% block portal_title %}Profile & account{% endblock %}
|
||||
{% block portal_subtitle %}Build a complete professional profile so Tecvico can understand your work and communicate clearly.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero" aria-labelledby="profile-heading">
|
||||
<div class="container">
|
||||
<div class="page-hero-content">
|
||||
<h1 class="page-hero-title" id="profile-heading">Your Profile</h1>
|
||||
<p class="page-hero-subtitle">Keep your contact details up to date for project communication.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% block portal_content %}
|
||||
<div class="dashboard-form-layout">
|
||||
<section class="dashboard-panel dashboard-form-card" aria-labelledby="profile-details-title">
|
||||
<div class="dashboard-panel__header"><div><h2 id="profile-details-title">Professional profile</h2><p>Your profile information is visible only to you and the Tecvico team.</p></div></div>
|
||||
<form method="post" enctype="multipart/form-data" novalidate>
|
||||
{% csrf_token %}
|
||||
{% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container container--narrow">
|
||||
<div class="glass-card portal-card fade-in">
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
<div class="profile-avatar-field form-group{% if form.avatar.errors %} has-error{% endif %}">
|
||||
<div class="profile-avatar-preview" aria-hidden="true">
|
||||
<img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="id_avatar">Profile picture</label>
|
||||
{{ form.avatar }}
|
||||
<p class="form-hint">JPG, PNG, or WebP. Maximum 5 MB. A square image works best.</p>
|
||||
{{ form.avatar.errors }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-form-section">
|
||||
<h3>Identity</h3>
|
||||
<div class="form-grid form-grid--2">
|
||||
<div class="form-group">
|
||||
<label for="id_first_name">First name <span class="required-star">*</span></label>
|
||||
{{ form.first_name }}
|
||||
{{ form.first_name.errors }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="id_last_name">Last name <span class="required-star">*</span></label>
|
||||
{{ form.last_name }}
|
||||
{{ form.last_name.errors }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_email">Email <span class="required-star">*</span></label>
|
||||
{{ form.email }}
|
||||
{{ form.email.errors }}
|
||||
<div class="form-group"><label for="id_first_name">First name <span class="required-star">*</span></label>{{ form.first_name }}{{ form.first_name.errors }}</div>
|
||||
<div class="form-group"><label for="id_last_name">Last name <span class="required-star">*</span></label>{{ form.last_name }}{{ form.last_name.errors }}</div>
|
||||
</div>
|
||||
<div class="form-group"><label for="id_email">Email address <span class="required-star">*</span></label>{{ form.email }}<p class="form-hint">Used for project updates and secure account communication.</p>{{ form.email.errors }}</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-form-section">
|
||||
<h3>Professional information</h3>
|
||||
<div class="form-grid form-grid--2">
|
||||
<div class="form-group">
|
||||
<label for="id_company">Company</label>
|
||||
{{ form.company }}
|
||||
{{ form.company.errors }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="id_phone">Phone</label>
|
||||
{{ form.phone }}
|
||||
{{ form.phone.errors }}
|
||||
</div>
|
||||
<div class="form-group"><label for="id_company">Organization</label>{{ form.company }}{{ form.company.errors }}</div>
|
||||
<div class="form-group"><label for="id_job_title">Role or job title</label>{{ form.job_title }}{{ form.job_title.errors }}</div>
|
||||
</div>
|
||||
<div class="form-group"><label for="id_bio">Professional bio</label>{{ form.bio }}<p class="form-hint">Up to 600 characters about your research, technical work, or project interests.</p>{{ form.bio.errors }}</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_timezone">Timezone <span class="required-star">*</span></label>
|
||||
{{ form.timezone }}
|
||||
{{ form.timezone.errors }}
|
||||
</div>
|
||||
<div class="profile-form-section">
|
||||
<h3>Contact details</h3>
|
||||
<div class="form-group"><label for="id_phone">Phone number</label>{{ form.phone }}{{ form.phone.errors }}</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary btn-submit">Save profile</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="dashboard-form-actions"><button type="submit" class="btn-primary">Save profile</button></div>
|
||||
</form>
|
||||
</section>
|
||||
<aside class="profile-context-card">
|
||||
<div class="profile-context-card__avatar"><img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" /></div>
|
||||
<h2>{{ user.get_full_name|default:user.username }}</h2>
|
||||
{% if user.client_profile.job_title or user.client_profile.company %}<p>{% if user.client_profile.job_title %}{{ user.client_profile.job_title }}{% endif %}{% if user.client_profile.job_title and user.client_profile.company %} · {% endif %}{% if user.client_profile.company %}{{ user.client_profile.company }}{% endif %}</p>{% else %}<p>{{ user.email }}</p>{% endif %}
|
||||
{% if user.client_profile.bio %}<div class="profile-context-card__expertise">{{ user.client_profile.bio|truncatechars:150 }}</div>{% endif %}
|
||||
<div class="profile-context-card__rule"></div>
|
||||
<span class="profile-context-card__label">Account status</span>
|
||||
<strong class="profile-status"><span></span> Active client account</strong>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -67,12 +67,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="id_timezone">Timezone <span class="required-star">*</span></label>
|
||||
{{ form.timezone }}
|
||||
{{ form.timezone.errors }}
|
||||
</div>
|
||||
|
||||
<div class="form-grid form-grid--2">
|
||||
<div class="form-group">
|
||||
<label for="id_password1">Password <span class="required-star">*</span></label>
|
||||
|
||||
Reference in New Issue
Block a user