feat: finalize UI/UX
This commit is contained in:
mohamad
@@ -1,33 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "portal_base.html" %}
|
||||
|
||||
{% block title %}{{ brief.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero" aria-labelledby="brief-heading">
|
||||
<div class="container">
|
||||
<div class="page-hero-content page-hero-content--row">
|
||||
<div>
|
||||
{% if brief.category %}<div class="section-badge">{{ brief.get_category_display }}</div>{% endif %}
|
||||
<h1 class="page-hero-title" id="brief-heading">{{ brief.title }}</h1>
|
||||
<p class="page-hero-subtitle">
|
||||
<span class="status-pill status-pill--{{ brief.status }}">{{ brief.get_status_display }}</span>
|
||||
· Submitted {{ brief.submitted_at|date:"M j, Y" }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="portal-actions">
|
||||
<a href="{% url 'projects:dashboard' %}" class="btn-ghost">Back to list</a>
|
||||
{% if brief.is_editable_by_client %}
|
||||
<a href="{% url 'projects:edit' pk=brief.pk %}" class="btn-primary">Edit brief</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% block portal_title %}{{ brief.title }}{% endblock %}
|
||||
{% block portal_subtitle %}<span class="status-pill status-pill--{{ brief.status }}">{{ brief.get_status_display }}</span> <span class="dashboard-header__meta">Submitted {{ brief.submitted_at|date:"M j, Y" }}</span>{% endblock %}
|
||||
{% block portal_actions %}<a href="{% url 'projects:dashboard' %}" class="btn-ghost">Back to projects</a>{% if brief.is_editable_by_client %}<a href="{% url 'projects:edit' pk=brief.pk %}" class="btn-primary">Edit brief</a>{% endif %}{% endblock %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% block portal_content %}
|
||||
<div class="portal-detail-grid">
|
||||
<div class="glass-card portal-card fade-in">
|
||||
<div class="dashboard-panel portal-card">
|
||||
<h2 class="portal-section-title">Overview</h2>
|
||||
<dl class="portal-meta-list">
|
||||
{% if brief.budget_range %}<div><dt>Budget</dt><dd>{{ brief.get_budget_range_display }}</dd></div>{% endif %}
|
||||
@@ -56,19 +37,17 @@
|
||||
</div>
|
||||
|
||||
{% if brief.shows_quote_to_client %}
|
||||
<div class="glass-card portal-card fade-in">
|
||||
<div class="dashboard-panel portal-card">
|
||||
<h2 class="portal-section-title">Quote from Tecvico</h2>
|
||||
<p class="portal-body-text">{{ brief.quote_text|linebreaksbr }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if brief.has_website_notes %}
|
||||
<div class="glass-card portal-card fade-in">
|
||||
<div class="dashboard-panel portal-card">
|
||||
<h2 class="portal-section-title">Notes from Tecvico</h2>
|
||||
<p class="portal-body-text">{{ brief.website_notes|linebreaksbr }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "portal_base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ form_title }}{% endblock %}
|
||||
@@ -7,19 +7,12 @@
|
||||
<link rel="stylesheet" href="{% static 'css/brief-wizard.css' %}" />
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero" aria-labelledby="brief-form-heading">
|
||||
<div class="container">
|
||||
<div class="page-hero-content">
|
||||
<h1 class="page-hero-title" id="brief-form-heading">{{ form_title }}</h1>
|
||||
<p class="page-hero-subtitle">Complete each step to submit your project brief.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% block portal_title %}{{ form_title }}{% endblock %}
|
||||
{% block portal_subtitle %}Turn your scientific or technical challenge into a clear, review-ready scope.{% endblock %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container container--narrow">
|
||||
<div class="glass-card portal-card fade-in">
|
||||
{% block portal_content %}
|
||||
<div class="dashboard-form-layout dashboard-form-layout--wizard">
|
||||
<section class="dashboard-panel dashboard-form-card">
|
||||
<form method="post" enctype="multipart/form-data" novalidate class="brief-wizard" data-brief-wizard data-initial-step="{{ initial_step }}">
|
||||
{% csrf_token %}
|
||||
|
||||
@@ -140,9 +133,18 @@
|
||||
<button type="submit" class="btn-primary btn-submit" data-wizard-submit hidden>{{ submit_label }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<aside class="brief-guidance-card">
|
||||
<span class="brief-guidance-card__eyebrow">Before you submit</span>
|
||||
<h2>A strong brief helps us respond precisely.</h2>
|
||||
<ul>
|
||||
<li><span>1</span><div><strong>Define the outcome</strong><p>Focus on the scientific or technical result you need.</p></div></li>
|
||||
<li><span>2</span><div><strong>Add useful context</strong><p>Include datasets, constraints, methods, or references.</p></div></li>
|
||||
<li><span>3</span><div><strong>Set expectations</strong><p>Share your preferred timeline and budget range.</p></div></li>
|
||||
</ul>
|
||||
<p class="brief-guidance-card__note">You can review every field in the final step before submission.</p>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
@@ -1,70 +1,60 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "portal_base.html" %}
|
||||
|
||||
{% block title %}My Projects{% endblock %}
|
||||
{% block title %}Project Dashboard{% endblock %}
|
||||
{% block portal_title %}Welcome back{% if user.first_name %}, {{ user.first_name }}{% endif %}.{% endblock %}
|
||||
{% block portal_subtitle %}Manage your research and technology projects from one focused workspace.{% endblock %}
|
||||
{% block portal_actions %}<a href="{% url 'projects:create' %}" class="btn-primary">Start a new brief <span aria-hidden="true">→</span></a>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero" aria-labelledby="dashboard-heading">
|
||||
<div class="container">
|
||||
<div class="page-hero-content page-hero-content--row">
|
||||
<div>
|
||||
<div class="section-badge">Client Portal</div>
|
||||
<h1 class="page-hero-title" id="dashboard-heading">My Projects</h1>
|
||||
<p class="page-hero-subtitle">Track briefs you've submitted to the Tecvico team.</p>
|
||||
</div>
|
||||
<a href="{% url 'projects:create' %}" class="btn-primary">New project brief</a>
|
||||
</div>
|
||||
</div>
|
||||
{% block portal_content %}
|
||||
<section class="dashboard-metrics" aria-label="Workspace summary">
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__top"><span class="metric-card__icon">P</span><span class="metric-card__trend">Portfolio</span></div>
|
||||
<strong>{{ page_obj.paginator.count|default:0 }}</strong>
|
||||
<span>Total project brief{{ page_obj.paginator.count|pluralize }}</span>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__top"><span class="metric-card__icon metric-card__icon--gold">R</span><span class="metric-card__trend">Structured</span></div>
|
||||
<strong>4 steps</strong>
|
||||
<span>From scientific scope to delivery</span>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__top"><span class="metric-card__icon metric-card__icon--green">✓</span><span class="metric-card__trend">Private</span></div>
|
||||
<strong>Secure</strong>
|
||||
<span>Visible only to you and Tecvico</span>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% if briefs %}
|
||||
<div class="portal-table-wrap glass-card fade-in">
|
||||
<table class="portal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Budget</th>
|
||||
<th>Submitted</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for brief in briefs %}
|
||||
<tr>
|
||||
<td>{{ brief.title }}</td>
|
||||
<td>{% if brief.category %}{{ brief.get_category_display }}{% else %}—{% endif %}</td>
|
||||
<td><span class="status-pill status-pill--{{ brief.status }}">{{ brief.get_status_display }}</span></td>
|
||||
<td>{% if brief.budget_range %}{{ brief.get_budget_range_display }}{% else %}—{% endif %}</td>
|
||||
<td>{{ brief.submitted_at|date:"M j, Y" }}</td>
|
||||
<td><a href="{% url 'projects:detail' pk=brief.pk %}" class="portal-link">View</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if page_obj.has_other_pages %}
|
||||
<div class="portal-pagination">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page={{ page_obj.previous_page_number }}" class="portal-link">Previous</a>
|
||||
{% endif %}
|
||||
<span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?page={{ page_obj.next_page_number }}" class="portal-link">Next</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="glass-card portal-card portal-empty fade-in">
|
||||
<h2>No project briefs yet</h2>
|
||||
<p class="portal-intro">Describe what you need and our team will review your request.</p>
|
||||
<a href="{% url 'projects:create' %}" class="btn-primary">Submit your first brief</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<section class="dashboard-panel" id="project-briefs" aria-labelledby="recent-projects-title">
|
||||
<div class="dashboard-panel__header">
|
||||
<div><h2 id="recent-projects-title">Your project briefs</h2><p>Track submissions, quotes, and delivery progress.</p></div>
|
||||
{% if briefs %}<span class="dashboard-panel__count">{{ page_obj.paginator.count }} total</span>{% endif %}
|
||||
</div>
|
||||
{% if briefs %}
|
||||
<div class="portal-table-wrap">
|
||||
<table class="portal-table">
|
||||
<thead><tr><th>Project</th><th>Field</th><th>Status</th><th>Budget</th><th>Submitted</th><th><span class="sr-only">Actions</span></th></tr></thead>
|
||||
<tbody>
|
||||
{% for brief in briefs %}
|
||||
<tr>
|
||||
<td><a class="project-title-link" href="{% url 'projects:detail' pk=brief.pk %}">{{ brief.title }}</a></td>
|
||||
<td>{% if brief.category %}{{ brief.get_category_display }}{% else %}<span class="table-muted">Not set</span>{% endif %}</td>
|
||||
<td><span class="status-pill status-pill--{{ brief.status }}">{{ brief.get_status_display }}</span></td>
|
||||
<td>{% if brief.budget_range %}{{ brief.get_budget_range_display }}{% else %}<span class="table-muted">Not set</span>{% endif %}</td>
|
||||
<td>{{ brief.submitted_at|date:"M j, Y" }}</td>
|
||||
<td><a href="{% url 'projects:detail' pk=brief.pk %}" class="table-action" aria-label="View {{ brief.title }}">View <span aria-hidden="true">→</span></a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% if page_obj.has_other_pages %}<div class="portal-pagination">{% if page_obj.has_previous %}<a href="?page={{ page_obj.previous_page_number }}" class="portal-link">Previous</a>{% endif %}<span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>{% if page_obj.has_next %}<a href="?page={{ page_obj.next_page_number }}" class="portal-link">Next</a>{% endif %}</div>{% endif %}
|
||||
{% else %}
|
||||
<div class="portal-empty">
|
||||
<div class="portal-empty__symbol" aria-hidden="true">+</div>
|
||||
<h3>Create your first project brief</h3>
|
||||
<p>Define the scientific challenge, goals, timeline, and supporting materials. You can review everything before submitting.</p>
|
||||
<a href="{% url 'projects:create' %}" class="btn-primary">Create project brief</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user