Changeset 13774 for trunk/themes


Ignore:
Timestamp:
Mar 27, 2012, 10:44:11 PM (13 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.