Changeset 13762


Ignore:
Timestamp:
03/26/12 23:01:32 (8 years ago)
Author:
Zaphod
Message:

feature 2587: new comments layout

Location:
trunk/themes/elegant
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/elegant/template/picture.tpl

    r13730 r13762  
    5454{strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
    5555<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a> 
    56 <div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()"> 
     56<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e.parentNode.parentNode==this||e==this||toggleDerivativeSwitchBox()"> 
    5757<div class="switchBoxTitle">{'Photo sizes'|@translate}</div> 
    5858{foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
     
    353353        {if $COMMENT_COUNT > 0} 
    354354                <h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    355                 {if $COMMENT_COUNT > 2} 
    356                         <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a> 
    357                 {/if} 
    358355        {else} 
    359356                <h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3> 
    360357        {/if} 
    361         {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} 
    362  
    363         {if isset($comments)} 
    364                 {include file='comment_list.tpl'} 
    365         {/if} 
    366  
    367         {if isset($comment_add)} 
    368         <form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment"> 
    369         <fieldset> 
    370                 <legend>{'Add a comment'|@translate}</legend> 
    371                 {if $comment_add.SHOW_AUTHOR} 
    372                 <label>{'Author'|@translate}<input type="text" name="author"></label> 
    373                 {/if} 
    374                 <label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label> 
    375                 <input type="hidden" name="key" value="{$comment_add.KEY}"> 
    376                 <input type="submit" value="{'Submit'|@translate}"> 
    377         </fieldset> 
    378         </form> 
    379         {/if} 
     358         
     359        <div id="pictureComments"> 
     360                {if isset($comment_add)} 
     361                        <div id="commentAdd"> 
     362                                <h4>{'Add a comment'|@translate}</h4> 
     363                                <form  method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment" > 
     364                                        {if $comment_add.SHOW_AUTHOR} 
     365                                                <p><label>{'Author'|@translate}&nbsp;:</label></p> 
     366                                                <p><input type="text" name="author" /></p> 
     367                                        {/if} 
     368                                        <p><label>{'Comment'|@translate}&nbsp;:</label></p> 
     369                                        <p><textarea name="content" id="contentid" rows="10" cols="50">{$comment_add.CONTENT}</textarea></p> 
     370                                        <p><input type="hidden" name="key" value="{$comment_add.KEY}" /> 
     371                                           <input class="submit" type="submit" value="{'Submit'|@translate}"></p> 
     372                                </form> 
     373                        </div> 
     374                {/if} 
     375                {if isset($comments)} 
     376                        <div id="pictureCommentList"> 
     377                                {if (($COMMENT_COUNT > 2) || !empty($navbar))} 
     378                                        <div id="pictureCommentNavBar"> 
     379                                                {if $COMMENT_COUNT > 2} 
     380                                                        <a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a> 
     381                                                {/if} 
     382                                                {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} 
     383                                        </div> 
     384                                {/if} 
     385                                {include file='comment_list.tpl'} 
     386                        </div> 
     387                {/if} 
     388                <div style="clear: both;"></div> 
     389        </div> 
     390 
    380391</div> 
    381392{/if}{*comments*} 
  • trunk/themes/elegant/theme.css

    r13730 r13762  
    1111#imageInfos, #infoSwitcher.infohidden           { background-color: #333;} 
    1212#thePicturePage #comments                                       { background-color: #333;} 
     13#pictureCommentList li                                          { background-color: #444;} 
     14#pictureCommentList .commentElement                     { background-color: transparent;} 
    1315 
    1416.switchBox, .header_notes                                       { background-color: #555;} 
     
    1820INPUT[type="text"], INPUT[type="password"], 
    1921INPUT[type="button"], INPUT[type="submit"], 
    20 INPUT[type="reset"], INPUT[type="file"]         { background-color: #999;} 
    21 INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #ccc;} 
     22INPUT[type="reset"], INPUT[type="file"], 
     23SELECT, TEXTAREA                                                        { background-color: #555;} 
     24INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #666;} 
    2225 
    2326 
     
    3134.message                                                                        { color: #fff;} 
    3235.commentContent .comments_toggle:hover          { color: #fff;} 
     36INPUT[type="text"], INPUT[type="password"], 
     37INPUT[type="button"], INPUT[type="submit"], 
     38INPUT[type="reset"], INPUT[type="file"], 
     39SELECT, TEXTAREA                                                        { color: #ccc;} 
     40INPUT:focus, SELECT:focus, TEXTAREA:focus       { color: #fff;} 
    3341 
    3442 
     
    4048.switchBox                                                                      { border: 1px solid #000;} 
    4149.switchBoxTitle                                                                 { border-bottom: 1px solid #444;} 
    42 FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #999;} 
     50FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #777;} 
    4351 
    4452 
     
    144152.switchBox .switchCheck                                 { width: 18px; text-align: left; display: inline-block; line-height:17px;} 
    145153.switchBox .switchUnselected            { margin-left: 18px; line-height:17px;} 
    146  
     154.derivativeSizeDetails                          { display: none;} 
    147155 
    148156/* thumbnails */ 
     
    223231#thePicturePage #comments                       { padding: 2px 5px;} 
    224232#thePicturePage #comments h3                    { margin: 10px 0;} 
    225 #thePicturePage #comments form          { margin-bottom: 10px;} 
     233#thePicturePage #comments form          { margin: 10px 0;} 
    226234#thePicturePage #comments fieldset              { margin: 0 1em;} 
    227235 
    228236.noCommentText                                          { display:block;} 
    229 .commentshidden ul, 
    230 .commentshidden form                                    {display:none;} 
    231 .commentContent .comments_toggle        {cursor: pointer;} 
    232  
     237.commentshidden #pictureComments                { display: none;} 
     238.commentContent .comments_toggle        { cursor: pointer;} 
     239 
     240#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;} 
     241#commentAdd                                             { float: left; } 
     242#pictureCommentList                                     { float: right; } 
     243 
     244#commentAdd input[type="text"], 
     245#commentAdd textarea { 
     246        min-width: 95%; 
     247        max-width: 95%; 
     248        width: 95%; 
     249        font-family: Arial,Helvetica,sans-serif; 
     250        font-size: 100%; 
     251} 
     252#pictureCommentList li { 
     253        clear: both; 
     254        display: block; 
     255        padding: 0.5em 0; 
     256        margin-bottom: 5px; 
     257        border-radius: 5px; 
     258        width: 100%; 
     259} 
     260#pictureCommentList ul                          { list-style: none; padding: 0;} 
     261#pictureCommentList li ul                               { list-style-type: none; padding: 4px;} 
     262#pictureCommentList .author                     { font-weight: bold;} 
     263#pictureCommentList .date                       { font-style: italic;} 
     264#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;} 
     265#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;} 
     266#pictureComments h4                                     { margin: 0;} 
     267#pictureComments form p                         { margin: 5px 0;} 
     268#pictureComments form p textarea                { margin: 10px 0;} 
     269#pictureComments INPUT                          { margin: 10px;} 
     270#pictureComments INPUT[type=submit]     { margin: 0;} 
    233271 
    234272/* plugins */ 
Note: See TracChangeset for help on using the changeset viewer.