Merge pull request #140 from kasenvr/feature/js-doc-menu-hide

API Docs viewport restriction removal + menu toggle
This commit is contained in:
kasenvr 2020-01-31 14:39:11 -05:00 committed by GitHub
commit 3a3c2750bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 72 deletions

View file

@ -0,0 +1,17 @@
.nav-header {
display: none;
}
nav {
display: none !important;
}
section {
margin-right: 0px !important;
}
#main {
margin-left: 15px !important;
margin-right: 15px !important;
overflow: auto;
}

View file

@ -16,6 +16,8 @@
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<link type="text/css" rel="stylesheet" href="styles/night.css">
<link type="text/css" rel="stylesheet" href="styles/responsive.css">
<link type="text/css" rel="stylesheet" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link href="styles/materialdesignicons.min.css" rel="stylesheet">
@ -39,31 +41,42 @@
var nightSheet = document.querySelector('[href="styles/night.css"]');
nightSheet.disabled = darkDisabled;
}
var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
if (responsiveDisabled === null) {
localStorage.setItem('responsiveDisabled', JSON.stringify(true));
} else {
var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
responsiveSheet.disabled = responsiveDisabled;
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> -->
<link href="images/fav-icon.ico" rel="shortcut icon">
</head>
<body>
<v-app dark>
<div id="vue-menu">
<template>
<v-btn @click="toggleResponsive" fab large dark style="position: fixed; right: 15px; top: 15px;">
<v-icon class="ml-4">mdi-backburger</v-icon>
</v-btn>
<div class="nav-header">
<p><a href="https://projectathena.io"><img src="images/project-athena-logo.png" width="214px" /></a></p>
<?js if (env.conf.docdash.search) { ?>
<input type="text" class="search-input" id="nav-search" placeholder="Search API Docs ..." />
<?js } ?>
<p><a href="https://docs.projectathena.dev">Looking for <strong>Project Athena</strong><br /> Documentation?</a></p>
<div id="app">
<v-app dark>
<v-btn @click="toggleNightMode" text dark>
Toggle
<v-icon class="ml-2">mdi-theme-light-dark</v-icon>
<span>Toggle</span>
<v-icon style="margin-left: 5px;">mdi-theme-light-dark</v-icon>
</v-btn>
</v-app>
</div>
</div>
<nav>
<?js= this.nav ?>
</nav>
</template>
</div>
</v-app>
<div id="main">
<h1 class="page-title"><?js= title ?></h1>
@ -110,7 +123,7 @@
<script>
new Vue({
el: '#app',
el: '#vue-menu',
vuetify: new Vuetify({
theme: {
dark: true,
@ -130,6 +143,14 @@
var nightSheet = document.querySelector('[href="styles/night.css"]');
nightSheet.disabled = darkDisabled;
},
toggleResponsive: function() {
var responsiveDisabled = JSON.parse(localStorage.getItem('responsiveDisabled'));
localStorage.setItem('responsiveDisabled', JSON.stringify(!responsiveDisabled));
responsiveDisabled = !responsiveDisabled;
var responsiveSheet = document.querySelector('[href="styles/responsive.css"]');
responsiveSheet.disabled = responsiveDisabled;
}
},
})