commit 76864aa15a22081deb995e9f4109a3bd360700cb Author: hiromipaw hiro@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>