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 +++++- themes/elegant/template/picture.tpl | 396 ------------------------------------ themes/elegant/theme.css | 11 +- 6 files changed, 218 insertions(+), 525 deletions(-) delete mode 100644 themes/elegant/template/picture.tpl (limited to 'themes') 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;} diff --git a/themes/elegant/template/picture.tpl b/themes/elegant/template/picture.tpl deleted file mode 100644 index 948229e38..000000000 --- a/themes/elegant/template/picture.tpl +++ /dev/null @@ -1,396 +0,0 @@ -{* Example of resizeable -{include file='include/autosize.inc.tpl'} -*} -{if isset($MENUBAR)}{$MENUBAR}{/if} -
-{if isset($errors) or not empty($infos)} -{include file='infos_errors.tpl'} -{/if} -{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if} - -
-
- {$SECTION_TITLE}{$LEVEL_SEPARATOR}

{$current.TITLE}

-
-
- -
-
{$PHOTO}
-
- -{if count($current.unique_derivatives)>1} -{footer_script}{literal} -function changeImgSrc(url,typeSave,typeMap) -{ - var theImg = document.getElementById("theMainImage"); - if (theImg) - { - theImg.removeAttribute("width");theImg.removeAttribute("height"); - theImg.src = url; - theImg.useMap = "#map"+typeMap; - } - jQuery('.derivativeChecked').hide(); - jQuery('#derivativeChecked'+typeSave).show(); - jQuery('#derivativeSwitchBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected'); - jQuery('#derivativeName'+typeSave).addClass('switchSelected').removeClass('switchUnselected'); - document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}'; -} - -function toggleDerivativeSwitchBox() -{ - var elt = document.getElementById("derivativeSwitchBox"), - ePos = document.getElementById("derivativeSwitchLink"); - if (elt.style.display==="none") - { - elt.style.position = "absolute"; - 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} -{strip} - {'Photo sizes'|@translate} - -{/strip}{/if} - - -{strip}{if isset($U_SLIDESHOW_START)} - - {'slideshow'|@translate} - -{/if}{/strip} -{strip}{if isset($U_METADATA)} - - {'Show file metadata'|@translate} - -{/if}{/strip} -{strip}{if isset($current.U_DOWNLOAD)} - - {'Download'|@translate} - -{/if}{/strip} -{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if} -{strip}{if isset($favorite)} - - {'Favorites'|@translate} - -{/if}{/strip} -{strip}{if isset($U_SET_AS_REPRESENTATIVE)} - - {'representative'|@translate} - -{/if}{/strip} -{strip}{if isset($U_ADMIN)} - - {'Edit'|@translate} - -{/if}{/strip} -{strip}{if isset($U_CADDIE)}{*caddie management BEGIN*} -{footer_script} -{literal}function addToCadie(aElement, rootUrl, id) -{ -if (aElement.disabled) return; -aElement.disabled=true; -var y = new PwgWS(rootUrl); -y.callService( - "pwg.caddie.add", {image_id: id} , - { - onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; }, - onSuccess: function(result) { aElement.disabled = false; } - } - ); -}{/literal} -{/footer_script} - - {'Caddie'|@translate} - -{/if}{/strip}{*caddie management END*} -
- - {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} -
{**} - -
-
-{$ELEMENT_CONTENT} - -{if isset($COMMENT_IMG)} -

{$COMMENT_IMG}

-{/if} - -{if isset($U_SLIDESHOW_STOP)} -

- [ {'stop the slideshow'|@translate} ] -

