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

@@ -3,7 +3,7 @@
 @use "errors";
 
 #content-area {
-    color: colors.$content-text;  
+    color: colors.$content-text;
 }
 
 .content {
@@ -21,7 +21,7 @@
     input {
         min-height: 30px;
         padding: 5px;
-        border: none; 
+        border: none;
         border-radius: 0;
     }
 
@@ -39,7 +39,7 @@
         margin: 0 auto;
         grid-template-columns: 150px 250px;
         gap: 20px;
-        
+
         label {
             grid-column: 1;
             margin: 5px 0 0 0;
@@ -74,7 +74,7 @@
             // input[type="checkbox"] {
             //     display: inline;
             //     width: 1rem;
-            //     float: right; 
+            //     float: right;
             // }
         }
     }
@@ -111,7 +111,7 @@
             text-align: center;
         }
     }
-   
+
     .photo {
         height: 150px;
         margin: 0 20px 0 0;
@@ -143,7 +143,7 @@
             padding: 10px;
             background-color: colors.$content-frame-background;
             box-shadow: 2px 2px 0 colors.$shadow;
-        
+
             &.multi-entry ul.value {
                 margin: 0;
                 padding: 0;
@@ -195,11 +195,11 @@
             padding: 10px;
             background-color: colors.$content-frame-background;
             box-shadow: 2px 2px 0 colors.$shadow;
-    
+
             > * {
                 display: block;
             }
-    
+
             label {
                 margin: 0 0 5px 0;
                 color: colors.$page-text-emph;
@@ -207,7 +207,7 @@
                 font-style: italic;
                 text-align: left;
             }
-    
+
             input, select {
                 width: 100%;
             }
@@ -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%;
@@ -261,14 +271,14 @@
 
             &.erroneous {
                 @extend %error-list-container;
-                
+
                 // TODO: this is not robust and should be replaced by better selectors
-                // In case of error, increment the child indices 
+                // In case of error, increment the child indices
                 // to take the additional list of errors (.errorlist)
                 // prepended by Django to the sub-entry
                 input:nth-child(2) { grid-area: type-input; }
                 input:nth-child(3) { grid-area: value-input; }
-                
+
                 // Use a darker red color when the sub-entry background is already red
                 .remove-button:hover,
                 .remove-button:active {
@@ -281,7 +291,7 @@
                 grid-area: errors;
             }
         }
-        
+
         .form-sub-entry-template {
             display: none;
         }
@@ -289,7 +299,7 @@
         .add-sub-entry-button {
             margin: 0 auto 0 auto;
         }
-    
+
         .form-entry.checkbox {
             > * {
                 display: inline;
@@ -310,7 +320,7 @@
             input[type="checkbox"] {
                 display: block;
                 width: auto;
-                float: right; 
+                float: right;
             }
         }
     }
@@ -355,7 +365,7 @@
             // input[type="checkbox"] {
             //     display: inline-block;
             //     width: 1rem;
-            //     float: right; 
+            //     float: right;
             // }
 
             input[type="file"] {
@@ -363,4 +373,4 @@
             }
         }
     }
-}
+}

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>