feature 2588: template modification for v2.4
-> #content on picture & slideshow page -> class 'browsePathSeparator' on LEVEL_SEPARATOR on browsePath -> derivativeSwitchLink replaced by pwg-size icon (with associated css modification on themes) -> new id #theImageAndInfos that contains #theImage and #imageInfos git-svn-id: http://piwigo.org/svn/trunk@13474 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
Zaphod
parent
ced48bdf83
commit
7798656c51
7 changed files with 82 additions and 70 deletions
|
|
@ -14,12 +14,12 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover {
|
|||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
#menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
/* borders */
|
||||
#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox {
|
||||
#menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox {
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ BODY, H3, #imageToolBar A:hover {
|
|||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ BODY, H3, #imageToolBar A:hover {
|
|||
}
|
||||
|
||||
/* borders */
|
||||
#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{
|
||||
#menubar DL, .content, #derivativeSwitchBox, #sortOrderBox{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
{* Example of resizeable
|
||||
{include file='include/autosize.inc.tpl'}
|
||||
*}
|
||||
{if isset($MENUBAR)}
|
||||
{$MENUBAR}
|
||||
<div id="content" class="contentWithMenu">
|
||||
{/if}
|
||||
{if isset($MENUBAR)}{$MENUBAR}{/if}
|
||||
<div id="content" {if isset($MENUBAR)}class="contentWithMenu"{/if}>
|
||||
{if isset($errors) or not empty($infos)}
|
||||
{include file='infos_errors.tpl'}
|
||||
{/if}
|
||||
|
|
@ -12,13 +10,58 @@
|
|||
|
||||
<div id="imageHeaderBar">
|
||||
<div class="browsePath">
|
||||
{$SECTION_TITLE} {$LEVEL_SEPARATOR} <h2>{$current.TITLE}</h2>
|
||||
{$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2>
|
||||
</div>
|
||||
<div class="imageNumber">{$PHOTO}</div>
|
||||
</div>
|
||||
|
||||
<div id="imageToolBar">
|
||||
<div class="actionButtons">
|
||||
|
||||
{if count($current.unique_derivatives)>1}
|
||||
{footer_script}{literal}
|
||||
function changeImgSrc(url,typeSave,typeMap,typeDisplay)
|
||||
{
|
||||
var theImg = document.getElementById("theMainImage");
|
||||
if (theImg)
|
||||
{
|
||||
theImg.removeAttribute("width");theImg.removeAttribute("height");
|
||||
theImg.src = url;
|
||||
var elt = document.getElementById("derivativeSwitchLink");
|
||||
if (elt) elt.innerHTML = typeDisplay;
|
||||
theImg.useMap = "#map"+typeMap;
|
||||
}
|
||||
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+10)+"px";
|
||||
elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
|
||||
elt.style.display="";
|
||||
}
|
||||
else
|
||||
elt.style.display="none";
|
||||
}
|
||||
{/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" onclick="toggleDerivativeSwitchBox()" style="display:none">
|
||||
{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
|
||||
<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}','{$derivative->get_type()|@translate|@escape:javascript}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br>
|
||||
{/foreach}
|
||||
{if isset($U_ORIGINAL)}
|
||||
<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/strip}{/if}
|
||||
|
||||
|
||||
{strip}{if isset($U_SLIDESHOW_START)}
|
||||
<a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
|
||||
<span class="pwg-icon pwg-icon-slideshow"> </span><span class="pwg-button-text">{'slideshow'|@translate}</span>
|
||||
|
|
@ -75,6 +118,7 @@ y.callService(
|
|||
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
|
||||
</div>{*<!-- imageToolBar -->*}
|
||||
|
||||
<div id="theImageAndInfos">
|
||||
<div id="theImage">
|
||||
{$ELEMENT_CONTENT}
|
||||
|
||||
|
|
@ -268,14 +312,17 @@ y.callService(
|
|||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if isset($COMMENT_COUNT)}
|
||||
<div id="comments">
|
||||
{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}
|
||||
{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}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,47 +2,6 @@
|
|||
{if isset($COMMENT_IMG)}
|
||||
title="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}" {else} title="{$current.TITLE|@replace:'"':' '} - {$ALT_IMG}"
|
||||
{/if}>
|
||||
{if count($current.unique_derivatives)>1}
|
||||
{footer_script}{literal}
|
||||
function changeImgSrc(url,typeSave,typeMap,typeDisplay)
|
||||
{
|
||||
var theImg = document.getElementById("theMainImage");
|
||||
if (theImg)
|
||||
{
|
||||
theImg.removeAttribute("width");theImg.removeAttribute("height");
|
||||
theImg.src = url;
|
||||
var elt = document.getElementById("derivativeSwitchLink");
|
||||
if (elt) elt.innerHTML = typeDisplay;
|
||||
theImg.useMap = "#map"+typeMap;
|
||||
}
|
||||
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+10)+"px";
|
||||
elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
|
||||
elt.style.display="";
|
||||
}
|
||||
else
|
||||
elt.style.display="none";
|
||||
}
|
||||
{/literal}{/footer_script}
|
||||
<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()">{$current.selected_derivative->get_type()|@translate}</a>
|
||||
<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
|
||||
{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
|
||||
<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}','{$derivative->get_type()|@translate|@escape:javascript}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br>
|
||||
{/foreach}
|
||||
{if isset($U_ORIGINAL)}
|
||||
<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{foreach from=$current.unique_derivatives item=derivative key=derivative_type}{strip}
|
||||
<map name="map{$derivative->get_type()}" id="map{$derivative->get_type()}">
|
||||
|
|
|
|||
|
|
@ -12,9 +12,11 @@
|
|||
{include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="theImage">
|
||||
{$ELEMENT_CONTENT}
|
||||
{if isset($COMMENT_IMG)}
|
||||
<p class="showlegend">{$COMMENT_IMG}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -340,14 +340,6 @@ TD.calDayHead {
|
|||
#imageToolBar .navigationButtons { float: right; }
|
||||
#imageToolBar .pwg-button {width:42px;}
|
||||
|
||||
|
||||
#derivativeSwitchLink {
|
||||
padding: 0.2em;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 12%;
|
||||
}
|
||||
|
||||
#derivativeSwitchBox, #sortOrderBox {
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 4px;
|
||||
|
|
@ -420,6 +412,7 @@ TD.calDayHead {
|
|||
clear: none;
|
||||
}
|
||||
|
||||
.noCommentText {display:none;}
|
||||
|
||||
/**
|
||||
* Default Layout
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ a:hover {border-bottom:none;}
|
|||
float:left;
|
||||
height:33px;
|
||||
cursor:pointer;
|
||||
margin: 26px 0 0 -33px;
|
||||
margin: 28px 0 0 -35px;
|
||||
}
|
||||
|
||||
#menubar,
|
||||
|
|
@ -26,7 +26,7 @@ a:hover {border-bottom:none;}
|
|||
|
||||
#menuswitcher.menuhidden {
|
||||
width:25px;
|
||||
margin: 28px 0 0 0;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
/* content */
|
||||
|
|
@ -39,14 +39,14 @@ a:hover {border-bottom:none;}
|
|||
background-color: #222;
|
||||
border-bottom: 2px solid #444;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.content .titrePage {
|
||||
background-color: #111;
|
||||
border-bottom: 2px solid #444;
|
||||
height: 28px;
|
||||
padding:0;
|
||||
margin-bottom:8px;
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
.content .titrePage H2 {
|
||||
|
|
@ -91,7 +91,7 @@ INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
|
|||
/* backgrounds */
|
||||
|
||||
|
||||
#imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
|
|||
}
|
||||
|
||||
/* borders */
|
||||
#derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{
|
||||
#derivativeSwitchBox, #sortOrderBox{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
|
|
@ -130,24 +130,35 @@ FIELDSET, INPUT, SELECT, TEXTAREA {
|
|||
#imageToolBar {margin-top: -28px;}
|
||||
#theImage, #imageInfos, #comments {background:#222;}
|
||||
#theImage {padding-top:10px;}
|
||||
#imageHeaderBar { height:28px;}
|
||||
#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;}
|
||||
#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;}
|
||||
#imageHeaderBar .imageNumber:before {content:'['}
|
||||
#imageHeaderBar .imageNumber:after {content:']'}
|
||||
#imageHeaderBar h2 {display:none;}
|
||||
#imageHeaderBar h2 {font-size:100%;}
|
||||
#thePicturePage .pwg-button {width:26px;}
|
||||
#thePicturePage .actionButtons {margin-right: 26px;}
|
||||
#imageToolBar {float:right;}
|
||||
|
||||
#thePicturePage #comments {padding-top:12px; padding-bottom:12px;}
|
||||
#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;}
|
||||
#copyright {padding-top:4px; text-align:right;}
|
||||
.noCommentText {display:block;}
|
||||
#copyright {padding:4px 4px 0 0; text-align:right;}
|
||||
|
||||
#thePicturePage .comments_toggle_on:before {content:'(+) '}
|
||||
#thePicturePage .comments_toggle_off:before {content:'(-) '}
|
||||
|
||||
.comments_hidden ul, .comments_hidden form {display:none;}
|
||||
.thumbnailCategory {background-color: #303030;}
|
||||
.comments_toggle {cursor: pointer;}
|
||||
.comments_toggle:hover {color:#fff;}
|
||||
|
||||
#the_page .content .stuffs {margin:0!important}
|
||||
|
||||
#thumbnails {padding-top: 5px;}
|
||||
|
||||
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;}
|
||||
|
||||
/* links */
|
||||
INPUT.rateButton {
|
||||
color: #fff;
|
||||
|
|
|
|||
Loading…
Reference in a new issue