Swisslinux.org

Trim · 11 Mar 2010 20:51:54

Hello !

Depuis quelques temps, je possède un smartphone (Openmoko) et je l'utilise pour naviguer sur le web. C'est en visitant le site web de Swisslinux avec cet appareil qui a une résolution de 480 x 640, que je me suis dit que c'était dommage que je ne puisse pas lire les posts du forum.

En fait, si le site a un code CSS bien écrit, je pense qu'il suffit de cacher le menu de gauche et les avatars (et signatures) des membres pour avoir un affichage lisible sur ce genre de petits écrans.

En fait, je pense que le menu de gauche n'est pas essentiel quand on utilise ce genre d'appareil : on ne vas quand même pas éditer le wiki avec un si petit écran ^^ ou encore lire les règles/llistes de membres... De plus, si on veut les liens pour le Slo Blog, le wiki ou autre, il suffit d'aller sur la page d'accueil du site. Cependant, la seule fonction qui pourrait être intéressante dans ce menu, est le formulaire d'identification, qui pourrait être mis sur une ligne par exemple.

Si pour faire ça, il y a juste quelques propriétés "hidden" a rajouté au code CSS pour les médias de type "handheld" (cf http://www.w3schools.com/CSS/css_mediatypes.asp), je pense que c'est jouable.

Qu'en pensez-vous ?

[Edit]
Pour ceux qui veulent avoir un aperçu de ce que ça donne en 480 par 640, je vous laisse utiliser l'addon Webdeveloper de Firefox pour redimenssioner l'écran. En réalité, la hauteur est un peu moins haute, parce qu'il a y a le menu du navigateur et du téléphone, mais le problème est surtout dans la largeur.

Dernière modification par Trim (11 Mar 2010 20:57:44)

Trim · 11 Mar 2010 23:19:28

Ok, alors j'ai testé un peu et il y a qu'un seul truc que je ne sait pas bien où il faudrait l'afficher : tout vient du paragraphe de login, mais au pire, sur un si petit écran, on en a pas forcément besoin...

Enfin, voilà le code de "screen.css" modifier pour avoir une jolie configuration. Je pense qu'il serait plus simple de faire un nouveau fichier "media.css" (comme il existe déjà d'ailleurs "print.css" :

Code:

* {
    margin : 0px;
    padding : 0px;
    font-family  :  "DejaVu", Verdana, Sans-serif;
    color : black;
    }

body {
    background : url('../images/body_bg.png') repeat-y #f3f3f3;
    margin-top : 0px;
    font-size : 15px;
    }

#sl_container {
    width : 100%;
    }
@media screen{
#sl_top_clearer {
    width  :  100%;
    height  :  15px;
    background-color  :  white;
    }
}
@media handeld{
#sl_top_clearer {
    width  :  100%;
    height  :  5px;
    background-color  :  white;
    }
}

#sl_header {
    background : url('../images/header_bg.png') repeat-x top right #f3f3f3;
    height : 134px;
    }

#sl_banner {
    background : url('../images/banner_transparent.png') no-repeat 15px 5px;
    height : 96px;
        cursor:pointer;
    }

#sl_banner h1 {
    padding-top : 20px;
    padding-left : 105px;
    font-size : 22px;
    color : white;
    }
@media screen{
#sl_banner h2 {
    padding-left : 145px;
    font-size : 14px;
    color : white;
    }
}

@media handeld{
#sl_banner h2 {
    padding-left : 145px;
    font-size : 12px;
    color : white;
    }
}

@media screen{
#sl_sections {
    margin-right : 50px;
    height : 38px;
    }
}
@media handeld{
#sl_sections {
    margin-right : 5px;
    height : 38px;
    }
}

#sl_sections li {
    float : right;
    height : 38px;
    width : 138px;
    list-style :  none;
    text-align : center;
    }


#sl_sections li.association {
    background-image  :  url('../images/association.png');
    }

#sl_sections li.wiki {
    background-image  :  url('../images/wiki.png');
    }

#sl_sections li.forum {
    background-image  :  url('../images/forum.png');
    }

#sl_sections li.active {
    background-image  :  url('../images/section_active.png');
    }

#sl_sections a {
    display : block;
    margin-top : 5px;
    text-decoration : none;
    font-weight : bold;
    font-size : 12px;
    height : 30px;
    color : black;
    }

#sl_sections a:hover {
    color : white;
    }

#sl_sections .active a {
    color : white;
    }

