Easy-Design.Net forum

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

Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8413

Le 08/01/2019 à 10h06

Reprise du message précédent

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..


swan_signature

   
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 10h10
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
   
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 11h44
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
   
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2291

Le 08/01/2019 à 12h06
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
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 12h20
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 ^^
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8413

Le 08/01/2019 à 13h07
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>


swan_signature

   
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 13h47
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
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8413

Le 08/01/2019 à 14h40
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 ^^


swan_signature

   
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 14h54
Re, c'est toujours pareil ^^
   
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2291

Le 08/01/2019 à 15h05
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
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8413

Le 08/01/2019 à 17h45
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.


swan_signature

   
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 18h01
Merci beaucoup Swan, c'est parfait :)
   
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2291

Le 08/01/2019 à 19h06
Bon, j'ai les idées, mais je manque encore de savoir :D
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8413

Le 08/01/2019 à 20h23
Quel genre d'idées Mickael ?? Parce que tu te débrouilles pas mal quand même ..


swan_signature

   
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2291

Le 08/01/2019 à 20h49
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
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 20h54
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

   
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie