[tor-commits] [webwml/master] Modify languag switch to use css only

[hiro at torproject.org]

commit 76864aa15a22081deb995e9f4109a3bd360700cb
Author: hiromipaw <hiro at torproject.org>
Date:   Fri Nov 17 12:23:40 2017 +0100

    Modify languag switch to use css only
---
 css/layout-rtl.css |  1 +
 css/layout.css     | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 css/master.css     |  1 +
 include/dlhead.wmi | 18 +++++++++---------
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/css/layout-rtl.css b/css/layout-rtl.css
index 5679d702..342abe59 100644
--- a/css/layout-rtl.css
+++ b/css/layout-rtl.css
@@ -392,3 +392,4 @@ select#lang {
 }
 
 #footer .first { margin-right: 30px; }
+
diff --git a/css/layout.css b/css/layout.css
index c80c17d2..c969805e 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1309,3 +1309,50 @@ p.blogDate {
 .joblink a {
   text-decoration: none;
 }
+
+/* Style The Dropdown Button */
+.dropbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+}
\ No newline at end of file
diff --git a/css/master.css b/css/master.css
index c085c732..1fce17c2 100644
--- a/css/master.css
+++ b/css/master.css
@@ -2,3 +2,4 @@
 @import "reset.min.css";
 @import "layout.min.css";
 @import "typography.min.css";
+
diff --git a/include/dlhead.wmi b/include/dlhead.wmi
index 59794458..63237141 100644
--- a/include/dlhead.wmi
+++ b/include/dlhead.wmi
@@ -114,16 +114,18 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
               }
             }
         }:>
-     # LANGUAGE SWITCH CGI
+     # LANGUAGE SWITCH 
       <li>
+         <div class="dropdown">
+           <button class="dropbtn">Languages</button>
+           <div class="dropdown-content">
+            
          # this is a cgi trampoline to bounce us to the right page
          # alternately, if the client supports javascript we can redirect that way
          # noscript does not block onclick but clients may have disabled javascript completely
          #
          # for this to work we need to know the relative path from the document root
          # to the current directory that wml is in.
-         <form action="$(DOCROOT)/cgi-bin/languageswitch.cgi">
-           <select name="Language" id="lang">
            <:{
              #import "perl-globals.wmi";
              use Cwd;
@@ -137,17 +139,15 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
              while (my $file = readdir(DIR)) {
                  if (-d $file) {
                      if (-e "$file/$page") {
-                         my $url = $urlbase.'/'.$WML_SRC_BASENAME.'.html.'.$file;
-                         my $url2js = $WML_SRC_BASENAME.'.html.'.$file;
-                         print '<option value="'.$url.'" onclick="window.location=\''.$url2js.'\'">'.$LANGUAGES{$file}.'</option>'."\n" unless not defined $LANGUAGES{$file};
+                         my $url = $WML_SRC_BASENAME.'.html.'.$file;
+                         print '<a href="'.$url.'" >'.$LANGUAGES{$file}.'</a>'."\n" unless not defined $LANGUAGES{$file};
                      }
                  }
              }
              closedir(DIR);
            }:>
-           </select>
-           <input class="go" type="submit" name="submit" value="Go">
-         </form>
+            </div>
+         </div> 
        </li>
        #
       </ul>