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 07/01/2019 à 18h39 Myster Avatar  
 


Bonsoir,

Actuellement dans le développement d'un module de notification, je souhaite savoir si vous aviez des idées de "Comment représenter les notifications" que l'on reçois sur la page de notification, je n'ai pas vraiment d'idée

Exemple:

Machin a répondu à votre sujet Blablabla sur le forum le 42/42/42

Merci pour votre réponse.

Ps: Mickael, inclure la petite cloche de notification dans le module Connect, pourquoi pas, mais il faut un truc en javascript pour faire le "menu déroulant" et je suis vraiment une bille en javascript et encore un tas de choses à apprendre en CSS, je me débrouille bien en PHP mais le reste en parlons pas ! A moins que quelqu'un sait faire et veut participer au module dans ce cas pas de problème de toute façon le module sera distribué gratuitement :)

EDN Enraciné(e)


 Le 07/01/2019 à 19h06 Swan Avatar  
 


Bonjour,

Alors moi je dirais plutôt dans le genre interface todolist , si cela peut t'aider comme l'exemple ci dessous..



A droite notification répertorié par modules .. ou alors la liste de notification générale, ou encore avec le choix du tri du plus récent à la plus ancienne, ou alors recherche par date ou module .. après le reste c'est bonus !

Pour le listage:

Ensuite oui ton exemple est pas mal, mais la date en premier, ensuite le module concerné, l'auteur de l'action, l'action proprement dit..

Cela me parait pas mal comme présentation. Avec la possibilité de cocher vu ou pas et de supprimer la ligne de notification.

Bon courage,
Swan.



Administrateur


 Le 07/01/2019 à 19h41 m-ickael Avatar  
 


Salut.

Moi je pense différemment, et peut-être plus simple.

Je dirai plus un déroulant comme déjà cité, mais dans le texte dans ce genre :

14h38 : Mickaël poste un message sur le forum
16h03 : Myster à laisser un commentaire sur "{title}"
17h30 : Swan à supprimer le message de Mickaël sur " Aide générale » Idée d'interface "

Niveau design, pourquoi pas un popup comme les 10 derniers messages sur EDN ? Mais ça risque de créer un conflit en java, comme EDN avec le tchat par exemple.

Sinon en HTML tout simple ? Ou comme sur phpbt quand on modifie une news, ou supprime le cache en administration ?

tout dépend de tes capacités surtout. En habillage, on saura faire (surtout swan). Laisse la liberté à la imite niveau css ? Tu apporteras des MAJs selon ce que j'ai pu y faire (ou Swan, ou d'autres) ..

Ou alors via un menu qui s'ouvre (comme mon menu sur mon site qui s'ouvre à gauche)



Edité par m-ickael Le 07/01/2019 à 20h23

EDN Maitre-Sage


 Le 07/01/2019 à 19h50 Myster Avatar  
 


Bonsoir,

Merci pour vos réponses, tout d'abord, j'ai retenu l'idée de Swan "A droite notification répertorié par modules", en effet je n'avais pas pensé à cela, et c'est donc déjà mis en place et même fonctionnel (Vive la POO, plus rapide !)

Ensuite concernant le tri (Plus ancien au plus récent, ou l'inverse), cela impliquerait du Javascript, et comme dis précédemment je suis une bille en javascript vraiment, donc je vais voir du côté des autres modules comment c'est fait et j'ajouterais cela lors d'une prochaine maj


Code :
Je dirai plus un déroulant comme déjà cité, mais dans le etxte dans ce genre :


Oui un bouton dans le connect qui affiche un déroulant ? Oui c'est une bonne idée, d'autant plus que j'ai fait ce module pour une facilité d'intégration avec les autres module, genre par exemple, pour envoyer une notification, suffit d'y ajouter juste ce code:

Code PHP :
 
                        $notif = New Notifications();
                        $notif->set_sender_id('ID DU SENDER'); // ID du membre qui fait l'action, genre si moi en tant que modo je supprime un message
                        $notif->set_recipient_id('ID DU DESTINATAIRE'); // ID du destinataire, genre si je supprime le message de Machin sur le forum
                        $notif->set_reading(0); // reading = Vu donc par défaut 0
                        $notif->set_title('TITRE DE LA NOTIFICATION'); // Titre de la notification exemple: Myster a supprimé votre sujet 
                        $notif->set_content('CONTENU DE LA NOTIFICATION'); // Exemple: Myster a supprimé votre sujet "Blabla" sur le forum
                        $notif->set_date(); // Paramètre time() 
                        $notif->set_module('NOM DU MODULE EXEMPLE: FORUM'); // Nom du module pour faire le classement des notifications
                        Notifications::add_notification($notif); 
 




Edité par Myster Le 07/01/2019 à 19h52

EDN Enraciné(e)


 Le 07/01/2019 à 20h23 m-ickael Avatar  
 


Bon, ben ça avance :)

Il n'empêche que la popup aurai été bien :D



Edité par m-ickael Le 07/01/2019 à 20h23

EDN Maitre-Sage


 Le 07/01/2019 à 20h26 Myster Avatar  
 


Je pense qu'on vas faire au plus simple pour la première version, ensuite des variables de templates seront disponibles, donc si tu veux faire un popup que tu veux ensuite partager je l'ajouterais à une prochaine version :D

EDN Enraciné(e)


 Le 07/01/2019 à 22h20 m-ickael Avatar  
 


Je ne sais pas le faire. Mais Swan oui :D

