Modify languag switch to use css only (76864aa15) - tor-webwml.git

Modify languag switch to use css only

hiromipaw commited on 2017-11-17 12:23:40
Zeige 2 geänderte Dateien mit 56 Einfügungen und 9 Löschungen.

css/layout.css c80c17d23..c969805e2
include/dlhead.wmi 597944589..632371415

css/layout.css

...	...	@@ -1309,3 +1309,50 @@ p.blogDate {
1309	1309	.joblink a {
1310	1310	text-decoration: none;
1311	1311	}
	1312	+
	1313	+/* Style The Dropdown Button */
	1314	+.dropbtn {
	1315	+ background-color: #4CAF50;
	1316	+ color: white;
	1317	+ padding: 16px;
	1318	+ font-size: 16px;
	1319	+ border: none;
	1320	+ cursor: pointer;
	1321	+}
	1322	+
	1323	+/* The container <div> - needed to position the dropdown content */
	1324	+.dropdown {
	1325	+ position: relative;
	1326	+ display: inline-block;
	1327	+}
	1328	+
	1329	+/* Dropdown Content (Hidden by Default) */
	1330	+.dropdown-content {
	1331	+ display: none;
	1332	+ position: absolute;
	1333	+ background-color: #f9f9f9;
	1334	+ min-width: 160px;
	1335	+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	1336	+ z-index: 1;
	1337	+}
	1338	+
	1339	+/* Links inside the dropdown */
	1340	+.dropdown-content a {
	1341	+ color: black;
	1342	+ padding: 12px 16px;
	1343	+ text-decoration: none;
	1344	+ display: block;
	1345	+}
	1346	+
	1347	+/* Change color of dropdown links on hover */
	1348	+.dropdown-content a:hover {background-color: #f1f1f1}
	1349	+
	1350	+/* Show the dropdown menu on hover */
	1351	+.dropdown:hover .dropdown-content {
	1352	+ display: block;
	1353	+}
	1354	+
	1355	+/* Change the background color of the dropdown button when the dropdown content is shown */
	1356	+.dropdown:hover .dropbtn {
	1357	+ background-color: #3e8e41;
	1358	+}
1312	1359	\ No newline at end of file

include/dlhead.wmi

Zeige Datei @ 76864aa15

@@ -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>


...	...	@@ -114,16 +114,18 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
114	114	}
115	115	}
116	116	}:>
117		- # LANGUAGE SWITCH CGI
	117	+ # LANGUAGE SWITCH
118	118	<li>
	119	+ <div class="dropdown">
	120	+ <button class="dropbtn">Languages</button>
	121	+ <div class="dropdown-content">
	122	+
119	123	# this is a cgi trampoline to bounce us to the right page
120	124	# alternately, if the client supports javascript we can redirect that way
121	125	# noscript does not block onclick but clients may have disabled javascript completely
122	126	#
123	127	# for this to work we need to know the relative path from the document root
124	128	# to the current directory that wml is in.
125		- <form action="$(DOCROOT)/cgi-bin/languageswitch.cgi">
126		- <select name="Language" id="lang">
127	129	<:{
128	130	#import "perl-globals.wmi";
129	131	use Cwd;
...	...	@@ -137,17 +139,15 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
137	139	while (my $file = readdir(DIR)) {
138	140	if (-d $file) {
139	141	if (-e "$file/$page") {
140		- my $url = $urlbase.'/'.$WML_SRC_BASENAME.'.html.'.$file;
141		- my $url2js = $WML_SRC_BASENAME.'.html.'.$file;
142		- print '<option value="'.$url.'" onclick="window.location=\''.$url2js.'\'">'.$LANGUAGES{$file}.'</option>'."\n" unless not defined $LANGUAGES{$file};
	142	+ my $url = $WML_SRC_BASENAME.'.html.'.$file;
	143	+ print '<a href="'.$url.'" >'.$LANGUAGES{$file}.'</a>'."\n" unless not defined $LANGUAGES{$file};
143	144	}
144	145	}
145	146	}
146	147	closedir(DIR);
147	148	}:>
148		- </select>
149		- <input class="go" type="submit" name="submit" value="Go">
150		- </form>
	149	+ </div>
	150	+ </div>
151	151	</li>
152	152	#
153	153	</ul>
154	154