diff options
Diffstat (limited to 'themes/default')
| -rw-r--r-- | themes/default/fix-ie5-ie6.css | 7 | ||||
| -rw-r--r-- | themes/default/fix-ie7.css | 6 | ||||
| -rw-r--r-- | themes/default/template/picture.tpl | 261 | ||||
| -rw-r--r-- | themes/default/theme.css | 62 |
4 files changed, 213 insertions, 123 deletions
diff --git a/themes/default/fix-ie5-ie6.css b/themes/default/fix-ie5-ie6.css index b3ed58996..312b64e30 100644 --- a/themes/default/fix-ie5-ie6.css +++ b/themes/default/fix-ie5-ie6.css @@ -70,3 +70,10 @@ H1, #theHeader { .pwg-icon { display: block; } + +.imageInfoTable {display:block; margin: 0 200px;} +.imageInfo {display:block; line-height:16px;} +.imageInfo dt {display:block; text-align:left; font-weight:bold; padding-right:0.5em;} +.imageInfo dd {display:block; text-align:left; font-weight:normal;} +.relSwitchBox {position:static;} +#imageInfos dd { margin: 0 0 5px 20px;}
\ No newline at end of file diff --git a/themes/default/fix-ie7.css b/themes/default/fix-ie7.css index d4c343f24..4284f6381 100644 --- a/themes/default/fix-ie7.css +++ b/themes/default/fix-ie7.css @@ -23,3 +23,9 @@ display: block; } +.imageInfoTable {display:block; margin: 0 200px;} +.imageInfo {display:block; line-height:16px;} +.imageInfo dt {display:block; text-align:left; font-weight:bold; padding-right:0.5em;} +.imageInfo dd {display:block; text-align:left; font-weight:normal;} +.relSwitchBox {position:static;} +#imageInfos dd { margin: 0 0 5px 20px;}
\ No newline at end of file diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl index 17b2c7750..da9dd1036 100644 --- a/themes/default/template/picture.tpl +++ b/themes/default/template/picture.tpl @@ -12,10 +12,10 @@ <div class="browsePath"> {$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2> </div> - <div class="imageNumber">{$PHOTO}</div> </div> <div id="imageToolBar"> +<div class="imageNumber">{$PHOTO}</div> <div class="actionButtons"> {if count($current.unique_derivatives)>1} @@ -139,74 +139,80 @@ y.callService( </p> {/if} -</div> +</div><!-- -<div id="imageInfos"> +--><div id="infoSwitcher"></div><!-- +--><div id="imageInfos"> {if $DISPLAY_NAV_THUMB} -{if isset($previous)} -<a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev"> - <img src="{$previous.THUMB_SRC}" alt="{$previous.TITLE}"> -</a> -{/if} -{if isset($next)} -<a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next"> - <img src="{$next.THUMB_SRC}" alt="{$next.TITLE}"> -</a> -{/if} + <div class="navThumbs"> + {if isset($previous)} + <a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev"> + <span class="thumbHover prevThumbHover"> </span> + <img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}"> + </a> + {/if} + {if isset($next)} + <a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next"> + <span class="thumbHover nextThumbHover"> </span> + <img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}"> + </a> + {/if} + </div> {/if} -<table id="standard" class="infoTable"> +<dl id="standard" class="imageInfoTable infoTable"> {strip} {if $display_info.author} - <tr id="Author"> - <td class="label">{'Author'|@translate}</td> - <td class="value">{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</td> - </tr> + <div id="Author" class="imageInfo"> + <dt>{'Author'|@translate}</dt> + <dd>{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</dd> + </div> {/if} {if $display_info.created_on} - <tr id="datecreate"> - <td class="label">{'Created on'|@translate}</td> - <td class="value">{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</td> - </tr> + <div id="datecreate" class="imageInfo"> + <dt>{'Created on'|@translate}</dt> + <dd>{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}</dd> + </div> {/if} {if $display_info.posted_on} - <tr id="datepost"> - <td class="label">{'Posted on'|@translate}</td> - <td class="value">{$INFO_POSTED_DATE}</td> - </tr> + <div id="datepost" class="imageInfo"> + <dt>{'Posted on'|@translate}</dt> + <dd>{$INFO_POSTED_DATE}</dd> + </div> {/if} {if $display_info.dimensions} - <tr id="Dimensions"> - <td class="label">{'Dimensions'|@translate}</td> - <td class="value">{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</td> - </tr> + <div id="Dimensions" class="imageInfo"> + <dt>{'Dimensions'|@translate}</dt> + <dd>{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</dd> + </div> {/if} {if $display_info.file} - <tr id="File"> - <td class="label">{'File'|@translate}</td> - <td class="value">{$INFO_FILE}</td> - </tr> + <div id="File" class="imageInfo"> + <dt>{'File'|@translate}</dt> + <dd>{$INFO_FILE}</dd> + </div> {/if} {if $display_info.filesize} - <tr id="Filesize"> - <td class="label">{'Filesize'|@translate}</td> - <td class="value">{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</td> - </tr> + <div id="Filesize" class="imageInfo"> + <dt>{'Filesize'|@translate}</dt> + <dd>{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</dd> + </div> {/if} - {if $display_info.tags} - <tr id="Tags"> - <td class="label">{'Tags'|@translate}</td> - <td class="value"> + {if $display_info.tags } + <div id="Tags" class="imageInfo"> + <dt>{'Tags'|@translate}</dt> + <dd> {if isset($related_tags)} {foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}<a href="{$tag.URL}">{$tag.name}</a>{/foreach} + {else} {/if} - </td> - </tr> + </dd> + </div> {/if} {if $display_info.categories} - <tr id="Categories"> - <td class="label">{'Albums'|@translate}</td> - <td class="value"> + <div id="Categories" class="imageInfo"> + <dt>{'Albums'|@translate}</dt> + <dd> {if isset($related_categories)} <ul> {foreach from=$related_categories item=cat} @@ -214,35 +220,35 @@ y.callService( {/foreach} </ul> {/if} - </td> - </tr> + </dd> + </div> {/if} {if $display_info.visits} - <tr id="Visits"> - <td class="label">{'Visits'|@translate}</td> - <td class="value">{$INFO_VISITS}</td> - </tr> + <div id="Visits" class="imageInfo"> + <dt>{'Visits'|@translate}</dt> + <dd>{$INFO_VISITS}</dd> + </div> {/if} {if $display_info.rating_score and isset($rate_summary)} - <tr id="Average"> - <td class="label">{'Rating score'|@translate}</td> - <td class="value"> + <div id="Average" class="imageInfo"> + <dt>{'Rating score'|@translate}</dt> + <dd> {if $rate_summary.count} <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> {else} <span id="ratingScore">{'no rate'|@translate}</span> <span id="ratingCount"></span> {/if} - </td> - </tr> + </dd> + </div> {/if} {if isset($rating)} - <tr id="rating"> - <td class="label"> + <div id="rating" class="imageInfo"> + <dt> <span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if}</span> - </td> - <td class="value"> + </dt> + <dd> <form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;"> <div> {foreach from=$rating.marks item=mark name=rate_loop} @@ -269,87 +275,118 @@ y.callService( {/strip} </div> </form> - </td> - </tr> + </dd> + </div> {/if} {if $display_info.privacy_level and isset($available_permission_levels)} - <tr id="Privacy"> - <td class="label">{'Who can see this photo?'|@translate}</td> - <td class="value"> -{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} + <div id="Privacy" class="imageInfo"><div class="relSwitchBox"> + <dt><a id="privacyLevelLink" href="javascript:togglePrivacyLevelBox()">{'Who can see this photo?'|@translate}</a></dt> + <dd> +{combine_script id='core.scripts' require='jquery' load='async' path='themes/default/js/scripts.js'} {footer_script} -{literal}function setPrivacyLevel(selectElement, rootUrl, id, level) +{literal}function setPrivacyLevel(rootUrl, id, level) { -selectElement.disabled = true; var y = new PwgWS(rootUrl); y.callService( "pwg.images.setPrivacyLevel", {image_id: id, level:level} , { method: "POST", - onFailure: function(num, text) { selectElement.disabled = false; alert(num + " " + text); }, - onSuccess: function(result) { selectElement.disabled = false; } + onFailure: function(num, text) { alert(num + " " + text); }, + onSuccess: function(result) { + jQuery('.levelCheck').hide(); + jQuery('#levelCheck'+level).show(); + jQuery('#privacyLevelBox .switchSelected').css('visibility','hidden'); + jQuery('#switchLevel'+level).css('visibility','visible'); + } } ); -}{/literal} +} +function togglePrivacyLevelBox() +{ + var elt = document.getElementById("privacyLevelBox"), + ePos = document.getElementById("privacyLevelLink"); + if (elt.style.display == "none") + { + elt.style.left = (ePos.offsetLeft)+"px"; + elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; + elt.style.display=""; + } + else + elt.style.display="none"; +} +{/literal} {/footer_script} - <select onchange="setPrivacyLevel(this, '{$ROOT_URL}', {$current.id}, this.options[selectedIndex].value)"> - {foreach from=$available_permission_levels item=label key=level} - <option label="{$label}" value="{$level}"{if $level == $current.level} selected="selected"{/if}>{$label}</option> - {/foreach} - </select> - </td></tr> + + <div id="privacyLevelBox" class="switchBox" onclick="togglePrivacyLevelBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||togglePrivacyLevelBox()"> + {foreach from=$available_permission_levels item=label key=level} + <span id="levelCheck{$level}" class="levelCheck switchCheck" {if $level != $current.level}style="visibility:hidden"{/if}>✔ </span> + <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> + {/foreach} + </div> + + </dd> + </div></div> {/if} {/strip} -</table> +</dl> {if isset($metadata)} -<table id="Metadata" class="infoTable2"> +<dl id="Metadata" class="imageInfoTable infoTable2"> {foreach from=$metadata item=meta} - <tr> - <th colspan="2">{$meta.TITLE}</th> - </tr> + <h3>{$meta.TITLE}</h3> {foreach from=$meta.lines item=value key=label} - <tr> - <td class="label">{$label}</td> - <td class="value">{$value}</td> - </tr> + <div class="imageInfo"> + <dt>{$label}</dt> + <dd>{$value}</dd> + </div> {/foreach} {/foreach} -</table> +</dl> {/if} </div> </div> {if isset($COMMENT_COUNT)} -<div id="comments"> +<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'} + <h3><span class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</span></h3> {/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/default/theme.css b/themes/default/theme.css index e21756ca5..ab418542b 100644 --- a/themes/default/theme.css +++ b/themes/default/theme.css @@ -350,9 +350,9 @@ TD.calDayHead { margin-left: 10px; } -#imageHeaderBar .imageNumber { +#imageToolBar .imageNumber { float: right; - margin-right: 10px; + margin:-20px 9px 0 0; } #imageHeaderBar H2 { @@ -377,7 +377,7 @@ TD.calDayHead { padding: 0.5em 5px; border-radius: 4px; z-index: 100; - text-align: left; + text-align:left; position: absolute; /*left, right set through js*/ } @@ -387,6 +387,10 @@ TD.calDayHead { margin-bottom:5px; } +.relSwitchBox { + position: relative; +} + #theImage { clear: left; text-align: center; @@ -398,17 +402,13 @@ TD.calDayHead { } #linkPrev { - position:absolute; - left:0; - margin-right: 10px; - margin-left: 5px; + float: left; + margin: 5px 10px 0 5px; } #linkNext { - position:absolute; - right:0; - margin-right: 5px; - margin-left: 10px; + float: right; + margin: 5px 5px 0 10px; } .infoTable .label { @@ -816,3 +816,43 @@ LEGEND { line-height: 1.5em; } +/* image comments rules */ + +#commentAdd, #pictureCommentList { width: 48%; padding: 0 1%;} +#commentAdd { float: left; } +#pictureCommentList { float: right; } + +#commentAdd input[type="text"], +#commentAdd textarea { + min-width: 100%; + max-width: 100%; + width: 100%; + 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; text-align: left;} +#pictureComments form p textarea { margin: 10px 0;} +#pictureComments INPUT { margin: 10px;} +#pictureComments INPUT[type=submit] { margin: 0;} + +/* image info table */ + +.imageInfoTable {display:table; margin: auto;} +.imageInfo {display:table-row; line-height:20px;} +.imageInfo dt {display:table-cell; text-align:right; font-weight:bold; padding-right:0.5em;} +.imageInfo dd {display:table-cell; text-align:left; font-weight:normal;} |