From: Yoan Le Clanche Date: Mon, 21 Oct 2019 14:34:09 +0000 (+0200) Subject: Registrer form UI rework and fix platform_only always True X-Git-Tag: 1.4.1~8 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=bd103a1e3f4ba548cf28346d6a33554eef8970b4;p=teleforma.git Registrer form UI rework and fix platform_only always True --- diff --git a/teleforma/forms.py b/teleforma/forms.py index 7ce4fb48..7a77f779 100644 --- a/teleforma/forms.py +++ b/teleforma/forms.py @@ -13,7 +13,7 @@ from postman.fields import BasicCommaSeparatedUserField from registration.forms import RegistrationForm from django.utils.translation import ugettext_lazy as _ -from extra_views import CreateWithInlinesView, UpdateWithInlinesView, InlineFormSet +from extra_views import CreateWithInlinesView, UpdateWithInlinesView from captcha.fields import CaptchaField from teleforma.models.core import Course, Professor @@ -70,15 +70,15 @@ class UserForm(ModelForm): city = CharField(label=_('City'), max_length=255) country = CharField(label=_('Country'), max_length=255) telephone = CharField(label=_('Telephone'), max_length=255) - birthday = DateField(label=_('birthday'), help_text="Au format jj/mm/aaaa") + birthday = DateField(label=_('Birthday'), help_text="Au format jj/mm/aaaa") # student portrait = ImageField(widget=FileInput(attrs={'accept': "image/*;capture=camera"}), required=False, help_text="Veuillez utiliser une photo au format d'identité.") - level = ChoiceField(label=_('studying level'), choices=LEVEL_CHOICES) + level = ChoiceField(label=_('Studying level'), choices=LEVEL_CHOICES) iej = ModelChoiceField(label='IEJ', queryset=IEJ.objects.all()) platform_only = forms.ChoiceField(choices = TRUE_FALSE_CHOICES, - label=_('e-learning platform only'), + label='E-learning uniquement', widget=forms.Select()) period = ModelChoiceField(label='Période', queryset=Period.objects.filter(is_open=True, @@ -86,16 +86,16 @@ class UserForm(ModelForm): date_inscription_end__gte=datetime.datetime.now())) training = ModelChoiceField(label='Formation', queryset=Training.objects.filter(available=True)) - procedure = ModelChoiceField(label=_('procedure'), + procedure = ModelChoiceField(label=_('Procedure'), help_text="Matière de procédure", queryset=Course.objects.filter(procedure=True)) - written_speciality = ModelChoiceField(label=_('written speciality'), + written_speciality = ModelChoiceField(label='Specialité écrite', queryset=Course.objects.filter(written_speciality=True), help_text="Matière juridique de spécialité") - oral_1 = ModelChoiceField(label=_('oral de langue (option)'), + oral_1 = ModelChoiceField(label=_('Oral de langue (option)'), help_text="Matière d’oral de langue (en option)", queryset=Course.objects.filter(oral_1=True)) - promo_code = CharField(label=_('promo code'), max_length=100, required=False) + promo_code = CharField(label=_('Code promo'), max_length=100, required=False) # no model captcha = CaptchaField() accept = BooleanField() @@ -104,6 +104,15 @@ class UserForm(ModelForm): model = User fields = ['first_name', 'last_name', 'email'] + + def __init__(self, *args, **kwargs): + super(UserForm, self).__init__(*args, **kwargs) + self.fields['first_name'].required = True + self.fields['last_name'].required = True + self.fields['email'].required = True + self.user_fields = ['first_name', 'last_name', 'email', 'address', 'address_detail', 'postal_code', 'city', 'country', 'telephone', 'birthday', 'portrait'] + self.training_fields = ['level', 'iej', 'platform_only', 'period', 'training', 'procedure', 'written_speciality', 'oral_1'] + def clean_portrait(self): image = self.cleaned_data['portrait'] if not image: @@ -149,12 +158,13 @@ class UserForm(ModelForm): ) if commit: profile.save() + platform_only = data.get('platform_only') == 'True' and True or False student = Student(user=user, portrait=data['portrait'], level=data.get('level'), iej=data.get('iej'), period=data.get('period'), - platform_only=data.get('platform_only'), + platform_only=platform_only, procedure=data.get('procedure'), written_speciality=data.get('written_speciality'), oral_1=data.get('oral_1'), diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css index 2e244e9b..0fa4fbba 100644 --- a/teleforma/static/teleforma/css/teleforma.css +++ b/teleforma/static/teleforma/css/teleforma.css @@ -34,6 +34,7 @@ a:hover { text-decoration: underline; } + a img { border: none; } .rst-content h1 { @@ -1979,6 +1980,7 @@ form.add_actus #id_text_parent{ font-size: 1.2em; } + .register { width: 80%; font-size: 1.1em; @@ -1996,6 +1998,260 @@ form.add_actus #id_text_parent{ color: #BB0000; } +#_registerForm{ + margin: 1em auto 4em auto; + padding: 3em 5em; +} +#_registerForm, #_registerForm *{ + box-sizing: border-box; +} +#_registerForm:after { + content: ""; + display: table; + clear: both; +} + +#_registerForm h1{ + background-color: #000; + display: block; + width: 100%; + padding: 18px 20px; + color: #FFF; + text-transform: uppercase; + margin: 0; +} +#_registerForm h2{ + background-color: #F2F2F2; + display: block; + width: 100%; + padding: 10px 20px; + color: #000; + text-transform: uppercase; + margin: 0; +} +#_registerForm h2 img{ + width: 22px; + height: auto; + margin-right: 10px; + position: relative; + top: 2px; +} +#_registerForm h2 img.votreformation{ + width: 15px; + height: auto; + margin-right: 17px; +} + +#_registerForm fieldset{ + border: 0; + background: transparent; + padding: 0; + margin: 30px 0 50px 0; +} + +#_registerForm .column { +-webkit-column-count: 2; +-moz-column-count: 2; +column-count: 2; +-webkit-column-gap: 40px; +-moz-column-gap: 40px; +column-gap: 40px; +-webkit-column-rule: 0; +-moz-column-rule: 0; +column-rule: 0; +} +#_registerForm fieldset .info_champs{ + margin: 0 0 00px 0; + overflow: hidden; + padding: 15px 0; + position: relative; + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid-column; + word-wrap: break-word; +} +#_registerForm fieldset label{ + display: inline-block; + min-width: 190px; +} +#_registerForm fieldset input[type="text"]{ + width: calc(100% - 190px); + margin: 0; + float: right; +} +#_registerForm fieldset #id_portrait{ + margin-left: 10px; +} + + +#_registerForm fieldset select{ + margin: 0; + float: right; + width: calc(100% - 200px); +} +#_registerForm fieldset span.required{ + color: red; +} +#_registerForm fieldset span.error{ + color: red; + padding: 0; + position: absolute; + top: 0; + left: 0; + font-size: 10px; +} +#_registerForm fieldset span.error ul{ + padding: 0; + margin: 0; +} + +#_registerForm fieldset .helptext{ + font-style: italic; + color: #CCC; + font-size: 10px; + line-height: 12px; + position: absolute; + left: 190px; + top: -2px; +} +#_registerForm fieldset.form_select .helptext{ + left: 200px; + +} +#_registerForm .error{ + background: transparent; + color: red; + font-style: italic; + font-size: 12px; +} + +#_registerForm .submit-panel{ + width: calc(50% - 20px); + float: right; + background-color: #F2F2F2; +} +#_registerForm .submit-panel div{ + padding: 15px 15px 25px 15px; +} + +#_registerForm .submit-panel label{ + font-size: 12px; +} +#_registerForm .submit-panel label[for="id_accept"]{ + font-weight: bold; +} +#_registerForm .submit-panel input[type="text"]{ + width: 90px; +} +#_registerForm .submit-panel .captcha{ + position: relative; + top: 13px; +} +#_registerForm .submit-panel .component_icon{ + background-color: #000; + color: #FFF; + display: inline-block; + border-radius: 0; + border: 0; + padding: 15px; + text-align: center; + text-transform: uppercase; + width: 100%; +} +#_registerForm .submit-panel .component_icon:hover{ + border: 0 !important; +} + +@media (max-width: 1286px) { + #_registerForm fieldset #id_portrait{ + margin-left: 0; + display: block; + } + #_registerForm fieldset label[for="id_portrait"]{ + position: relative; + top: -15px; + } +} +@media (max-width: 1245px) { + #_registerForm .submit-panel label[for="id_accept"]{ + display: inline-block; + margin-bottom: 15px; + } + #_registerForm .submit-panel span{ + display: block; + } + + #_registerForm fieldset label { + max-width: 190px; + } + #_registerForm fieldset select{ + width: calc(100% - 190px); + } + #_registerForm fieldset.form_select .helptext{ + left: 190px; + } + #_registerForm { + padding: 3em 1em; + width: 100%; + } + #_registerForm .column{ + border: 0; + background: transparent; + -moz-column-count: 2; + -webkit-column-count:2; + column-count:2; + -moz-column-gap: 20px; + -webkit-column-gap:20px; + column-gap:20px; + padding: 0; + margin: 30px 0 50px 0; + } +} +@media (max-width: 1200px) { + #_registerForm fieldset{ + margin: 10px 0 10px 0; + } + +} +@media (max-width: 835px) { + + #_registerForm .column{ + border: 0; + background: transparent; + -moz-column-count: 1; + -webkit-column-count: 1; + column-count:1; + -moz-column-gap: 0px; + -webkit-column-gap:0px; + column-gap:0px; + + } + #_registerForm fieldset #id_portrait{ + margin-left: 10px; + display: inline-block; + } + #_registerForm fieldset label[for="id_portrait"]{ + position: relative; + top: 0px; + } + #_registerForm .submit-panel{ + width: 100%; + float: none; + margin-top: 10px; + } + #_registerForm .submit-panel span{ + display: inline; + } + #_registerForm fieldset{ + margin: 0; + } +} +@media (max-width: 535px) { + #_registerForm fieldset #id_portrait{margin-left: 0;} + #_registerForm .submit-panel input[type="text"] { + width: 60px; + } +} .select-day{ margin-bottom: 15px; diff --git a/teleforma/static/teleforma/images/crfpa_coordonnees.png b/teleforma/static/teleforma/images/crfpa_coordonnees.png new file mode 100644 index 00000000..cb976cbb Binary files /dev/null and b/teleforma/static/teleforma/images/crfpa_coordonnees.png differ diff --git a/teleforma/static/teleforma/images/crfpa_coordonnees.svg b/teleforma/static/teleforma/images/crfpa_coordonnees.svg new file mode 100644 index 00000000..b98f6884 --- /dev/null +++ b/teleforma/static/teleforma/images/crfpa_coordonnees.svg @@ -0,0 +1,28 @@ + + + + + + + + diff --git a/teleforma/static/teleforma/images/crfpa_formation.png b/teleforma/static/teleforma/images/crfpa_formation.png new file mode 100644 index 00000000..5f3e6e16 Binary files /dev/null and b/teleforma/static/teleforma/images/crfpa_formation.png differ diff --git a/teleforma/static/teleforma/images/crfpa_formation.svg b/teleforma/static/teleforma/images/crfpa_formation.svg new file mode 100644 index 00000000..0e440d8d --- /dev/null +++ b/teleforma/static/teleforma/images/crfpa_formation.svg @@ -0,0 +1,25 @@ + + + + + + + + diff --git a/teleforma/templates/registration/registration_form.html b/teleforma/templates/registration/registration_form.html index 0bd5d49c..f1231619 100644 --- a/teleforma/templates/registration/registration_form.html +++ b/teleforma/templates/registration/registration_form.html @@ -4,17 +4,17 @@ {% load teleforma_tags %} {% block extra_javascript %} - - + + }); + {% endblock %} {% block extra_stylesheets %} @@ -22,89 +22,136 @@ {% endblock %} {% block title %} -
{% trans "Pre-registration" %} - {% description %}
{% endblock %} +{% endblock %} {% block content %} -
-
{% csrf_token %} - - {{ introduction|safe }} - -

