Re: Help needed for screenshots

["Bruno Félix Rezende Ribeiro" <oitofelix@gnu.org>]

[-- Attachment #1: Type: text/plain, Size: 1217 bytes --]

Em Tue, 18 Nov 2014 21:45:43 +0100
ludo@gnu.org (Ludovic Courtès) escreveu:

> All in all, I’m happy to apply a patch that would move it to a
> different page, or make it smaller and light-grey, something like
> that.

Attached is a patch that fix the cluttering issue.  I've taken an
alternative design however: one that neither requires the creation
of another dedicated page, nor makes the JS license table always
visible on the main page.

The attached patch makes the logo of LibreJS float over the left
side of the footer's gray bar of links ("GNU home page ... Site map").
When the mouse cursor hovers over it, it expands to the full JS license
table, which is detached and floating over the main web page.  It's
simple, but works well.

This patch adds no Javascript code.  It adds only CSS code in-lined in
the page's header.

The file 'images.txz' contains the LibreJS logo, please extract it in
the root directory.

I hope it does the job.

-- 
 ,= ,-_-. =.  Bruno Félix Rezende Ribeiro (oitofelix) [0x28D618AF]
((_/)o o(\_)) There is no system but GNU;
 `-'(. .)`-'  GNU Linux-Libre is one of its official kernels;
     \_/      All software must be free as in freedom;

[-- Attachment #2: guix.html.patch --]
[-- Type: text/x-patch, Size: 3342 bytes --]

--- guix.html.~1.107.~	2014-11-18 22:14:10.286872776 -0200
+++ guix.html	2014-11-19 02:05:19.950875208 -0200
@@ -11,6 +11,33 @@
     width: 640px;
     height: 480px;
   }
+
+  #librejs-widget {
+    position: relative;
+  }
+
+  #librejs-widget > div {
+    position: absolute;
+    top: 18px;
+  }
+
+  #jslicense-labels1 {
+    display: none;
+    background: orange;
+  }
+
+  #jslicense-labels1 > thead {
+    background: darkorange;
+  }
+
+  #librejs-widget:hover > div > a {
+    display: none;
+  }
+
+  #librejs-widget:hover #jslicense-labels1 {
+    display: block;
+  }
+
 </style>
 
 <link rel="stylesheet" href="scripts/galleria/themes/galleria-classicmod/galleria.classicmod.css" />
@@ -469,41 +496,48 @@
        alt="GPL version 3" />
 </center>
 
-<hr/>
+<div id="librejs-widget">
+  <div>
 
-<table id="jslicense-labels1" style="margin-left: auto; margin-right: auto;">
-  <caption><a rel="jslicense" href="#jslicense-labels1">
-      JavaScript Licensing Information</a></caption>
-  <thead>
-    <tr>
-      <th>Script</th>
-      <th>License</th>
-      <th>Source</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="scripts/jquery-1.11.1.min.js">jquery-1.11.1.min.js</a></td>
-      <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
-      <td><a href="scripts/jquery-1.11.1.js.gz">jquery-1.11.1.js.gz</a></td>
-    </tr>
-    <tr>
-      <td><a href="scripts/galleria-1.4.2.min.js">galleria-1.4.2.min.js</a></td>
-      <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
-      <td><a href="scripts/galleria-1.4.2.zip">galleria-1.4.2.zip</a></td>
-    </tr>
-    <tr>
-      <td><a href="scripts/galleria/themes/galleria-classicmod/galleria.classicmod.js">
-	  galleria.classicmod.js</a></td>
-      <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
-      <td>
-	<a href="scripts/jgehrcke-galleria-classicmod-4c43afe9a065.zip">
-	  jgehrcke-galleria-classicmod-4c43afe9a065.zip</a>
-      </td>
-    </tr>
-  </tbody>
-</table>
+    <table id="jslicense-labels1" style="margin-left: auto; margin-right: auto;">
+      <thead>
+	<tr>
+	  <th>Script</th>
+	  <th>License</th>
+	  <th>Source</th>
+	</tr>
+      </thead>
+      <tbody>
+	<tr>
+	  <td><a href="scripts/jquery-1.11.1.min.js">jquery-1.11.1.min.js</a></td>
+	  <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
+	  <td><a href="scripts/jquery-1.11.1.js.gz">jquery-1.11.1.js.gz</a></td>
+	</tr>
+	<tr>
+	  <td><a href="scripts/galleria-1.4.2.min.js">galleria-1.4.2.min.js</a></td>
+	  <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
+	  <td><a href="scripts/galleria-1.4.2.zip">galleria-1.4.2.zip</a></td>
+	</tr>
+	<tr>
+	  <td><a href="scripts/galleria/themes/galleria-classicmod/galleria.classicmod.js">
+	      galleria.classicmod.js</a></td>
+	  <td><a href="http://www.jclark.com/xml/copying.txt">Expat</a></td>
+	  <td>
+	    <a href="scripts/jgehrcke-galleria-classicmod-4c43afe9a065.zip">
+	      jgehrcke-galleria-classicmod-4c43afe9a065.zip</a>
+	  </td>
+	</tr>
+      </tbody>
+    </table>
+    
+    <a rel="jslicense" href="#jslicense-labels1">
+      <img src="images/librejs.png"
+	   title="JavaScript license information"
+	   alt="JavaScript license information"
+	   width="72" height="31" /></a>
 
+  </div>
+</div>
 
 <script>
 /**

[-- Attachment #3: images.txz --]
[-- Type: application/x-xz-compressed-tar, Size: 2776 bytes --]