Je ne sais faire que du CSS "de base" ..

EDN Maitre-Sage


 Le 07/01/2019 à 22h27 Myster Avatar  
 


Bienvenue au club alors ! Bon j'essaye de faire la liste des notifications, enfin le template, mais j'y arrive pas forcément à le structuré en html et css, c'est moche ce que je fait ! Une âme charitable pourrait t-il faire quelque chose qui ressemble à ce genre de chose:



Merci (pour l'icone de droite, c'est du font awesome)

EDN Enraciné(e)


 Le 07/01/2019 à 22h35 m-ickael Avatar  
 


Moi je vois du

background-color: #fbfbfb;
padding: 20px;
width: 100%;
border: 1px solid #ccc;

Border-radius:50%; pour l'avatar

C'est un exemple :D je sais pas comment c'est réellement .. C'est sous forme de tableau ? Tu es en local ou un lien ?

C'est la base :D

EDN Maitre-Sage


 Le 07/01/2019 à 23h07 Myster Avatar  
 


C'est du local :) J'ai juste trouvé ça je sais même plus où :rire:

EDN Enraciné(e)


 Le 08/01/2019 à 08h27 m-ickael Avatar  
 


Si tu vois quelque chose de ressemblant, tu peux faire cliquer droit et "inspecter" tu auras les valeurs CSS :)

EDN Maitre-Sage


 Le 08/01/2019 à 09h04 Swan Avatar  
 


Bonjour,

Alors le "bloc principal" <div class="list-master">... </div> comme l'a dis Mika :

Code CSS :
.list-master {
background-color: #ffffff;
padding: 15px;
width: 100%;
border: 1px solid #ededed;
}
 
/* l'avatar en <span class=".list-avatar"> ...</span> pour le centrage */
 
.list-avatar {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
}



Après une fois que tu as la base, ça ira tout seul, mais c'est un bon début pour le css.
par contre pour le tpl garde bien la structure de base de démarrage cela permettra une aisance supplémentaire pour la personnalisation css.


Code TPL :
<section id="module-XXXX"> 
 
ton code tpl
 
<section>


Swan.





Administrateur


 Le 08/01/2019 à 09h17 m-ickael Avatar  
 


Je suis pas mauvais :D

EDN Maitre-Sage


 Le 08/01/2019 à 10h00 Myster Avatar  
 


Bonjour,

Merci beaucoup :)

Par contre y'a quelque chose que je n'avais pas anticipé c'est le "titre de la notification", sur ce genre de bloc ça va faire un peu trop long je pense ? Une petite idée d'améliorer ce bloc avec le titre ?

Merci encore :)

EDN Enraciné(e)


 Le 08/01/2019 à 10h06 Swan Avatar  
 


re ,

bah il va falloir que tu raccourcisses les titres etc ...,

du genre
- Machin-bidule à modifié <a href="" tiltle ="titre du sujet">son sujet</a>dans le forum
- Machin-chouette à édité <a href="" tiltle ="Id-commentaire">son message</a>dans les commentaires

Comme cela tu l'auras au survole du lien et pas de visu.


etc..


Administrateur


 Le 08/01/2019 à 10h10 Myster Avatar  
 


Justement non je parle bel et bien d'un champ "titre" pas le "contenu => truc bidule a posté un nouveau message"

Quoi que non j'ai supprimer le titre de la notification ça servait à rien au final :P



Edité par Myster Le 08/01/2019 à 10h30

EDN Enraciné(e)


 Le 08/01/2019 à 11h44 Myster Avatar  
 


Reeee

Avec mes petites connaissances css j'ai fait ça :

Code HTML :
 
<style type="text/css" media="screen">
.list-notifications {
background-color: #ffffff;
padding: 15px;
width: 100%;
border: 1px solid #ededed;
}
 
 
.list-avatar img {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
line-height: 30px;
vertical-align: middle;
}    
.notifications-date {
    width: 106px;
    border-right: 1px solid #3333;
    float:left;
}
.notifications-date p {
    color:#b2b2b2;
    font-weight:bold;
    line-height: 30px;
}
.notifications-content{
    line-height: 30px;
    padding-left: 8px;
    display: inline-block;
}
</style>
<div class="list-notifications">
    <div class="notifications-date">
        <p>42/42/42</p>
    </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>
 


Mais l'avatar ne se place pas correctement par rapport au texte, et le petit trait vertical il ne prends pas tout le cadre :/ Merci pour votre aide ! en attendant je m'en vais réviser du css je pense :rire

Edit: Pour le centrage du texte par rapport à l'avatar avec vertical-align:middle ça fonctionne mais pour le reste je sais pas :/



Edité par Myster Le 08/01/2019 à 11h55

EDN Enraciné(e)


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


Quel trait ?

Par contre tu devrais faire un fichier css à part et faire comme Swan a dit "section ID ou CLASS" ..

Comme ça, on pourra intégrer le CSS dans le cache dans FRAMPE.TPL



Edité par m-ickael Le 08/01/2019 à 12h06

EDN Maitre-Sage


 Le 08/01/2019 à 12h20 Myster Avatar  
 


Oui oui c'est ce que j'ai fait t'en fais pas, j'ai fait proprement le module en respectant bien, tout comme un module officiel, j'ai juste mis ce code pour vous montrez le problème ^^

EDN Enraciné(e)


 Le 08/01/2019 à 13h07 Swan Avatar  
 


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


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:

Swan,

Légende

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