diff options
author | Zaphod <zaphod@piwigo.org> | 2012-03-25 19:23:03 +0000 |
---|---|---|
committer | Zaphod <zaphod@piwigo.org> | 2012-03-25 19:23:03 +0000 |
commit | d91cd45790fd5a6a717af472f6459862dc38ea14 (patch) | |
tree | b98cf863bda2fe73c62b363455fe665dbef7cbdf /themes | |
parent | b1041fb217940f8e34a85cea63c27814f6df0dde (diff) |
feature 2587: theme elegant, new version
git-svn-id: http://piwigo.org/svn/trunk@13730 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r-- | themes/elegant/icon/arrows_ccc.png | bin | 0 -> 921 bytes | |||
-rw-r--r-- | themes/elegant/icon/arrows_fff.png | bin | 0 -> 562 bytes | |||
-rw-r--r-- | themes/elegant/icon/img_next.png | bin | 0 -> 941 bytes | |||
-rw-r--r-- | themes/elegant/icon/img_prev.png | bin | 0 -> 924 bytes | |||
-rw-r--r-- | themes/elegant/icon/none.png | bin | 0 -> 101 bytes | |||
-rw-r--r-- | themes/elegant/icon/rating-stars.png | bin | 0 -> 553 bytes | |||
-rw-r--r-- | themes/elegant/local_head.tpl | 6 | ||||
-rw-r--r-- | themes/elegant/scripts.js | 131 | ||||
-rw-r--r-- | themes/elegant/scripts_pp.js | 176 | ||||
-rw-r--r-- | themes/elegant/template/picture.tpl | 385 | ||||
-rw-r--r-- | themes/elegant/theme.css | 324 |
11 files changed, 805 insertions, 217 deletions
diff --git a/themes/elegant/icon/arrows_ccc.png b/themes/elegant/icon/arrows_ccc.png Binary files differnew file mode 100644 index 000000000..d4e0b3514 --- /dev/null +++ b/themes/elegant/icon/arrows_ccc.png diff --git a/themes/elegant/icon/arrows_fff.png b/themes/elegant/icon/arrows_fff.png Binary files differnew file mode 100644 index 000000000..a3a4cd675 --- /dev/null +++ b/themes/elegant/icon/arrows_fff.png diff --git a/themes/elegant/icon/img_next.png b/themes/elegant/icon/img_next.png Binary files differnew file mode 100644 index 000000000..be982ed82 --- /dev/null +++ b/themes/elegant/icon/img_next.png diff --git a/themes/elegant/icon/img_prev.png b/themes/elegant/icon/img_prev.png Binary files differnew file mode 100644 index 000000000..1061c77b5 --- /dev/null +++ b/themes/elegant/icon/img_prev.png diff --git a/themes/elegant/icon/none.png b/themes/elegant/icon/none.png Binary files differnew file mode 100644 index 000000000..f32e0d46b --- /dev/null +++ b/themes/elegant/icon/none.png diff --git a/themes/elegant/icon/rating-stars.png b/themes/elegant/icon/rating-stars.png Binary files differnew file mode 100644 index 000000000..b4d4de476 --- /dev/null +++ b/themes/elegant/icon/rating-stars.png diff --git a/themes/elegant/local_head.tpl b/themes/elegant/local_head.tpl index 8279d6f15..0c935140e 100644 --- a/themes/elegant/local_head.tpl +++ b/themes/elegant/local_head.tpl @@ -1 +1,5 @@ -{combine_script id='elegant.scripts' require='jquery' path='themes/elegant/scripts.js'}
+{if $BODY_ID=='thePicturePage'}
+ {combine_script id='elegant.scripts_pp' load='header' require='jquery' path='themes/elegant/scripts_pp.js'}
+{else}
+ {combine_script id='elegant.scripts' load='header' require='jquery' path='themes/elegant/scripts.js'}
+{/if}
\ No newline at end of file diff --git a/themes/elegant/scripts.js b/themes/elegant/scripts.js index d6e9d7cc5..20433ac65 100644 --- a/themes/elegant/scripts.js +++ b/themes/elegant/scripts.js @@ -1,109 +1,78 @@ -jQuery("document").ready(function(jQuery){
-
- var menubar=jQuery("#menubar");
- var content=jQuery("#content");
-
- if ( (menubar.length == 1) && (content.length ==1)) {
- menubar.after("<div id=\"menuswitcher\">«</div>");
-
- jQuery("#menuswitcher").click(function(){
- if (jQuery("#menubar").is(":hidden")) {
- showMenu(0);
- return false;
- } else {
- hideMenu(0);
- return false;
- }
- });
-
- // creates a variable with the contents of the cookie side-menu
- var sidemenu = jQuery.cookie('side-menu');
-
- // if cookie says the menu is hiding, keep it hidden!
- if (sidemenu == 'hiding') {
- hideMenu(0);
- } else {
- showMenu(0);
- }
-
- }
-
- var comments=jQuery("#thePicturePage #comments");
- if (comments.length == 1) {
- var comments_button=jQuery("#comments h3");
-
- if (comments_button.length == 0) {
- jQuery("#addComment").before("<h3>Comments</h3>");
- comments_button=jQuery("#comments h3");
- }
-
- if (jQuery.cookie('comments') == 'visible') {
- comments_button.addClass("comments_toggle").addClass("comments_toggle_off");
- } else {
- comments.addClass("comments_hidden");
- comments_button.addClass("comments_toggle").addClass("comments_toggle_on");
- }
-
- comments_button.click(function() {
+/**
+ * Cookie plugin
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ */
+jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;}
+var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}
+expires='; expires='+date.toUTCString();}
+var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
+return cookieValue;}};
- var comments=jQuery("#thePicturePage #comments");
- if (comments.hasClass("comments_hidden")) {
- comments.removeClass("comments_hidden");
- comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");;
- jQuery.cookie('comments', 'visible', {path: "/"});
- } else {
- comments.addClass("comments_hidden");
- comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");;
- jQuery.cookie('comments', 'hidden', {path: "/"});
- }
-
- });
-
- }
-
-
-});
+if (jQuery.cookie('page-menu') == 'hidden') {
+ jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>");
+} else {
+ jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>");
+}
function hideMenu(delay) {
-
var menubar=jQuery("#menubar");
- var menuswitcher=jQuery("#menuswitcher");
+ var menuswitcher=jQuery("#menuSwitcher");
var content=jQuery("#the_page > .content");
var pcontent=jQuery("#content");
menubar.hide(delay);
menuswitcher.addClass("menuhidden").removeClass("menushown");
- menuswitcher.text("»");
content.addClass("menuhidden").removeClass("menushown");
pcontent.addClass("menuhidden").removeClass("menushown");
- jQuery.cookie('side-menu', 'hiding', {path: "/"});
+ jQuery.cookie('page-menu', 'hidden', {path: "/"});
}
function showMenu(delay) {
var menubar=jQuery("#menubar");
- var menuswitcher=jQuery("#menuswitcher");
+ var menuswitcher=jQuery("#menuSwitcher");
var content=jQuery("#the_page > .content");
var pcontent=jQuery("#content");
menubar.show(delay);
menuswitcher.addClass("menushown").removeClass("menuhidden");
- menuswitcher.text("«");
content.addClass("menushown").removeClass("menuhidden");
pcontent.addClass("menushown").removeClass("menuhidden");
- jQuery.cookie('side-menu', 'showing', {path: "/"});
+ jQuery.cookie('page-menu', 'visible', {path: "/"});
}
-/**
- * Cookie plugin
- * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
- * Dual licensed under the MIT and GPL licenses:
- */
-jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;}
-var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}
-expires='; expires='+date.toUTCString();}
-var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
-return cookieValue;}};
+jQuery("document").ready(function(jQuery){
+
+ var sidemenu = jQuery.cookie('page-menu');
+ var menubar=jQuery("#menubar");
+
+ if (menubar.length == 1) {
+
+ jQuery("#menuSwitcher").html("<div class=\"switchArrow\"> </div>");
+
+ // if cookie says the menu is hiding, keep it hidden!
+ if (sidemenu == 'hidden') {
+ hideMenu(0);
+ } else {
+ showMenu(0);
+ }
+
+ jQuery("#menuSwitcher").click(function(){
+ if (jQuery("#menubar").is(":hidden")) {
+ showMenu(0);
+ return false;
+ } else {
+ hideMenu(0);
+ return false;
+ }
+ });
+
+
+ }
+
+});
+
diff --git a/themes/elegant/scripts_pp.js b/themes/elegant/scripts_pp.js new file mode 100644 index 000000000..92e8cfc06 --- /dev/null +++ b/themes/elegant/scripts_pp.js @@ -0,0 +1,176 @@ +/**
+ * Cookie plugin
+ * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
+ * Dual licensed under the MIT and GPL licenses:
+ */
+jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;}
+var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}
+expires='; expires='+date.toUTCString();}
+var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
+return cookieValue;}};
+
+if (jQuery.cookie('picture-menu') == 'visible') {
+ jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>");
+} else {
+ jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>");
+}
+
+function hideMenu(delay) {
+ var menubar=jQuery("#menubar");
+ var menuswitcher=jQuery("#menuSwitcher");
+ var content=jQuery("#the_page > .content");
+ var pcontent=jQuery("#content");
+
+ menubar.hide(delay);
+ menuswitcher.addClass("menuhidden").removeClass("menushown");
+ content.addClass("menuhidden").removeClass("menushown");
+ pcontent.addClass("menuhidden").removeClass("menushown");
+ jQuery.cookie('picture-menu', 'hidden', {path: "/"});
+
+}
+
+function showMenu(delay) {
+
+ var menubar=jQuery("#menubar");
+ var menuswitcher=jQuery("#menuSwitcher");
+ var content=jQuery("#the_page > .content");
+ var pcontent=jQuery("#content");
+
+ menubar.show(delay);
+ menuswitcher.addClass("menushown").removeClass("menuhidden");
+ content.addClass("menushown").removeClass("menuhidden");
+ pcontent.addClass("menushown").removeClass("menuhidden");
+ jQuery.cookie('picture-menu', 'visible', {path: "/"});
+
+}
+
+function hideInfo(delay) {
+
+ var imageInfos=jQuery("#imageInfos");
+ var infoswitcher=jQuery("#infoSwitcher");
+ var theImage=jQuery("#theImage");
+
+ imageInfos.hide(delay);
+ infoswitcher.addClass("infohidden").removeClass("infoshown");
+ theImage.addClass("infohidden").removeClass("infoshown");
+ jQuery.cookie('side-info', 'hidden', {path: "/"});
+
+}
+
+function showInfo(delay) {
+
+ var imageInfos=jQuery("#imageInfos");
+ var infoswitcher=jQuery("#infoSwitcher");
+ var theImage=jQuery("#theImage");
+
+ imageInfos.show(delay);
+ infoswitcher.addClass("infoshown").removeClass("infohidden");
+ theImage.addClass("infoshown").removeClass("infohidden");
+ jQuery.cookie('side-info', 'visible', {path: "/"});
+
+}
+
+jQuery("document").ready(function(jQuery){
+
+ // side-menu show/hide
+
+ var sidemenu = jQuery.cookie('picture-menu');
+ var menubar=jQuery("#menubar");
+
+ if (menubar.length == 1) {
+
+ jQuery("#menuSwitcher").html("<div class=\"switchArrow\"> </div>");
+
+ // if cookie says the menu is hiding, keep it hidden!
+ if (sidemenu == 'visible') {
+ showMenu(0);
+ } else {
+ hideMenu(0);
+ }
+
+ jQuery("#menuSwitcher").click(function(){
+ if (jQuery("#menubar").is(":hidden")) {
+ showMenu(0);
+ return false;
+ } else {
+ hideMenu(0);
+ return false;
+ }
+ });
+
+ }
+
+ // info show/hide
+
+ var sideinfo = jQuery.cookie('side-info');
+ var imageInfos=jQuery("#imageInfos");
+
+ if (imageInfos.length == 1) {
+
+ jQuery("#infoSwitcher").html("<div class=\"switchArrow\"> </div>");
+
+ // if cookie says the menu is hiding, keep it hidden!
+ if (sideinfo == 'hidden') {
+ hideInfo(0);
+ } else {
+ showInfo(0);
+ }
+
+ jQuery("#infoSwitcher").click(function(){
+ if (jQuery("#imageInfos").is(":hidden")) {
+ showInfo(0);
+ return false;
+ } else {
+ hideInfo(0);
+ return false;
+ }
+ });
+
+ }
+
+ // comments show/hide
+
+ var commentsswicther=jQuery("#commentsSwitcher");
+ var comments=jQuery("#thePicturePage #comments");
+
+ commentsswicther.html("<div class=\"switchArrow\"> </div>");
+
+ if (comments.length == 1) {
+ var comments_button=jQuery("#comments h3");
+
+ if (comments_button.length == 0) {
+ jQuery("#addComment").before("<h3>Comments</h3>");
+ comments_button=jQuery("#comments h3");
+ }
+
+ if (jQuery.cookie('comments') == 'visible') {
+ comments.addClass("commentsshown");
+ comments_button.addClass("comments_toggle").addClass("comments_toggle_off");
+ } else {
+ comments.addClass("commentshidden");
+ comments_button.addClass("comments_toggle").addClass("comments_toggle_on");
+ }
+
+ comments_button.click(function() { commentsToggle() });
+ commentsswicther.click(function() { commentsToggle() });
+
+ }
+
+
+});
+
+function commentsToggle() {
+ var comments=jQuery("#thePicturePage #comments");
+ var comments_button=jQuery("#comments h3");
+
+ if (comments.hasClass("commentshidden")) {
+ comments.removeClass("commentshidden").addClass("commentsshown");
+ comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");;
+ jQuery.cookie('comments', 'visible', {path: "/"});
+ } else {
+ comments.addClass("commentshidden").removeClass("commentsshown");
+ comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");;
+ jQuery.cookie('comments', 'hidden', {path: "/"});
+ }
+
+}
diff --git a/themes/elegant/template/picture.tpl b/themes/elegant/template/picture.tpl new file mode 100644 index 000000000..e509ccaf1 --- /dev/null +++ b/themes/elegant/template/picture.tpl @@ -0,0 +1,385 @@ +{* Example of resizeable +{include file='include/autosize.inc.tpl'} +*} +{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} +{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if} + +<div id="imageHeaderBar"> + <div class="browsePath"> + {$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2> + </div> +</div> + +<div id="imageToolBar"> +<div class="imageNumber">{$PHOTO}</div> +<div class="actionButtons"> + +{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}<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 class="switchBoxTitle">{'Photo sizes'|@translate}</div> +{foreach from=$current.unique_derivatives item=derivative key=derivative_type} +<span class="derivativeChecked switchCheck" + id="derivativeChecked{$derivative_type}" {if $derivative->get_type() ne $current.selected_derivative->get_type()}style="display:none"{/if}>✔ </span> +<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')" + id="derivativeName{$derivative_type}" + class="{if $derivative->get_type() == $current.selected_derivative->get_type()}switchSelected{else}switchUnselected{/if}"> + {$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span> +</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> + </a> +{/if}{/strip} +{strip}{if isset($U_METADATA)} + <a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-camera-info"> </span><span class="pwg-button-text">{'Show file metadata'|@translate}</span> + </a> +{/if}{/strip} +{strip}{if isset($current.U_DOWNLOAD)} + <a href="{$current.U_DOWNLOAD}" title="{'Download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-save"> </span><span class="pwg-button-text">{'Download'|@translate}</span> + </a> +{/if}{/strip} +{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if} +{strip}{if isset($favorite)} + <a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this photo from your favorites'|@translate}{else}{'add this photo to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}"> </span><span class="pwg-button-text">{'Favorites'|@translate}</span> + </a> +{/if}{/strip} +{strip}{if isset($U_SET_AS_REPRESENTATIVE)} + <a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as album representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-representative"> </span><span class="pwg-button-text">{'representative'|@translate}</span> + </a> +{/if}{/strip} +{strip}{if isset($U_ADMIN)} + <a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-edit"> </span><span class="pwg-button-text">{'Edit'|@translate}</span> + </a> +{/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} + <a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL}', {$current.id}); return false;" title="{'Add to caddie'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> + <span class="pwg-icon pwg-icon-caddie-add"> </span><span class="pwg-button-text">{'Caddie'|@translate}</span> + </a> +{/if}{/strip}{*caddie management END*} +</div> + + {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} +</div>{*<!-- imageToolBar -->*} + +<div id="theImageAndInfos"> +<div id="theImage"> +{$ELEMENT_CONTENT} + +{if isset($COMMENT_IMG)} +<p class="imageComment">{$COMMENT_IMG}</p> +{/if} + +{if isset($U_SLIDESHOW_STOP)} +<p> + [ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'|@translate}</a> ] +</p> +{/if} + +</div><!-- + +--><div id="infoSwitcher"></div><!-- +--><div id="imageInfos"> +{if $DISPLAY_NAV_THUMB} + <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} + +<dl id="standard" class="infoTable"> +{strip} + {if $display_info.author} + <div id="Author"> + <dt>{'Author'|@translate}</dt> + <dd>{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}</dd> + </div> + {/if} + {if $display_info.created_on} + <div id="datecreate"> + <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} + <div id="datepost"> + <dt>{'Posted on'|@translate}</dt> + <dd>{$INFO_POSTED_DATE}</dd> + </div> + {/if} + {if $display_info.dimensions} + <div id="Dimensions"> + <dt>{'Dimensions'|@translate}</dt> + <dd>{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}</dd> + </div> + {/if} + {if $display_info.file} + <div id="File"> + <dt>{'File'|@translate}</dt> + <dd>{$INFO_FILE}</dd> + </div> + {/if} + {if $display_info.filesize} + <div id="Filesize"> + <dt>{'Filesize'|@translate}</dt> + <dd>{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}</dd> + </div> + {/if} + {if $display_info.tags } + <div id="Tags"> + <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} + </dd> + </div> + {/if} + {if $display_info.categories} +<!-- <div id="Categories">--> + <dt>{'Albums'|@translate}</dt> + <dd> + {if isset($related_categories)} + <ul> + {foreach from=$related_categories item=cat} + <li>{$cat}</li> + {/foreach} + </ul> + {/if} + </dd> +<!-- </div>--> + {/if} + {if $display_info.visits} + <div id="Visits"> + <dt>{'Visits'|@translate}</dt> + <dd>{$INFO_VISITS}</dd> + </div> + {/if} + +{if $display_info.rating_score and isset($rate_summary)} + <div id="Average"> + <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} + </dd> + </div> +{/if} + +{if isset($rating)} + <div id="rating"> + <dt> + <span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if}</span> + </dt> + <dd> + <form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;"> + <div> + {foreach from=$rating.marks item=mark name=rate_loop} + {if isset($rating.USER_RATE) && $mark==$rating.USER_RATE} + <input type="button" name="rate" value="{$mark}" class="rateButtonSelected" title="{$mark}"> + {else} + <input type="submit" name="rate" value="{$mark}" class="rateButton" title="{$mark}"> + {/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} + </div> + </form> + </dd> + </div> +{/if} + +{if $display_info.privacy_level and isset($available_permission_levels)} + <div id="Privacy"> + <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(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} + + <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="display:none;"{/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> +{/if} +{/strip} +</dl> + +{if isset($metadata)} +<dl id="Metadata" class="infoTable2"> +{foreach from=$metadata item=meta} + <h3>{$meta.TITLE}</h3> + {foreach from=$meta.lines item=value key=label} + <dt>{$label}</dt> + <dd>{$value}</dd> + {/foreach} +{/foreach} +</dl> +{/if} +</div> +</div> + +{if isset($COMMENT_COUNT)} +<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> + {/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} +</div> +{/if}{*comments*} + +{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if} + +</div> diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css index 1997d5dc6..c6b072249 100644 --- a/themes/elegant/theme.css +++ b/themes/elegant/theme.css @@ -1,183 +1,237 @@ -/* colors & backgrounds */ +/* backgorunds */ -html, body {background-color:#111;} +html, body { background-color: #111;} -body {margin: 5px 0;} +#content, .content { background-color: #222;} +.content .titrePage { background-color: #111;} -a:hover {border-bottom:none;} +#menubar, #the_page #menuSwitcher.menuhidden { background-color: #222;} -#menuswitcher { - display:block; - font-size:200%; - text-align:center; - float:left; - height:33px; - cursor:pointer; - margin: 28px 0 0 -35px; -} +#thePicturePage, #imageHeaderBar { background-color: #111;} +#imageInfos, #infoSwitcher.infohidden { background-color: #333;} +#thePicturePage #comments { background-color: #333;} -#menubar, -#menuswitcher.menuhidden { - border-radius : 0 10px 10px 0; - background-color: #222; - border: solid 1px #333; - border-width: 2px 2px 2px 0; -} +.switchBox, .header_notes { background-color: #555;} +.thumbnailCategory, .commentElement { background-color: #333;} +.message { background-color: #666;} -#menuswitcher.menuhidden { - width:25px; - margin-left:0; -} +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;} -/* content */ -#content.menushown, #the_page > .content.menushown { margin-left:240px;} -#content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;} -#content, #the_page > .content { margin-right:0;} +/* font colors */ -#content,.content { - background-color: #222; - border-bottom: 2px solid #444; - margin-bottom: 4px; - padding-bottom: 4px; -} +body, legend { color: #aaa;} +a { color: #ccc;} +a:hover { color: #fff;} +INPUT.rateButton { color: #fff;} +H1, H3, INPUT.rateButtonSelected { color: #ccc;} +.message { color: #fff;} +.commentContent .comments_toggle:hover { color: #fff;} -#thePicturePage #content {padding-bottom:0;} -.content .titrePage { - background-color: #111; - border-bottom: 2px solid #444; - padding:0; - margin-bottom:4px; -} +/* borders */ -.content .titrePage H2 { - line-height: 20px; - margin: 0; - padding: 8px 0 0 2px; -} +#content,.content, .content .titrePage { border-bottom: 2px solid #444;} +#imageHeaderBar { border: solid 0 #444; border-bottom-width:2px;} +#copyright { border-top-width:2px;} +.switchBox { border: 1px solid #000;} +.switchBoxTitle { border-bottom: 1px solid #444;} +FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #999;} + + +/* icons */ +.pwg-icon { background-image: url(../default/s26/outline_808080.png);} +A:hover .pwg-icon { background-image: url(../default/s26/outline_ffffff.png);} -body { color: #999;} -a { color: #ccc;} -a:hover { color: #fff;} +/* general rules */ + +body { margin: 5px 0;} +a:hover { border-bottom: none;} +#copyright { padding:0 4px 0 0; text-align:right;} + + +/* content */ + +#the_page #content.menushown, #the_page > .content.menushown, .contentWithMenu { margin-left: 240px;} +#the_page #content.menuhidden, #the_page > .content.menuhidden { margin-left: 35px;} +#the_page #content, #the_page > .content { margin-right: 0;} + +#content,.content { margin-bottom: 4px; padding-bottom: 4px;} +#thePicturePage #content { padding-bottom: 0;} +.content .titrePage { padding:0; margin-bottom:4px;} +.content .titrePage H2 { line-height: 20px; margin: 0; padding: 8px 0 0 2px;} /* menubar */ -#menubar { +#menubar { + display: inline; + width: 230px; float: left; - margin: 28px 13px 10px 0; + margin: 28px 8px 10px 0; padding: 0; - display: inline; - width: 225px; } +#menubar DT { text-align: left;} +#menubar dd { padding: 0 0 1em 1em;} +#menubar .pwg-icon-filter { display: none;} -#menubar DT { color: #999; text-align:left;} -#menubar DT a { color: #ccc;} -#menubar DT a:hover { color: #fff;} -#menubar dd { padding: 0 0 1em 1em;} -/* text color */ -BODY, H1, H3, -INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ { - color:#d0d0d0; -} +/* switchers */ -#menubar .pwg-icon-filter {display:none;} +#menuSwitcher { + display: block; + text-align: center; + height: 32px; + cursor: pointer; + float: left; + margin: 28px 0 0 -34px; +} +#imageInfos, #infoSwitcher.infohidden { border-radius: 10px 0 0 10px;} +#menubar, #the_page #menuSwitcher.menuhidden { border-radius: 0 10px 10px 0;} +#the_page #menuSwitcher.menuhidden { width: 25px; margin-left: 0;} +#infoSwitcher { + display: block; + text-align: center; + height: 32px; + cursor: pointer; + position:absolute; + left:75%; + top:0; + margin: 10px 0 0 7px; + z-index:99; +} -/* backgrounds */ +#infoSwitcher.infohidden { + width:25px; + top:10px; + right:0; + left:auto; + margin:0; +} +#theImage.infohidden { width: 100%;} -#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { - background-color: #505050; -} +#commentsSwitcher { float: left; margin:3px 0; cursor:pointer;} +.noCommentContent #commentsSwitcher { display: none;} -#imageHeaderBar H2 { - background-image: none; -} +.switchArrow { width: 16px; height: 16px; margin: 8px 5px 8px 4px;} +.switchArrow { background: transparent url("icon/arrows_ccc.png");} +.switchArrow:hover { background: transparent url("icon/arrows_fff.png");} +.menuhidden .switchArrow { background-position: 0 0;} +.menushown .switchArrow { background-position: -16px 0;} +.infohidden .switchArrow { background-position: -16px 0;} +.infoshown .switchArrow { background-position: 0 0;} +.commentshidden .switchArrow { background-position: -48px 0;} +.commentsshown .switchArrow { background-position: -32px 0;} -#imageHeaderBar { - border-top: 1px solid #000; -} -/* borders */ -#derivativeSwitchBox, #sortOrderBox { - border: 2px solid #444; -} +/* switchboxes */ -.switchBoxTitle { - border-bottom:2px solid #444; +.switchBox { + border-radius: 4px 4px 4px 4px; + padding: 0.5em 10px; + 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} -FIELDSET, INPUT, SELECT, TEXTAREA { - border: 1px solid gray; -} +/* thumbnails */ +#thumbnails { padding-top: 5px;} +.thumbnails IMG { margin-bottom: 0; vertical-align: middle;} +.thumbnailCategory DIV.illustration, +.commentElement DIV.illustration { margin: 2px; text-align: center;} -.thumbnails IMG {margin-bottom:0; vertical-align:middle;} -.thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;} /* picture page */ -#thePicturePage {background-color:#111;} -#imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;} -.contentWithMenu #imageHeaderBar {padding:0;} -#copyright {border-top-width:2px;} -#imageHeaderBar {border-bottom-width:2px; width:auto; background:#111} -#imageToolBar {background:none;} -#imageToolBar {margin-top: -28px; margin-bottom:0;} -#theImage {padding-top:10px;} -#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 {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 h3 {margin-top:10px; margin-bottom:10px;} -#thePicturePage #comments form { margin-bottom:10px;} -#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;} -.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, .commentElement {background-color: #333;} -.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; + +.contentWithMenu #imageHeaderBar { padding: 0;} +#imageHeaderBar { padding: 0 0 0 10px;} +#imageHeaderBar { width: auto;} +#imageHeaderBar h2 { font-size: 100%; font-weight: inherit;} +#imageHeaderBar .browsePath { + display:inline-block; + float:none; + font-size:120%; + line-height:20px; + padding: 8px 0 0 2px; + font-weight:bold; + margin:0; } +.imageNumber { display: inline-block; float: right; line-height: 26px; margin-right: 2px; 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;} -.pwg-icon { - background-image: url(../default/s26/outline_808080.png); +#theImageAndInfos { + display: block; + width: 100%; + position: relative; +} +#theImage { + display: inline-block; + width: 75%; + vertical-align: top; + overflow: auto; + padding: 10px 0 5px 0; } -A:hover .pwg-icon { - background-image: url(../default/s26/outline_ffffff.png); +.rateButtonStarFull { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;} +.rateButtonStarEmpty { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;} + + +/* image infos */ + +#imageInfos { + display: inline-block; + width: 24.5%; + vertical-align: top; + padding-top: 35px; + padding-bottom: 5px; + margin: 10px 0 10px 0.5%; + word-wrap:break-word; } -.message { - color:white; - background-color:#666; -}
\ No newline at end of file +#imageInfos .navThumbs { width: 250px; height: 130px; margin: auto; padding: 0 5px;} +#imageInfos .navThumb { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;} +#imageInfos #linkPrev { float: left;} +#imageInfos #linkNext { float: right;} +#imageInfos .thumbHover { position: absolute; width: 100%; height: 100%;} +#imageInfos .prevThumbHover { background: transparent url(icon/none.png) no-repeat center center;} +#imageInfos .prevThumbHover:hover { background: transparent url(icon/img_prev.png) no-repeat center center;} +#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 h3 { margin: 20px 0 10px;} + + +/* image comments */ + +#thePicturePage #comments { padding: 2px 5px;} +#thePicturePage #comments h3 { margin: 10px 0;} +#thePicturePage #comments form { margin-bottom: 10px;} +#thePicturePage #comments fieldset { margin: 0 1em;} + +.noCommentText { display:block;} +.commentshidden ul, +.commentshidden form {display:none;} +.commentContent .comments_toggle {cursor: pointer;} + + +/* plugins */ + +#the_page .content .stuffs { margin: 0!important} +.categoryActions .theme_menuf { display: none;}
\ No newline at end of file |