Skip to content

Improve UI #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roberfi merged 1 commit into from
Jan 8, 2026
Merged

Improve UI #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Next Release

-
- Improve UI

## 0.6.0

Expand Down
2 changes: 1 addition & 1 deletion src/base/templates/cotton/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
<div class="flex flex-col h-dvh w-screen">
<c-nav-bar :request="request" :csrf_token="csrf_token" only />
<progress id="progress-bar"
class="flex progress progress-primary w-full max-md:h-4"
class="progress progress-primary w-full h-1! shrink-0"
value="0"
max="100"></progress>
<div id="container" class="overflow-y-auto">
Expand Down
5 changes: 3 additions & 2 deletions src/base/templates/cotton/buttons/accept_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.path }}">
<button class="btn btn-sm btn-success" type="submit">
<svg class="w-4 h-4 mr-2"
<button class="btn btn-sm btn-success gap-2 hover:scale-105 transition-transform"
type="submit">
<svg class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
Expand Down
5 changes: 3 additions & 2 deletions src/base/templates/cotton/buttons/close_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<button class="btn btn-xs btn-circle btn-neutral absolute {{ position_classes }}" {{ attrs }}>
<svg class="h-4 w-4"
<button class="btn btn-sm btn-circle btn-ghost hover:bg-error/20 hover:text-error transition-colors {{ position_classes }}"
{{ attrs }}>
<svg class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand Down
65 changes: 41 additions & 24 deletions src/base/templates/cotton/buttons/settings_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% load i18n %}

<button class="btn btn-sm btn-info"
<button class="btn btn-sm btn-info gap-2 hover:scale-105 transition-transform"
onclick="cookies_settings_modal.showModal()">
<svg class="w-4 h-4 mr-2"
<svg class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
Expand All @@ -17,29 +17,37 @@
</svg>
{% translate "Settings" %}
</button>
<dialog id="cookies_settings_modal" class="modal">
<div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
<form method="dialog">
<dialog id="cookies_settings_modal"
class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh] overflow-hidden">
<!-- Close button -->
<form method="dialog" class="absolute right-4 top-4 z-10">
<c-buttons.close-button position-classes="right-2 top-2" />
</form>
<form class="inline-block"
action="{% url 'set_cookie_preferences' %}"
method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.path }}" />

<div class="flex-1 overflow-y-auto">
<h3 class="text-lg font-bold mb-10">
{% translate "Cookie Settings" %}
</h3>
<!-- Header section - fixed at top -->
<div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
<h3 class="text-2xl sm:text-3xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent pr-8">
{% translate "Cookie Settings" %}
</h3>
</div>

<!-- Scrollable content area -->
<div class="overflow-y-auto flex-1">
<form class="p-4 sm:p-6"
action="{% url 'set_cookie_preferences' %}"
method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.path }}" />

<div class="grid grid-cols-1 gap-4">
{% for cookie_group in cookie_groups %}
<div class="card border border-base-300">
<div class="card border-2 border-base-300 hover:border-primary/30 transition-colors bg-linear-to-r from-base-200 to-base-100 shadow-md">
<div class="card-body">
<h2 class="card-title">
<h2 class="card-title text-primary font-bold">
{{ cookie_group.name }}
</h2>
<div class="text-left">
<div class="text-left text-base-content/80">
{{ cookie_group.description }}
</div>
<div class="flex justify-end">
Expand All @@ -53,12 +61,21 @@ <h2 class="card-title">
</div>
{% endfor %}
</div>
</div>
<div class="modal-action">
<button class="btn" type="submit">
{% translate "Save" %}
</button>
</div>
</form>

<!-- Footer - fixed at bottom -->
<div class="modal-action mt-6">
<button class="btn btn-primary gap-2 group" type="submit">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>{% translate "Save" %}</span>
</button>
</div>
</form>
</div>
</div>
</dialog>
13 changes: 7 additions & 6 deletions src/base/templates/cotton/cookie_consent_banner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@

{% get_cooco_banner_config as banner %}
{% if banner.show_banner %}
<div id="cooco_banner" class="absolute w-full bottom-0 left-0 md:p-10 p-5">
<div id="cooco_banner"
class="fixed w-full bottom-0 left-0 md:p-10 p-5 z-50">
<div role="alert"
class="alert alert-vertical sm:alert-horizontal md:px-10 border-2 border-neutral">
class="alert alert-vertical sm:alert-horizontal md:px-10 border-2 border-primary/30 bg-linear-to-br from-base-300 to-base-200 shadow-2xl backdrop-blur-md relative">

