Discussion

18/09/2021 à 15h03 : m-ickael : Bonjour, bon weekend !

13/09/2021 à 11h07 : Swan : Bonjour à tous et bon dimanche ;)

11/09/2021 à 16h45 : m-ickael : Bonjour :)

10/09/2021 à 08h33 : Swan : Bonjour tout le monde ^^ N'oubliez pas, si besoin je suis sur le discord ;)

31/08/2021 à 11h38 : Swan : Bonjour tout le monde :lu La rentrée approche ;)

16/08/2021 à 17h40 : m-ickael : Bonne semaine !

15/08/2021 à 11h56 : Swan : Bon week end à tous :)

13/08/2021 à 11h43 : Swan : Salut tout le monde :sun

11/08/2021 à 17h52 : m-ickael : Salut.

11/08/2021 à 11h50 : Swan : Et merci encore une fois à Xtian ;)

11/08/2021 à 11h40 : Swan : Salut à tous les Aoutiens et Aoutiennes !! On va devoir faire la prière du Soleil cette année !!

10/07/2021 à 07h42 : m-ickael : Mais oui :) Tu connais la marmotte et le papier alu ?

09/07/2021 à 02h33 : NK-aide : rigole bien regarder les infos dans un peux moins de 15 jours :po-de-bol bientôt l'injection à la pisse ( chaque injection = sont variants * agent pathogène *) méditer :partage

08/07/2021 à 20h25 : m-ickael : Il parait (et visiblement), ça n'arrange pas les gens .. :rire

07/07/2021 à 16h23 : NK-aide : :coeur1 coucou la famille j'espère que tout le monde va bien en cette période troublé du virus l'injection qui infecte & de la division politique instrumentalisé par l'union européen a des fin pur de garder les riche + riche et les pauvre encore plus pauvre pour garder une pseudo démocratie digne d'un cartel mondial.

10/06/2021 à 19h53 : m-ickael : Bonjour

08/06/2021 à 12h15 : Nico_Las : Bonjour à tous

06/06/2021 à 11h10 : Swan : Bonjour à tous^^ et bon mois de Juin !

25/05/2021 à 21h22 : m-ickael : Bonjour :)

17/05/2021 à 13h13 : Swan : Bonjour tout le monde ^^ Théo D je te remercie d'avoir testé mon système de don: €0,01 EUR :ok

09/05/2021 à 09h28 : m-ickael : Bonjour :)

05/05/2021 à 09h49 : Swan : Bonjour tout le monde :fleur

02/05/2021 à 11h20 : Swan : Bon 1er mai à tous :) :nat0

29/04/2021 à 11h27 : Swan : :lu Bonjour tout le monde ^^

20/04/2021 à 21h32 : m-ickael : Bonjour

20/04/2021 à 17h53 : Swan : Coucou tout le monde ^^

18/04/2021 à 14h14 : m-ickael : Bonjour :)

15/04/2021 à 11h46 : Swan : Bonjour à tous ;)

11/04/2021 à 11h23 : Swan : Salut !! Bon dimanche à tous ^^

07/04/2021 à 12h32 : m-ickael : Bonjour :top

05/04/2021 à 15h03 : Swan : Youhou !! Joyeuses Pâques !!! :D

04/04/2021 à 16h09 : m-ickael : Bonjour.

04/04/2021 à 11h58 : Swan : Coucou tout le monde ^^ :coin3

03/04/2021 à 17h22 : m-ickael : Bonjour :)

28/03/2021 à 10h47 : Swan : Bonjour tout le monde ^^

04/03/2021 à 21h45 : m-ickael : Moi il est là :D

02/03/2021 à 11h37 : Swan : Il est ou le soleil !!! il est ouuUUUuuu ??? :rire

01/03/2021 à 22h47 : Swan : Bon 1er Mars à tous ;)

27/02/2021 à 07h48 : m-ickael : Bonjour

26/02/2021 à 11h16 : Swan : :lu Bonjour tout le monde ^^ Ce soir week end !!

