Changeset 13762


Ignore:
Timestamp:
Mar 26, 2012, 11:01:32 PM (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.