<div class="sm:col-span-2">
<h2 class="mb-2 text-xl font-heading">
<h2 class="mb-2 text-xl font-bold text-primary">
{{ banner.title }}
</h2>
<p>
<p class="text-base-content/80">
{{ banner.text }}
</p>
</div>

<div>
<div class="flex flex-row gap-2 flex-wrap">
{% get_cookie_groups as cookie_groups %}
{% if cookie_groups|any_optional_cookie_group %}
<c-buttons.settings-button />
Expand All @@ -24,7 +25,7 @@ <h2 class="mb-2 text-xl font-heading">
<c-buttons.accept-button />
</div>

<c-buttons.close-button position-classes="md:right-12 md:top-12 right-7 top-7" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
<c-buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />

</div>
</div>
Expand Down
53 changes: 36 additions & 17 deletions src/base/templates/cotton/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,57 @@

{% get_footer_data as data %}

<div class="bg-base-300 text-base-content p-10">
<div class="bg-linear-to-br from-base-300 to-base-200 text-base-content p-10 border-t-2 border-primary/20">
<footer id="upper-footer"
class="footer lg:footer-horizontal lg:max-w-(--breakpoint-lg) lg:mx-auto pb-10">

{% with legal_and_privacy=data.legal_and_privacy %}
{% if legal_and_privacy %}
<nav id="legal-and-privacy" class="lg:mx-auto">
<h6 id="legal-and-privacy-title" class="footer-title">
<h6 id="legal-and-privacy-title"
class="footer-title text-primary font-bold">
{% translate "Legal & Privacy" %}
</h6>

{% for section in legal_and_privacy %}
<button id="legal-and-privacy-{{ section.id }}-link"
class="link link-hover"
class="link link-hover hover:text-primary transition-colors"
onclick="{{ section.modal_name }}.showModal()">
{{ section.title }}
</button>
<dialog id="{{ section.modal_name }}" class="modal">
<div class="modal-box w-11/12 max-w-5xl flex flex-col max-md:p-4">
<div class="flex-1 overflow-y-auto">
<div class="prose max-w-none py-4">
<h1 id="legal-and-privacy-{{ section.id }}-title">
{{ section.title }}
</h1>
<div id="legal-and-privacy-{{ section.id }}-text">
<dialog id="{{ section.modal_name }}"
class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-11/12 max-w-5xl mx-auto bg-linear-to-br from-base-100 to-base-200 shadow-2xl p-0 flex flex-col max-h-[90vh]">
<!-- Header section - fixed at top -->
<div class="bg-linear-to-r from-primary/10 to-transparent p-4 sm:p-6 border-b-2 border-primary/20 backdrop-blur-sm bg-base-100/95 shrink-0">
<h1 id="legal-and-privacy-{{ section.id }}-title"
class="text-3xl sm:text-4xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">
{{ section.title }}
</h1>
</div>

<!-- Scrollable content area -->
<div class="overflow-y-auto flex-1">
<div class="p-4 sm:p-6">
<div id="legal-and-privacy-{{ section.id }}-text"
class="prose max-w-none prose-headings:text-primary prose-a:text-primary">
{{ section.text|md }}
</div>
</div>
</div>
<div class="modal-action">

