On utilise un textarea pour les adresses, et on modifie le formulaire

fiches/migrations/0009_auto_20210128_0019.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.2.17 on 2021-01-28 00:19
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('fiches', '0008_auto_20201113_1038'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='address',
+            name='content',
+            field=models.TextField(verbose_name='adresse'),
+        ),
+    ]

fiches/models.py

@@ -89,7 +89,7 @@ class Address(models.Model):
         Profile, on_delete=models.CASCADE, verbose_name=_("profil")
     )
     name = models.CharField(max_length=255, verbose_name=_("type"))
-    content = models.CharField(max_length=1023, verbose_name=_("adresse"))
+    content = models.TextField(verbose_name=_("adresse"))
 
     def __str__(self):
         return "{} : {}".format(self.name, self.content)

fiches/static/fiches/css/annuaire.css

@@ -426,19 +426,27 @@ body {
   grid-template-areas: "errors     errors      errors" "type-input value-input remove-button";
   column-gap: 10px;
   margin: 0 0 10px 0;
+  align-items: center;
 }
 #content-edit-profile form .form-sub-entry.hidden {
   display: none;
 }
 #content-edit-profile form .form-sub-entry input:nth-child(1) {
   grid-area: type-input;
+  max-height: 30px;
 }
 #content-edit-profile form .form-sub-entry input:nth-child(2) {
   grid-area: value-input;
 }
+#content-edit-profile form .form-sub-entry textarea:nth-child(2) {
+  grid-area: value-input;
+  max-height: 35px;
+  resize: none;
+}
 #content-edit-profile form .form-sub-entry .remove-button {
   grid-area: remove-button;
   min-height: 30px;
+  max-height: 30px;
   min-width: 30px;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
   background-size: 80%;

fiches/static/fiches/scss/_content.scss

@@ -229,6 +229,7 @@
                 "type-input value-input remove-button";
             column-gap: 10px;
             margin: 0 0 10px 0;
+            align-items: center;
 
             &.hidden {
                 display: none;
@@ -237,12 +238,21 @@
             // Since the different labels and inputs are not obvious to identifiate using CSS selectors,
             // they are selected one after the other using their natural order in the DOM
             // TODO: make this more robust by giving proper class names to each sub-entry element
-            input:nth-child(1) { grid-area: type-input; }
+            input:nth-child(1) {
+                grid-area: type-input;
+                max-height: 30px;
+            }
             input:nth-child(2) { grid-area: value-input; }
+            textarea:nth-child(2) {
+                grid-area: value-input;
+                max-height: 35px;
+                resize: none;
+            }
 
             .remove-button {
                 grid-area: remove-button;
                 min-height: 30px;
+                max-height: 30px;
                 min-width: 30px;
                 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
                 background-size: 80%;

fiches/templates/fiches/fiche.html

@@ -87,7 +87,7 @@
       <span class="separator"></span>
       <ul class="value">
         {% for p in profile.address_set.all %}
-          <li><span class="type">{{ p.name }}</span><span class="value">{{ p.content }}</span></li>
+          <li><span class="type">{{ p.name }}</span><span class="value">{{ p.content|linebreaksbr }}</span></li>
         {% endfor %}
       </ul>
     </div>