Commit d02515fe authored by Bryan Tong's avatar Bryan Tong

Merge branch 'master' of https://git.nullivex.com/kado/kado-web

parents 95d2bc8c 0f242c05
#sidebar {
width: 250px;
position: absolute;
width: 235px;
position: fixed;
padding: 0 2px 5px 15px;
background-color: #f1edf3;
border-right: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
transition: all 0.2s;
height: 100vh;
z-index: 999;
min-height: 100vh;
height: 100vh;
overflow-y: scroll;
}
#wrapper.active #sidebar { margin-left: -270px; }
#wrapper.active #sidebar { margin-left: -260px; }
#wrapper.active #copyright { margin-left: 0; }
#wrapper.active .topbar { left: 0; }
#sidebarToggle {
position: absolute;
left: 0;
padding: 20px 0 0 10px;
z-index: 1001;
float: left;
}
@media screen and (max-height: 450px) {
#sidebar {padding-top: 15px;}
......
......@@ -13,24 +13,28 @@ table, th, td {
border-collapse: collapse;
padding: 5px;
}
#sidebar .logo { float: left; color: #734efa; font-size: 2.6em; width: 50px; }
#sidebar .brand-wrap { margin-left: 10px; }
#sidebar a.brand, .topbar a.brand:visited { font-size: 2em; color: #734efa; }
#sidebar a.brand>span { color: #333; }
#sidebar a.brand:hover { color: blue; text-decoration: none; }
#sidebar .slogan { font-size: 0.8em; color: #777; padding-left: 54px; }
.topbar {
background: #fefefe;
border-bottom: 1px solid #333;
padding: 5px 20px;
position: fixed;
left: 260px;
right: 0;
top: 0;
padding: 0 5px;
background-color: #fff;
height: 17px;
}
.topbar .logo { float: left; color: #734efa; font-size: 2.6em; width: 50px; }
.topbar .brand-wrap { margin-left: 10px; }
.topbar a.brand, .topbar a.brand:visited { font-size: 2em; color: #734efa; }
.topbar a.brand>span { color: #333; }
.topbar a.brand:hover { color: blue; text-decoration: none; }
.topbar .slogan { font-size: 0.8em; color: #777; padding-left: 54px; }
.topbar-right { float: right; line-height: 50px; }
.topbar-right a { font-size: 1.2em; display: inline-block; margin-right: 10px }
.list-simple { list-style-type: none; }
.form-inline { display: inline; }
#main { padding: 5px; margin-left: 270px; }
#main { padding: 5px; margin-left: 260px; padding-top: 17px;}
#wrapper.active #main { margin-left: 0; }
.wrap { min-height: 100vh; margin-bottom: 10px;}
.wrap { margin-bottom: 10px;}
.wrap, #main p { max-width: 900px; }
code {
background: #ddeaff;
......@@ -49,10 +53,10 @@ blockquote { margin: 0; margin-right: 10px; }
blockquote>p { background: #f1edf3; color: #777; padding: 5px; width: 100%; }
blockquote>p { max-width: 100% !important;}
#copyright {
clear: both;
padding: 10px;
border-top: 1px solid #ddd;
font-size: 0.93em;
margin-left: 270px;
}
#copyright>.copyright, #copyright>.support, #copyright>.conduct,
#copyright>.license { padding-bottom: 5px; }
......
/* global $ */
$(document).ready(function () {
$('#sidebar').mCustomScrollbar({ theme: 'dark' });
$('#sidebarToggle').on('click', function () {
$('#wrapper').toggleClass('active');
});
});
$('#wrapper').toggleClass('active')
})
})
</div>
<div id="copyright">
<div class="copyright">&copy; 2013-2020 Bryan Tong, NULLIVEX LLC. All rights reserved.</div>
<div class="support">Powered by <a href="https://kado.org">Kado v4.2.1</a> Try it on your project today!</div>
......@@ -6,12 +5,9 @@
<div class="license">This software is licensed under the Lesser GNU Public License Version 3 or above. Please see <a href="/license/">LICENSE</a> for more details and a full copy of the license.</div>
<div>Your viewport width is <span id="viewport-width">0</span>px</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="/js/sidebar.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51999698-15"></script>
......
......@@ -19,18 +19,13 @@
{{/_pageTitle}}
</head>
<body>
<div class="topbar">
<div class="topbar-right">
<a href="https://git.nullivex.com/kado">Gitlab</a>
<a href="https://www.npmjs.com/package/kado">NPM</a>
<a href="https://twitter.com/KadoJS_">Twitter</a>
</div>
<div id="sidebarToggle"><a href="javascript:void(0)"><span class="fa fa-bars"></span></a></div>
<div class="brand-wrap">
<div class="logo">{}</div>
<a href="/" class="brand"><span>K</span>ado</a>
<div class="slogan">High Quality JavaScript Libraries</div>
</div>
</div>
<div id="wrapper">
{{>sidebar}}
<div class="topbar">
<div id="sidebarToggle"><a href="javascript:void(0)"><span class="fa fa-bars"></span></a></div>
<div class="topbar-right">
<a href="https://git.nullivex.com/kado/kado">Gitlab</a>
<a href="https://www.npmjs.com/package/kado">NPM</a>
<a href="https://twitter.com/KadoJavaScript">Twitter</a>
</div>
</div>
\ No newline at end of file
<!--<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="/download/">Download</a></li>
<li><a href="/info/changelog/">Changelog</a></li>
<li><a href="/guide/introduction/">Introduction</a></li>
<li><a href="/info/about-us/">About Us</a></li>
<li><a href="/info/why-kado/">Why Kado</a></li>
<li><a href="/guide/quick-start">Quick Start</a></li>
</ul>
<a href="/download/">Download</a>
<a href="/info/changelog/">Changelog</a>
<a href="/guide/introduction/">Introduction</a>
<a href="/info/about-us/">About Us</a>
<a href="/info/why-kado/">Why Kado</a>
<a href="/guide/quick-start">Quick Start</a>
<br>
<h4>Documentation</h4>
<div>
<label style="text-indent: 10px;" for="versionSelect">Version:</label>
<form action="/setDocVersion" method="get" class="form-inline" id="versionForm">
<select name="version" id="versionSelect">
{{#docVersionSelectList}}
<option value="{{version}}" {{#selected}}selected="selected"{{/selected}}>{{version}}</option>
{{/docVersionSelectList}}
</select>
</form>
<script>
const selector = document.getElementById('versionSelect')
const form = document.getElementById('versionForm')
selector.addEventListener('change', () => { form.submit() })
</script>
</div>
</li>
<li>
<a href="#">About</a>
</li>
<br>
<h4>Articles</h4>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="/download/">Download</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
</div>
</nav>
</div>
</div>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<div class="container-fluid">
<div class="sidebar-header">
<h3 style="background-color: white;"><span style="color: #7E5CFA;">{}</span><span style="color: black;">K</span><span style="color: #7E5CFA">ado</span></h3>
</div>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
</div>
</div>-->
<div id="sidebar">
<div class="brand-wrap">
<div class="logo">{}</div>
<a href="/" class="brand"><span>K</span>ado</a>
<div class="slogan">High Quality JavaScript Libraries</div>
</div>
<ul class="list-simple">
<li><a href="/">Home</a></li>
<li><a href="/download/">Download</a></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment