[Blends-commit] [SCM] website branch, master, updated. 9d37e39709be7d604048ef6f3ff1a41cd0ae857c

Mon Dec 7 16:00:49 UTC 2015

The following commit has been merged in the master branch:
commit be905ee2b5790785c4eb3810c8e1cad1c8bff35b
Author: Ole Streicher <debian at liska.ath.cx>
Date:   Mon Dec 7 16:44:45 2015 +0100

    Use CSS (non-javascript) tooltips

diff --git a/webtools/templates/packages.xhtml b/webtools/templates/packages.xhtml
index 2dd4d0a..95a84ce 100644
--- a/webtools/templates/packages.xhtml
+++ b/webtools/templates/packages.xhtml
@@ -13,9 +13,30 @@
     <link href="http://blends.debian.org/css/blends.css" rel="stylesheet"
 	  type="text/css" />
     <style type="text/css">
-.tooltip {
-	display:none;
+// The tooltip is from http://www.menucool.com/tooltip/css-tooltip
+a.tooltip { }
+
+a.tooltip:hover {
+    cursor:pointer;
+}
+a.tooltip span {
+    z-index:10;
+    display:none;
+    padding:14px 20px;
+    margin-top:-30px;
+    margin-left:28px;
+    line-height:16px;
+    border-radius:4px;
+    box-shadow: 5px 5px 8px #CCC;
 }
+a.tooltip:hover span{
+    display:inline;
+    position:absolute;
+    color:#111;
+    border:1px solid #DCA;
+    background:#fffAF0;
+}
+
 .pkgdesc-full {
     background-image: none;
     background:#f8f8ff;
@@ -83,7 +104,7 @@ ul.desc-inline li + li::before {
 a.editlink {
     float: left;
     position: relative;
-    text-decoration-line: unset;
+    text-decoration: none;
     padding-right: 0.5em;
 }
     </style>
@@ -115,7 +136,6 @@ function show_fulldesc(hash) {
   </script>
   </head>
   <body onload="show_fulldesc(window.location.hash)">
-    <script type="text/javascript" src="http://blends.debian.org/js/wz_tooltip.js"></script>
     <div id="header">
       <div id="upperheader">
 	<div id="logo">
@@ -249,20 +269,19 @@ function show_fulldesc(hash) {
 		    <py:choose>
 		      <py:when test="project.icon">
 			<dt class="screenshot">
-			  <span class="tooltip" id="${project.pkg}-screenshot">
-			    <img src="${project.image}" />
-			    <table py:if="project.screenshots != []" class="versionclass">
-			      <tr><th colspan="3"
-				      class="versionclass"><strong>Other screenshots of package ${project.pkg}</strong></th></tr>
-			      <tr><th class="version">Version</th><th class="archs">URL</th></tr>
-			      <py:for each="screenshot in project.screenshots">
-				<tr><td class="version">${screenshot['version']}</td><td class="archs"><a href="${screenshot['url']}">${screenshot['url']}</a></td></tr>
-			      </py:for>
-			    </table>
-			  </span>
-			  <a href="http://screenshots.debian.net/package/${project.pkg}">
-			    <img onmouseover="TagToTip('${project.pkg}-screenshot')" onmouseout="UnTip()"
-				 src="${project.icon}" alt="Description:"/>
+			  <a class="tooltip" href="http://screenshots.debian.net/package/${project.pkg}">
+			    <img src="${project.icon}" alt="Description:" />
+			    <span class="tooltip">
+			      <img src="${project.image}" />
+			      <table py:if="project.screenshots != []" class="versionclass">
+				<tr><th colspan="3"
+					class="versionclass"><strong>Other screenshots of package ${project.pkg}</strong></th></tr>
+				<tr><th class="version">Version</th><th class="archs">URL</th></tr>
+				<py:for each="screenshot in project.screenshots">
+				  <tr><td class="version">${screenshot['version']}</td><td class="archs"><a href="${screenshot['url']}">${screenshot['url']}</a></td></tr>
+				</py:for>
+			      </table>
+			    </span>
 			  </a>
 			</dt>
 		      </py:when>

-- 
Static and dynamic websites for Debian Pure Blends

