feat: finalize UI/UX

templates/portal_base.html

@@ -0,0 +1,85 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block body_class %}portal-body{% endblock %}
+
+{% block content %}
+<div class="dashboard-shell">
+  <aside class="dashboard-sidebar" aria-label="Workspace navigation">
+    <div class="dashboard-sidebar__profile">
+      <div class="dashboard-avatar" 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 class="dashboard-sidebar__identity">
+        <strong>{{ user.get_full_name|default:user.username }}</strong>
+        <span>{{ user.email }}</span>
+      </div>
+    </div>
+
+    <nav class="dashboard-nav">
+      <p class="dashboard-nav__label">Workspace</p>
+      <a href="{% url 'projects:dashboard' %}" class="dashboard-nav__link{% if request.resolver_match.url_name == 'dashboard' or request.resolver_match.url_name == 'detail' %} is-active{% endif %}">
+        <span class="dashboard-nav__icon" aria-hidden="true">⌂</span>
+        <span>Overview</span>
+      </a>
+      <a href="{% url 'projects:dashboard' %}#project-briefs" class="dashboard-nav__link">
+        <span class="dashboard-nav__icon" aria-hidden="true">▤</span>
+        <span>Project briefs</span>
+      </a>
+      <a href="{% url 'projects:create' %}" class="dashboard-nav__link{% if request.resolver_match.url_name == 'create' %} is-active{% endif %}">
+        <span class="dashboard-nav__icon" aria-hidden="true">＋</span>
+        <span>New project brief</span>
+      </a>
+      <a href="{% url 'accounts:profile' %}" class="dashboard-nav__link{% if request.resolver_match.url_name == 'profile' %} is-active{% endif %}">
+        <span class="dashboard-nav__icon" aria-hidden="true">○</span>
+        <span>Profile &amp; account</span>
+      </a>
+
+      <p class="dashboard-nav__label dashboard-nav__label--secondary">Resources</p>
+      <a href="{% url 'products:overview' %}" class="dashboard-nav__link">
+        <span class="dashboard-nav__icon" aria-hidden="true">◇</span>
+        <span>Scientific products</span>
+      </a>
+      <a href="{% url 'pages:faq' %}" class="dashboard-nav__link">
+        <span class="dashboard-nav__icon" aria-hidden="true">i</span>
+        <span>Knowledge &amp; FAQ</span>
+      </a>
+      <a href="{% url 'pages:contact' %}" class="dashboard-nav__link">
+        <span class="dashboard-nav__icon" aria-hidden="true">?</span>
+        <span>Help &amp; support</span>
+      </a>
+      <a href="{% url 'pages:home' %}" class="dashboard-nav__link">
+        <span class="dashboard-nav__icon" aria-hidden="true">↗</span>
+        <span>Back to website</span>
+      </a>
+    </nav>
+
+    <div class="dashboard-sidebar__footer">
+      <div class="dashboard-security-note">
+        <span class="dashboard-security-note__mark" aria-hidden="true"></span>
+        <span><strong>Secure workspace</strong>Your project data is private.</span>
+      </div>
+      <form method="post" action="{% url 'accounts:logout' %}">
+        {% csrf_token %}
+        <button type="submit" class="dashboard-signout">Sign out</button>
+      </form>
+    </div>
+  </aside>
+
+  <main class="dashboard-main">
+    <header class="dashboard-header">
+      <div>
+        <p class="dashboard-eyebrow">Tecvico client workspace</p>
+        <h1 id="dashboard-page-title">{% block portal_title %}Dashboard{% endblock %}</h1>
+        <p>{% block portal_subtitle %}{% endblock %}</p>
+      </div>
+      <div class="dashboard-header__actions">{% block portal_actions %}{% endblock %}</div>
+    </header>
+    <div class="dashboard-content" aria-labelledby="dashboard-page-title">
+      {% block portal_content %}{% endblock %}
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block footer %}{% endblock %}