Changeset 13774


Ignore:
Timestamp:
03/27/12 22:44:11 (8 years ago)
Author:
Zaphod
Message:

feature 2588: uniformization of picture.tpl

picture.tpl is merge between default theme & elegant theme.
css adaptation to have the image info displayed as a table with default.

Location:
trunk/themes
Files:
1 deleted
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/default/fix-ie5-ie6.css

    r8772 r13774  
    7171        display: block; 
    7272} 
     73 
     74.imageInfoTable {display:block; margin: 0 200px;} 
     75.imageInfo {display:block; line-height:16px;} 
     76.imageInfo dt  {display:block; text-align:left; font-weight:bold; padding-right:0.5em;} 
     77.imageInfo dd {display:block; text-align:left; font-weight:normal;} 
     78.relSwitchBox {position:static;} 
     79#imageInfos dd { margin: 0 0 5px 20px;} 
  • trunk/themes/default/fix-ie7.css

    r12639 r13774  
    2424} 
    2525 
     26.imageInfoTable {display:block; margin: 0 200px;} 
     27.imageInfo {display:block; line-height:16px;} 
     28.imageInfo dt  {display:block; text-align:left; font-weight:bold; padding-right:0.5em;} 
     29.imageInfo dd {display:block; text-align:left; font-weight:normal;} 
     30.relSwitchBox {position:static;} 
     31#imageInfos dd { margin: 0 0 5px 20px;} 
  • trunk/themes/default/template/picture.tpl

    r13773 r13774  
    1313                {$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2> 
    1414        </div> 
    15         <div class="imageNumber">{$PHOTO}</div> 
    1615</div> 
    1716 
    1817<div id="imageToolBar"> 
     18<div class="imageNumber">{$PHOTO}</div> 
    1919<div class="actionButtons"> 
    2020 
     
    140140{/if} 
    141141 
    142 </div> 
    143  
    144 <div id="imageInfos"> 
     142</div><!-- 
     143 
     144--><div id="infoSwitcher"></div><!-- 
     145--><div id="imageInfos"> 
    145146{if $DISPLAY_NAV_THUMB} 
    146 {if isset($previous)} 
    147 <a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev"> 
    148         <img src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}"> 
    149 </a> 
    150 {/if} 
    151 {if isset($next)} 
    152 <a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next"> 
    153         <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}"> 
    154 </a> 
    155 {/if} 
    156 {/if} 
    157  
    158 <table id="standard" class="infoTable"> 
     147        <div class="navThumbs"> 
     148                {if isset($previous)} 
     149                        <a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev"> 
     150                                <span class="thumbHover prevThumbHover">&nbsp;</span> 
     151                                <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}"> 
     152                        </a> 
     153                {/if} 
     154                {if isset($next)} 
     155                        <a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next"> 
     156                                <span class="thumbHover nextThumbHover">&nbsp;</span> 
     157                                <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}"> 
     158                        </a> 
     159                {/if} 
     160        </div> 
     161{/if} 
     162 
     163<dl id="standard" class="imageInfoTable infoTable"> 
    159164{strip} 
    160165        {if $display_info.author} 
    161         <tr id="Author"> 
    162                 <td class="label">{'Author'|@translate}</td> 
    163                 <td class="value">{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</td> 
    164         </tr> 
     166        <div id="Author" class="imageInfo"> 
     167                <dt>{'Author'|@translate}</dt> 
     168                <dd>{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</dd> 
     169        </div> 
    165170        {/if} 
    166171        {if $display_info.created_on} 
    167         <tr id="datecreate"> 
    168                 <td class="label">{'Created on'|@translate}</td> 
    169                 <td class="value">{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</td> 
    170         </tr> 
     172        <div id="datecreate" class="imageInfo"> 
     173                <dt>{'Created on'|@translate}</dt> 
     174                <dd>{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</dd> 
     175        </div> 
    171176        {/if} 
    172177        {if $display_info.posted_on} 
    173         <tr id="datepost"> 
    174                 <td class="label">{'Posted on'|@translate}</td> 
    175                 <td class="value">{$INFO_POSTED_DATE}</td> 
    176         </tr> 
     178        <div id="datepost" class="imageInfo"> 
     179                <dt>{'Posted on'|@translate}</dt> 
     180                <dd>{$INFO_POSTED_DATE}</dd> 
     181        </div> 
    177182        {/if} 
    178183        {if $display_info.dimensions} 
    179         <tr id="Dimensions"> 
    180                 <td class="label">{'Dimensions'|@translate}</td> 
    181                 <td class="value">{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</td> 
    182         </tr> 
     184        <div id="Dimensions" class="imageInfo"> 
     185                <dt>{'Dimensions'|@translate}</dt> 
     186                <dd>{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</dd> 
     187        </div> 
    183188        {/if} 
    184189        {if $display_info.file} 
    185         <tr id="File"> 
    186                 <td class="label">{'File'|@translate}</td> 
    187                 <td class="value">{$INFO_FILE}</td> 
    188         </tr> 
     190        <div id="File" class="imageInfo"> 
     191                <dt>{'File'|@translate}</dt> 
     192                <dd>{$INFO_FILE}</dd> 
     193        </div> 
    189194        {/if} 
    190195        {if $display_info.filesize} 
    191         <tr id="Filesize"> 
    192                 <td class="label">{'Filesize'|@translate}</td> 
    193                 <td class="value">{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</td> 
    194         </tr> 
    195         {/if} 
    196         {if $display_info.tags} 
    197         <tr id="Tags"> 
    198                 <td class="label">{'Tags'|@translate}</td> 
    199                 <td class="value"> 
     196        <div id="Filesize" class="imageInfo"> 
     197                <dt>{'Filesize'|@translate}</dt> 
     198                <dd>{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</dd> 
     199        </div> 
     200        {/if} 
     201        {if $display_info.tags } 
     202        <div id="Tags" class="imageInfo"> 
     203                <dt>{'Tags'|@translate}</dt> 
     204                <dd> 
    200205                        {if isset($related_tags)} 
    201206                                {foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}<a href="{$tag.URL}">{$tag.name}</a>{/foreach} 
     207                        {else}&nbsp; 
    202208                        {/if} 
    203                 </td> 
    204         </tr> 
     209                </dd> 
     210        </div> 
    205211        {/if} 
    206212        {if $display_info.categories} 
    207         <tr id="Categories"> 
    208                 <td class="label">{'Albums'|@translate}</td> 
    209                 <td class="value"> 
     213        <div id="Categories"  class="imageInfo"> 
     214                <dt>{'Albums'|@translate}</dt> 
     215                <dd> 
    210216                        {if isset($related_categories)} 
    211217                        <ul> 
     
    215221                        </ul> 
    216222                        {/if} 
    217                 </td> 
    218         </tr> 
     223                </dd> 
     224        </div> 
    219225        {/if} 
    220226        {if $display_info.visits} 
    221         <tr id="Visits"> 
    222                 <td class="label">{'Visits'|@translate}</td> 
    223                 <td class="value">{$INFO_VISITS}</td> 
    224         </tr> 
     227        <div id="Visits" class="imageInfo"> 
     228                <dt>{'Visits'|@translate}</dt> 
     229                <dd>{$INFO_VISITS}</dd> 
     230        </div> 
    225231        {/if} 
    226232 
    227233{if $display_info.rating_score and isset($rate_summary)} 
    228         <tr id="Average"> 
    229                 <td class="label">{'Rating score'|@translate}</td> 
    230                 <td class="value"> 
     234        <div id="Average" class="imageInfo"> 
     235                <dt>{'Rating score'|@translate}</dt> 
     236                <dd> 
    231237                {if $rate_summary.count} 
    232238                        <span id="ratingScore">{$rate_summary.score}</span> <span id="ratingCount">({assign var='rate_text' value='%d rates'|@translate}{$pwg->sprintf($rate_text, $rate_summary.count)})</span> 
     
    234240                        <span id="ratingScore">{'no rate'|@translate}</span> <span id="ratingCount"></span> 
    235241                {/if} 
    236                 </td> 
    237         </tr> 
     242                </dd> 
     243        </div> 
    238244{/if} 
    239245 
    240246{if isset($rating)} 
    241         <tr id="rating"> 
    242                 <td class="label"> 
     247        <div id="rating" class="imageInfo"> 
     248                <dt> 
    243249                        <span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if}</span> 
    244                 </td> 
    245                 <td class="value"> 
     250                </dt> 
     251                <dd> 
    246252                        <form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;"> 
    247253                        <div> 
     
    270276                        </div> 
    271277                        </form> 
    272                 </td> 
    273         </tr> 
     278                </dd> 
     279        </div> 
    274280{/if} 
    275281 
    276282{if $display_info.privacy_level and isset($available_permission_levels)} 
    277         <tr id="Privacy"> 
    278                 <td class="label">{'Who can see this photo?'|@translate}</td> 
    279                 <td class="value"> 
    280 {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} 
     283        <div id="Privacy" class="imageInfo"><div class="relSwitchBox"> 
     284                <dt><a id="privacyLevelLink" href="javascript:togglePrivacyLevelBox()">{'Who can see this photo?'|@translate}</a></dt> 
     285                <dd> 
     286{combine_script id='core.scripts' require='jquery' load='async' path='themes/default/js/scripts.js'} 
    281287{footer_script} 
    282 {literal}function setPrivacyLevel(selectElement, rootUrl, id, level) 
    283 { 
    284 selectElement.disabled = true; 
     288{literal}function setPrivacyLevel(rootUrl, id, level) 
     289{ 
    285290var y = new PwgWS(rootUrl); 
    286291y.callService( 
     
    288293        { 
    289294                method: "POST", 
    290                 onFailure: function(num, text) { selectElement.disabled = false; alert(num + " " + text); }, 
    291                 onSuccess: function(result) { selectElement.disabled = false; } 
     295                onFailure: function(num, text) { alert(num + " " + text); }, 
     296                onSuccess: function(result) { 
     297                          jQuery('.levelCheck').hide(); 
     298                          jQuery('#levelCheck'+level).show(); 
     299                          jQuery('#privacyLevelBox .switchSelected').css('visibility','hidden'); 
     300                          jQuery('#switchLevel'+level).css('visibility','visible'); 
     301                } 
    292302        } 
    293303        ); 
    294 }{/literal} 
     304} 
     305function togglePrivacyLevelBox() 
     306{ 
     307        var elt = document.getElementById("privacyLevelBox"), 
     308                ePos = document.getElementById("privacyLevelLink"); 
     309        if (elt.style.display == "none") 
     310        { 
     311                elt.style.left = (ePos.offsetLeft)+"px"; 
     312                elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
     313                elt.style.display=""; 
     314        } 
     315        else 
     316                elt.style.display="none"; 
     317} 
     318{/literal} 
    295319{/footer_script} 
    296         <select onchange="setPrivacyLevel(this, '{$ROOT_URL}', {$current.id}, this.options[selectedIndex].value)"> 
    297                 {foreach from=$available_permission_levels item=label key=level} 
    298                 <option label="{$label}" value="{$level}"{if $level == $current.level} selected="selected"{/if}>{$label}</option> 
    299                 {/foreach} 
    300         </select> 
    301         </td></tr> 
     320         
     321                        <div id="privacyLevelBox" class="switchBox" onclick="togglePrivacyLevelBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||togglePrivacyLevelBox()"> 
     322                                {foreach from=$available_permission_levels item=label key=level} 
     323                                        <span id="levelCheck{$level}" class="levelCheck switchCheck" {if $level != $current.level}style="visibility:hidden"{/if}>&#x2714; </span> 
     324                                        <a id="switchLevel{$level}" {if $level == $current.level}class="switchSelected"{else}class="switchUnselected"{/if} href="javascript:setPrivacyLevel('{$ROOT_URL}', {$current.id}, {$level})">{$label}</a><br> 
     325                                {/foreach} 
     326                        </div> 
     327 
     328                </dd> 
     329        </div></div> 
    302330{/if} 
    303331{/strip} 
    304 </table> 
     332</dl> 
    305333 
    306334{if isset($metadata)} 
    307 <table id="Metadata" class="infoTable2"> 
     335<dl id="Metadata" class="imageInfoTable infoTable2"> 
    308336{foreach from=$metadata item=meta} 
    309         <tr> 
    310                 <th colspan="2">{$meta.TITLE}</th> 
    311         </tr> 
     337        <h3>{$meta.TITLE}</h3> 
    312338        {foreach from=$meta.lines item=value key=label} 
    313         <tr> 
    314                 <td class="label">{$label}</td> 
    315                 <td class="value">{$value}</td> 
    316         </tr> 
     339                <div class="imageInfo"> 
     340                        <dt>{$label}</dt> 
     341                        <dd>{$value}</dd> 
     342                </div> 
    317343        {/foreach} 
    318344{/foreach} 
    319 </table> 
     345</dl> 
    320346{/if} 
    321347</div> 
     
    323349 
    324350{if isset($COMMENT_COUNT)} 
    325 <div id="comments"> 
     351<div id="comments" {if (!isset($comment_add) && ($COMMENT_COUNT == 0))}class="noCommentContent"{else}class="commentContent"{/if}><div id="commentsSwitcher"></div> 
    326352        {if $COMMENT_COUNT > 0} 
    327353                <h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    328                 {if $COMMENT_COUNT > 2} 
    329                         <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a> 
    330                 {/if} 
    331354        {else} 
    332                 <h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    333         {/if} 
    334         {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} 
    335  
    336         {if isset($comments)} 
    337                 {include file='comment_list.tpl'} 
    338         {/if} 
    339  
    340         {if isset($comment_add)} 
    341         <form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment"> 
    342         <fieldset> 
    343                 <legend>{'Add a comment'|@translate}</legend> 
    344                 {if $comment_add.SHOW_AUTHOR} 
    345                 <label>{'Author'|@translate}<input type="text" name="author"></label> 
    346                 {/if} 
    347                 <label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label> 
    348                 <input type="hidden" name="key" value="{$comment_add.KEY}"> 
    349                 <input type="submit" value="{'Submit'|@translate}"> 
    350         </fieldset> 
    351         </form> 
    352         {/if} 
     355                <h3><span class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</span></h3> 
     356        {/if} 
     357         
     358        <div id="pictureComments"> 
     359                {if isset($comment_add)} 
     360                        <div id="commentAdd"> 
     361                                <h4>{'Add a comment'|@translate}</h4> 
     362                                <form  method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment" > 
     363                                        {if $comment_add.SHOW_AUTHOR} 
     364                                                <p><label>{'Author'|@translate}&nbsp;:</label></p> 
     365                                                <p><input type="text" name="author" /></p> 
     366                                        {/if} 
     367                                        <p><label>{'Comment'|@translate}&nbsp;:</label></p> 
     368                                        <p><textarea name="content" id="contentid" rows="10" cols="50">{$comment_add.CONTENT}</textarea></p> 
     369                                        <p><input type="hidden" name="key" value="{$comment_add.KEY}" /> 
     370                                           <input class="submit" type="submit" value="{'Submit'|@translate}"></p> 
     371                                </form> 
     372                        </div> 
     373                {/if} 
     374                {if isset($comments)} 
     375                        <div id="pictureCommentList"> 
     376                                {if (($COMMENT_COUNT > 2) || !empty($navbar))} 
     377                                        <div id="pictureCommentNavBar"> 
     378                                                {if $COMMENT_COUNT > 2} 
     379                                                        <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a> 
     380                                                {/if} 
     381                                                {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} 
     382                                        </div> 
     383                                {/if} 
     384                                {include file='comment_list.tpl'} 
     385                        </div> 
     386                {/if} 
     387                <div style="clear: both;"></div> 
     388        </div> 
     389 
    353390</div> 
    354391{/if}{*comments*} 
  • trunk/themes/default/theme.css

    r13773 r13774  
    351351} 
    352352 
    353 #imageHeaderBar .imageNumber { 
     353#imageToolBar .imageNumber { 
    354354        float: right; 
    355         margin-right: 10px; 
     355        margin:-20px 9px 0 0; 
    356356} 
    357357 
     
    378378        border-radius: 4px; 
    379379        z-index: 100; 
    380         text-align: left; 
     380    text-align:left; 
    381381        position: absolute; /*left, right set through js*/ 
    382382} 
     
    388388} 
    389389 
     390.relSwitchBox { 
     391        position: relative; 
     392} 
     393 
    390394#theImage { 
    391395        clear: left; 
     
    399403 
    400404#linkPrev { 
    401         position:absolute; 
    402         left:0; 
    403         margin-right: 10px; 
    404         margin-left: 5px; 
     405        float: left; 
     406        margin: 5px 10px 0 5px; 
    405407} 
    406408 
    407409#linkNext { 
    408         position:absolute; 
    409         right:0; 
    410         margin-right: 5px; 
    411         margin-left: 10px; 
     410        float: right; 
     411        margin: 5px 5px 0 10px; 
    412412} 
    413413 
     
    817817} 
    818818 
     819/* image comments rules */ 
     820 
     821#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;} 
     822#commentAdd                                             { float: left; } 
     823#pictureCommentList                                     { float: right; } 
     824 
     825#commentAdd input[type="text"], 
     826#commentAdd textarea { 
     827        min-width: 100%; 
     828        max-width: 100%; 
     829        width: 100%; 
     830        font-family: Arial,Helvetica,sans-serif; 
     831        font-size: 100%; 
     832} 
     833#pictureCommentList li { 
     834        clear: both; 
     835        display: block; 
     836        padding: 0.5em 0; 
     837        margin-bottom: 5px; 
     838        border-radius: 5px; 
     839        width: 100%; 
     840} 
     841#pictureCommentList ul                          { list-style: none; padding: 0;} 
     842#pictureCommentList li ul                               { list-style-type: none; padding: 4px;} 
     843#pictureCommentList .author                     { font-weight: bold;} 
     844#pictureCommentList .date                       { font-style: italic;} 
     845#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;} 
     846#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;} 
     847#pictureComments h4                                     { margin: 0;} 
     848#pictureComments form p                         { margin: 5px 0; text-align: left;} 
     849#pictureComments form p textarea                { margin: 10px 0;} 
     850#pictureComments INPUT                          { margin: 10px;} 
     851#pictureComments INPUT[type=submit]     { margin: 0;} 
     852 
     853/* image info table */ 
     854 
     855.imageInfoTable {display:table; margin: auto;} 
     856.imageInfo {display:table-row; line-height:20px;} 
     857.imageInfo dt {display:table-cell; text-align:right; font-weight:bold; padding-right:0.5em;} 
     858.imageInfo dd {display:table-cell; text-align:left; font-weight:normal;} 
  • trunk/themes/elegant/theme.css

    r13764 r13774  
    150150    z-index: 100; 
    151151} 
    152 .switchBox .switchCheck                                 { width: 18px; text-align: left; display: inline-block; line-height:17px;} 
    153 .switchBox .switchUnselected            { margin-left: 18px; line-height:17px;} 
    154152.derivativeSizeDetails                          { display: none;} 
    155153 
     
    177175        margin:0; 
    178176} 
    179 .imageNumber                                            { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;} 
     177.imageNumber                                            { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;} 
    180178#imageToolBar                                           { margin-top: -28px; margin-bottom: 0; float: right;} 
    181179#thePicturePage .pwg-button                     { width: 26px;} 
     
    221219#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;} 
    222220 
    223 #imageInfos dl                                          { padding: 0 15px;} 
    224 #imageInfos dt                                          { font-weight: bold;} 
    225 #imageInfos dd                                          { margin: 0 0 5px 20px;} 
     221#imageInfos dl.imageInfoTable           { display: block; padding: 0 15px; margin: 12px auto;} 
     222#imageInfos .imageInfo                          { display: block; line-height: 16px;} 
     223#imageInfos .imageInfo dt                               { display: block; font-weight: bold; text-align: left; padding: 0;} 
     224#imageInfos .imageInfo dd                       { display: block; text-align: left; margin: 0 0 5px 20px;} 
    226225#imageInfos h3                                          { margin: 20px 0 10px;} 
    227226 
Note: See TracChangeset for help on using the changeset viewer.