@media screen{
#sl_welcome {
    height : 38px;
    width : 165px;
    background : url('../images/welcome_bg.png') repeat-x #FFFFFF;
    float : left;
    padding-top : 6px;
    text-align : center;
    }
}

@media handeld{
#sl_welcome {
    width : 165px;
    float : left;
    padding-top : 6px;
    text-align : center;
        display:none;
    }
}

#sl_welcome p {
    margin-left : 15px;
    }

@media screen{
#sl_header_clearer {
    clear : both;
    }
}

@media handeld{
#sl_header_clearer {
    clear : both;
        display:none;
    }
}

#sl_menu_clearer, #sl_news_clearer {
    width  :  0;
    height  :  0;
    }
@media screen{
#sl_menu_container {
    position : absolute;
    top : 150px;
    left : 0px;
    width : 165px;
    z-index : 10;
    }
}

@media handeld{
#sl_menu_container {
    position : absolute;
    top : 150px;
    left : 0px;
    width : 165px;
    z-index : 10;
        visibility:hidden;
    }
div.sl_login{
        position:absolute;
        top:-5px;
        left:150px;
        }
div.sl_login p,div.sl_login a{
        visibility:visible;
        }
div.sl_login a{
        color:black;
        border:none;
        background:none;
        }
div.sl_login a:hover{
        color:black;
        border:none;
        background:none;
        }
}
.sl_menu {
    margin-bottom : 20px;
    }

.sl_menu h1, .sl_menu h2 {
    display : table-cell;
    height : 25px;
    width : 165px;
    text-align : center;
    vertical-align : middle;
    color : #e52626;
    font-size : 16px;
    border-bottom : dotted 1px #e52626;
    margin-bottom : 4px;        
    }

.sl_menu a, .sl_secondary_menu input.button {
    display : block;
    margin-top : 3px;
    height : 20px;
    margin-left : 5px;
    width : 145px;
    padding-left  :  5px;
    border : #FFFFFF 0px solid;
    border-left : #FFFFFF 5px solid;
    border-bottom : dotted 1px #555555;
    color : black;
    text-decoration : none;
    text-align : center;
    }

.sl_menu a:hover, .sl_secondary_menu input.button:hover {
    background : #eeeeee;
    border-left : #CCCCCC 5px solid;
    }

.sl_menu input, .sl_menu select {
    border :  1px solid #cccccc;
    width : 140px;
    background : transparent;
    color : #000000;    
    }

.sl_menu input:hover, .sl_menu select:hover {
    background : #eeeeee;
    }

.sl_menu p {
    text-align : center;
    margin-top : 3px;    
    margin-bottom : 3px;
    }
@media screen{
#sl_footer {
    margin-top : 0px;
    margin-left : 165px;
    height : 1em;
    color : #999999;
    background-color  :  #EEEEEE;
    padding-left  :  1em; 
    padding-right  :  1em;
    border-top : 1px solid #CCCCCC;
    text-align : left;
    clear : both;
    }

#sl_footer p {
    float  :  right;
    font-size : 10px;
    color  :  red;
    }
}
@media handeld{
#sl_footer {
    margin : 0px;
    height : 1em;
    color : #999999;
    background-color  :  #EEEEEE;
    border-top : 1px solid #CCCCCC;
    text-align : center;
    clear : both;
    }
#sl_footer p {
    font-size : 10px;
    color  :  red;
    background-color  :  #EEEEEE;
    }
}

#sl_footer a {
    text-decoration  :  none;
    margin : 5px;
    color  :  gray;
    }

#sl_footer a:hover {
    text-decoration  :  underline;
    }

#sl_news {
    background-color  :  white;
    margin-left : 180px;
    margin-right : 180px;
    margin-bottom : 10px;
    /*width : 100%;*/
    padding : 5px;
    border : red 1px solid;
    text-align : center;
    }

@media screen{
#sl_main, #sl_main_accueil {
    background-color  :  white;
    margin-top : 0px;
    margin-left : 180px;
    margin-right : 15px;
    margin-bottom : 15px;
    width : auto;
    padding : 10px;
    border : #E3E3E3 1px solid;
    }
}

@media handeld{
#sl_main, #sl_main_accueil {
    background-color  :  white;
    margin : 0px;
    width : auto;
    padding : 10px;
    border : #E3E3E3 1px solid;
    }
}

#sl_main p, #sl_main_accueil p {
    margin : 5px;
    text-align : justify;
    color : #000000;
    }
        
#sl_main_accueil {
    margin-left : 15px;
    }

#sl_main_accueil h1 {
    text-align : center;
    margin-bottom : 1em;
    }

