From 56f29767a83b7f616962db2ffde2ae45f46ae831 Mon Sep 17 00:00:00 2001
From: chrisaga <chrisaga@piwigo.org>
Date: Thu, 20 Oct 2005 19:06:17 +0000
Subject: bug 176 fixed: need a javascript to handle transparent PNG background
 in IE 	(tribute to Bob Osola http://homepage.ntlworld.com/bobosola/index.htm

display: fixed another IE childselector bug in Categories Management admin page
	and improved display of this page in all browsers too.


git-svn-id: http://piwigo.org/svn/trunk@905 68402e56-0260-453c-a942-63ccdbb3a9ee
---
 doc/ChangeLog                    |  8 ++++++++
 include/pngfix.js                | 29 +++++++++++++++++++++++++++++
 template/yoga/admin/cat_list.tpl |  7 ++++---
 template/yoga/default-layout.css | 12 ++++++++----
 template/yoga/header.tpl         |  3 +++
 5 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 include/pngfix.js

diff --git a/doc/ChangeLog b/doc/ChangeLog
index c773565ca..61d5977b3 100644
--- a/doc/ChangeLog
+++ b/doc/ChangeLog
@@ -1,3 +1,11 @@
+2005-10-20 chrisaga
+
+	* bug 176 fixed: need a javascript to handle transparent PNG background in IE
+	(tribute to Bob Osola http://homepage.ntlworld.com/bobosola/index.htm
+
+	* display: fixed another IE childselector bug in Categories Management admin page
+	and improved display of this page in all browsers too.
+
 2005-10-18 Pierrick LE GALL
 
 	* bug 174 fixed: use_exif_mapping configuration parameter was not
diff --git a/include/pngfix.js b/include/pngfix.js
new file mode 100644
index 000000000..ba1a099ae
--- /dev/null
+++ b/include/pngfix.js
@@ -0,0 +1,29 @@
+
+// Correctly handle PNG transparency in Win IE 5.5 or higher.
+// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
+
+function correctPNG() 
+   {
+   for(var i=0; i<document.images.length; i++)
+      {
+	  var img = document.images[i]
+	  var imgName = img.src.toUpperCase()
+	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
+	     {
+		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
+		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
+		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
+		 var imgStyle = "display:inline-block;" + img.style.cssText 
+		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
+		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
+		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
+		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
+		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
+		 img.outerHTML = strNewHTML
+		 i = i-1
+	     }
+      }
+   }
+window.attachEvent("onload", correctPNG);
\ No newline at end of file
diff --git a/template/yoga/admin/cat_list.tpl b/template/yoga/admin/cat_list.tpl
index eac26fa78..5d968eaa1 100644
--- a/template/yoga/admin/cat_list.tpl
+++ b/template/yoga/admin/cat_list.tpl
@@ -5,10 +5,10 @@
 
 <form id="categoryOrdering" action="" method="post">
 
-  <ul>
+  <ul class="categoryUl">
 
     <!-- BEGIN category -->
-    <li> <!-- category {category.ID} -->
+    <li class="categoryLi"> <!-- category {category.ID} -->
 
       <ul class="categoryActions">
         <li><a href="{category.U_JUMPTO}" title="{lang:jump to category}"><img src="./template/yoga/theme/category_jump-to.png" alt="{lang:jump to}" /></a></li> 
@@ -37,11 +37,12 @@
     </li>
     <!-- END category -->
 
+  </ul>
   <p><input name="submitOrder" type="submit" value="{lang:Save order}" /></p>
 
 </form>
 
-<form action="{F_ACTION}" method="post">
+<form id="addVirtual" action="{F_ACTION}" method="post">
   {L_ADD_VIRTUAL} : <input type="text" name="virtual_name" />
   <input type="hidden" name="rank" value="{NEXT_RANK}"/>
   <input type="submit" value="{L_SUBMIT}" name="submitAdd" />
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index e3f2a65ff..bb8bb50eb 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -139,19 +139,23 @@ select.categoryList {
 }
 
 form#add_virtual p { text-align: left; }
-form#categoryOrdering p {
+FORM#categoryOrdering, FORM#addVirtual {
+  padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
+  padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
+}
+FORM#categoryOrdering p {
 	text-align: left;
 	margin-top: 1em;
 	margin-bottom: 1em;
 }
-form#categoryOrdering>ul {
+UL.categoryUl {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-form#categoryOrdering>ul>li {
-  border: 1px solid grey;
+LI.categoryLi {
+  border: 1px solid gray;
   padding: 0px 5px;
   margin-bottom: 5px;
 }
diff --git a/template/yoga/header.tpl b/template/yoga/header.tpl
index 5f9b51c30..c56aeb480 100644
--- a/template/yoga/header.tpl
+++ b/template/yoga/header.tpl
@@ -19,6 +19,9 @@
 <!-- END refresh -->
 <title>{PAGE_TITLE}</title>
 <script type="text/javascript" src="include/scripts.js"></script>
+<!--[if gte IE 5.5000]>
+<script type="text/javascript" src="include/pngfix.js"></script>
+<![endif]-->
 </head>
 
 <body id="{BODY_ID}">
-- 
cgit v1.2.3