Skip to content

Update to bootstrap 5. #844

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

Closed
wants to merge 2 commits into from
Closed

Update to bootstrap 5. #844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1748e02
Update to bootstrap 5.
nojaf Sep 11, 2023
5487471
Use variables for code snippets.
nojaf Sep 11, 2023
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
35 changes: 15 additions & 20 deletions docs/_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,44 @@
<title>{{fsdocs-page-title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="{{fsdocs-authors}}">

<link rel="stylesheet" id="theme_link" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.6.0/materia/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara&family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" id="theme_link" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/materia/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<link rel="shortcut icon" type="image/x-icon" href="{{root}}img/favicon.ico">
<link type="text/css" rel="stylesheet" href="{{root}}content/navbar-{{fsdocs-navbar-position}}.css" />
<link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-{{fsdocs-theme}}.css" />
<link type="text/css" rel="stylesheet" href="{{root}}content/fsdocs-custom.css" />
<script type="text/javascript" src="{{root}}content/fsdocs-tips.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- BEGIN SEARCH BOX: this adds support for the search box -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.css" />
<!-- END SEARCH BOX: this adds support for the search box -->
{{fsdocs-watch-script}}
</head>

<body>
<nav class="navbar navbar-expand-md navbar-light bg-secondary {{fsdocs-navbar-position}}" id="fsdocs-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<nav class="navbar navbar-expand-md p-3 bg-body {{fsdocs-navbar-position}}" id="fsdocs-nav">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-nav-scroll" id="navbarsExampleDefault">
<a href="{{fsdocs-logo-link}}"><img id="fsdocs-logo" src="{{fsdocs-logo-src}}" /></a>
<fsdocs-dark-light-toggle></fsdocs-dark-light-toggle>
<!-- BEGIN SEARCH BOX: this adds support for the search box -->
<div id="header">
<div class="searchbox" id="fsdocs-searchbox">
<label for="search-by">
<i class="fas fa-search"></i>
</label>
<input data-search-input="" id="search-by" type="search" placeholder="Search..." />
<div id="fsdocs-searchbox" class="d-flex align-items-center rounded p-1">
<iconify-icon icon="ic:outline-search" width="24" height="24"></iconify-icon>
<input class="form-control mx-1 p-0" data-search-input="" id="search-by" type="search" placeholder="Search..." />
<span data-search-clear="">
<i class="fas fa-times"></i>
</span>
</div>
</div>

<!-- END SEARCH BOX: this adds support for the search box -->
<ul class="navbar-nav">
<ul class="navbar-nav border-bottom">
<li class="nav-header">Links</li>
<li class="nav-item" id="fsdocs-license-link"><a class="nav-link" href="{{fsdocs-license-link}}">License</a></li>
<li class="nav-item" id="fsdocs-release-notes-link"><a class="nav-link" href="{{fsdocs-release-notes-link}}">Release Notes</a></li>
Expand All @@ -70,12 +64,13 @@ <h3 class="muted"><a href="{{fsdocs-collection-name-link}}">{{fsdocs-collection-
</div>

<!-- BEGIN SEARCH BOX: this adds support for the search box -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.css" />
<script type="text/javascript">var fsdocs_search_baseurl = '{{root}}';</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js"></script>
<script type="text/javascript" src="{{root}}content/fsdocs-search.js"></script>
<!-- END SEARCH BOX: this adds support for the search box -->
<script type="module" src="{{root}}content/darkLight.js"></script>
</div>
</body>

Expand Down
84 changes: 84 additions & 0 deletions docs/content/darkLight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
import 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';

export class DarkLightToggle extends LitElement {
static properties = {
_theme: 'light'
}

constructor() {
super();
this.theme = localStorage.getItem("theme");
if (this.theme === "dark") {
document.documentElement.setAttribute("data-bs-theme", "dark");
this._theme = "dark";
}
}

toggleTheme() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's worth considering using prefers-color-scheme so we use whatever someone's systems defaults are.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

I know it's not as tidy as a toggle button but I think respecting the user's system theme is more important. Some example code: code

const current = document.documentElement.getAttribute("data-bs-theme");
if (current === "dark") {
document.documentElement.setAttribute("data-bs-theme", "light");
localStorage.setItem("theme", "light");
this._theme = "light";
} else {
document.documentElement.setAttribute("data-bs-theme", "dark");
localStorage.setItem("theme", "dark");
this._theme = "dark";
}
}

static styles = css`
div {
margin: 1rem 0;
}

input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
}

label {
background-color: rgb(34, 34, 34);
width: 45px;
height: 20px;
border-radius: 40px;
position: relative;
padding: 3px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

div label .ball {
background-color: rgb(255, 255, 255);
width: 18px;
height: 18px;
position: absolute;
left: 5px;
top: 4px;
border-radius: 50%;
transition: transform 0.2s linear;
}

div input[type=checkbox]:checked + label .ball {
transform: translateX(25px);
}
`;

render() {
return html`
<div @click="${this.toggleTheme}">
<input type="checkbox" ?checked=${this._theme === 'dark'}>
<label for="checkbox">
<iconify-icon icon="ph:sun-fill" style="color: #f39c12;"></iconify-icon>
<iconify-icon icon="ph:moon-fill" style="color: #f1c40f;"></iconify-icon>
<span class="ball"></span>
</label>
</div>`;
}
}

customElements.define('fsdocs-dark-light-toggle', DarkLightToggle);
Loading