See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade -bodySecondary06" id="suiviTransactionsModalDetailUnique-1" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="sds-modal__title modal-title">Détail de l'ordre</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-stackLg">
<div class="sds-transactionBlock sds-box ">
<div class="sds-transactionBlock__inner">
<div class="sds-transactionBlock__row -infoHeader">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-documentdata"></span>
</span>
<div class="sds-transactionBlock__headerInfo d-flex align-items-baseline">
<div>
<div class="sds-textSemiBold">Fichier de transactions</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Débit {individuel || global}
</div>
</div>
<div>
<div class="sds-textHelper sds-transactionBlock__meta">
Réf. S-Net Business : S-NET #####-###
</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Votre réf. : #################
</div>
</div>
</div>
<div class="ml-auto align-self-center">
<div class="sds-transactionState -crossValidation -textHelper">
<div class="sds-icon sds-icon-doublesignature" aria-hidden="true"></div>
<div class="sds-transactionState__text">À contre-valider</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row -first">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__mainInfo">
<div class="sds-transactionBlock__mainInfoAccount">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-stackXxs">
<div>{Account Name}</div>
<div class="sds-transactionBlock__meta sds-textHelper">
LU## ##### ##### #####
</div>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="d-flex justify-content-end flex-grow-1">
<div class="sds-transactionBlock__col sds-stackXxs text-right">
<div>
<div class="sds-transactionBlock__meta sds-textHelper">
Date d'exécution souhaitée
</div>
<div class="sds-textSemiBold">{DD.MM.YYYY}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Name}
</span>
<span class="sds-accountInfo__whitelisted sds-icon sds-icon-badgevalid"></span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
<div>{Communication}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-box -insetLg">
<div class="sds-actionsList -isListItem">
<div class="sds-actionsList__heading">
<div class="sds-actionsList__title">
Activités
</div>
</div>
</div>
<div class="sds-actionsList__body">
<div class="sds-outOfBounds">
<div class="sds-activityLog">
<div class="sds-activityLog__row">
<span class="sds-itemConnector sds-activityLog__itemConnector">
</span>
<div class="sds-activityLog__rowContent">
<p>
<span>{Action description}</span>
<span class="sds-activityLog__meta">par {User}</span>
</p>
<small class="sds-activityLog__meta sds-textHelper">{DD.MM.YYYY • HH:MM}</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<div class="d-flex justify-content-between w-100">
<button type="button" class="sds-btn -btnSecondary" data-cancel="" data-dismiss="modal">
<span class="sds-icon sds-icon-cross"></span>
<span class="sds-btn__text">Refuser</span>
</button>
<div class="sds-btnGroup">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-edit"></span>
<span class="sds-btn__text">Modifier</span>
</a>
<button type="button" class="sds-btn -btnPrimary" data-dismiss="modal" data-validate="">
<span class="sds-icon sds-icon-check"></span>
<span class="sds-btn__text">Valider</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="{{ namespace }}modal__title modal-title">{{ title }}</div>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackLg">
{% render "@snet-transaction-block--suivi-transactions-detail-unique" %}
<div class="{{ namespace }}box -insetLg">
<div class="{{ namespace }}actionsList -isListItem">
<div class="{{ namespace }}actionsList__heading">
<div class="{{ namespace }}actionsList__title">
Activités
</div>
</div>
</div>
<div class="{{ namespace }}actionsList__body">
<div class="{{ namespace }}outOfBounds">
{% render "@snet-activity-log--confirmation-timeline",activityLogOptions, true %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<div class="d-flex justify-content-between w-100">
{% render "@btn-secondary--icon-left", {
icon: "icon-cross",
text: "Refuser",
attrs: {
"data-cancel":"",
"data-dismiss": "modal"
}
} ,true %}
<div class="{{ namespace }}btnGroup">
{% render "@btn-secondary--icon-left",{
eltType: "a",
icon: "icon-edit",
text: "Modifier"},true %}
{% render "@btn-primary--icon-left",{
icon: "icon-check",
text: "Valider",
attrs: {
"data-dismiss": "modal",
"data-validate": ""
}
},true %}
</div>
</div>
{% endblock %}