Changed select box to CSS drop down
This commit is contained in:
parent
15ddee282f
commit
ca97348413
|
@ -17,7 +17,7 @@ if len(sys.argv) > 1:
|
||||||
|
|
||||||
pinout.load(lang)
|
pinout.load(lang)
|
||||||
|
|
||||||
overlays = [
|
'''overlays = [
|
||||||
'ground',
|
'ground',
|
||||||
'spi',
|
'spi',
|
||||||
'uart',
|
'uart',
|
||||||
|
@ -34,7 +34,9 @@ overlays = [
|
||||||
'explorer-hat',
|
'explorer-hat',
|
||||||
'display-o-tron',
|
'display-o-tron',
|
||||||
'dots'
|
'dots'
|
||||||
]
|
]'''
|
||||||
|
|
||||||
|
overlays = pinout.settings['overlays']
|
||||||
|
|
||||||
template = open('src/{}/template/layout.html'.format(lang)).read()
|
template = open('src/{}/template/layout.html'.format(lang)).read()
|
||||||
|
|
||||||
|
@ -334,7 +336,7 @@ def render_nav(url, overlay=None):
|
||||||
overlays = map(load_overlay,overlays)
|
overlays = map(load_overlay,overlays)
|
||||||
|
|
||||||
for url, name in select_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)
|
||||||
|
|
||||||
|
|
||||||
'''
|
'''
|
||||||
|
|
|
@ -13,6 +13,46 @@ table.pin-functions td {width:16.6666%;}
|
||||||
|
|
||||||
h2 {font-size:18px;margin-top:20px;}
|
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 {
|
.main-nav {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
right:0px;
|
right:0px;
|
||||||
|
|
|
@ -1,5 +1,23 @@
|
||||||
{
|
{
|
||||||
"default_desc":"The comprehensive Raspberry Pi GPIO Pinout guide for the original Raspberry Pi, B+ and Pi 2",
|
"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",
|
"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"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
<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">
|
<div class="overlay-container">
|
||||||
<span>Learn about Pi add-ons and pin functions <i class="fa fa-arrow-right"></i></span>
|
<span>Learn about Pi add-ons and pin functions <i class="fa fa-arrow-right"></i></span>
|
||||||
<select class="overlay">
|
<div class="drop-down">
|
||||||
<option value="">…</option>
|
<span>Select…</span>
|
||||||
{{overlays}}
|
<ul class="overlay">
|
||||||
</select>
|
{{overlays}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav id="gpio">
|
<nav id="gpio">
|
||||||
<div id="pinbase"></div>
|
<div id="pinbase"></div>
|
||||||
|
|
Loading…
Reference in New Issue