Skip to content

"All shifts" page + "My shifts" WIP (missing design) #673

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

Open
emmanuelgratuze wants to merge 10 commits into
base: rizoma
Choose a base branch
from
Open

"All shifts" page + "My shifts" WIP (missing design) #673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8f16345
feat: allow loading rizoma static files (css / js)
emmanuelgratuze Sep 4, 2025
8c3b288
Restore sidebar changes
emmanuelgratuze Sep 5, 2025
175cf4d
feat: Login page
emmanuelgratuze Sep 8, 2025
e307841
feat: Update sidebar design + add admin Shift link
emmanuelgratuze Sep 8, 2025
0545b4c
feat: improve Navbar + sidebar
emmanuelgratuze Sep 9, 2025
c334c8f
feat: Update sidebar style
emmanuelgratuze Sep 12, 2025
db0f3d6
feat: Remove unrelevant informations and buttons from Rizoma's user d…
emmanuelgratuze Sep 29, 2025
fab65d7
Merge branch 'rizoma' of github.com:SuperCoopBerlin/tapir into rizoma
emmanuelgratuze Oct 3, 2025
be585cf
Create Rizoma's all shifts page (for admins)
emmanuelgratuze Oct 3, 2025
d9f2624
My shifts page (backend) (#6)
emmanuelgratuze Oct 3, 2025
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
7 changes: 7 additions & 0 deletions .env.rizoma
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
DEBUG=True
DJANGO_VITE_DEBUG=True
ACTIVE_LOGIN_BACKEND=ldap
COOPS_PT_API_BASE_URL=https://api.demo.coops.pt
COOPS_PT_ADMIN_EMAIL=invalid_email
COOPS_PT_ADMIN_PASSWORD=invalid_password
ENABLE_RIZOMA_CONTENT=True
5 changes: 4 additions & 1 deletion rizoma/static/rizoma-static/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
@import url("./components/nav.css");
@import url("./components/link.css");
@import url("./components/table.css");
@import url("./components/typography.css");

/* Pages */
@import url("./pages/about.css");
@import url("./pages/auth.css");
@import url("./pages/auth.css");

@import url("./pages/allShifts.css");
2 changes: 1 addition & 1 deletion rizoma/static/rizoma-static/css/components/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,4 @@

.tapir-btn > .material-icons {
font-size: 20px;
}
}
2 changes: 1 addition & 1 deletion rizoma/static/rizoma-static/css/components/icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
font-size: 1em;
display: inline-block;
line-height: 1;
text-transform: none;
Expand Down
18 changes: 18 additions & 0 deletions rizoma/static/rizoma-static/css/components/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
a {
color: var(--bs-primary);
}

.tab-links {
display: flex;
gap: 1rem;

}

.tab-link {
color: var(--riz-color-gray-medium);
padding: .3rem 1.1rem;
text-decoration: none;
font-weight: 700;
}

.tab-link__active {
color: var(--bs-primary);
border-bottom: 4px solid var(--bs-primary);
}
7 changes: 6 additions & 1 deletion rizoma/static/rizoma-static/css/components/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

.nav-link {
--bs-nav-link-font-size: 0.95rem;
--bs-nav-link-font-size: 1rem;
}

/* Sidebar */
Expand Down Expand Up @@ -61,6 +61,11 @@
/* padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); */
}

.sidebar .nav-link .material-icons {
font-size: 1.25rem;
margin-right: .25rem;
}

.sidebar .nav-link.active {
background-color: var(--riz-color-gray-light);

Expand Down
4 changes: 1 addition & 3 deletions rizoma/static/rizoma-static/css/components/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
--bs-table-bg-type: initial;
--bs-table-color-state: initial;
--bs-table-bg-state: initial;
--bs-table-color: var(--bs-emphasis-color);
--bs-table-color: var(--bs-gray-700);
--bs-table-bg: var(--bs-body-bg);
--bs-table-border-color: var(--bs-border-color);
--bs-table-accent-bg: transparent;
Expand All @@ -13,6 +13,4 @@
--bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
--bs-table-hover-color: var(--bs-emphasis-color);
--bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);


}
11 changes: 11 additions & 0 deletions rizoma/static/rizoma-static/css/components/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.h1 {
font-weight: 700;
}

.h2 {
font-weight: 700;
}

.h3 {
font-weight: 700;
}
37 changes: 37 additions & 0 deletions rizoma/static/rizoma-static/css/pages/allShifts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@

