Skip to content

Change the structure of cookie consent banner #38

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

Change the structure of cookie consent banner #38

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
1 change: 1 addition & 0 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## Next Release

- Improve UI
- Change the structure of cookie consent banner

## 0.6.0

Expand Down
0 ...mplates/cotton/buttons/accept_button.html → ...consent_banner/buttons/accept_button.html
View file
Open in desktop
File renamed without changes.
0 ...emplates/cotton/buttons/close_button.html → ..._consent_banner/buttons/close_button.html
View file
Open in desktop
File renamed without changes.
19 changes: 19 additions & 0 deletions src/base/templates/cotton/cookie_consent_banner/buttons/settings_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{% load i18n %}

<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"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
{% translate "Settings" %}
</button>
7 changes: 4 additions & 3 deletions ...mplates/cotton/cookie_consent_banner.html → ...s/cotton/cookie_consent_banner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ <h2 class="mb-2 text-xl font-bold text-primary">
<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 />
<c-cookie-consent-banner.buttons.settings-button />
{% endif %}

<c-buttons.accept-button />
<c-cookie-consent-banner.buttons.accept-button />
</div>

<c-buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />
<c-cookie-consent-banner.buttons.close-button position-classes="absolute right-2 top-2" onclick="document.getElementById('cooco_banner').classList.add('hidden')" />

</div>
</div>
<c-cookie-consent-banner.modal />
{% endif %}
21 changes: 3 additions & 18 deletions ...lates/cotton/buttons/settings_button.html → ...s/cotton/cookie_consent_banner/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,12 @@
{% load i18n %}
{% load cooco %}

<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"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
{% translate "Settings" %}
</button>
<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" />
<c-cookie-consent-banner.buttons.close-button />
</form>

<!-- Header section - fixed at top -->
Expand All @@ -41,6 +25,7 @@ <h3 class="text-2xl sm:text-3xl font-bold bg-linear-to-r from-primary to-primary
<input name="next" type="hidden" value="{{ request.path }}" />

<div class="grid grid-cols-1 gap-4">
{% get_cookie_groups as cookie_groups %}
{% for cookie_group in cookie_groups %}
<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">
Expand Down