GENERAL
COMPONENTS
RESSOURCES
TEMPLATESOON
Ce styleguide a été créé dans le but de simplifier le travail de design et celui de l’équipe technique. Le but étant à terme de créer un process ou les composants et la grille utilisés en design d'interface soient les mêmes utilisées dans l'intégration de la webapp via ce nouveau process.
.col-xs-
.col-sm-
.col-md-
.col-lg-
Pour utiliser la nouvelle grille, il faut pour l'instant rajouter la classe custom-container au container.
custom-container
<div class="container custom-container"> <div class="row"> <!-- content with new grid --> </div> </div>
Une version de Bootstrap a été créée avec les bons paramètres de grille. Mais il est encore trop tôt pour le moment de l'implémenter directement l'ensemble de la webapp qui a été conçue sur la version par défaut.
scss/ | |– components/ | |– _alert.scss | |– _banner.scss | |– _button.scss | |– _captcha.scss | ... #Etc | |– general/ | |– _fonts.scss | |– _general.scss | |– _navigation.scss | |– _old-style.scss | |– helpers/ | |– _animations.scss | |– _useful-classname.scss | |– _variables.scss | |– mixin/ | |– _mixin.scss | |– flex | |– _flex-mixin.scss | |– layout/ | |– _ascending-tree.scss | |– _classic-tree.scss | |– _descending-tree.scss | |– _individual-sheet.scss | ... #Etc | |– pages/ | |– _andriveau.scss | |– _discover-offer.scss | |– _free-trial-general.scss | |– _home-conected.scss | ... #Etc | '- menu-principal.scss '- style-filae.scss # Main Scss file '- style-filae-minimal.scss # Main Scss file in minimal version without some components and pages
Path : Genealogie.Web/Content/css/searchApi/scss/helpers/_mixin.scss
@include flexbox; @include align-items(center); @include justify-content(center);
@include keyframes(name) { // animation }
@include rotate(0);
@include animation('name 1s 1');
@include transition(all 0.3s ease-in-out);
@include box-shadow(0px 3px 8px 0px rgba(0, 0, 0, 0.2));
@include border-radius(6px);
La typographie Lato est appelée via google font :
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
Path : Genealogie.Web/Content/css/searchApi/scss/helpers/_animations.scss
<h4 class="item__subtitle">BTN FLIPPER</h4> <a class="toggle-flipp marge-bottom10px">Lancer l'animation</a> <div id="applyEventsSelectionId" class="btn-flipper flipped "> <button class="btn btn-action">Appliquer ma sélection</button> </div>
Cta fait à partir d'une balise lien html : <a href=""></a>
<div class="col-xs-12"> <h4 class="item__title">BASIC</h4> <div class="item__block"> <a href="#" class="btn btn-action">Action button</a> <a href="#" class="btn btn-default">Default button</a> <a href="#" class="btn btn-action disabled">Disabled action button</a> <a href="link-white">Link button</a> </div> <div class="item__block item__block--coral"> <a href="#" class="btn btn-action-bkgd">Action button</a> <a href="#" class="btn btn-default-bkgd">Default button</a> <a href="#" class="btn btn-action-bkgd disabled">Disabled action button</a> <a href="#" class="link-white">Link button</a> </div> <div class="item__block item__block--indigo"> <a href="#" class="btn btn-action">Action button</a> <a href="#" class="btn btn-default-bkgd">Default button</a> <a href="#" class="btn btn-action-bkgd disabled">Disabled action button</a> <a href="#" class="link-white">Link button</a> </div> <div class="item__block item__block--dark-indigo"> <a href="#" class="btn btn-action">Action button</a> <a href="#" class="btn btn-default-bkgd">Default button</a> <a href="#" class="btn btn-action-bkgd disabled">Disabled action button</a> <a href="#" class="link-white">Link button</a> </div> <div class="item__block item__block--storm"> <a href="#" class="btn btn-action">Action button</a> <a href="#" class="btn btn-default-bkgd">Default button</a> <a href="#" class="btn btn-action-bkgd disabled">Disabled action button</a> <a href="#" class="link-white">Link button</a> </div> <h4 class="item__title">LARGE</h4> <div class="item__block item__block--small"> <a href="#" class="btn btn-action btn-large">Large action button</a> <a href="#" class="btn btn-default btn-large">Large default button</a> <a href="#" class="btn btn-action btn-large disabled">Disabled large action button</a> </div> <h4 class="item__title">DANGER</h4> <div class="item__block item__block--small"> <a href="#" class="btn btn-default danger">Lien default danger</a> <a href="#" class="btn btn-danger disabled">Lien default danger disabled</a> </div> <h4 class="item__title">FREE TRIAL</h4> <div class="item__block"> <a href="" class="free-trial btn btn-action"> <span> Démarrez maintenant </span> <i class="material-icons"></i> </a> </div> </div>
Cta fait à partir d'une balise button html : <button></button>
<div class="col-xs-12"> <h4 class="item__title">BASIC</h4> <div class="item__block item__block--small"> <button class="btn btn-action">Action button</button> <button class="btn btn-default">Default button</button> <button class="btn btn-action disabled">Disabled action button</button> </div> <div class="item__block item__block--coral"> <button class="btn btn-action-bkgd">Action button</button> <button class="btn btn-default-bkgd">Default button</button> <button class="btn btn-action-bkgd disabled">Disabled action button</button> </div> <div class="item__block item__block--indigo"> <button class="btn btn-action">Action button</button> <button class="btn btn-default-bkgd">Default button</button> <button class="btn btn-action disabled">Disabled action button</button> </div> <div class="item__block item__block--dark-indigo"> <button class="btn btn-action">Action button</button> <button class="btn btn-default-bkgd">Default button</button> <button class="btn btn-action disabled">Disabled action button</button> </div> <div class="item__block item__block--storm"> <button class="btn btn-action">Action button</button> <button class="btn btn-default-bkgd">Default button</button> <button class="btn btn-action disabled">Disabled action button</button> </div> <h4 class="item__title">PAYMENT</h4> <div class="item__block item__block-small"> <button type="button" class="btn btn-default btn-small btn-payment"> <span>Payer par PayPal</span> <span> <img src="https://www.filae.com/v4/genealogie/Content/img/paypal-logo-horizontal.png" class="paypal-logo"> </span> <i class="material-icons dp48">chevron_right</i> </button> </div> </div>
Utilisation d'un plugin Jquery : Bootstrap Tags Input : https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples
<div class="item__block item__block--small"> <h4 class="item__subtitle">Input simple non selectionné</h4> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <input class="form-control input-lg" name="Lastname" placeholder="Input non selectionné" value="" type="text"> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Input simple selectionné</h4> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <input class="form-control input-lg mainField" name="Lastname" placeholder="Input selectionné class 'mainField'" value="" type="text"> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Input simple avec reset</h4> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="form-group"> <input class="form-control input-lg mainField step-1 hasclear" id="inputLastname" maxlength="100" name="Lastname" placeholder="Nom (obligatoire)" tabindex="1" type="text" value=""> <span id="inputLastnameClear" class="force-clear-right clearer glyphicon glyphicon-remove-circle form-control-feedback" style=""></span> </div> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Input float label</h4> <div class="row"> <div class="form-group"> <div class="form-group input-simple col-xs-12 col-sm-6 col-md-6 col-lg-6"> <input class="form-control" data-toggle="floatLabel" id="FirstName" name="First Name" placeholder="Prénom" type="text" value="" data-value="d"> <label>Prénom</label> </div> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Input password float label</h4> <div class="row"> <div class="form-group"> <div class="form-group input-simple col-xs-12 col-sm-6 col-md-6 col-lg-6"> <span class="show-password" id="show-password">Afficher</span> <input class="form-control" data-toggle="floatLabel" id="user-confirm-password-subscription" name="Confirm Registration Password" placeholder="Confirmez votre mot de passe" type="password" value="" data-value=""> <label>Mot de passe</label> </div> </div> </div> </div> <h4 class="item__subtitle">Login modal input</h4> <div class="item__block item__block--small item__block--login"> <div class="inscr-conn login-bg"> <div id="partial-view-layer"> <section class="row"> <article class="col-xs-12 col-sm-12 form-inscr-conn"> <div class="row"> <div class="form-group input-simple col-xs-12 col-sm-12 col-md-12 col-lg-12 modifier-champs"> <input value="" id="email-connexion-subscription" required="true" placeholder="@" data-toggle="floatLabel" class="form-control" name="EmailFormPopup" aria-required="true" type="text" spellcheck="false" data-value=""> <label>E-MAIL</label> <i class="material-icons dp48" data-original-title="" title="">create</i> </div> </div> <div class="row"> <div class="form-group input-simple col-xs-12 col-sm-12 col-md-12 col-lg-12 modifier-champs"> <span class="input-mdp"> <span class="show-password">Afficher</span> <input id="user-confirm-password" type="password" name="mdp" class="form-control " placeholder="Confirmez votre mot de passe" required="" data-toggle="floatLabel" data-value="aaaaa"> <label for="mdp"></label> </span> </div> </div> </article> </section> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Textarea</h4> <div class="row"> <div class="form-group input-simple col-lg-12 modifier-champs"> <textarea class="form-control" cols="20" data-toggle="floatLabel" data-value="[Ville, Département]" id="userBiographie" maxlength="500" name="PersonalInfo.Biographie" placeholder="À propos de votre généalogie" rows="8" type="text"></textarea> <label for="texte">À propos de votre généalogie</label> <i class="material-icons dp48" data-original-title="" title="">create</i> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Tags</h4> <div class="bootstrap-tag-container"> <h5>Input ajout de tag</h4> <p>Utilisation d'un plugin Jquery : Bootstrap Tags Input : <a href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples" target="_blank">https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples</a> </p> <div class="form-group input-simple"> <input type="text" value="" data-role="tagsinput" placeholder="Ajouter un tag" /> <i class="material-icons dp48 i-asso" data-original-title="" title="">local_offer</i> <i class="material-icons dp48" data-original-title="" title="">add</i> </div> </div> </div>
Civilité
Date de naissance
Vue par défaut
<div class="item__block item__block--small"> <h4 class="item__subtitle">Label et select</h4> <div class="row"> <div class="col-lg-2"> <div class="faux-input"> <p class="label-faux-input">Civilité</p> <div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Mme"><span class="filter-option pull-left">Mme</span> <span class="bs-caret"><span class="caret"></span></span></button> <div class="dropdown-menu open" role="combobox"> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false"> <li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">Mme</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">M</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> </ul> </div> <select class="selectpicker" tabindex="-98"> <option>Mme</option> <option>M</option> </select> </div> </div> </div> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Label pour plusieurs select</h4> <div class="form-group multiple-input"> <div class="row"> <div class="col-xs-12"> <p class="label-faux-input">Date de naissance</p> </div> <div class="col-xs-3"> <div class="faux-input"> <div class="btn-group bootstrap-select"> <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Jour"> <span class="filter-option pull-left">Jour</span> <span class="bs-caret"> <span class="caret"></span> </span> </button> <div class="dropdown-menu open" role="combobox"> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false"> <li data-original-index="0" class="selected"><a tabindex="0" class="placeholder" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">Jour</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">1</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">3</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">4</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">5</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">6</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="7"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">7</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="8"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">...</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="9"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">30</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="10"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">31</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> </ul> </div><select class="selectpicker" tabindex="-98"> <option class="placeholder">Jour</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>...</option> <option>30</option> <option>31</option> </select> </div> </div> </div> <div class="col-xs-6"> <div class="faux-input"> <div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Mois"><span class="filter-option pull-left">Mois</span> <span class="bs-caret"><span class="caret"></span></span></button> <div class="dropdown-menu open" role="combobox"> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false"> <li data-original-index="0" class="selected"><a tabindex="0" class="placeholder" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">Mois</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Janvier</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Février</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Mars</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Avril</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Mai</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Juin</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="7"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Juillet</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="8"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Août</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="9"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Septembre</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="10"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Octobre</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="11"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Novembre</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="12"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Décembre</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> </ul> </div><select class="selectpicker" tabindex="-98"> <option class="placeholder">Mois</option> <option>Janvier</option> <option>Février</option> <option>Mars</option> <option>Avril</option> <option>Mai</option> <option>Juin</option> <option>Juillet</option> <option>Août</option> <option>Septembre</option> <option>Octobre</option> <option>Novembre</option> <option>Décembre</option> </select> </div> </div> </div> <div class="col-xs-3"> <div class="input-simple modifier-champs"> <input type="text" name="" class="form-control" placeholder="Année"> <i class="material-icons dp48">create</i> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h4 style="color:#f96566">Select avec icon</h4> <div class="faux-input"> <p class="label-faux-input">Vue par défaut</p> <div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="Vue Familiale" aria-expanded="true"><span class="filter-option pull-left"><i class="icon-arbre-familial-1"></i> Vue Familiale</span> <span class="bs-caret"><span class="caret"></span></span></button> <div class="dropdown-menu open" role="combobox" style="max-height: 162px; overflow: hidden; min-height: 104px;"> <ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 150px; overflow-y: auto; min-height: 92px;"> <li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><i class="icon-arbre-familial-1"></i> Vue Familiale<span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><i class="icon-arbre-ascendant-3"></i> Vue Ascendante<span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><i class="icon-arbre-classique"></i> Vue Classique<span class="glyphicon glyphicon-ok check-mark"></span></a></li> <li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><i class="icon-arbre-descendant-1"></i> Vue Descendante<span class="glyphicon glyphicon-ok check-mark"></span></a></li> </ul> </div><select class="selectpicker" tabindex="-98"> <option data-content="<i class='icon-arbre-familial-1'></i> Vue Familiale">Vue Familiale</option> <option data-content="<i class='icon-arbre-ascendant-3'></i> Vue Ascendante">Vue Ascendante</option> <option data-content="<i class='icon-arbre-classique'></i> Vue Classique">Vue Classique</option> <option data-content="<i class='icon-arbre-descendant-1'></i> Vue Descendante">Vue Descendante</option> </select> </div> </div> </div> </div> </div>
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <h4 class="text-coral">Checkbox : Label</h4> <label class="checkbox checkbox-primary"> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox label </label> <h4 class="text-coral">Checkbox : Label INLINE</h4> <label class="checkbox checkbox-primary checkbox-inline"> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox label </label> <label class="checkbox checkbox-primary checkbox-inline"> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox label </label> <h4 class="text-coral">Checkbox : div > label</h4> <div class="checkbox checkbox-primary"> <label> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox div > label </label> </div> <h4 class="text-coral">Checkbox : div > label INLINE</h4> <div class="checkbox checkbox-primary checkbox-inline"> <label> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox div > label INLINE </label> </div> <div class="checkbox checkbox-primary checkbox-inline"> <label> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox div > label INLINE </label> </div> <h4 class="text-coral">Checkbox : div > label BLANC</h4> <div class="bg-storm"> <div class="checkbox checkbox-blanc p-10"> <label class="text-white"> <input type="checkbox"> <span class="checkbox-material"> <span class="check"></span> </span> checkbox Blanc div > label </label> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <h4 class="text-coral">Radio label</h4> <label class="radio radio-primary"> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio label </label> <h4 class="text-coral">Radio label INLINE</h4> <label class="radio radio-primary radio-inline"> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio label </label> <label class="radio radio-primary radio-inline"> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio label </label> <h4 class="text-coral">Radio : div > label</h4> <div class="radio radio-primary"> <label> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio div > label </label> </div> <h4 class="text-coral">Radio : div > label INLINE</h4> <div class="radio radio-primary radio-inline"> <label> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio div > label INLINE </label> </div> <div class="radio radio-primary radio-inline"> <label> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio div > label INLINE </label> </div> <h4 class="text-coral">Radio : div > label BLANC</h4> <div class="bg-storm p-10"> <div class="radio radio-blanc"> <label class="text-white"> <input name="sexe" value="sexe" type="radio"> <span class="circle"></span> <span class="check"></span> Radio Blanc div > label </label> </div> </div> </div> </div>
Hum, pas sûr ! Réessayez de saisir votre mot de passe pour voir.
Vous avez demandé à l'arbre "[NOM de l'arbre privé]" créé par [Pseudo] depuis la fiche de [Prénom(s) NOM.
En consultant la fiche de [Prénom(s) NOM], vous aviez demandé à [Pseudo] l'accès à l'arbre "[NOM de l'arbre privé]".
Pas de panique. Avez-vous pensé à préciser l'objet de vos recherches?
[Pseudo] vous a donné l'accès à l'arbre "[Nom de l'arbre privé]" que vous lui aviez demandé à partir de la fiche de [Prénom(s) NOM].
<div class="alert alert-danger alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <p><strong>Hum, pas sûr ! </strong> Réessayez de saisir votre mot de passe pour voir.</p> </div> <div class="row"> <div class="col-xs-12"> <div class="row bs-callout bs-callout-warning"> <span> <h4>Patiente, votre demande d'accès est en attente</h4> <p> Vous avez demandé à l'arbre "[NOM de l'arbre privé]" créé par [Pseudo] depuis la fiche de <span class="orange">[Prénom(s) NOM</span>. </p> </span> <i title="" data-original-title="" class="material-icons dp48">query_builder</i> <div class="footer-callout"> <a class="btn btn-default pull-left" href=""> Annuler la demande </a> <a class="btn btn-action btn-opacity pull-left" href=""> Relancer </a> <p>Vous pourrez relancer votre demande à partir du : [JJ+5 Mois]</p> </div> </div> </div> <div class="col-xs-12"> <div class=" row bs-callout bs-callout-danger"> <span> <h4>Zut, votre demande d'accès a été refusée ...</h4> <p> En consultant la fiche de <span class="orange">[Prénom(s) NOM]</span>, vous aviez demandé à [Pseudo] l'accès à l'arbre "[NOM de l'arbre privé]". </p> <p>Pas de panique. Avez-vous pensé à préciser l'objet de vos recherches?</p> </span> <i title="" data-original-title="" class="material-icons dp48">block</i> </div> </div> <div class="col-xs-12"> <div class="row bs-callout bs-callout-success"> <span> <h4>Hourra ! Votre demande d'accès a été acceptée !</h4> <p> [Pseudo] vous a donné l'accès à l'arbre "<span class="orange">[Nom de l'arbre privé]</span>" que vous lui aviez demandé à partir de la fiche de <span class="orange">[Prénom(s) NOM]</span>. </p> </span> <i title="" data-original-title="" class="material-icons dp48">done</i> <div class="footer-callout"> <a class="btn btn-action pull-left" href=""> Accéder à l'arbre </a> </div> </div> </div> </div>
Utilisation du helper HTML razor :
@Html.CheckBoxFor(m => m.TreeList[i].Visible, new { @checked = true, @data_size = "mini", @class = "my-checkbox" })
Ci-dessus les switch qui agissent sur la visibilité public et privée d'un arbre. A initialiser en javascript avec Bootstrap Switch
Voir avec les dev pour le lier à la bonne data au back.
$("[name='my-checkbox']").bootstrapSwitch();
Les arbres publics facilitent vos recherches et celle des autres membres : En rendant votre arbre public, vous augmentez vos chances d’être contacté par des personnes faisant les mêmes recherches que vous. Elles ont certainement des informations susceptibles de vous intéresser. Votre travail ainsi partagé permet aux membres du site d’avancer plus vite dans leurs recherches. A tout moment, vous pouvez choisir de rendre votre arbre privé.
Vos informations restent protégées : Les informations concernant les personnes en vie de votre arbre restent confidentielles et ne sont pas accessibles par la recherche. Vous seul pouvez modifier votre arbre, les autres utilisateurs ne bénéficiant que d’un droit d’accès.
<a class="information collapsed" data-toggle="collapse" href="#public" id="info-collapse" aria-expanded="false">Cliquez pour voir l'info</a> <div class="collapse" id="public" aria-expanded="false" style="height: 0px;"> <p> <span class="bold">Les arbres publics facilitent vos recherches et celle des autres membres :</span> En rendant votre arbre public, vous augmentez vos chances d’être contacté par des personnes faisant les mêmes recherches que vous. Elles ont certainement des informations susceptibles de vous intéresser. Votre travail ainsi partagé permet aux membres du site d’avancer plus vite dans leurs recherches. A tout moment, vous pouvez choisir de rendre votre arbre privé. </p> <p> <span class="bold">Vos informations restent protégées : </span> Les informations concernant les personnes en vie de votre arbre restent confidentielles et ne sont pas accessibles par la recherche. Vous seul pouvez modifier votre arbre, les autres utilisateurs ne bénéficiant que d’un droit d’accès. </p> </div>
<div class="row"> <div class="col-md-4" id="page-size" style="margin: 20px 0;"> <span>20</span> | <a href="#" data-size="50" onclick="changeFilters('pageSize',50)">50</a> | <a href="#" data-size="100" onclick="changeFilters('pageSize',100)">100</a> résultats par page </div> <div class="col-md-4 text-center" style="margin: 20px 0;"> Résultat 1 - 20 sur <b> 603 957</b> </div> <div class="col-md-4 text-center"> <nav class="pull-right"> <nav> <ul class="pagination"> <li data-page="0" class="disabled"> <a onclick="" aria-label="Précédent"> <span aria-hidden="true">«</span> </a> </li> <li data-page="1" id="page1" class="active"> <a onclick="changeFilters('pageIndex',1, true, true)" href="#">1</a> </li> <li data-page="2" id="page2" class=""> <a onclick="changeFilters('pageIndex',2, true, true)" href="#">2</a> </li> <li data-page="3" id="page3" class=""> <a onclick="changeFilters('pageIndex',3, true, true)" href="#">3</a> </li> <li data-page="4" id="page4" class=""> <a onclick="changeFilters('pageIndex',4, true, true)" href="#">4</a> </li> <li data-page="5" id="page5" class=""> <a onclick="changeFilters('pageIndex',5, true, true)" href="#">5</a> </li> <li data-page="2" class=""> <a onclick="changeFilters('pageIndex',2, true, true)" aria-label="Suivant"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </nav> </div> </div>
Félicitations ! Dès maintenant et durant 1 semaine, votre essai gratuit vous donne droit à 8 consultations de la plus importante base d'archives de France.
Document identifié : Bulletin des Lois
Genre
Statut
Lieu de naissance
Décès
Lieu de décès
Médias
Faites glisser pour repositionner
Pour ajouter une photo, faites-la glisser ici ou
Format supportés : JPEG, PNG
Recherche personne : utlisation de la librairie de scroll Jquery : Malihu Custom Scrollbar Plugin
GC
PC
JC
MC
EC
AC
CC
BC
BF
CF
PF
PL
AM
PP
CP
Que de découvertes depuis 3 jours sur mes #ancêtres ,ce qui ravit ma grand-mère et lui fait travailler sa mémoire 👍🏼Grâce à @filaecom je peux consulter les actes en ligne et encore plus avancer sur mon #arbregénéalogique 🤗C’est vraiment top, merci 🙂 #généalogie #origines — Ségolène (@SegoleneTrv) 6 septembre 2018
Que de découvertes depuis 3 jours sur mes #ancêtres ,ce qui ravit ma grand-mère et lui fait travailler sa mémoire 👍🏼Grâce à @filaecom je peux consulter les actes en ligne et encore plus avancer sur mon #arbregénéalogique 🤗C’est vraiment top, merci 🙂 #généalogie #origines
@HomePageResources.ThanksToIndexation@filaecom @HomePageResources.ReviewElise pic.twitter.com/59H5LxfWDC — Elise Lenoble (@EliseGenealogie) @HomePageResources.DateReviewElise
@HomePageResources.ThanksToIndexation@filaecom @HomePageResources.ReviewElise pic.twitter.com/59H5LxfWDC
@filaecom @HomePageResources.ReviewCeline#genealogie pic.twitter.com/hiNy4fSADV — Celine_Souef (@CelSouef) @HomePageResources.DateReviewCeline
@filaecom @HomePageResources.ReviewCeline#genealogie pic.twitter.com/hiNy4fSADV
@HomePageResources.ReviewCronique @filaecom @HomePageResources.NiceEvening#genealogie — chroniques92 (@chroniques92) @HomePageResources.DateReviewCronique
@HomePageResources.ReviewCronique @filaecom @HomePageResources.NiceEvening#genealogie
@HomePageResources.Thanks @filaecom @HomePageResources.ReviewJuloz #généalogie #Survivant #MortalitéInfantile pic.twitter.com/8kvKmIQ2sI — Juloz 📜 (@juloz_1) @HomePageResources.DateReviewJuloz
@HomePageResources.Thanks @filaecom @HomePageResources.ReviewJuloz #généalogie #Survivant #MortalitéInfantile pic.twitter.com/8kvKmIQ2sI
#1J1Ancêtre@HomePageResources.ThanksTo @filaecom@HomePageResources.ReviewSudiste#généalogie pic.twitter.com/UTxYvANAJz — ☀ LaSudiste ☀ (@sudiste78) @HomePageResources.DateReviewSudiste
#1J1Ancêtre@HomePageResources.ThanksTo @filaecom@HomePageResources.ReviewSudiste#généalogie pic.twitter.com/UTxYvANAJz
@HomePageResources.ReviewCronique2@filaecom @HomePageResources.ReviewCronique3#genealogie — chroniques92 (@chroniques92) @HomePageResources.DateReviewCronique2
@HomePageResources.ReviewCronique2@filaecom @HomePageResources.ReviewCronique3#genealogie
Initialisation et personnalisation du slider par du JS avec des options disponibles
$(document).ready(function () { // Department slider var owl = $(".owl-departement"); owl.owlCarousel({ autoplay: true, loop: true, autoplayTimeout: 3000, autoplayHoverPause: true, items: 1, responsive: { // breakpoint from 0 up 0: { items: 1, }, // breakpoint from 480 up 480: { items: 2, }, // breakpoint from 800 up 768: { items: 3, }, 1024: { items: 4, } }, itemsDesktop: [1200, 5], //5 items between 1200px and 992px itemsDesktopSmall: [1024, 4], //4 items betweem 992px and 767px itemsTablet: [767, 3], //3 items between 767px and 480px itemsMobile: [480, 2] // 2 items between 480px and 0 }); // Custom Navigation Events $(".next").click(function () { owl.trigger('next.owl.carousel'); }) $(".prev").click(function () { owl.trigger('prev.owl.carousel'); }) // Tweets carousel $(".owl-tweet").owlCarousel({ loop: true, autoplay: true, autoplayTimeout: 5000, margin: 15, responsive : { // breakpoint from 0 up 0 : { items: 1, }, // breakpoint from 480 up 480 : { items: 1, }, // breakpoint from 800 up 800 : { items: 2, }, 1024 : { items: 2, } }, }); });
<div class="item__block item__block--small"> <div class="item__subtitle">Department slider</div> <div class="bloc-departement"> <div class="carousel-departement"> <div class="customNavigation"> <a class="prev"><i class="material-icons dp48">navigate_before</i></a> <a class="next"><i class="material-icons dp48">navigate_next</i></a> </div> <div id="owl-demo" class="owl-carousel owl-departement"> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-cote-dor.jpg" alt="logo cote d'or"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-dordogne.jpg" alt="logo dordogne"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-vienne.jpg" alt="logo vienne"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-calvados.jpg" alt="logo calvados"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-meurthe-et-moselle.jpg" alt="logo meurthe et moselle"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-haute-alpes.jpg" alt="logo hautes alpes"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-haute-saone.jpg" alt="logo haute saône"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-loir-et-cher.jpg" alt="logo loir et cher"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-rhone.jpg" alt="logo rhone"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-savoie.jpg" alt="logo savoie"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-seine-et-marne.jpg" alt="logo seine et marne"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-touraine.jpg" alt="logo touraine"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-vendee.jpg" alt="logo vendée"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-dep-yvelines.jpg" alt="logo yvelines"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/home-logo-ville-lyon.jpg" alt="logo lyon"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-cantal.png" alt="logo cantal"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-ille-et-vilaine.png" alt="logo ille et vilaine"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-loire.jpg" alt="logo loire"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-seine-maritime.png" alt="logo seine et maritime"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-territoire-de-belfort.png" alt="logo territoire de belfort"> </div> <div class="item"> <img src="https://www.filae.com/v4/genealogie/content/img/home/logo-departement/logo-departement-valdoise.png" alt="logo valdoise"> </div> </div> </div> </div> </div> <p>Initialisation et personnalisation du slider par du JS avec des <a href="https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html" target="_blank">options</a> disponibles</p> <div class="item__block item__block--small"> <div class="item__subtitle">Tweet slider</div> <div class="tweet-section-container"> <div> <div id="owl-demo" class="owl-carousel owl-tweet owl-theme"> <div class="item"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="fr" dir="ltr">Que de découvertes depuis 3 jours sur mes <a href="https://twitter.com/hashtag/anc%C3%AAtres?src=hash&ref_src=twsrc%5Etfw">#ancêtres</a> ,ce qui ravit ma grand-mère et lui fait travailler sa mémoire 👍🏼<br>Grâce à <a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> je peux consulter les actes en ligne et encore plus avancer sur mon <a href="https://twitter.com/hashtag/arbreg%C3%A9n%C3%A9alogique?src=hash&ref_src=twsrc%5Etfw">#arbregénéalogique</a> 🤗<br>C’est vraiment top, merci 🙂<br> <a href="https://twitter.com/hashtag/g%C3%A9n%C3%A9alogie?src=hash&ref_src=twsrc%5Etfw">#généalogie</a> <a href="https://twitter.com/hashtag/origines?src=hash&ref_src=twsrc%5Etfw">#origines</a></p>— Ségolène (@SegoleneTrv) <a href="https://twitter.com/SegoleneTrv/status/1037690147796606977?ref_src=twsrc%5Etfw">6 septembre 2018</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-cards="hidden" data-lang="fr"><p lang="fr" dir="ltr">@HomePageResources.ThanksToIndexation<a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> @HomePageResources.ReviewElise <a href="https://t.co/59H5LxfWDC">pic.twitter.com/59H5LxfWDC</a></p>— Elise Lenoble (@EliseGenealogie) <a href="https://twitter.com/EliseGenealogie/status/959484481425104901?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewElise</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-cards="hidden" data-lang="fr"><p lang="fr" dir="ltr"><a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> @HomePageResources.ReviewCeline<a href="https://twitter.com/hashtag/genealogie?src=hash&ref_src=twsrc%5Etfw">#genealogie</a> <a href="https://t.co/hiNy4fSADV">pic.twitter.com/hiNy4fSADV</a></p>— Celine_Souef (@CelSouef) <a href="https://twitter.com/CelSouef/status/959734025152757760?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewCeline</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="fr" dir="ltr">@HomePageResources.ReviewCronique <a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> @HomePageResources.NiceEvening<a href="https://twitter.com/hashtag/genealogie?src=hash&ref_src=twsrc%5Etfw">#genealogie</a></p>— chroniques92 (@chroniques92) <a href="https://twitter.com/chroniques92/status/958816202830336000?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewCronique</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-cards="hidden" data-lang="fr"><p lang="fr" dir="ltr">@HomePageResources.Thanks <a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> @HomePageResources.ReviewJuloz <a href="https://twitter.com/hashtag/g%C3%A9n%C3%A9alogie?src=hash&ref_src=twsrc%5Etfw">#généalogie</a> <a href="https://twitter.com/hashtag/Survivant?src=hash&ref_src=twsrc%5Etfw">#Survivant</a> <a href="https://twitter.com/hashtag/Mortalit%C3%A9Infantile?src=hash&ref_src=twsrc%5Etfw">#MortalitéInfantile</a> <a href="https://t.co/8kvKmIQ2sI">pic.twitter.com/8kvKmIQ2sI</a></p>— Juloz 📜 (@juloz_1) <a href="https://twitter.com/juloz_1/status/929684303130386432?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewJuloz</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-cards="hidden" data-lang="fr"><p lang="fr" dir="ltr"><a href="https://twitter.com/hashtag/1J1Anc%C3%AAtre?src=hash&ref_src=twsrc%5Etfw">#1J1Ancêtre</a>@HomePageResources.ThanksTo <a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a>@HomePageResources.ReviewSudiste<a href="https://twitter.com/hashtag/g%C3%A9n%C3%A9alogie?src=hash&ref_src=twsrc%5Etfw">#généalogie</a> <a href="https://t.co/UTxYvANAJz">pic.twitter.com/UTxYvANAJz</a></p>— ☀ LaSudiste ☀ (@sudiste78) <a href="https://twitter.com/sudiste78/status/961902494707154945?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewSudiste</a></blockquote> </div> <div class="item"> <blockquote class="twitter-tweet" data-lang="fr"><p lang="fr" dir="ltr">@HomePageResources.ReviewCronique2<a href="https://twitter.com/filaecom?ref_src=twsrc%5Etfw">@filaecom</a> @HomePageResources.ReviewCronique3<a href="https://twitter.com/hashtag/genealogie?src=hash&ref_src=twsrc%5Etfw">#genealogie</a></p>— chroniques92 (@chroniques92) <a href="https://twitter.com/chroniques92/status/985429681691389953?ref_src=twsrc%5Etfw">@HomePageResources.DateReviewCronique2</a></blockquote> </div> </div> </div> </div> </div>
Path CSHTML : Genealogie.Web/Views/Gedcom/Controls/ProgressBar.cshtml
Path SCSS : Genealogie.Web/Content/css/searchApi/scss/components/_progressbar.scss
Cela peut prendre plus ou moins de temps selon le contenu de votre arbre. Vous pouvez quitter cette page si vous le souhaitez, un mail vous sera envoyé dès que le fichier sera prêt.
<div id="progressBar" class="col-xs-12"> <!----on view bag add class cache --> <div class="telechargement-fichier"> <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 hidden-xs"> <i class="material-icons loop loading">loop</i> </div> <div class="col-xs-12 col-sm-10 col-md-11 col-lg-11"> <div class="italic"> <strong>Mise à jour de votre arbre</strong> </div> <div class="marge-bottom15px"> <em class="percentage-upload">55%</em> </div> <div class="progress active"> <div class="progress-bar progress-bar-active active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 55%"> <span class="sr-only">55% Complete</span> </div> </div> <p class="subtitle-progress">Cela peut prendre plus ou moins de temps selon le contenu de votre arbre. Vous pouvez quitter cette page si vous le souhaitez, un mail vous sera envoyé dès que le fichier sera prêt.</p> </div> </div> </div>
Path : Genealogie.Web/Content/css/searchApi/scss/components/_quote.scss
"Filae révolutionne la généalogie sur Internet" Guillaume de Morant, Revue française de Généalogie
“Filae, c'est magique !” Jean-Louis Beaucarnot, journaliste et généalogiste
<div class="item__block item__block--small"> <h4 class="item__subtitle">Citation texte</h4> <div class="quote-text-container quote-search"> <blockquote class="quote "> "Filae révolutionne la généalogie sur Internet" <div class="quote-author">Guillaume de Morant, Revue française de Généalogie</div> </blockquote> </div> </div> <div class="item__block item__block--small"> <h4 class="item__subtitle">Citation image</h4> <div class="beaucarnot-section-container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"> <div class="filae-info-container"> <div class="filae-info"> <strong>Des milliards d'informations généalogiques</strong> </div> <div class="filae-info-2 "> accessibles à partir d’un simple nom de famille ! </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="beaucarnot-section"> <div class="quote-container quote-beaucarnot "> <img src="../../content/img/home/v2/beaucarnot.png" alt=@HomePageResources.JeanLouisBeaucarnotImage> <blockquote class="quote "> “Filae, c'est magique !” <div class="quote-author">Jean-Louis Beaucarnot, journaliste et généalogiste</div> </blockquote> </div> </div> </div> </div> </div> </div>
Utilisation de la libraire CSS Speech Bubble Generator
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos sed error ad, officiis omnis dolor? Dicta tempora adipisci reprehenderit obcaecati illum porro velit magni, autem laborum voluptates, quaerat sit explicabo?
JJ Mois AAAA - 00h00
NP
<div class="item__block item__block--small"> <div class="row"> <div class="col-xs-12"> <div class="ancien-message envoye"> <div class="col-xs-12 col-sm-2 col-md-4 col-lg-4 hidden-xs"></div> <div class="col-xs-9 col-sm-7 col-md-6 col-lg-6 bubble"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos sed error ad, officiis omnis dolor? Dicta tempora adipisci reprehenderit obcaecati illum porro velit magni, autem laborum voluptates, quaerat sit explicabo?</p> <p>JJ Mois AAAA - 00h00</p> </div> <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2"> <div class="profil homme"> <p class="initiale">NP </p> </div> </div> </div> </div> </div> </div>
Invision Board
Redmine