-{/if} - -
-{if $DISPLAY_NAV_THUMB} -
- {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 } -
-
{'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} -
-
- {/if} - {if $display_info.categories} - -
{'Albums'|@translate}
-
- {if isset($related_categories)} -
    - {foreach from=$related_categories item=cat} -
  • {$cat}
    • - {/foreach} -
- {/if} -
- - {/if} - {if $display_info.visits} -
-
{'Visits'|@translate}
-
{$INFO_VISITS}
-
- {/if} - -{if $display_info.rating_score and isset($rate_summary)} -
-
{'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} - -{if isset($rating)} -
-
- {if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if} -
-
-
-
- {foreach from=$rating.marks item=mark name=rate_loop} - {if isset($rating.USER_RATE) && $mark==$rating.USER_RATE} - - {else} - - {/if} - {/foreach} - {strip}{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} - {combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'} - {footer_script} - var _pwgRatingAutoQueue = _pwgRatingAutoQueue||[]; - _pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL}', image_id: {$current.id}, - onSuccess : function(rating) {ldelim} - var e = document.getElementById("updateRate"); - if (e) e.innerHTML = "{'Update your rating'|@translate|@escape:'javascript'}"; - e = document.getElementById("ratingScore"); - if (e) e.innerHTML = rating.score; - e = document.getElementById("ratingCount"); - if (e) e.innerHTML = "({'%d rates'|@translate|@escape:'javascript'})".replace( "%d", rating.count); - {rdelim}{rdelim} ); - {/footer_script} - {/strip} -
-
-
-
-{/if} - -{if $display_info.privacy_level and isset($available_permission_levels)} -
-
{'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(rootUrl, id, level) -{ -var y = new PwgWS(rootUrl); -y.callService( - "pwg.images.setPrivacyLevel", {image_id: id, level:level} , - { - method: "POST", - onFailure: function(num, text) { alert(num + " " + text); }, - onSuccess: function(result) { - jQuery('.levelCheck').hide(); - jQuery('#levelCheck'+level).show(); - jQuery('#privacyLevelBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected'); - jQuery('#switchLevel'+level).addClass('switchSelected').removeClass('switchUnselected'); - } - } - ); -} -function togglePrivacyLevelBox() -{ - var elt = document.getElementById("privacyLevelBox"), - ePos = document.getElementById("privacyLevelLink"); - if (elt.style.display == "none") - { - elt.style.position = "absolute"; - 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} -{/strip} -
- -{if isset($metadata)} -
-{foreach from=$metadata item=meta} -

{$meta.TITLE}

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

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

- {else} -

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

- {/if} - -
- {if isset($comment_add)} -
-

{'Add a comment'|@translate}

-
- {if $comment_add.SHOW_AUTHOR} -

-

- {/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*} - -{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if} - -
diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css index 5a88a4f3d..86387d230 100644 --- a/themes/elegant/theme.css +++ b/themes/elegant/theme.css @@ -149,8 +149,6 @@ a:hover { border-bottom: none;} text-align: left; z-index: 100; } -.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 */ @@ -176,7 +174,7 @@ a:hover { border-bottom: none;} font-weight:bold; margin:0; } -.imageNumber { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;} +.imageNumber { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;} #imageToolBar { margin-top: -28px; margin-bottom: 0; float: right;} #thePicturePage .pwg-button { width: 26px;} #thePicturePage .actionButtons { margin-right: 26px;} @@ -220,9 +218,10 @@ a:hover { border-bottom: none;} #imageInfos .nextThumbHover { background: transparent url(icon/none.png) no-repeat center center;} #imageInfos .nextThumbHover:hover { background: transparent url(icon/img_next.png) no-repeat center center;} -#imageInfos dl { padding: 0 15px;} -#imageInfos dt { font-weight: bold;} -#imageInfos dd { margin: 0 0 5px 20px;} +#imageInfos dl.imageInfoTable { display: block; padding: 0 15px; margin: 12px auto;} +#imageInfos .imageInfo { display: block; line-height: 16px;} +#imageInfos .imageInfo dt { display: block; font-weight: bold; text-align: left; padding: 0;} +#imageInfos .imageInfo dd { display: block; text-align: left; margin: 0 0 5px 20px;} #imageInfos h3 { margin: 20px 0 10px;} -- cgit v1.2.3