diff options
Diffstat (limited to '')
| -rw-r--r-- | themes/elegant/template/picture.tpl | 55 | ||||
| -rw-r--r-- | themes/elegant/theme.css | 58 |
2 files changed, 81 insertions, 32 deletions
diff --git a/themes/elegant/template/picture.tpl b/themes/elegant/template/picture.tpl index e509ccaf1..948229e38 100644 --- a/themes/elegant/template/picture.tpl +++ b/themes/elegant/template/picture.tpl @@ -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"> </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" @@ -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} :</label></p> + <p><input type="text" name="author" /></p> + {/if} + <p><label>{'Comment'|@translate} :</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*} diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css index c6b072249..f0f0ae557 100644 --- a/themes/elegant/theme.css +++ b/themes/elegant/theme.css @@ -10,6 +10,8 @@ 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;} @@ -17,8 +19,9 @@ html, body { background-color: #111;} 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 */ @@ -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 */ @@ -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 */ @@ -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 */ @@ -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;}
\ No newline at end of file +.categoryActions .theme_menuf { display: none;} |