hiding the language list until you mouse-overlanguage-selector

3 files changed, 50 insertions, 3 deletions

diff --git a/english/langSelector.css b/english/langSelector.css
new file mode 100644
index 00000000000..ccec2a2b7e2
--- /dev/null
+++ b/english/langSelector.css
@@ -0,0 +1,46 @@
+/*
+ * https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
+ */
+
+/* we don't use it as a button
+.dropbtn {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+*/
+
+.pageLang {
+  position: relative;
+  /* display: inline-block; */
+}
+
+.langContainer {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  /* min-width: 160px; */
+  width: fit-content;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  padding: 10px 10px 10px 10px;
+}
+
+/* formating in a block - not practical
+.langContainer a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+*/
+
+.langContainer a:hover {background-color: #ddd;}
+
+.pageLang:hover .langContainer {display: block;}
+
+/*
+.pageLang:hover .dropbtn {background-color: #3e8e41;}
+*/
diff --git a/english/template/debian/basic.wml b/english/template/debian/basic.wml
index e3bfedf7cdd..0358384761f 100644
--- a/english/template/debian/basic.wml
+++ b/english/template/debian/basic.wml
@@ -39,6 +39,7 @@
   <meta name="Keywords"  content="<keywords/>" />
 {#style#:<link href="$(CSS:-$(HOME))/debhome.css" rel="stylesheet" type="text/css" />
   <link href="$(CSS:-$(HOME))/debian-$(CUR_ISO_LANG).css" rel="stylesheet" type="text/css" media="all"/>
+  <link href="$(CSS:-$(HOME))/langSelector.css" rel="stylesheet" type="text/css" media="all"/>
 :#style#}
 </when>
 <perl>
diff --git a/english/template/debian/languages.wml b/english/template/debian/languages.wml
index 5be9a31cc6c..477b862da71 100644
--- a/english/template/debian/languages.wml
+++ b/english/template/debian/languages.wml
@@ -190,7 +190,7 @@ sub language_selector_css {
     if ( $rel_dir eq "" and $file eq "sitemap" )
     {    # special case for the site map
         $str .= "<!--UdmComment-->\n";
-        $str .= "<div id=\"pageLang\">\n";
+        $str .= "<div id=\"pageLang\" class=\"pageLang\">\n";
         $str .= "<p>\n";
         $str
             .= q{<gettext>This page is also available in the following languages:</gettext>}
@@ -226,12 +226,12 @@ sub language_selector_css {
     }
     elsif (@used_langs) {
         $str .= "<!--UdmComment-->\n";
-        $str .= "<div id=\"pageLang\">\n";
+        $str .= "<div id=\"pageLang\" class=\"pageLang\">\n";
         $str .= "<div id=\"langSelector\">\n";
         $str
             .= q{<gettext>This page is also available in the following languages:</gettext>}
             . "\n";
-        $str .= "<div id=\"langContainer\">\n";
+        $str .= "<div id=\"langContainer\" class=\"langContainer\">\n";
 
         # Language sorting. Create a hash going from the language's own name
         # for itself to the language's ISO keys. Then work with the sorted