From ca973484134d5eda9593e3befb57e9bf23ff4c37 Mon Sep 17 00:00:00 2001
From: Phil Howard <phil@gadgetoid.com>
Date: Fri, 27 Mar 2015 14:30:22 +0000
Subject: [PATCH] Changed select box to CSS drop down

---
 generate-html.py               |  8 ++++---
 resources/pinout.css           | 42 +++++++++++++++++++++++++++++++++-
 src/en-GB/settings.json        | 20 +++++++++++++++-
 src/en-GB/template/layout.html | 10 ++++----
 4 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/generate-html.py b/generate-html.py
index bdfa25a..19b1a21 100755
--- a/generate-html.py
+++ b/generate-html.py
@@ -17,7 +17,7 @@ if len(sys.argv) > 1:
 
 pinout.load(lang)
 
-overlays = [
+'''overlays = [
 	'ground',
 	'spi',
 	'uart',
@@ -34,7 +34,9 @@ overlays = [
 	'explorer-hat',
 	'display-o-tron',
 	'dots'
-]
+]'''
+
+overlays = pinout.settings['overlays']
 
 template = open('src/{}/template/layout.html'.format(lang)).read()
 
@@ -334,7 +336,7 @@ def render_nav(url, overlay=None):
 overlays = map(load_overlay,overlays)
 
 for url, name in select_overlays:
-	overlays_html += '<option value="{}">{}</option>'.format(url, name)
+	overlays_html += '<li><a href="{}{}">{}</a></li>'.format(base_url, url, name)
 
 
 '''
diff --git a/resources/pinout.css b/resources/pinout.css
index 19ef3bb..b06cac7 100644
--- a/resources/pinout.css
+++ b/resources/pinout.css
@@ -13,6 +13,46 @@ table.pin-functions td {width:16.6666%;}
 
 h2 {font-size:18px;margin-top:20px;}
 
+.drop-down {
+	float: right;
+	display: block;
+	width: 250px;
+	border:2px solid #D6264E;
+	margin-left:20px;
+}
+.overlay {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display:none;
+	background:rgba(255,255,255,0.95);
+	padding:10px 0px;
+	clear:both;
+}
+.drop-down:hover .overlay {display:block;}
+.overlay-container span {
+	display:block;
+	float:left;
+}
+.overlay li {
+	display:block;
+	width:250px;
+}
+.overlay li:nth-child(odd) a {
+	background:rgba(214, 38, 78, 0.05);
+}
+.overlay li a, .drop-down span {
+	display:block;
+	font-size:14px;
+	line-height:28px;
+	color:#063541;
+	padding:0 10px;
+}
+.overlay li a:hover {
+	color:#FFFFFF;
+	background:#073642;
+}
+
 .main-nav {
 	position:absolute;
 	right:0px;
@@ -369,4 +409,4 @@ ol.linenums {margin-left:30px;}
 	#content {
 		width:700px;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/en-GB/settings.json b/src/en-GB/settings.json
index 74a3ac5..bbac49b 100644
--- a/src/en-GB/settings.json
+++ b/src/en-GB/settings.json
@@ -1,5 +1,23 @@
 {
   "default_desc":"The comprehensive Raspberry Pi GPIO Pinout guide for the original Raspberry Pi, B+ and Pi 2",
   "default_title":"Raspberry Pi GPIO Pinout - Pi 1, B+, Pi 2",
-  "title_suffix":" at Raspberry Pi GPIO Pinout"
+  "title_suffix":" at Raspberry Pi GPIO Pinout",
+  "overlays": [
+        "ground",
+        "spi",
+        "uart",
+        "i2c",
+        "wiringpi",
+        "arduino-spi",
+        "rtk-000-001",
+        "piborg-ledborg",
+        "piglow",
+        "pibrella",
+        "unicorn-hat",
+        "skywriter-hat",
+        "explorer-hat-pro",
+        "explorer-hat",
+        "display-o-tron",
+        "dots"
+]
 }
diff --git a/src/en-GB/template/layout.html b/src/en-GB/template/layout.html
index b930020..c215b93 100644
--- a/src/en-GB/template/layout.html
+++ b/src/en-GB/template/layout.html
@@ -29,10 +29,12 @@
 			<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/pinout"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
 			<div class="overlay-container">
 				<span>Learn about Pi add-ons and pin functions <i class="fa fa-arrow-right"></i></span>
-				<select class="overlay">
-					<option value="">&hellip;</option>
-					{{overlays}}
-				</select>
+				<div class="drop-down">
+					<span>Select&hellip;</span>
+					<ul class="overlay">
+						{{overlays}}
+					</ul>
+				</div>
 			</div>
 			<nav id="gpio">
 				<div id="pinbase"></div>