Changeset 84901 in spip-zone


Ignore:
Timestamp:
Sep 27, 2014, 11:38:31 PM (7 years ago)
Author:
rastapopoulos@…
Message:

Début de navigation sur la page d'une photo, avec un mini album en dessous, 4 par 4 comme du flickr, qui s'aggrandit à l'hover, avec flèche de nav (on verra une police plus jolie plus tard).

En petit écran et surtout TOUCH, c'est pas vraiment bien géré à part, ce système ne devrait être activé qu'en grand écran en fait. Mais on verra plus tard.

Location:
_squelettes_/photographe
Files:
3 added
2 deleted
3 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/photographe/squelettes/content/document.html

    r84824 r84901  
    22<article>
    33        <div class="visionneuse">
    4                 [(#FICHIER|image_reduire{1200}|adaptive_images{1200})]
     4                <div class="large">
     5                        [(#FICHIER|image_reduire{1200}|adaptive_images{1200})]
     6                </div>
     7                #SET{id_album,#ENV{id_album}}
     8                <BOUCLE_chercher_album(ALBUMS){si #GET{id_album}|non}{id_document}{0,1}>
     9                #SET{id_album,#ID_ALBUM}
     10                </BOUCLE_chercher_album>
     11                <INCLURE{fond=inclure/galerie/mini-album,ajax,id_album=#GET{id_album},id_document, debut_mini_album=@#ID_DOCUMENT}>
    512        </div>
    613       
  • _squelettes_/photographe/theme/css/_variables.scss

    r84824 r84901  
    77$couleur-texte:#444;
    88
     9$typo-line-height: 1.5;
     10$typo-margin-vertical: $typo-line-height*1em;
  • _squelettes_/photographe/theme/css/modules/_visionneuse.scss

    r84859 r84901  
    22.visionneuse{
    33        background-color:#222;
    4         height:90vh;
    5         margin-bottom:1.5em;
     4        color:white;
     5        height: calc(100vh - 4.5em);
     6        margin-bottom:($typo-margin-vertical/2);
    67        padding:2.5%;
     8        padding-bottom:3em;
     9        position:relative;
    710        text-align:center;
    811        //line-height:90vh;
    912       
    10         .adapt-img-wrapper,img{
    11                 background-size:contain;
    12                 background-position:center center;
     13        .ajaxbloc{
     14                position:static;
     15        }
     16        a{
     17                color:white;
     18                text-decoration:none;
     19        }
     20        .large{
    1321                height:100%;
    14                 max-height:100%;
    15                 max-width:100%;
     22               
     23                .adapt-img-wrapper,img{
     24                        background-size:contain;
     25                        background-position:center center;
     26                        height:100%;
     27                        max-height:100%;
     28                        max-width:100%;
     29                }
     30        }
     31        .mini-album{
     32                line-height:$typo-margin-vertical*2;
     33                @include transition(2s);
     34               
     35                img{
     36                        width:$typo-margin-vertical;
     37                        @include transition(2s);
     38                }
     39                .prev, .next{
     40                        display:inline-block;
     41                        height:1em;
     42                        text-indent: -9999px;
     43                        white-space: nowrap;
     44                        vertical-align:middle;
     45                        width:64px;
     46                        position:relative;
     47                }
     48               
     49                &:hover{
     50                        @include linear-gradient(center top, rgba(#222,0), #222 1em);
     51                        bottom:0;
     52                        height:4.5em;
     53                        left:0;
     54                        position:absolute;
     55                        width:100%;
     56                       
     57                        img{
     58                                width:auto;
     59                        }
     60                        .prev, .next{
     61                                height:4em;
     62                               
     63                                a:after{
     64                                        display:block;
     65                                        font-size:4em;
     66                                        height:100%;
     67                                        position:absolute;
     68                                        top:0.125em;
     69                                        text-indent:0;
     70                                        vertical-align:middle;
     71                                        width:1em;
     72                                }
     73                        }
     74                        .prev a:after{
     75                        content:"<";
     76                        }
     77                        .next a:after{
     78                                content:">";
     79                        }
     80                }
    1681        }
    1782}
Note: See TracChangeset for help on using the changeset viewer.