Skip to content

Commit

Permalink
fix: improve portal layout on mobile and improve usability generally
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrianmcphee
adrianmcphee committed Nov 17, 2024
1 parent 06ac7e2 commit 0f9cb54
Show file tree
Hide file tree
Showing 4 changed files with 269 additions and 252 deletions.
229 changes: 122 additions & 107 deletions apps/portal/templates/portal/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
<nav class="navbar bg-base-100 shadow-sm fixed w-full top-0 z-50">
<!-- Left side - Logo -->
<div class="flex-1">
<div class="lg:hidden">
<label for="drawer-toggle" class="btn btn-ghost drawer-button">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
</div>
<a href="/" class="btn btn-ghost">
<img class="h-8 w-auto" src="{% static 'images/logo.svg' %}" alt="OpenUnited Logo">
</a>
Expand Down Expand Up @@ -83,122 +90,130 @@
</div>
</nav>

<!-- Main Content Area with adjusted spacing -->
<div class="flex h-screen pt-16">
<!-- Sidebar -->
<div class="bg-base-100 shadow-md w-64">
<div class="p-4">
<h2 class="text-xl font-semibold">Portal</h2>
<!-- Main Content Area with drawer -->
<div class="drawer lg:drawer-open">
<input id="drawer-toggle" type="checkbox" class="drawer-toggle" />

<div class="drawer-content flex flex-col">
<!-- Page content here -->
<div class="flex-1 overflow-auto bg-base-200 pt-16">
<div class="container mx-auto px-4 py-6">
{% block content %}{% endblock content %}
</div>
</div>
<nav class="menu p-4">
<ul class="space-y-2">
<!-- Dashboard -->
<li>
<a href="{% url 'portal:dashboard' %}"
class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Dashboard
</a>
</li>
</div>

<!-- Products Dropdown -->
<li x-data="{ open: {% if 'product-' in request.resolver_match.url_name %}true{% else %}false{% endif %} }">
<details :open="open">
<summary class="flex items-center">
<div class="drawer-side">
<label for="drawer-toggle" class="drawer-overlay"></label>
<!-- Sidebar content here -->
<div class="bg-base-100 w-64 min-h-full pt-16">
<!-- Previous sidebar content goes here -->
<div class="p-4">
<h2 class="text-xl font-semibold">Portal</h2>
</div>
<nav class="menu p-4">
<ul class="space-y-2">
<!-- Dashboard -->
<li>
<a href="{% url 'portal:dashboard' %}"
class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
<span class="ml-2">Product Portfolio</span>
</summary>
<ul class="menu menu-sm pl-6 mt-2">
{% if organisation_products %}
<div class="space-y-1">
{% for product in organisation_products %}
<li>
<a href="{% url 'portal:product-summary' product.slug %}"
class="{% if product.slug == current_product_slug %}active{% endif %}">
{{ product.name }}
</a>

{% if product.slug == current_product_slug %}
<ul class="pl-4 mt-1 space-y-1">
<li><a href="{% url 'portal:product-challenges' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-challenges' %}active{% endif %}">
Challenges
</a></li>

<li><a href="{% url 'portal:product-bounties' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-bounties' %}active{% endif %}">
Bounties
</a></li>

<li><a href="{% url 'portal:product-users' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-users' %}active{% endif %}">
Users
</a></li>

<li><a href="{% url 'portal:product-review' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-review' %}active{% endif %}">
Review Work
</a></li>
Dashboard
</a>
</li>

<!-- Products Dropdown -->
<li x-data="{ open: {% if 'product-' in request.resolver_match.url_name %}true{% else %}false{% endif %} }">
<details :open="open">
<summary class="flex items-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
<span class="ml-2">Product Portfolio</span>
</summary>
<ul class="menu menu-sm pl-6 mt-2">
{% if organisation_products %}
<div class="space-y-1">
{% for product in organisation_products %}
<li>
<a href="{% url 'portal:product-summary' product.slug %}"
class="{% if product.slug == current_product_slug %}active{% endif %}">
{{ product.name }}
</a>

<li><a href="{% url 'portal:product-agreements' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-agreements' %}active{% endif %}">
Agreements
</a></li>
{% if product.slug == current_product_slug %}
<ul class="pl-4 mt-1 space-y-1">
<li><a href="{% url 'portal:product-challenges' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-challenges' %}active{% endif %}">
Challenges
</a></li>

<li><a href="{% url 'portal:product-bounties' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-bounties' %}active{% endif %}">
Bounties
</a></li>

<li><a href="{% url 'portal:product-users' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-users' %}active{% endif %}">
Users
</a></li>

<li><a href="{% url 'portal:product-review' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-review' %}active{% endif %}">
Review Work
</a></li>

<li><a href="{% url 'portal:product-agreements' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-agreements' %}active{% endif %}">
Agreements
</a></li>

<li><a href="{% url 'portal:product-settings' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-settings' %}active{% endif %}">
Settings
</a></li>
</ul>
<li><a href="{% url 'portal:product-settings' product.slug %}"
class="{% if request.resolver_match.url_name == 'product-settings' %}active{% endif %}">
Settings
</a></li>
</ul>
{% endif %}
</li>
{% endfor %}
</div>
{% if can_manage_org and current_organisation %}
<li class="mt-6">
<a href="{% url 'portal:create-product' current_organisation.id %}"
class="flex items-center text-gray-600 hover:text-gray-900">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Product
</a>
</li>
{% endif %}
{% else %}
<li class="menu-disabled">
<span class="text-sm opacity-70">No products available for this organisation</span>
{% if can_manage_org and current_organisation %}
<a href="{% url 'portal:create-product' current_organisation.id %}"
class="btn btn-primary btn-sm mt-2">
Create First Product
</a>
{% endif %}
</li>
{% endfor %}
</div>
{% if can_manage_org and current_organisation %}
<li class="mt-6">
<a href="{% url 'portal:create-product' current_organisation.id %}"
class="flex items-center text-gray-600 hover:text-gray-900">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create Product
</a>
</li>
{% endif %}
{% else %}
<li class="menu-disabled">
<span class="text-sm opacity-70">No products available for this organisation</span>
{% if can_manage_org and current_organisation %}
<a href="{% url 'portal:create-product' current_organisation.id %}"
class="btn btn-primary btn-sm mt-2">
Create First Product
</a>
{% endif %}
</li>
{% endif %}
</ul>
</details>
</li>
<li>
<a href="{% url 'portal:organisations' %}" class="flex items-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
Organisations
</a>
</li>
</ul>
</nav>
</div>

<!-- Main Content -->
<div class="flex-1 overflow-auto bg-base-200">
<div class="container mx-auto px-4 py-6">
{% block content %}{% endblock content %}
</ul>
</details>
</li>
<li>
<a href="{% url 'portal:organisations' %}" class="flex items-center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
Organisations
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/portal/templates/portal/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ <h1 class="text-2xl font-bold mb-6">{{ current_organisation.name }} Dashboard</h
<!-- Organization's Products Section -->
<div class="mb-8">
<div class="space-y-6">
<div class="flex justify-between items-center">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h2 class="text-2xl font-semibold">Organisation Products</h2>
{% if can_manage_org and current_organisation %}
<a href="{% url 'portal:create-product' current_organisation.id %}"
class="btn btn-primary">
class="btn btn-primary w-full sm:w-auto">
Create Product
</a>
{% endif %}
</div>

{% if organisation_products %}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-2 lg:grid-cols-3">
{% for product in organisation_products %}
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
Expand Down
Loading

0 comments on commit 0f9cb54

Please sign in to comment.