From 6cfbf5cc9d473d0a90ad9bf854f0edc806fbb816 Mon Sep 17 00:00:00 2001 From: Zaphod Date: Tue, 27 Mar 2012 20:44:11 +0000 Subject: feature 2588: uniformization of picture.tpl picture.tpl is merge between default theme & elegant theme. css adaptation to have the image info displayed as a table with default. git-svn-id: http://piwigo.org/svn/trunk@13774 68402e56-0260-453c-a942-63ccdbb3a9ee --- themes/default/fix-ie5-ie6.css | 7 + themes/default/fix-ie7.css | 6 + themes/default/template/picture.tpl | 261 ++++++++++++++++++++---------------- themes/default/theme.css | 62 +++++++-- 4 files changed, 213 insertions(+), 123 deletions(-) (limited to 'themes/default') 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 @@
{$SECTION_TITLE}{$LEVEL_SEPARATOR}

{$current.TITLE}

-
{$PHOTO}
+
{$PHOTO}
{if count($current.unique_derivatives)>1} @@ -139,74 +139,80 @@ y.callService(

{/if} -
+
{if $DISPLAY_NAV_THUMB} -{if isset($previous)} - -{/if} -{if isset($next)} - -{/if} +
+ {if isset($previous)} + + {/if} + {if isset($next)} + + {/if} +
{/if} - +
{strip} {if $display_info.author} -
- - - +
+
{'Author'|@translate}
+
{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}
+
{/if} {if $display_info.created_on} - - - - +
+
{'Created on'|@translate}
+
{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}
+
{/if} {if $display_info.posted_on} - - - - +
+
{'Posted on'|@translate}
+
{$INFO_POSTED_DATE}
+
{/if} {if $display_info.dimensions} - - - - +
+
{'Dimensions'|@translate}
+
{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}
+
{/if} {if $display_info.file} - - - - +
+
{'File'|@translate}
+
{$INFO_FILE}
+
{/if} {if $display_info.filesize} - - - - +
+
{'Filesize'|@translate}
+
{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}
+
{/if} - {if $display_info.tags} - - - - + + {/if} {if $display_info.categories} - - - - + + {/if} {if $display_info.visits} - - - - +
+
{'Visits'|@translate}
+
{$INFO_VISITS}
+
{/if} {if $display_info.rating_score and isset($rate_summary)} - - - - + + {/if} {if isset($rating)} - - - - + + {/if} {if $display_info.privacy_level and isset($available_permission_levels)} - - - + + + + + {/if} {/strip} -
{'Author'|@translate}{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}
{'Created on'|@translate}{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}
{'Posted on'|@translate}{$INFO_POSTED_DATE}
{'Dimensions'|@translate}{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}
{'File'|@translate}{$INFO_FILE}
{'Filesize'|@translate}{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}
{'Tags'|@translate} + {if $display_info.tags } +
+
{'Tags'|@translate}
+
{if isset($related_tags)} {foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}{$tag.name}{/foreach} + {else}  {/if} -
{'Albums'|@translate} +
+
{'Albums'|@translate}
+
{if isset($related_categories)}
    {foreach from=$related_categories item=cat} @@ -214,35 +220,35 @@ y.callService( {/foreach}
{/if} -
{'Visits'|@translate}{$INFO_VISITS}
{'Rating score'|@translate} +
+
{'Rating score'|@translate}
+
{if $rate_summary.count} {$rate_summary.score} ({assign var='rate_text' value='%d rates'|@translate}{$pwg->sprintf($rate_text, $rate_summary.count)}) {else} {'no rate'|@translate} {/if} -
+
+
{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if} -
+ +
{foreach from=$rating.marks item=mark name=rate_loop} @@ -269,87 +275,118 @@ y.callService( {/strip}
-
{'Who can see this photo?'|@translate} -{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} +
+
{'Who can see this photo?'|@translate}
+
+{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} - -
+ {if isset($metadata)} - +
{foreach from=$metadata item=meta} -
- - +

{$meta.TITLE}

{foreach from=$meta.lines item=value key=label} - - - - +
+
{$label}
+
{$value}
+
{/foreach} {/foreach} -
{$meta.TITLE}
{$label}{$value}
+ {/if}
{if isset($COMMENT_COUNT)} -
+
{if $COMMENT_COUNT > 0}

{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}

- {if $COMMENT_COUNT > 2} - {$COMMENTS_ORDER_TITLE} - {/if} {else} -

{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}

- {/if} - {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} - - {if isset($comments)} - {include file='comment_list.tpl'} +

{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}

{/if} - - {if isset($comment_add)} -
-
- {'Add a comment'|@translate} - {if $comment_add.SHOW_AUTHOR} - + +
+ {if isset($comment_add)} +
+

{'Add a comment'|@translate}

+ + {if $comment_add.SHOW_AUTHOR} +

+

+ {/if} +

+

+

+

+ +
{/if} - - - -
- - {/if} + {if isset($comments)} +
+ {if (($COMMENT_COUNT > 2) || !empty($navbar))} +
+ {if $COMMENT_COUNT > 2} + {$COMMENTS_ORDER_TITLE} + {/if} + {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} +
+ {/if} + {include file='comment_list.tpl'} +
+ {/if} +
+
+
{/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;} -- cgit v1.2.3