On utilise un textarea pour les adresses, et on modifie le formulaire
This commit is contained in:
parent
976fb86c0a
commit
61544cc709
5 changed files with 56 additions and 20 deletions
18
fiches/migrations/0009_auto_20210128_0019.py
Normal file
18
fiches/migrations/0009_auto_20210128_0019.py
Normal file
|
|
@ -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'),
|
||||
),
|
||||
]
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue