Skip to content

Commit

Permalink
feature 2587: new comments layout
Browse files Browse the repository at this point in the history 
git-svn-id: http://piwigo.org/svn/trunk@13762 68402e56-0260-453c-a942-63ccdbb3a9ee
  • Loading branch information
Zaphod committed Mar 26, 2012
1 parent 355eca5 commit af4dd67
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 32 deletions.
55 changes: 33 additions & 22 deletions themes/elegant/template/picture.tpl
View file
Expand Up @@ -53,7 +53,7 @@ function toggleDerivativeSwitchBox()
{/literal}{/footer_script}
{strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()">
<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()">
<div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
<span class="derivativeChecked switchCheck"
Expand Down Expand Up @@ -352,31 +352,42 @@ function togglePrivacyLevelBox()
<div id="comments" {if (!isset($comment_add) && ($COMMENT_COUNT == 0))}class="noCommentContent"{else}class="commentContent"{/if}><div id="commentsSwitcher"></div>
{if $COMMENT_COUNT > 0}
<h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
{if $COMMENT_COUNT > 2}
<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a>
{/if}
{else}
<h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
{/if}
{if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}

{if isset($comments)}
{include file='comment_list.tpl'}
{/if}

{if isset($comment_add)}
<form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment">
<fieldset>
<legend>{'Add a comment'|@translate}</legend>
{if $comment_add.SHOW_AUTHOR}
<label>{'Author'|@translate}<input type="text" name="author"></label>

<div id="pictureComments">
{if isset($comment_add)}
<div id="commentAdd">
<h4>{'Add a comment'|@translate}</h4>
<form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment" >
{if $comment_add.SHOW_AUTHOR}
<p><label>{'Author'|@translate}&nbsp;:</label></p>
<p><input type="text" name="author" /></p>
{/if}
<p><label>{'Comment'|@translate}&nbsp;:</label></p>
<p><textarea name="content" id="contentid" rows="10" cols="50">{$comment_add.CONTENT}</textarea></p>
<p><input type="hidden" name="key" value="{$comment_add.KEY}" />
<input class="submit" type="submit" value="{'Submit'|@translate}"></p>
</form>
</div>
{/if}
<label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label>
<input type="hidden" name="key" value="{$comment_add.KEY}">
<input type="submit" value="{'Submit'|@translate}">
</fieldset>
</form>
{/if}
{if isset($comments)}
<div id="pictureCommentList">
{if (($COMMENT_COUNT > 2) || !empty($navbar))}
<div id="pictureCommentNavBar">
{if $COMMENT_COUNT > 2}
<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a>
{/if}
{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
</div>
{/if}
{include file='comment_list.tpl'}
</div>
{/if}
<div style="clear: both;"></div>
</div>

</div>
{/if}{*comments*}

Expand Down
58 changes: 48 additions & 10 deletions themes/elegant/theme.css
View file
Expand Up @@ -10,15 +10,18 @@ html, body { background-color: #111;}
#thePicturePage, #imageHeaderBar { background-color: #111;}
#imageInfos, #infoSwitcher.infohidden { background-color: #333;}
#thePicturePage #comments { background-color: #333;}
#pictureCommentList li { background-color: #444;}
#pictureCommentList .commentElement { background-color: transparent;}

.switchBox, .header_notes { background-color: #555;}
.thumbnailCategory, .commentElement { background-color: #333;}
.message { background-color: #666;}

INPUT[type="text"], INPUT[type="password"],
INPUT[type="button"], INPUT[type="submit"],
INPUT[type="reset"], INPUT[type="file"] { background-color: #999;}
INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #ccc;}
INPUT[type="reset"], INPUT[type="file"],
SELECT, TEXTAREA { background-color: #555;}
INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #666;}


/* font colors */
Expand All @@ -30,6 +33,11 @@ INPUT.rateButton { color: #fff;}
H1, H3, INPUT.rateButtonSelected { color: #ccc;}
.message { color: #fff;}
.commentContent .comments_toggle:hover { color: #fff;}
INPUT[type="text"], INPUT[type="password"],
INPUT[type="button"], INPUT[type="submit"],
INPUT[type="reset"], INPUT[type="file"],
SELECT, TEXTAREA { color: #ccc;}
INPUT:focus, SELECT:focus, TEXTAREA:focus { color: #fff;}


/* borders */
Expand All @@ -39,7 +47,7 @@ H1, H3, INPUT.rateButtonSelected { color: #ccc;}
#copyright { border-top-width:2px;}
.switchBox { border: 1px solid #000;}
.switchBoxTitle { border-bottom: 1px solid #444;}
FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #999;}
FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #777;}


/* icons */
Expand Down Expand Up @@ -143,7 +151,7 @@ a:hover { border-bottom: none;}
}
.switchBox .switchCheck { width: 18px; text-align: left; display: inline-block; line-height:17px;}
.switchBox .switchUnselected { margin-left: 18px; line-height:17px;}

.derivativeSizeDetails { display: none;}

/* thumbnails */

Expand Down Expand Up @@ -222,16 +230,46 @@ a:hover { border-bottom: none;}

#thePicturePage #comments { padding: 2px 5px;}
#thePicturePage #comments h3 { margin: 10px 0;}
#thePicturePage #comments form { margin-bottom: 10px;}
#thePicturePage #comments form { margin: 10px 0;}
#thePicturePage #comments fieldset { margin: 0 1em;}

.noCommentText { display:block;}
.commentshidden ul,
.commentshidden form {display:none;}
.commentContent .comments_toggle {cursor: pointer;}

.commentshidden #pictureComments { display: none;}
.commentContent .comments_toggle { cursor: pointer;}

#commentAdd, #pictureCommentList { width: 48%; padding: 0 1%;}
#commentAdd { float: left; }
#pictureCommentList { float: right; }

#commentAdd input[type="text"],
#commentAdd textarea {
min-width: 95%;
max-width: 95%;
width: 95%;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
}
#pictureCommentList li {
clear: both;
display: block;
padding: 0.5em 0;
margin-bottom: 5px;
border-radius: 5px;
width: 100%;
}
#pictureCommentList ul { list-style: none; padding: 0;}
#pictureCommentList li ul { list-style-type: none; padding: 4px;}
#pictureCommentList .author { font-weight: bold;}
#pictureCommentList .date { font-style: italic;}
#pictureCommentList .commentsOrder { float: left; margin-bottom: 5px;}
#pictureCommentList .navigationBar { float: right; margin-bottom: 5px;}
#pictureComments h4 { margin: 0;}
#pictureComments form p { margin: 5px 0;}
#pictureComments form p textarea { margin: 10px 0;}
#pictureComments INPUT { margin: 10px;}
#pictureComments INPUT[type=submit] { margin: 0;}

/* plugins */

#the_page .content .stuffs { margin: 0!important}
.categoryActions .theme_menuf { display: none;}
.categoryActions .theme_menuf { display: none;}

0 comments on commit af4dd67

Please sign in to comment.