<!-- Footer - fixed at bottom -->
<div class="modal-action border-t border-primary/20 p-4 sm:p-6 bg-base-200/95 backdrop-blur-sm shrink-0 m-0">
<form method="dialog">
<button class="btn">
Close
<button class="btn btn-primary gap-2 group">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span>{% translate "Close" %}</span>
</button>
</form>
</div>
Expand All @@ -51,7 +69,8 @@ <h1 id="legal-and-privacy-{{ section.id }}-title">
{% with follow_me_links=data.follow_me_links %}
{% if follow_me_links %}
<nav id="follow-me-links" class="lg:mx-auto">
<h6 id="follow-me-links-title" class="footer-title">
<h6 id="follow-me-links-title"
class="footer-title text-primary font-bold">
{% translate "Follow Me" %}
</h6>
<div class="grid grid-flow-col gap-4">
Expand All @@ -60,7 +79,7 @@ <h6 id="follow-me-links-title" class="footer-title">
class="tooltip"
data-tip="{{ link.name }}">
<a id="follow-me-link-{{ link.id }}"
class="inline-block"
class="inline-block hover:text-primary transition-all hover:scale-110"
role="button"
href="{{ link.link }}"
target="_blank">
Expand All @@ -85,7 +104,7 @@ <h6 id="follow-me-links-title" class="footer-title">
<p>
{% translate "The source code of this website is available on" %}
<a id="github-repo-link"
class="link underline-offset-4"
class="link underline-offset-4 hover:text-primary transition-colors font-semibold"
href="https://github.com/roberfi/personal-portfolio"
target="_blank"
rel="noopener noreferrer">GitHub</a>
Expand Down
22 changes: 14 additions & 8 deletions src/base/templates/cotton/nav_bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
{% get_language_info_list for AVAILABLE_LANGUAGES as languages %}

{% with request.resolver_match.url_name as url_name %}
<nav id="nav-bar" class="navbar bg-base-200">
<nav id="nav-bar"
class="navbar bg-linear-to-r from-base-200 to-base-100 shadow-lg border-b border-primary/20 backdrop-blur-sm z-50">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle lg:hidden">
Expand All @@ -19,23 +20,28 @@
</svg>
</div>
<ul tabindex="0"
class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow">
class="menu dropdown-content bg-linear-to-br from-base-100 to-base-200 rounded-box z-100 mt-5 w-52 p-2 shadow-xl border border-primary/20">
<c-section-links mode="dropdown" />
</ul>
</div>
<a class="btn btn-ghost btn-circle lg:mx-5" href="{% url "home" %}">
<image class="w-8 h-8" src="/media/icon.png" />
<a class="btn btn-ghost btn-circle lg:mx-5 hover:bg-primary/10 transition-colors"
href="{% url "home" %}">
<image class="w-8 h-8 hover:scale-110 transition-transform"
src="/media/icon.png" />
</a>
<div role="tablist" class="tabs tabs-border max-lg:hidden">
<c-section-links mode="tabs" />
</div>
</div>
<div class="navbar-center">
<span id="active-section-title" class="lg:hidden whitespace-nowrap">{{ url_name|url_title }}</span>
<span id="active-section-title"
class="lg:hidden whitespace-nowrap font-semibold text-primary">{{ url_name|url_title }}</span>
</div>
<div class="navbar-end">
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost">
<div tabindex="0"
role="button"
class="btn btn-ghost hover:bg-primary/10 transition-colors gap-2">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
aria-hidden="true"
Expand All @@ -47,15 +53,15 @@
<span>{{ CURRENT_LANGUAGE }}</span>
</div>
<ul tabindex="0"
class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow">
class="menu dropdown-content bg-linear-to-br from-base-100 to-base-200 rounded-box z-100 mt-5 w-52 p-2 shadow-xl border border-primary/20">
{% for language in languages %}
<li>
<form class="block p-0" action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{% url url_name %}">
<input name="language" type="hidden" value="{{ language.code }}">
<button type="submit"
class="btn btn-lg w-full justify-start font-normal{% if language.code == CURRENT_LANGUAGE %} bg-soft{% else %} btn-ghost{% endif %}">
class="btn btn-lg w-full justify-start font-normal transition-all{% if language.code == CURRENT_LANGUAGE %} bg-neutral/40 text-neutral-content font-semibold{% else %} btn-ghost hover:bg-white/5{% endif %}">
<span class="flex-1 text-left">{{ language.name_local | title }}</span>
</button>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/base/templates/cotton/section_links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
href="{% url link.url %}">{{ link.name }}</a>
{% elif mode == "dropdown" %}
<li>
<a class="btn btn-lg w-full justify-start font-normal{% if url_name == link.url %} bg-soft{% else %} btn-ghost{% endif %}"
<a class="btn btn-lg w-full justify-start font-normal transition-all{% if url_name == link.url %} bg-neutral/40 text-neutral-content font-semibold{% else %} btn-ghost hover:bg-white/5{% endif %}"
role="button"
href="{% url link.url %}">
<span class="flex-1 text-left">{{ link.name }}</span>
Expand Down
Loading