diff --git a/core/static/core/forms.scss b/core/static/core/forms.scss new file mode 100644 index 00000000..7dab0484 --- /dev/null +++ b/core/static/core/forms.scss @@ -0,0 +1,89 @@ +@import "colors"; + +/** + * Style related to forms + */ + +a.button, +button, +input[type="button"], +input[type="submit"], +input[type="reset"], +input[type="file"] { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; + border-radius: 5px; + color: black; + + &:hover { + background: hsl(0, 0%, 83%); + } +} + +a.button, +input[type="button"], +input[type="submit"], +input[type="reset"], +input[type="file"] { + font-weight: bold; +} + +a.button:not(:disabled), +button:not(:disabled), +input[type="button"]:not(:disabled), +input[type="submit"]:not(:disabled), +input[type="reset"]:not(:disabled), +input[type="checkbox"]:not(:disabled), +input[type="file"]:not(:disabled) { + cursor: pointer; +} + +input, +textarea[type="text"], +[type="number"] { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; + border-radius: 5px; + max-width: 95%; +} + +textarea { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 7px; + font-size: 1.2em; + border-radius: 5px; + font-family: sans-serif; +} + +select { + border: none; + text-decoration: none; + font-size: 1.2em; + background-color: $background-button-color; + padding: 10px; + border-radius: 5px; + cursor: pointer; +} + +a:not(.button) { + text-decoration: none; + color: $primary-dark-color; + + &:hover { + color: $primary-light-color; + } + + &:active { + color: $primary-color; + } +} diff --git a/core/static/core/style.scss b/core/static/core/style.scss index dc9e85d7..b9296e2e 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1,4 +1,5 @@ @import "colors"; +@import "forms"; /*--------------------------MEDIA QUERY HELPERS------------------------*/ $small-devices: 576px; @@ -13,91 +14,6 @@ body { font-family: sans-serif; } - -a.button, -button, -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="file"] { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 0.4em; - margin: 0.1em; - font-size: 1.2em; - border-radius: 5px; - color: black; - - &:hover { - background: hsl(0, 0%, 83%); - } -} - -a.button, -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="file"] { - font-weight: bold; -} - -a.button:not(:disabled), -button:not(:disabled), -input[type="button"]:not(:disabled), -input[type="submit"]:not(:disabled), -input[type="reset"]:not(:disabled), -input[type="checkbox"]:not(:disabled), -input[type="file"]:not(:disabled) { - cursor: pointer; -} - -input, -textarea[type="text"], -[type="number"] { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 0.4em; - margin: 0.1em; - font-size: 1.2em; - border-radius: 5px; - max-width: 95%; -} - -textarea { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 7px; - font-size: 1.2em; - border-radius: 5px; - font-family: sans-serif; -} - -select { - border: none; - text-decoration: none; - font-size: 1.2em; - background-color: $background-button-color; - padding: 10px; - border-radius: 5px; - cursor: pointer; -} - -a:not(.button) { - text-decoration: none; - color: $primary-dark-color; - - &:hover { - color: $primary-light-color; - } - - &:active { - color: $primary-color; - } -} - [aria-busy] { --loading-size: 50px; --loading-stroke: 5px; @@ -1281,26 +1197,26 @@ u, /*-----------------------------USER PROFILE----------------------------*/ .user_mini_profile { - height: 100%; - width: 100%; + --gap-size: 1em; + max-height: 100%; + max-width: 100%; + display: flex; + flex-direction: column; + gap: var(--gap-size); img { - max-width: 100%; max-height: 100%; + max-width: 100%; } .user_mini_profile_infos { padding: 0.2em; - height: 20%; + max-height: 20%; display: flex; flex-wrap: nowrap; justify-content: space-around; font-size: 0.9em; - div { - max-height: 100%; - } - .user_mini_profile_infos_text { text-align: center; @@ -1311,10 +1227,10 @@ u, } .user_mini_profile_picture { - height: 80%; - display: flex; - justify-content: center; - align-items: center; + max-height: calc(80% - var(--gap-size)); + max-width: 100%; + display: block; + margin: auto; } } diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja index 021f1918..8615b570 100644 --- a/core/templates/core/macros.jinja +++ b/core/templates/core/macros.jinja @@ -66,7 +66,12 @@ {% if user.promo and user.promo_has_logo() %}
- Promo {{ user.promo }} + Promo {{ user.promo }}
{% endif %} @@ -74,8 +79,11 @@ {% if user.profile_pict %} {% trans %}Profile{% endtrans %} {% else %} - {% trans %}Profile{% endtrans %} + {% trans %}Profile{% endtrans %} {% endif %} @@ -286,6 +294,13 @@

{{ tabs([("tab 1", "Hello"), ("tab 2", "World")], "x-model=current_tab") }} + + If you want to have translated tab titles, you can enclose the macro call + in a with block : + + {% with title=_("title"), content=_("Content") %} + {{ tabs([(tab1, content)]) }} + {% endwith %} #}
\n" @@ -362,8 +362,8 @@ msgstr "Compte en banque : " #: core/templates/core/file_detail.jinja:62 #: core/templates/core/file_moderation.jinja:48 #: core/templates/core/group_detail.jinja:26 -#: core/templates/core/group_list.jinja:25 core/templates/core/macros.jinja:96 -#: core/templates/core/macros.jinja:115 core/templates/core/page_prop.jinja:14 +#: core/templates/core/group_list.jinja:25 core/templates/core/macros.jinja:104 +#: core/templates/core/macros.jinja:123 core/templates/core/page_prop.jinja:14 #: core/templates/core/user_account_detail.jinja:41 #: core/templates/core/user_account_detail.jinja:77 #: core/templates/core/user_clubs.jinja:34 @@ -1334,7 +1334,7 @@ msgid "No mailing list existing for this club" msgstr "Aucune mailing liste n'existe pour ce club" #: club/templates/club/mailing.jinja:72 -#: subscription/templates/subscription/subscription.jinja:34 +#: subscription/templates/subscription/subscription.jinja:39 msgid "New member" msgstr "Nouveau membre" @@ -2204,8 +2204,8 @@ msgstr "profil visible par les cotisants" msgid "A user with that username already exists" msgstr "Un utilisateur de ce nom d'utilisateur existe déjà" -#: core/models.py:761 core/templates/core/macros.jinja:75 -#: core/templates/core/macros.jinja:77 core/templates/core/macros.jinja:78 +#: core/models.py:761 core/templates/core/macros.jinja:80 +#: core/templates/core/macros.jinja:84 core/templates/core/macros.jinja:85 #: core/templates/core/user_detail.jinja:100 #: core/templates/core/user_detail.jinja:101 #: core/templates/core/user_detail.jinja:103 @@ -2753,29 +2753,29 @@ msgstr "Partager sur Facebook" msgid "Tweet" msgstr "Tweeter" -#: core/templates/core/macros.jinja:85 +#: core/templates/core/macros.jinja:93 #, python-format msgid "Subscribed until %(subscription_end)s" msgstr "Cotisant jusqu'au %(subscription_end)s" -#: core/templates/core/macros.jinja:86 +#: core/templates/core/macros.jinja:94 msgid "Account number: " msgstr "Numéro de compte : " -#: core/templates/core/macros.jinja:91 launderette/models.py:188 +#: core/templates/core/macros.jinja:99 launderette/models.py:188 msgid "Slot" msgstr "Créneau" -#: core/templates/core/macros.jinja:104 +#: core/templates/core/macros.jinja:112 #: launderette/templates/launderette/launderette_admin.jinja:20 msgid "Tokens" msgstr "Jetons" -#: core/templates/core/macros.jinja:258 +#: core/templates/core/macros.jinja:266 msgid "Select All" msgstr "Tout sélectionner" -#: core/templates/core/macros.jinja:259 +#: core/templates/core/macros.jinja:267 msgid "Unselect All" msgstr "Tout désélectionner" @@ -3137,7 +3137,7 @@ msgstr "Non cotisant" #: core/templates/core/user_detail.jinja:162 #: subscription/templates/subscription/subscription.jinja:6 -#: subscription/templates/subscription/subscription.jinja:31 +#: subscription/templates/subscription/subscription.jinja:37 msgid "New subscription" msgstr "Nouvelle cotisation" @@ -5791,7 +5791,7 @@ msgstr "Weekmail envoyé avec succès" msgid "AE tee-shirt" msgstr "Tee-shirt AE" -#: subscription/forms.py:83 +#: subscription/forms.py:93 msgid "A user with that email address already exists" msgstr "Un utilisateur avec cette adresse email existe déjà" @@ -5841,7 +5841,7 @@ msgstr "" msgid "Go to user profile" msgstr "Voir le profil de l'utilisateur" -#: subscription/templates/subscription/fragments/creation_success.jinja:25 +#: subscription/templates/subscription/fragments/creation_success.jinja:24 msgid "Create another subscription" msgstr "Créer une nouvelle cotisation" diff --git a/subscription/forms.py b/subscription/forms.py index 1f4c193d..ab74adcb 100644 --- a/subscription/forms.py +++ b/subscription/forms.py @@ -61,6 +61,8 @@ class SubscriptionNewUserForm(SubscriptionForm): assert user.is_subscribed """ + template_name = "subscription/forms/create_new_user.html" + __user_fields = forms.fields_for_model( User, ["first_name", "last_name", "email", "date_of_birth"], @@ -114,6 +116,8 @@ class SubscriptionNewUserForm(SubscriptionForm): class SubscriptionExistingUserForm(SubscriptionForm): """Form to add a subscription to an existing user.""" + template_name = "subscription/forms/create_existing_user.html" + class Meta: model = Subscription fields = ["member", "subscription_type", "payment_method", "location"] diff --git a/subscription/static/bundled/subscription/creation-form-existing-user-index.ts b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts new file mode 100644 index 00000000..b997ad7b --- /dev/null +++ b/subscription/static/bundled/subscription/creation-form-existing-user-index.ts @@ -0,0 +1,25 @@ +document.addEventListener("alpine:init", () => { + Alpine.data("existing_user_subscription_form", () => ({ + loading: false, + profileFragment: "" as string, + + async init() { + const userSelect = document.getElementById("id_member") as HTMLSelectElement; + userSelect.addEventListener("change", async () => { + await this.loadProfile(Number.parseInt(userSelect.value)); + }); + await this.loadProfile(Number.parseInt(userSelect.value)); + }, + + async loadProfile(userId: number) { + if (!Number.isInteger(userId)) { + this.profileFragment = ""; + return; + } + this.loading = true; + const response = await fetch(`/user/${userId}/mini/`); + this.profileFragment = await response.text(); + this.loading = false; + }, + })); +}); diff --git a/subscription/static/subscription/css/subscription.scss b/subscription/static/subscription/css/subscription.scss new file mode 100644 index 00000000..fd388574 --- /dev/null +++ b/subscription/static/subscription/css/subscription.scss @@ -0,0 +1,28 @@ +#subscription-form form { + .form-content.existing-user { + max-height: 100%; + display: flex; + flex: 1 1 auto; + flex-direction: row; + + @media screen and (max-width: 700px) { + flex-direction: column-reverse; + } + + /* Make the form fields take exactly the space they need, + * then display the user profile right in the middle of the remaining space. */ + fieldset { + flex: 0 1 auto; + } + + #subscription-form-user-mini-profile { + display: flex; + flex: 1 1 auto; + justify-content: center; + } + + .user_mini_profile { + height: 300px; + } + } +} \ No newline at end of file diff --git a/subscription/templates/subscription/forms/create_existing_user.html b/subscription/templates/subscription/forms/create_existing_user.html new file mode 100644 index 00000000..2f1cbc99 --- /dev/null +++ b/subscription/templates/subscription/forms/create_existing_user.html @@ -0,0 +1,14 @@ +{% load static %} +{% load i18n %} + + +
+
+ {{ form.as_p }} +
+
+
diff --git a/subscription/templates/subscription/forms/create_new_user.html b/subscription/templates/subscription/forms/create_new_user.html new file mode 100644 index 00000000..c22df09b --- /dev/null +++ b/subscription/templates/subscription/forms/create_new_user.html @@ -0,0 +1 @@ +{{ form.as_p }} \ No newline at end of file diff --git a/subscription/templates/subscription/fragments/creation_form.jinja b/subscription/templates/subscription/fragments/creation_form.jinja index 92f4c1a3..697c04bc 100644 --- a/subscription/templates/subscription/fragments/creation_form.jinja +++ b/subscription/templates/subscription/fragments/creation_form.jinja @@ -5,6 +5,6 @@ hx-swap="outerHTML" > {% csrf_token %} - {{ form.as_p() }} + {{ form }} diff --git a/subscription/templates/subscription/fragments/creation_success.jinja b/subscription/templates/subscription/fragments/creation_success.jinja index 41b78ee9..6a50c2e3 100644 --- a/subscription/templates/subscription/fragments/creation_success.jinja +++ b/subscription/templates/subscription/fragments/creation_success.jinja @@ -4,18 +4,21 @@ {% trans user=subscription.member %}Subscription created for {{ user }}{% endtrans %}

- - {% trans trimmed user=subscription.member.get_short_name(), type=subscription.subscription_type, end=subscription.subscription_end %} - {{ user }} received its new {{ type }} subscription. - It will be active until {{ end }} included. + {% trans trimmed + user=subscription.member.get_short_name(), + type=subscription.subscription_type, + end=subscription.subscription_end + %} + {{ user }} received its new {{ type }} subscription. + It will be active until {{ end }} included. {% endtrans %}

- + {% trans %}Go to user profile{% endtrans %} - + {# We don't know if this fragment is displayed after creating a subscription for a previously existing user or for a newly created one. Thus, we don't know which form should be used to create another subscription diff --git a/subscription/templates/subscription/subscription.jinja b/subscription/templates/subscription/subscription.jinja index b1657808..1a88e4f3 100644 --- a/subscription/templates/subscription/subscription.jinja +++ b/subscription/templates/subscription/subscription.jinja @@ -13,10 +13,16 @@ If the aforementioned bug is resolved, you can remove this. #} {% block additional_js %} + {% endblock %} {% block additional_css %} + {% endblock %} {% macro form_fragment(form_object, post_url) %} @@ -30,9 +36,11 @@ {% block content %}

{% trans %}New subscription{% endtrans %}

- {{ tabs([ - (_("Existing member"), form_fragment(existing_user_form, existing_user_post_url)), - (_("New member"), form_fragment(new_user_form, new_user_post_url)), - ]) }} + {% with title1=_("Existing member"), title2=_("New member") %} + {{ tabs([ + (title1, form_fragment(existing_user_form, existing_user_post_url)), + (title2, form_fragment(new_user_form, new_user_post_url)), + ]) }} + {% endwith %}
{% endblock %}