andreika-git
/
rusefi
mirror of https://github.com/andreika-git/rusefi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mobile menu (#2149) 

* Auto-generated configs and docs

* Auto-generated configs and docs

* Auto-generated configs and docs

* Auto-generated configs and docs

* daily builds added

* website improvements

* more website updates

* fixed layout fuckups on mobile and desktop; added proteus link

* fixed table, updated icons

* website cleanup

* first hamburger

* more hamburger

Co-authored-by: GitHub build-firmware Action <action@github.com>
This commit is contained in:
kon 2020-12-26 21:49:17 -08:00 committed by GitHub
parent 64d9b4b71a
commit 05432e0ee9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 236 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
misc/www/css/custom.css
View File

@ -77,9 +77,12 @@
border-radius: 6px; border-radius: 6px;
/* border: 1px solid #eee; */ /* border: 1px solid #eee; */
height: 250px; } height: 250px; }
.example-screenshot { .example-screenshot {
width: 100%; width: 100%;
height: auto; } height: auto;
}
.example-screenshot.coming-soon { .example-screenshot.coming-soon {
width: auto; width: auto;
position: absolute; position: absolute;
@ -88,8 +91,126 @@
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
.navbar { .navbar {
display: none; } display: none;
height: 70px;
background: #3a3a3a;
font-weight: 400;
font-style: normal;
}
.nav-container {
max-width: 800px;
margin: 0 auto;
}
/* Mobile navigation */
.nav-mobile {
z-index: 2000;
display: block;
position: fixed;
top: 0;
right: 0;
height: 70px;
width: 70px;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
/* content: " ▾"; */
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #f15a24;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
topnav {
/* display: none; */
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 1000;
background-color: rgb(31, 31, 31);
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
letter-spacing: .2rem;
text-decoration: none;
line-height: 2rem;
}
topnav ul {
/* margin-top: 2.5rem; */
display: none;
border-bottom: 1px solid #3b3b3b;
}
topnav li {
margin-top: 2.5rem;
margin-bottom: 1.5rem;
}
topnav a {
text-decoration: none;
}
topnav .menuentry {
color:#999;
text-decoration: none;
list-style: none;
}
.glossary { .glossary {
font-style: italic; font-style: italic;
@ -112,6 +233,27 @@
.container { .container {
overflow-y: visible; overflow-y: visible;
} }
.nav-container {
overflow-y: visible;
}
.nav-mobile {
display: block;
}
.nav-dropdown {
position: static;
}
nav ul {
display: none;
/* position: relative; */
}
nav ul li {
float: none;
}
/* topnav {
display: none;
} */
.header { .header {
/* margin-top: 18rem; */ /* margin-top: 18rem; */
padding-top: 18rem;} padding-top: 18rem;}
@ -142,6 +284,23 @@
overflow-y: visible; overflow-y: visible;
} }
/* Navbar */ /* Navbar */
.nav-container {
overflow-y: visible;
}
.nav-mobile {
display: none;
position: fixed;
}
.nav-dropdown {
position: static;
}
nav ul {
display: block;
/* position: relative; */
}
nav ul li {
float: none;
}
.navbar + .docs-section { .navbar + .docs-section {
border-top-width: 0; } border-top-width: 0; }
.navbar, .navbar,

90
misc/www/index.html
View File

@ -39,7 +39,9 @@
<!-- Scripts <!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="css/github-prettify-theme.css"> <link rel="stylesheet" href="css/github-prettify-theme.css">
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>
@ -51,8 +53,34 @@
<body class="code-snippets-visible"> <body class="code-snippets-visible">
<!-- <div class="container"> -->
<div class="header"> <div class="header">
<topnav>
<ul class="navbar-list">
<li class="navbar-item"><a href="index.html#intro">Intro</a></li>
</ul>
<ul class="navbar-list">
<li class="menuentry">Hardware</li>
<li class="navbar-item"><a href="index.html#microrusefi">microRusEFI</a></li>
<li class="popover-item"><a href="index.html#proteus">Proteus</a></li>
</ul>
<ul class="navbar-list">
<li class="menuentry">Documentation</li>
<li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI</a>
<li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/Proteus-Manual">Proteus</a>
</ul>
<ul class="navbar-list">
<li class="popover-item"><a href="index.html#shop">Shop</a></li>
</ul>
<ul class="navbar-list">
<li class="menuentry">Links</li>
<li class="popover-item"><a href="http://www.rusefi.com/online">rusEFI online</a>
<li class="popover-item"><a href="http://www.rusefi.com/forum">Forum</a>
<li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki">Wiki</a>
</ul>
<ul class="navbar-list">
<li class="popover-item"><a href="https://github.com/rusefi/rusefi/wiki/Download">Download</a></li>
</ul>
</topnav>
<div class="container"> <div class="container">
<img src="images/site/logo_wht.png" width="70%"> <img src="images/site/logo_wht.png" width="70%">
<h4 class="title">A GPL open source Engine Management System</h4> <h4 class="title">A GPL open source Engine Management System</h4>
@ -60,27 +88,14 @@
aria-label="Follow @rusefi on GitHub">Follow @rusefi</a> aria-label="Follow @rusefi on GitHub">Follow @rusefi</a>
<a class="github-button" href="https://github.com/rusefi/rusefi/subscription" data-icon="octicon-eye" <a class="github-button" href="https://github.com/rusefi/rusefi/subscription" data-icon="octicon-eye"
data-size="large" data-show-count="true" aria-label="Watch rusefi/rusefi on GitHub">Watch</a> data-size="large" data-show-count="true" aria-label="Watch rusefi/rusefi on GitHub">Watch</a>
<!-- <a class="button" href="https://rusefi.com" onClick="_gaq.push(['_trackEvent', 'skeleton', 'download'])">Getting
started</a> -->
<div class="value-props row"> <div class="value-props row">
<!-- <div class="four columns value-prop">
<i class="fa fa-bar-chart fa-4x" aria-hidden="true"></i> <br>
32bit MCU
</div>
<div class="four columns value-prop">
<i class="fa fa-code-fork fa-4x" aria-hidden="true"></i> <br>
GPL open source </p>
</div>
<div class="four columns value-prop">
<i class="fa fa-clock-o fa-4x" aria-hidden="true"></i> <br>
Quick to start with prebuilt boards
</div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<nav class="navbar"> <nav class="navbar">
<div class="container"> <div class="nav-container">
<ul class="navbar-list"> <ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="index.html#intro">Intro</a></li> <li class="navbar-item"><a class="navbar-link" href="index.html#intro">Intro</a></li>
<li class="navbar-item"> <li class="navbar-item">
@ -93,18 +108,6 @@
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="index.html#proteus">Proteus</a> <a class="popover-link" href="index.html#proteus">Proteus</a>
</li> </li>
<!--<li class="popover-item">
<a class="popover-link" href="#buttons">Frankenstein</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#forms">Frankenso</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#lists">Hellen</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#code">Prometheus</a>
</li> -->
</ul> </ul>
</div> </div>
</li> </li>
@ -118,18 +121,6 @@
<li class="popover-item"> <li class="popover-item">
<a class="popover-link" href="https://github.com/rusefi/rusefi/wiki/Proteus-Manual">Proteus</a> <a class="popover-link" href="https://github.com/rusefi/rusefi/wiki/Proteus-Manual">Proteus</a>
</li> </li>
<!-- <li class="popover-item">
<a class="popover-link" href="https://github.com/rusefi/rusefi/wiki">Other</a>
</li> -->
<!--<li class="popover-item">
<a class="popover-link" href="#buttons">Frankenstein</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#lists">Hellen</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#code">Prometheus</a>
</li> -->
</ul> </ul>
</div> </div>
</li> </li>
@ -216,16 +207,19 @@
<td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td> <td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td>
</tr> </tr>
<tr> <tr>
<td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/All-Supported-Triggers'>20+ OEM triggers supported</a></td> <td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/All-Supported-Triggers'>20+ OEM triggers
supported</a></td>
<td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td> <td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></td>
</tr> </tr>
<tr> <tr>
<td class='oddrow'>Automatic Transmission Control</td> <td class='oddrow'>Automatic Transmission Control</td>
<td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true" style="color:rgba(0, 0, 0, 0.3);"></i></td> <td class='oddrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"
style="color:rgba(0, 0, 0, 0.3);"></i></td>
</tr> </tr>
<tr> <tr>
<td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/GDI-status'>Direct Injection</a></td> <td class='evenrow'><a href='https://github.com/rusefi/rusefi/wiki/GDI-status'>Direct Injection</a></td>
<td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true" style="color:rgba(0, 0, 0, 0.3);"></i></td> <td class='evenrow'><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"
style="color:rgba(0, 0, 0, 0.3);"></i></td>
</tr> </tr>
<tr> <tr>
<td class='oddrow'>Flat Shifting</td> <td class='oddrow'>Flat Shifting</td>
@ -280,7 +274,8 @@
<li>SPI and TTL available on PCB</li> <li>SPI and TTL available on PCB</li>
</ul> </ul>
<a class="button button-primary" href="https://www.ebay.com/itm/333532119947">Get microRusEFI hardware</a> <a class="button button-primary" href="https://www.ebay.com/itm/333532119947">Get microRusEFI hardware</a>
<a class="button button-primary" href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI Manual</a> <a class="button button-primary" href="https://github.com/rusefi/rusefi/wiki/microRusEFI-Manual">microRusEFI
Manual</a>
</div> </div>
</div> </div>
@ -337,7 +332,8 @@
<td><img src="images/site/52p_board_connector.jpg" width="250px" alt=""></td> <td><img src="images/site/52p_board_connector.jpg" width="250px" alt=""></td>
<td>52 pin breakout board <br> 52 pin connector</td> <td>52 pin breakout board <br> 52 pin connector</td>
<td><a class="button button-primary" href="https://www.ebay.com/itm/333749717058">Get it on eBay</a><br> <td><a class="button button-primary" href="https://www.ebay.com/itm/333749717058">Get it on eBay</a><br>
<a class="button button-primary" href="https://www.ebay.com/itm/333735826285">Get it on eBay</a></td> <a class="button button-primary" href="https://www.ebay.com/itm/333735826285">Get it on eBay</a>
</td>
</tr> </tr>
<tr> <tr>
<td><img src="images/site/55_board_with_connector.jpg" width="250px" alt=""></td> <td><img src="images/site/55_board_with_connector.jpg" width="250px" alt=""></td>
@ -387,7 +383,7 @@
<td><img src="images/site/88_connector_2.5_rows.jpg" width="250px" alt=""></td> <td><img src="images/site/88_connector_2.5_rows.jpg" width="250px" alt=""></td>
<td>88 pin connector</td> <td>88 pin connector</td>
<td><a class="button button-primary" href="https://www.ebay.com/itm/333752255007">Get it on eBay</a> <br> <td><a class="button button-primary" href="https://www.ebay.com/itm/333752255007">Get it on eBay</a> <br>
<a class="button button-primary" href="https://www.ebay.com/itm/333833818007">Get it on eBay</a> <a class="button button-primary" href="https://www.ebay.com/itm/333833818007">Get it on eBay</a>
</td> </td>
</tr> </tr>
<tr> <tr>

29
misc/www/js/site.js
View File

@ -1,3 +1,30 @@
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('topnav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('topnav ul').slideToggle();
});
$('topnav a').click(function() {
$('topnav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
$(document).ready(function() { $(document).ready(function() {
// Variables // Variables
@ -23,7 +50,7 @@ $(document).ready(function() {
$popoverLink.on('click', openPopover) $popoverLink.on('click', openPopover)
$document.on('click', closePopover) $document.on('click', closePopover)
$('a[href^="#"]').on('click', smoothScroll) $('a[href^="#"]').on('click', smoothScroll)
buildSnippets(); // buildSnippets();
} }
function smoothScroll(e) { function smoothScroll(e) {