Changeset 13474


Ignore:
Timestamp:
03/04/12 17:28:42 (8 years ago)
Author:
Zaphod
Message:

feature 2588: template modification for v2.4
-> #content on picture & slideshow page
-> class 'browsePathSeparator' on LEVEL_SEPARATOR on browsePath
-> derivativeSwitchLink replaced by pwg-size icon (with associated css modification on themes)
-> new id #theImageAndInfos that contains #theImage and #imageInfos

Location:
trunk/themes
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/clear/theme.css

    r12881 r13474  
    1515} 
    1616 
    17 #menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
     17#menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
    1818  background-color: #eeeeee; 
    1919} 
    2020 
    2121/* borders */ 
    22 #menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox { 
     22#menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox { 
    2323  border: 1px solid #d3d3d3; 
    2424} 
  • trunk/themes/dark/theme.css

    r12880 r13474  
    1818} 
    1919 
    20 #menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
     20#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
    2121        background-color: #505050; 
    2222} 
     
    3131 
    3232/* borders */ 
    33 #menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{ 
     33#menubar DL, .content, #derivativeSwitchBox, #sortOrderBox{ 
    3434        border: 1px solid #000; 
    3535} 
  • trunk/themes/default/template/picture.tpl

    r13224 r13474  
    22{include file='include/autosize.inc.tpl'} 
    33*} 
    4 {if isset($MENUBAR)} 
    5 {$MENUBAR} 
    6 <div id="content" class="contentWithMenu"> 
    7 {/if} 
     4{if isset($MENUBAR)}{$MENUBAR}{/if} 
     5<div id="content" {if isset($MENUBAR)}class="contentWithMenu"{/if}> 
    86{if isset($errors) or not empty($infos)} 
    97{include file='infos_errors.tpl'} 
     
    1311<div id="imageHeaderBar"> 
    1412        <div class="browsePath"> 
    15                 {$SECTION_TITLE} {$LEVEL_SEPARATOR} <h2>{$current.TITLE}</h2> 
     13                {$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2> 
    1614        </div> 
    1715        <div class="imageNumber">{$PHOTO}</div> 
     
    2018<div id="imageToolBar"> 
    2119<div class="actionButtons"> 
     20 
     21{if count($current.unique_derivatives)>1} 
     22{footer_script}{literal} 
     23function changeImgSrc(url,typeSave,typeMap,typeDisplay) 
     24{ 
     25        var theImg = document.getElementById("theMainImage"); 
     26        if (theImg) 
     27        { 
     28                theImg.removeAttribute("width");theImg.removeAttribute("height"); 
     29                theImg.src = url; 
     30                var elt = document.getElementById("derivativeSwitchLink"); 
     31                if (elt) elt.innerHTML = typeDisplay; 
     32                theImg.useMap = "#map"+typeMap; 
     33        } 
     34        document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}'; 
     35} 
     36 
     37function toggleDerivativeSwitchBox() 
     38{ 
     39        var elt = document.getElementById("derivativeSwitchBox"), 
     40                ePos = document.getElementById("derivativeSwitchLink"); 
     41        if (elt.style.display==="none") 
     42        { 
     43                elt.style.position = "absolute"; 
     44                elt.style.left = (ePos.offsetLeft+10)+"px"; 
     45                elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
     46                elt.style.display=""; 
     47        } 
     48        else 
     49                elt.style.display="none"; 
     50} 
     51{/literal}{/footer_script} 
     52{strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
     53<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a> 
     54<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none"> 
     55{foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
     56<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}','{$derivative->get_type()|@translate|@escape:javascript}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br> 
     57{/foreach} 
     58{if isset($U_ORIGINAL)} 
     59<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a> 
     60{/if} 
     61</div> 
     62{/strip}{/if} 
     63 
     64 
    2265{strip}{if isset($U_SLIDESHOW_START)} 
    2366        <a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
     
    76119</div>{*<!-- imageToolBar -->*} 
    77120 
     121<div id="theImageAndInfos"> 
    78122<div id="theImage"> 
    79123{$ELEMENT_CONTENT} 
     
    269313{/if} 
    270314</div> 
     315</div> 
    271316 
    272317{if isset($COMMENT_COUNT)} 
     
    274319        {if $COMMENT_COUNT > 0} 
    275320                <h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    276         {if $COMMENT_COUNT > 2} 
    277                 <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a> 
    278         {/if} 
     321                {if $COMMENT_COUNT > 2} 
     322                        <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a> 
     323                {/if} 
     324        {else} 
     325                <h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    279326        {/if} 
    280327        {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} 
  • trunk/themes/default/template/picture_content.tpl

    r13068 r13474  
    33        title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}" 
    44{/if}> 
    5 {if count($current.unique_derivatives)>1} 
    6 {footer_script}{literal} 
    7 function changeImgSrc(url,typeSave,typeMap,typeDisplay) 
    8 { 
    9         var theImg = document.getElementById("theMainImage"); 
    10         if (theImg) 
    11         { 
    12                 theImg.removeAttribute("width");theImg.removeAttribute("height"); 
    13                 theImg.src = url; 
    14                 var elt = document.getElementById("derivativeSwitchLink"); 
    15                 if (elt) elt.innerHTML = typeDisplay; 
    16                 theImg.useMap = "#map"+typeMap; 
    17         } 
    18         document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}'; 
    19 } 
    20  
    21 function toggleDerivativeSwitchBox() 
    22 { 
    23         var elt = document.getElementById("derivativeSwitchBox"), 
    24                 ePos = document.getElementById("derivativeSwitchLink"); 
    25         if (elt.style.display==="none") 
    26         { 
    27                 elt.style.position = "absolute"; 
    28                 elt.style.left = (ePos.offsetLeft+10)+"px"; 
    29                 elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
    30                 elt.style.display=""; 
    31         } 
    32         else 
    33                 elt.style.display="none"; 
    34 } 
    35 {/literal}{/footer_script} 
    36 <a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a> 
    37 <div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none"> 
    38 {foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
    39 <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}','{$derivative->get_type()|@translate|@escape:javascript}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br> 
    40 {/foreach} 
    41 {if isset($U_ORIGINAL)} 
    42 <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a> 
    43 {/if} 
    44 </div> 
    45 {/if} 
    465 
    476{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip} 
  • trunk/themes/default/template/slideshow.tpl

    r13115 r13474  
    1313</div> 
    1414 
     15<div id="content"> 
    1516<div id="theImage"> 
    1617  {$ELEMENT_CONTENT} 
     
    1920  {/if} 
    2021</div> 
     22</div> 
  • trunk/themes/default/theme.css

    r13240 r13474  
    341341#imageToolBar .pwg-button {width:42px;} 
    342342 
    343  
    344 #derivativeSwitchLink { 
    345         padding: 0.2em; 
    346         position: absolute; 
    347         left: 5px; 
    348         top: 12%; 
    349 } 
    350  
    351343#derivativeSwitchBox, #sortOrderBox { 
    352344        padding: 0.5em 1em; 
     
    421413} 
    422414 
     415.noCommentText {display:none;} 
    423416 
    424417/** 
  • trunk/themes/elegant/theme.css

    r13466 r13474  
    1414        height:33px; 
    1515        cursor:pointer; 
    16         margin: 26px 0 0 -33px; 
     16        margin: 28px 0 0 -35px; 
    1717} 
    1818 
     
    2727#menuswitcher.menuhidden { 
    2828        width:25px; 
    29         margin: 28px 0 0 0; 
     29        margin-left:0; 
    3030} 
    3131 
     
    4040        border-bottom: 2px solid #444; 
    4141        margin-bottom: 4px; 
     42        padding-bottom: 4px; 
    4243} 
    4344 
     
    4546        background-color: #111; 
    4647        border-bottom: 2px solid #444; 
    47         height: 28px; 
    4848        padding:0; 
    49         margin-bottom:8px; 
     49        margin-bottom:4px; 
    5050} 
    5151 
     
    9292 
    9393 
    94 #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
     94#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
    9595        background-color: #505050; 
    9696} 
     
    105105 
    106106/* borders */ 
    107 #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{ 
     107#derivativeSwitchBox, #sortOrderBox{ 
    108108        border: 1px solid #000; 
    109109} 
     
    131131#theImage, #imageInfos, #comments {background:#222;} 
    132132#theImage {padding-top:10px;} 
    133 #imageHeaderBar  { height:28px;} 
    134133#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;} 
    135134#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;} 
    136135#imageHeaderBar .imageNumber:before {content:'['} 
    137136#imageHeaderBar .imageNumber:after {content:']'} 
    138 #imageHeaderBar h2 {display:none;} 
     137#imageHeaderBar h2 {font-size:100%;} 
    139138#thePicturePage .pwg-button {width:26px;} 
    140139#thePicturePage .actionButtons {margin-right: 26px;} 
     
    143142#thePicturePage #comments {padding-top:12px; padding-bottom:12px;} 
    144143#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;} 
    145 #copyright {padding-top:4px; text-align:right;} 
     144.noCommentText {display:block;} 
     145#copyright {padding:4px 4px 0 0; text-align:right;} 
    146146 
     147#thePicturePage .comments_toggle_on:before {content:'(+) '} 
     148#thePicturePage .comments_toggle_off:before {content:'(-) '} 
    147149 
     150.comments_hidden ul, .comments_hidden form {display:none;} 
    148151.thumbnailCategory {background-color: #303030;} 
     152.comments_toggle {cursor: pointer;} 
     153.comments_toggle:hover {color:#fff;} 
     154 
    149155#the_page .content .stuffs {margin:0!important} 
     156 
     157#thumbnails  {padding-top: 5px;} 
     158 
     159INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;} 
     160INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;} 
    150161 
    151162/* links */ 
Note: See TracChangeset for help on using the changeset viewer.