.sl_clearer {
    clear : both;
    }

@media handeld{
#sl_main_clearer{
    display:none;
    }
}

#sl_main_forum {
    background-image : url('../images/icone_forum.png');
    }

#sl_main_wiki {
    background-image : url('../images/icone_wiki.png');
    }

#sl_main_irc {
    background-image : url('../images/icone_irc.png');
    }

#sl_main_jabber {
    background-image : url('../images/icone_jabber.png');
    }

#sl_main_association {
    background-image : url('../images/icone_association.png');
    }

#sl_main_rss {
    background-image : url('../images/icone_rss.png');
    }

#sl_main_mailing {
    background-image : url('../images/icone_mailing.png');
    }

#sl_main_press {
    background-image : url('../images/icone_press.png');
    }

#sl_lang {
    margin-bottom : 1em;
    }

.sl_option {
    background : no-repeat 5px 5px;
    width : 30%;
    height : 120px;
    min-height : 120px;
    margin-left : 5%;
    padding : 5px;
    padding-left : 120px;
    float : left;
    border : transparent 1px dotted;
    text-decoration : none;
    text-align : justify;
    }

.sl_option:hover {
    border : 1px gray dotted;
    background-color : #f3f3f3;
        cursor:pointer;
    }

.sl_option h2 a {
    text-decoration : none
    }

.sl_option a:hover {
    text-decoration : underline;
    }

.sl_option ul {
    margin-left : 20px;
    }

.sl_option .sl_question {
    font-style : italic;
    }

.sl_accueil {
    background : #f3f3f3;
    }

/** Others **/

/* punbb & dokuwiki modification to have a title background like the header */

.pun div h2, .pun div.blocktable h2, #toc__header, .pun div.blockpost h2, .pun div.blockform h2 {
    background : url('../images/bg-barre.png') repeat-x #e52626;
}

.pun div h2 span, .pun div.blocktable h2 span, #toc__header, .pun div.blockpost h2 span, .pun div.blockform 
h2 span {
    color : white;
    font-weight : bold;
}

body.mediamanager {
    background : #f3f3f3
}

/* punbb rules */

.sl_rules {
    background : transparent;
    color : black;
    }


ul.sl_rules {
    list-style-type: circle;
    list-style-position: inside;
    }

ol.sl_rules {
    list-style-type: upper-roman;
    list-style-position: inside;
    }

li.sl_rules
{
    display: list-item;
    }

@media handeld{
div.postleft{
    width:8em;
    }
div.postfootleft{
    display:none;    
    }
.postavatar img{
    width:70%;
    height:70%;    
    }
div.postright,div.postfootright{
    margin:0;
    border-left-width:8em;
    }
div.linkst,div.linksb,div.postlinksb{
    padding:0px;
    margin:0px;
    }
div.linkst p,div.linksb p,div.postlinksb p{
    padding:0px;
    margin:0px;
    }
div.linkst .conr,div.linksb .conr,div.postlinksb .conr{
    width:6em;
    }
div.linkst .conl,div.linksb .conl,div.postlinksb .conl{
    width:7em;
    }
div.linkst ul, div.linksb ul,div.postlinksb ul{
    margin-left:7em;
    }
#punwrap{
    margin-left:5px;
    margin-right:5px;
    }
}

Par contre, j'ai aussi modifié des propriétés qui se trouvaient aussi dans d'autres fichiers de configuration (le style du forum par exemple), j'ai mis à la fin de "handeld.css" et ça à l'air de marcher.

[Edit]
Et voilà la différence :
https://docs.google.com/leaf?id=0B_kkYh … &hl=en

Dernière modification par Trim (11 Mar 2010 23:34:25)

Eggman · 12 Mar 2010 15:11:50

C'est une bonne idée !
C'est beaucoup mieux !

Trim · 12 Mar 2010 22:19:13

Oui, mais il y a juste les boutons de logins, que je n'ai pas réussi à bien mettre en place, sans modifier le html... (bon ce qui est moyennement utile, entre autre)

Swisslinux.org

− Le carrefour GNU/Linux en Suisse −

Recherche

Menu

Forum

Identification

Inscription

Langue

Le Forum

#1 11 Mar 2010 20:51:54

Swisslinux pour petits écrans ?

#2 11 Mar 2010 23:19:28

Re: Swisslinux pour petits écrans ?

Code:

#3 12 Mar 2010 15:11:50

Re: Swisslinux pour petits écrans ?

#4 12 Mar 2010 22:19:13

Re: Swisslinux pour petits écrans ?

Pied de page des forums