/* Fix duplicated data */

.all-shifts-page .attendances-table {
table-layout: fixed;
max-width: 1200px;
}

.all-shifts-page .attendances-table th {
background-color: var(--riz-color-gray-lighter);
}

.all-shifts-page .attendances-table td:first-child {
background-color: var(--riz-color-gray-lighter);
}

.all-shifts-page .attendances-table th, .all-shifts-page .attendances-table td, .all-shifts-page .attendances-table tr {
border: 1px solid var(--bs-border-color);
}

.all-shifts-page .shift-attendances > div:not(:first-child) {
display: none !important;
}

.all-shifts-page .shift-attendances {
font-size: 1rem;
}

.all-shifts-page .date-picker .btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.all-shifts-page .date-picker .btn-group > .btn-last {
border-top-right-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
222 changes: 141 additions & 81 deletions rizoma/templates/accounts/user_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,106 +12,166 @@
{% load statistics %}
{% load rizoma %}
{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'shifts/css/shifts.css' %}">
<script src="{% static 'statistics/chart_4.4.0.js' %}"></script>
<script src="{% static 'statistics/tapir_charts.js' %}" defer></script>
{{ block.super }}
<link rel="stylesheet" href="{% static 'shifts/css/shifts.css' %}">
<script src="{% static 'statistics/chart_4.4.0.js' %}"></script>
<script src="{% static 'statistics/tapir_charts.js' %}" defer></script>
{% endblock head %}
{% block title %}
{% translate 'Member' %}: {% get_display_name_for_viewer object request.user %}
{% translate 'Member' %}: {% get_display_name_for_viewer object request.user %}
{% endblock title %}
{% block content %}
<div class="row">
<div class="col-xl-6">
<div class="card mb-2" id="tapir_user_detail_card">
<h5 class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
<span>{% translate "Personal Data" %}</span>
<a class="{% tapir_button_link_to_action %}"
href="{% url 'accounts:mail_settings' object.pk %}">
<div class="row">
<div class="col-xl-6">
<div class="card mb-2" id="tapir_user_detail_card">
<h5 class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
<span>{% translate "Personal Data" %}</span>
<span class="d-flex justify-content-end flex-fill flex-wrap gap-2">
<a class="{% tapir_button_link_to_action %}" href="{% url 'accounts:mail_settings' object.pk %}">
<span class="material-icons">mail</span>{% translate 'Mails' %}
</a>
</h5>
<div class="card-body">
<div class="row">
<div class="col">
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Name" %}:</div>
<div class="col-12 col-sm-8"
id="tapir_user_display_name">{% get_display_name_full object %}
</div>
{% if perms.group.manage %}
<a class="{% tapir_button_link_to_action %}"
href="{% url 'accounts:edit_user_ldap_groups' object.pk %}">
<span class="material-icons">badge</span>{% translate 'Edit groups' %}
</a>
{% endif %}
<a class="{% tapir_button_link_to_action %}" href="{% url 'accounts:edit_username' object.pk %}">
<span class="material-icons">fingerprint</span>{% translate 'Edit username' %}
</a>
{% if perms.accounts.manage %}
<a class="{% tapir_button_link_to_action %}" href="{% url 'accounts:user_update' object.pk %}"
id="tapir_user_edit_button">
<span class="material-icons">edit</span>{% translate 'Edit' %}
</a>
{% else %}
<a class="{% tapir_button_link_to_action %}" href="{% url 'accounts:user_update_self' object.pk %}">
<span class="material-icons">edit</span>{% translate 'Edit name and pronouns' %}
</a>
{% endif %}
</span>
</h5>
<div class="card-body">
<div class="row">
<div class="col">
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Name" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_display_name">{% get_display_name_full object %}
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Username" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_username">{{ object.username }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Username" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_username">{{ object.username }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Email" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_email">{{ object.email }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Phone number" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_phone_number">
{% if object.phone_number %}
{{ object.phone_number|format_phone_number }}
{% else %}
<span class="text-danger">{% translate "Missing" %}</span>
{% endif %}
</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Birthdate" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_birthdate">
{% if object.birthdate %}
{{ object.birthdate|date:"d.m.Y" }}
{% else %}
<span class="text-danger">{% translate "Missing" %}</span>
{% endif %}
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Email" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_email">{{ object.email }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Address" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_address">
{% if object.street and object.city %}
{{ object.get_display_address }}
{% else %}
<span class="text-danger">{% translate "Missing" %}</span>
{% endif %}
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Phone number" %}:</div>
<div class="col-12 col-sm-8" id="tapir_user_phone_number">
{% if object.phone_number %}
{{ object.phone_number|format_phone_number }}
{% else %}
<span class="text-danger">{% translate "Missing" %}</span>
{% endif %}
</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Preferred Language" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_preferred_language_display }}</div>
</div>
{% if perms.accounts.view %}
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Groups" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_groups_display }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Permissions" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_permissions_display }}</div>
</div>
{% endif %}
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Co-Purchaser" %}:</div>
<div class="col-12 col-sm-8">
{% if object.co_purchaser %}
{{ object.co_purchaser }}
{% else %}
-
{% endif %}
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Preferred Language" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_preferred_language_display }}</div>
</div>
<div class="d-flex justify-content-end flex-fill flex-wrap gap-2 m-1 mt-3">
{% if perms.accounts.manage %}
<div class="ms-1">
<form method="post" action="{% url 'accounts:send_user_welcome_email' object.pk %}">
{% csrf_token %}
<button type="submit" class="{% tapir_button_action %} ms-3">
<span class="material-icons">send</span>{% translate "Resend account activation
email" %}
</button>
</form>
</div>
{% if perms.accounts.view %}
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Groups" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_groups_display }}</div>
</div>
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Permissions" %}:</div>
<div class="col-12 col-sm-8">{{ object.get_permissions_display }}</div>
</div>
{% endif %}
<div class="row m-1">
<div class="col-12 col-sm-4 fw-bold text-sm-end">{% translate "Co-Purchaser" %}:</div>
<div class="col-12 col-sm-8">
{% if object.co_purchaser %}
{{ object.co_purchaser }}
{% else %}
-
{% endif %}
</div>
{% if object.pk == request.user.pk %}
<div class="ms-1">
<a class="{% tapir_button_link_to_action %} ms-1"
href="{% url 'password_change' %}"><span class="material-icons">vpn_key</span>{%
translate "Change Password" %}
</a>
</div>
{% endif %}
</div>
</div>
{% if object.share_owner.rizoma_member_data and object.share_owner.rizoma_member_data.photo_id %}
<div class="col">
<div class="d-flex align-content-center align-items-center justify-content-center"
style="height: 100%">
<img src="{% rizoma_photo_url object.share_owner.rizoma_member_data.photo_id %}"
alt="{% translate 'Member photo' %}"
style="max-width: 10vw; max-height: 10vw; display: block;" />
</div>
{% if object.share_owner.rizoma_member_data and object.share_owner.rizoma_member_data.photo_id %}
<div class="col">
<div class="d-flex align-content-center align-items-center justify-content-center"
style="height: 100%">
<img src="{% rizoma_photo_url object.share_owner.rizoma_member_data.photo_id %}"
alt="{% translate 'Member photo' %}"
style="max-width: 10vw; max-height: 10vw; display: block;"/>
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% if not shifts_only %}
<div class="col-xl-6">{% share_owner_ownership_list object.share_owner %}</div>
{% endif %}
</div>
<div class="row">
<div class="col-xl-6">{% user_shifts_overview object %}</div>
<div class="col-xl-6">{% log_entry_list tapir_user=object %}</div>
</div>
{% if not shifts_only %}
<div class="row">
<div class="col-xl-4">{% purchase_tracking_card tapir_user=object %}</div>
{% if tapir_user.share_owner and tapir_user.allows_purchase_tracking %}
<div class="col-xl-4">{% purchase_statistics_card tapir_user=object %}</div>
<div class="col-xl-4">{% credit_account_card tapir_user=object %}</div>
{% endif %}
</div>
<div class="col-xl-6">{% share_owner_ownership_list object.share_owner %}</div>
{% endif %}
</div>
<div class="row">
<div class="col-xl-6">{% user_shifts_overview object %}</div>
<div class="col-xl-6">{% log_entry_list tapir_user=object %}</div>
</div>
{% if not shifts_only %}
<div class="row">
<div class="col-xl-4">{% purchase_tracking_card tapir_user=object %}</div>
{% if tapir_user.share_owner and tapir_user.allows_purchase_tracking %}
<div class="col-xl-4">{% purchase_statistics_card tapir_user=object %}</div>
<div class="col-xl-4">{% credit_account_card tapir_user=object %}</div>
{% endif %}
</div>
{% endif %}
{% endblock content %}
Loading