23/02/2021 à 10h50 : Swan : Salut tout le monde ^^ On est toujours là hein !! ;)

07/02/2021 à 08h33 : m-ickael : :)

06/02/2021 à 11h38 : Swan : Bonjour tout le monde :lu Merci Mickael ^^

04/02/2021 à 18h22 : m-ickael : Salut. Long à charger par moment, mais oui ça marche :)

03/02/2021 à 08h28 : Swan : Salut !! Migration sur la 5.2 de Pbt en cours ;)

30/01/2021 à 13h20 : Swan : Salut tout le monde dites moi le site fonctionne correctement ?

22/01/2021 à 16h42 : m-ickael : :(

22/01/2021 à 11h07 : Swan : Bonjour à tous, on a vraiment le moral au ras des pâquerettes... :dehors2

21/01/2021 à 13h15 : Swan : Salut tout le monde ^^ Jour de pluie , jour heureux ??

14/01/2021 à 16h57 : m-ickael : :top

Vous n'êtes pas autorisé à ajouter un message !




  Aide générale » Idée d'interface

 Le 08/01/2019 à 13h07 Swan Avatar  
 


Reprise du message précédent

Edité à 13:36 pour modification css.

Le border-left (le petit-trait) est du au fait que ton padding 15px dans ta class .list-notification ^^


code :
Code TPL :
<style type="text/css" media="screen">
.list-notifications {
    margin: auto;
    padding-left: 15px;
    background-color: #ffffff;
    border: 1px solid #ededed;
    width: 99%;
    min-height:60px;
}
.list-avatar{
    margin: auto; 
    padding-left: 8px;
    min-height:60px;    
}
 
.list-avatar img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    vertical-align: middle;
}    
.notifications-date {
    margin: auto;
    border-right: 1px solid #3333;
    min-height: 65px;
    width: 106px;
    float: left;
}
.notifications-date span {
    color:#b2b2b2;
    font-weight:bold;
    line-height: 60px;
}
.notifications-content{
margin: auto;
min-height: 60px;
line-height: 4;
}
</style>
<div class="list-notifications">
    <div class="notifications-date">
        <span>42/42/42</span>
    </div>
    <div class="notifications-content">
        <span class="list-avatar"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/User_Avatar_2.png" /></span>    Blablabla
    </div>
</div>


Administrateur


 Le 08/01/2019 à 13h47 Myster Avatar  
 


Merci beaucoup Swan ça fonctionne par contre petite coquille quand le texte vas à la ligne, ça dépasse dans la div de "Date" et du coup en même temps le petit tiret ne suit pas, y'a t-il une solution pour palier à ce problème ? Merci :)

Sinon mis à part ça voici ce que ça donne :



Merci à vous deux du beau boulot !!! :D



Edité par Myster Le 08/01/2019 à 14h05

EDN Enraciné(e)


 Le 08/01/2019 à 14h40 Swan Avatar  
 


Re,

Oui mais là, le codage html ne sera pas le même .. essaie cela et dit moi ..

Note: Par contre pas plus de 2 lignes ^^

Code TPL :
<style type="text/css" media="screen">
.list-notifications {
    margin: auto;
    padding-left: 15px;
    background-color: #ffffff;
    border: 1px solid #ededed;
    width: 99%;
    min-height:60px;
}
.list-avatar{
    margin: auto; 
    padding-left: 8px;
    min-height:60px;    
}
 
.list-avatar img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    vertical-align: middle;
}    
.notifications-date {
    margin: auto;
    border-right: 1px solid #3333;
    min-height: 60px;
    width: 106px;
    float: left;
}
.notifications-date span {
    color:#b2b2b2;
    font-weight:bold;
    line-height: 60px;
}
.notifications-content{
    margin: auto;
    max-width: 60px;
    max-height: 60px;
    line-height: 3.5;
    float: left;
    padding-right: 15px;
}
.list-text{ padding-top: 20px; }
</style>
<div class="list-notifications">
    <div class="notifications-date">
        <span>42/42/42</span>
    </div>
    <div class="notifications-content">
        <span class="list-avatar"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/User_Avatar_2.png" /></span> 
   </div>
 
   <div class="list-text"> Blablabla<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit augue, scelerisque vel neque eget, viverra sollicitudin odio. Phasellus ac est vel nulla efficitur tristique vitae vitae enim. Suspendisse sit amet ipsum erat. Maecenas pellentesque tincidunt justo, ut molestie tellus commodo vestibulum. Donec sit amet varius diam, et placerat velit.--></div>