Tous les champs sont requis

- - - {% for field in form.visible_fields %} - {% if field.name != 'accept' %} - - - - - {% endif %} - {% endfor %} - {% for field in form.visible_fields %} - {% if field.name == 'accept' %} - - - - - {% endif %} - {% endfor %} -
{{ field.label_tag }} - {{ field.errors }} - {{ field }} -
- - {{ field.help_text }} - -
J'accepte les conditions - générales d'inscription - {{ field.errors }} - {{ field }} -
- - {{ field.help_text }} - -
-

-  {% trans "Submit" %} -
-
- - -{% endblock %} + } + + $(document).ready(function () { + trainingId = $("#id_training").val(); + updateTrainings(); + $("#id_period, #id_platform_only").change(updateTrainings); + + }); + + +{% endblock %} \ No newline at end of file diff --git a/teleforma/templatetags/teleforma_tags.py b/teleforma/templatetags/teleforma_tags.py index 41742b3d..3a7b42ca 100644 --- a/teleforma/templatetags/teleforma_tags.py +++ b/teleforma/templatetags/teleforma_tags.py @@ -122,6 +122,13 @@ def yes_no(bool): else: return _('No') +@register.filter +def get_item(dictionary, key): + try: + return dictionary.get(key) + except AttributeError: + return dictionary[key] + @register.filter def from_course_type(contents, type): if contents: