www/server/staging/graphics graphics.html

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 18/06/13 08:29:29

Modified files:
        server/staging/graphics: graphics.html 

Log message:
        Refine selection; still resets after processing the query.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/graphics/graphics.html?cvsroot=www&r1=1.4&r2=1.5

Patches:
Index: graphics.html
===================================================================
RCS file: /webcvs/www/www/server/staging/graphics/graphics.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -b -r1.4 -r1.5
--- graphics.html       11 Jun 2018 19:03:09 -0000      1.4
+++ graphics.html       13 Jun 2018 12:29:28 -0000      1.5
@@ -1,20 +1,37 @@
-<!--#include virtual="/server/header.html" -->
+<!--#include virtual="/server/html5-header.html" -->
 <!-- Parent-Version: 1.84 -->
 <!--#if expr="$QUERY_STRING = /theme=([a-z]+)/" -->
-  <!--#set var="theme" value="$1" -->
+  <!--#set var="THEME" value="$1" -->
 <!--#endif -->
 <!--#if expr="$QUERY_STRING = /type=([a-z]+)/" -->
-  <!--#set var="type" value="$1" -->
+  <!--#set var="TYPE" value="$1" -->
 <!--#endif -->
 <title>The GNU Art Gallery
 - GNU Project - Free Software Foundation</title>
 <style type="text/css" media="print,screen">
-  form.select div { margin: 1em .5em; display: inline-block; }
-  <!--#if expr="($QUERY_STRING) && ($QUERY_STRING != /theme=all/)" -->
-    li { display: none; }
-  <!--#endif -->
-  li[class~=<!--#echo encoding="none" var="theme" -->] { display: block; }
-  li[class~=<!--#echo encoding="none" var="type" -->] a[href] { color: red; }
+.button a { display: inline-block; font-weight: normal; margin-top: 1em; }
+form div.select { margin: 1em; display: inline-block; }
+select { min-width: 15em; height: 12em; }
+<!--#if expr="($THEME)" -->
+  #content li { display: none; }
+  #content li[class~=<!--#echo encoding="none" var="THEME" -->] {
+    display: block;
+  }
+<!--#endif -->
+<!--#if expr="($TYPE)" -->
+  #content li {
+    position: absolute; right: -10px; visibility: hidden;
+  }
+  #content li[class~=<!--#echo encoding="none" var="TYPE" -->] {
+    position: static; visibility: visible;
+  }
+<!--#endif -->
+select#theme option[value=<!--#echo encoding="none" var="THEME" -->] {
+  color: red;
+}
+select#type option[value=<!--#echo encoding="none" var="TYPE" -->] {
+  color: red;
+}
 </style>
 <!--#include virtual="/graphics/po/graphics.translist" -->
 <!--#include virtual="/server/banner.html" -->
@@ -41,10 +58,12 @@
 <div class="c">
 <p>*** Many thanks to all the artists! ***</p>
 
-<form class="select" action="">
-<div><strong>Select by theme:</strong>
-  <select name="theme">
-    <option value="all">all</option>
+<div class="button"><a href="#skip">Skip the selection</a></div>
+
+<form action="">
+<div class="select"><strong>Select by theme</strong> (one choice):<br />
+  <select name="theme" id="theme" multiple="multiple">
+    <option value="">reset / all</option>
     <option value="gnuhead">Gnu head</option>
     <option value="gnu">Gnu character</option>
     <option value="tux">Tux / Freedo</option>
@@ -54,9 +73,9 @@
     <option value="surveillance">surveillance</option>
   </select>
 </div>
-<div><strong>Select by type:</strong>
-  <select name="type">
-    <option value="all">all</option>
+<div class="select"><strong>Select by type</strong> (one choice):<br />
+  <select name="type" id="type" multiple="multiple">
+    <option value="">reset / all</option>
     <option value="ascii">ASCII art</option>
     <option value="banner">banner / badge / T-shirt</option>
     <option value="buttons">button / icon / avatar / stamp / sticker</option>
@@ -68,18 +87,15 @@
     <option value="wallpaper">wallpaper</option>
   </select>
 </div>
-<div>
+<div class="input">
   <input type="submit" />
   <p class="no-display"><small><i>Note:</i> These forms will not work
   in CSS-unaware browsers.</small></p>
 </div>
 </form>
-<p class="big"><strong>Last query:</strong>
-theme = <!--#echo encoding="none" var="theme" --> and
-type = <!--#echo encoding="none" var="type" --></p>
 </div>
 
-<h3>What's new?</h3>
+<h3 id="skip">What's new?</h3>
 
 <ul>
 <li class="fs cartoon">May 2018:
@@ -360,7 +376,7 @@
 <li class="fs">
   <a href="/graphics/fsfsociety/fsfsociety.html">Graphics from <i>Free
   Software, Free Society</i></a></li>
-<li class="gnu banner buttons svg">
+<li class="gnu tux fs banner buttons cartoon svg">
   <a href="/graphics/gnu-post/">GNU Post images</a>
   by Tomasz W. Koz&#322;owski's</li>
 <li class="gnu tux cartoon buttons svg">
@@ -424,8 +440,7 @@
 </ul>
 
 <p id="openclipart">You can also find GNU-related public domain graphics at
-  <a href="https://openclipart.org/search/?query=gnu";>
-    openclipart.org</a>.</p>
+<a href="https://openclipart.org/search/?query=GNU";>openclipart.org</a>.</p>
 
 </div><!-- for id="content", starts in the include above -->
 <!--#include virtual="/server/footer.html" -->
@@ -485,7 +500,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2018/06/11 19:03:09 $
+$Date: 2018/06/13 12:29:28 $
 <!-- timestamp end -->
 </p>
 </div>