Idée d'interface

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

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

Site web

Myster

EDN Enraciné(e)

Rang

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

EDN Enraciné(e)

Rang

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

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

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

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

planet-truck.fr

Site web

Myster

EDN Enraciné(e)

Rang

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

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

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

Site web

Myster

EDN Enraciné(e)

Rang

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

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

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

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

Site web

Myster

EDN Enraciné(e)

Rang

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 14h54

Re, c'est toujours pareil ^^

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

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

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

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

Site web

Myster

EDN Enraciné(e)

Rang

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 08/01/2019 à 18h01

Merci beaucoup Swan, c'est parfait

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/01/2019 à 19h06

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

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 08/01/2019 à 20h23

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

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

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

planet-truck.fr

Site web

Myster

EDN Enraciné(e)

Rang

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

Easy-Design.Net forum

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

Les 10 derniers messages du forum...