</div>


Je vais tester avec le tableau intégré de pbt, et je reviens vers toi si c'est mieux ^^


Administrateur


 Le 08/01/2019 à 14h54 Myster Avatar  
 


Re, c'est toujours pareil ^^

EDN Enraciné(e)


 Le 08/01/2019 à 15h05 m-ickael Avatar  
 


J'arrive pas non plus à faire baisser ce trait, même avec un border-right ..

Peut-être sous forme de tableau, ce sera plus simple ?



Edité par m-ickael Le 08/01/2019 à 15h14

EDN Maitre-Sage


 Le 08/01/2019 à 17h45 Swan Avatar  
 


Bon .. j'ai rusé ! Je l'ai fait sur une 5.1.



Voici le tableau :

Code TPL :
<table id="list-table" class="table">
    <tbody>
        <tr class="list-notifications">
            <td class="list-date center">
                42/42/42
            </td>
 
            <td class="list-avatar center">
                <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/User_Avatar_2.png" />
            </td>
 
            <td class="list-text left">
                Blablabla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit augue, scelerisque vel neque eget, viverra sollicitudin odio. Phasellus ac est vel nulla efficitur tristique vitae vitae enim. Suspendisse sit amet ipsum erat.
            </td>
        </tr>
        <!-- on ne touche pas, cela permet la séparation des tables -->
        <tr class="list-spacer"><td class="list-ghost"></td></tr>
 
    </tbody>
</table>    


pour le css, du coup c'est simplifié, vu que j'utilise directement celui de PBT.

A mettre dans le design.css à la fin :

Code CSS :
 
/*=========================================*/
/*    - 08/01/2019 module Myster -
/*========================================*/
.list-notifications {}
.list-date{
     color:#b2b2b2;
    font-weight:bold;
}
.list-avatar { border-right: none; }
.list-text { border-left: none; }
 
.list-date, .list-avatar,.list-text {
    border-bottom: 1px solid #dddddd !important;
}
.list-avatar img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    vertical-align: middle;
}  
.list-date, .list-text, .list-avatar {
    background-color: #ffffff !important;
}
.list-spacer { }
.list-ghost {height: 10px; border: none !important;}
 



Voilà, après pour le format responsive regarde si tu le veux comme ça ou alors les un au dessous des autres.

Swan.


Administrateur


 Le 08/01/2019 à 18h01 Myster Avatar  
 


Merci beaucoup Swan, c'est parfait :)

EDN Enraciné(e)


 Le 08/01/2019 à 19h06 m-ickael Avatar  
 


Bon, j'ai les idées, mais je manque encore de savoir :D

EDN Maitre-Sage


 Le 08/01/2019 à 20h23 Swan Avatar  
 


Quel genre d'idées Mickael ?? Parce que tu te débrouilles pas mal quand même ..


Administrateur


 Le 08/01/2019 à 20h49 m-ickael Avatar  
 


J'avais eu l'idée du tableau je voulais dire, mais le mettre en pratique .. Je sais faire que avec l'aide du navigateur et en fouillant un peu :D

EDN Maitre-Sage


 Le 08/01/2019 à 20h54 Myster Avatar  
 


Re,

Voici ce que ça donne du coup

Celui avec le border en orange, c'est que la notification n'a pas était marqué comme "lu", et celui avec le border en gris a été lu

EDN Enraciné(e)


 Le 08/01/2019 à 21h02 m-ickael Avatar  
 


Ton avatar me semble pas rond :D .. Tout dépend de sa taille, c'est ça qui est chiant avec le radius .. Est-ce utile l'avatar au final ? Un petit font awesome me suffirait personnellement. Style "members"

Puis perso, une notification lu, ne m'intéresse plus, autant la retirer et faire de la place non ?



Edité par m-ickael Le 08/01/2019 à 21h04

EDN Maitre-Sage


 Le 08/01/2019 à 21h11 Myster Avatar  
 


Re,

Y'en a qui aime avoir des archives, me demande pas pourquoi, je vais rajouté une option "Suppression des notification à la lecture"

Comme ça tous le monde sera content !! :D

Citation:
Ton avatar me semble pas rond :D .. Tout dépend de sa taille, c'est ça qui est chiant avec le radius .. Est-ce utile l'avatar au final ? Un petit font awesome me suffirait personnellement. Style "members"


Ensuite libre à toi de le retirer de le customiser de le modifier :D



Edité par Myster Le 08/01/2019 à 21h12

EDN Enraciné(e)


 Le 08/01/2019 à 21h21 m-ickael Avatar  
 


C'est pas faux :D

EDN Maitre-Sage


 Le 08/01/2019 à 21h23 Myster Avatar  
 


:D

Edit: Voilà la fonction est maintenant ajouté et est pleinement fonctionnel ! :)



Edité par Myster Le 08/01/2019 à 21h28

EDN Enraciné(e)


 Le 09/01/2019 à 11h30 Swan Avatar  
 


Bravo !! Beau travail Myster ;)

Peux-tu faire un bouton archive à coté de marqué comme lu ?? Tant qu'à faire .. ^^


Administrateur


 Le 09/01/2019 à 11h34 Myster Avatar  
 


Merci Swan, maintenant que je sais coder en POO (que j'avais toujours galérer à comprendre le principe), ça sera pas mon dernier module ... :D

Archive ? C'est-à-dire ? Parce que les notifications lues apparaissent en gris, avec pagination, et les notifications non-lu en orange (le border)

EDN Enraciné(e)


 Le 09/01/2019 à 12h31 Myster Avatar  
 


Voilà Swan c'est mis en place en y réfléchissant c'est super pratique.

Donc voici un peu la logique du module qui est très logique !

Si l'option "Suppression des notifications automatique" est activé, il n'y a pas possibilité d'accéder aux archives puisque les notifications sont immédiatement supprimée après la lecture, et du coup le bouton "Marquer comme lu, et Supprimer" disparaît dans ce cas.

Dans le cas contraire, si l'option de suppression des notifications automatique est désactivée, on a accès aux boutons ainsi qu'aux archives.

Merci à Swan pour la suggestion :)

Ps: Je tiens à signaler que c'est un véritable module, pas de la bidouille PHP comme j'ai pu le faire avec le module de points, là c'est un module que vous activer via l'administration etc, de plus pour ceux qui souhaite le modifier ensuite, j'ai commenté le code:





Edité par Myster Le 09/01/2019 à 12h34

EDN Enraciné(e)


 Le 09/01/2019 à 12h39 Swan Avatar  
 


Bah écoute de rien... Contente d'avoir pu te rendre service ^^
Et hâte de le proposer à la communauté aussi :)


Administrateur


 Le 09/01/2019 à 12h41 Myster Avatar  
 


D'ailleurs, ce matin "Oh zut je l'ai développé à partir de la 5.2, je l'ai rendu compatible 5.1 du coup :rire

EDN Enraciné(e)


 Le 09/01/2019 à 12h42 Swan Avatar  
 


Lol ok pas de soucis .. est ce que tu peux le rendre compatible 5.0 ??
Car j'ai pas encore migré et beaucoup sont comme moi je pense ...


Administrateur


Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
Qui est en ligne ?

Qui est en ligne ?

Au total il y a 1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
( basées sur les utilisateurs actifs des 5 dernières minutes )
Utilisateur en ligne: Aucun membre connecté

Membres connectés au cours des dernières 24 heures:

m-ickael,

Légende

 [ Administrateur(s) ]   [ Modérateur(s) ]   [ Helpers]   [ WebDesigner(s) ]   [ Membres ]