Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: added code for back-to-top button #315

Closed
wants to merge 4 commits into from
Closed

feat: added code for back-to-top button #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
acda387
feat: added code for back-to-top button
vedant-jain03 Oct 23, 2021
b405a2a
updated the code
vedant-jain03 Oct 24, 2021
429296c
updated the code
vedant-jain03 Oct 24, 2021
2555cb4
fixes: color changes
vedant-jain03 Oct 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 106 additions & 80 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,59 +18,82 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- CSS Stylesheet -->
<link id="stylesheet" rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">

<script>

var url = "//cdn.jsdelivr.net/gh/sushantrahate/docsify-darkly-theme/css/darkly.min.css";
var url2 = "//unpkg.com/docsify/themes/vue.css";
var stylesheet = document.getElementById("stylesheet");
var show = false;
var darkmode = localStorage.getItem('darkmode')
function setStyleSheet() {
const slider = document.querySelector(".slider");
slider.classList.add("smooth");
document.body.classList.add("darkmode");
setTimeout(function()
{
document.querySelector(".slider").classList.remove("smooth");
},500);
if (show) {
stylesheet.setAttribute('href', url2);
localStorage.setItem('darkmode', "disabled");
show = !show;
}
else {
stylesheet.setAttribute('href', url);
localStorage.setItem('darkmode', "enabled");
show = !show;
}
};


</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body{
font-family: 'Open Sans', sans-serif;
}

td {
color: black;
background-color: white;
}
.markdown-section {
margin: 0 auto;
max-width: 80%;
padding: 30px 15px 40px 15px;
position: relative;
}
.markdown-section a {
color: #00bc8c;
font-weight: 600;
}
</style>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">

<script>

var url = "//cdn.jsdelivr.net/gh/sushantrahate/docsify-darkly-theme/css/darkly.min.css";
var url2 = "//unpkg.com/docsify/themes/vue.css";
var stylesheet = document.getElementById("stylesheet");
var show = false;
var darkmode = localStorage.getItem('darkmode')
function setStyleSheet() {
const slider = document.querySelector(".slider");
slider.classList.add("smooth");
document.body.classList.add("darkmode");
setTimeout(function () {
document.querySelector(".slider").classList.remove("smooth");
}, 500);
if (show) {
stylesheet.setAttribute('href', url2);
localStorage.setItem('darkmode', "disabled");
show = !show;
}
else {
stylesheet.setAttribute('href', url);
localStorage.setItem('darkmode', "enabled");
show = !show;
}
};
window.addEventListener('load', function () {
var backToTop_Button = document.getElementById("back-to-top");
if (document.documentElement.scrollTop < 165) {
backToTop_Button.style.display = "none";
}
})
window.addEventListener('scroll', function () {
var backToTop_Button = document.getElementById("back-to-top");
if (document.body.scrollTop > 165 || document.documentElement.scrollTop > 165) {
backToTop_Button.style.display = "block";
} else {
backToTop_Button.style.display = "none";
}
})
function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
font-family: 'Open Sans', sans-serif;
}

html {
scroll-behavior: smooth;
}

td {
color: black;
background-color: white;
}

.markdown-section {
margin: 0 auto;
max-width: 80%;
padding: 30px 15px 40px 15px;
position: relative;
}

.markdown-section a {
color: #42b983;
font-weight: 600;
}
</style>
</head>

<body>
Expand All @@ -82,22 +105,23 @@
window.$docsify = {
name: 'CircuitVerse',
repo: 'https://github.com/CircuitVerse/CircuitVerseDocs/',
nameLink: 'https://circuitverse.org/',
nameLink: 'https://circuitverse.org/',

plugins: [
EditOnGithubPlugin.create('https://github.com/CircuitVerse/CircuitVerseDocs/blob/master/docs/'),
function(hook)
{

var footer = [
'<header>',
'<span><label class="switch"><input title="Toggle Dark theme" onclick="setStyleSheet();" type="checkbox" ><span class="slider round"></span></label></span>',
'</header>'
].join('');

hook.afterEach(function(html) {
return footer + html;
});
function (hook) {
var backtoTop = [
'<div><button id="back-to-top" class="back-to-top" onclick="backToTop();"><i class="fas fa-angle-up"></i></button ></div>',
]
var footer = [
'<header>',
'<span><label class="switch"><input title="Toggle Dark theme" onclick="setStyleSheet();" type="checkbox" ><span class="slider round"></span></label></span>',
'</header>'
].join('');

hook.afterEach(function (html) {
return footer + html + backtoTop;
});
},
],
loadSidebar: true,
Expand All @@ -107,13 +131,13 @@
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
executeScript:true,
executeScript: true,
noCompileLinks: ['/#'],
auto2top: true,
pagination: {
previousText: 'Previous',
nextText: 'Next',
}
previousText: 'Previous',
nextText: 'Next',
}


}
Expand All @@ -122,25 +146,26 @@

<script src="//unpkg.com/[email protected]/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
<script type="text/javascript">


window.onload = function()
{ var darkmode = localStorage.getItem('darkmode')

if(darkmode ==="enabled"){
window.onload = function () {
var darkmode = localStorage.getItem('darkmode')

if (darkmode === "enabled") {
stylesheet.setAttribute('href', url);
show = !show;
document.querySelector("input[type='checkbox']").checked = true;
}
const observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
if(stylesheet.getAttribute("href") === url ){
document.querySelector("input[type='checkbox']").checked = url;
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (stylesheet.getAttribute("href") === url) {
document.querySelector("input[type='checkbox']").checked = url;
}
else{
else {
document.querySelector("input[type='checkbox']").checked = url2;
}
});
Expand All @@ -157,6 +182,7 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112678513-2"></script>
<script>

window.dataLayer = window.dataLayer || [];

function gtag() {
Expand All @@ -168,4 +194,4 @@

</script>

</html>
</html>
24 changes: 23 additions & 1 deletion docs/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--primary-color: #42b983;
}

.switch {
position: relative;
display: inline-block;
Expand Down Expand Up @@ -54,7 +58,7 @@
}

input:checked + .slider {
background-color: #00bc8c;
background-color: var(--primary-color);
}

input:focus + .slider {
Expand Down Expand Up @@ -88,6 +92,24 @@ div[style="overflow: auto"]{
margin-top: 39px;
}

.back-to-top {
display: none;
background-color: var(--primary-color);
color: #fff;
right: 15px;
position: fixed;
bottom: 15px;
border: none;
padding: 5px 10px;
border-radius: 5px;
outline: none;
cursor: pointer;
}

.back-to-top .fas {
font-size: 1.3rem;
}

@media (max-width: 768px) {
.switch {
margin-right: 5%;
Expand Down