diff --git a/assets/scss/components/_members.scss b/assets/scss/components/_members.scss index 16ee07a113..afdee2c729 100644 --- a/assets/scss/components/_members.scss +++ b/assets/scss/components/_members.scss @@ -1,3 +1,50 @@ +.deletable { + display: flex; + align-items: center; + border: $length-1 solid $grey-100; + margin-bottom: $length-4; +} + +.delete-button { + display: block; + position: relative; + + margin: 0; + + width: $length-24; + height: $length-32 + $length-4; + + transition: background-color .1s ease-in-out; + + &:hover { + background-color: $grey-100; + + &:after { + @include sprite-position($cross); + } + } + + &::after { + content: " "; + display: block; + + position: absolute; + + top: 50%; + left: 50%; + margin-top: calc(-1 * $length-16 / 2); + margin-left: calc(-1 * $length-16 / 2); + + width: $length-16; + height: $length-16; + + background-repeat: no-repeat; + + @include sprite; + @include sprite-position($cross-blue); + } +} + .member-item { display: inline-flex; align-items: center; @@ -23,10 +70,10 @@ } span { - padding: 0 $length-8; + padding: 0 $length-4; &:only-child { - padding: 0; + padding-left: 0; } } @@ -67,11 +114,11 @@ .members { display: flex; - align-items: center; .authors-label { display: inline-block; - margin-right: $length-4; + margin: $length-8 $length-8 0 0; + flex-shrink: 0; } ul { @@ -84,11 +131,9 @@ padding: 0; li { - margin: 0; + margin: 0 $length-10 $length-4 0; .member-item { - margin: 0 $length-8 0 0; - padding: $length-1; padding-left: $length-4; } } diff --git a/doc/source/front-end/elements-specifiques-au-site.rst b/doc/source/front-end/elements-specifiques-au-site.rst index d4e734df75..b526855725 100644 --- a/doc/source/front-end/elements-specifiques-au-site.rst +++ b/doc/source/front-end/elements-specifiques-au-site.rst @@ -366,7 +366,7 @@ Les membres et listes de membres Afficher un membre ------------------ -Pour afficher un membre, utilisez le gabari ``misc/member_item.part.html``. Il dispose de plusieurs arguments : +Pour afficher un membre, utilisez le gabarit ``misc/member_item.part.html``. Il dispose de plusieurs arguments : - ``member`` : le membre à afficher (ce peut être un ``Profile`` ou un ``User``, peu importe) ; - ``inline`` : si ``True``, l'élément sera stylisé pour une intégration au cœur d'un texte ; @@ -376,7 +376,9 @@ Pour afficher un membre, utilisez le gabari ``misc/member_item.part.html``. Il d - ``info`` : si renseigné, le texte donné sera affiché après le pseudonyme du membre, afin de donner un détail sur ce dernier (ce texte sera entre parenthèses, sauf si le mode “pleine largeur” est actif — voir plus bas) ; - ``fullwidth`` : si ``True``, active le support du mode pleine largeur (ce qui concrètement écrit le texte de - ``info`` sans parenthèses). + ``info`` sans parenthèses) ; + - ``deletable`` : Si ``True``, active le formulaire permettant de retirer le membre de la liste des auteurs et + autrices d'une publication. Ce qui peut donner ceci par exemple. diff --git a/templates/misc/member_item.part.html b/templates/misc/member_item.part.html index d205b2f94b..4c3ca23da7 100644 --- a/templates/misc/member_item.part.html +++ b/templates/misc/member_item.part.html @@ -1,7 +1,10 @@ {% load profile %} {% load i18n %} +{% load captureas %} {% with profile=member|profile %} + {% captureas username %}{{ profile.user.username }}{% endcaptureas %} + {% if deletable %}