privacyguides
/
privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

[WIP] Rewrite navbar #1154

Merged
dawidpotocki merged 1 commits from navfix into master 2019-08-22 23:07:38 +00:00
Conversation 16 Commits 1 Files Changed 4 +321 -115
4 changed files with 321 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

243
_includes/nav.html
View File

@ -1,85 +1,115 @@
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="fixed-top bg-dark">
<nav id="navbar">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html"><i class="fas fa-home"></i> <span class="sr-only">Home</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/providers/" id="providerDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Provider
</a>
<div class="dropdown-menu" aria-labelledby="providerDropdown">
<a class="dropdown-item" href="/providers/#ukusa"><i class="fab fa-creative-commons-nc fa-fw"></i> Avoid US & UK services</a>
<a class="dropdown-item" href="/providers/cloud-storage/"><i class="fas fa-cloud fa-fw"></i> Cloud Storage</a>
<a class="dropdown-item" href="/providers/dns/"><i class="fa fa-tasks fa-fw"></i> DNS</a>
<a class="dropdown-item" href="/providers/email/"><i class="fas fa-mail-bulk fa-fw"></i> Email</a>
<a class="dropdown-item" href="/providers/hosting/"><i class="fas fa-database fa-fw"></i> Hosting</a>
<a class="dropdown-item" href="/providers/paste/"><i class="fas fa-paste fa-fw"></i> Pastebins</a>
<a class="dropdown-item" href="/providers/search-engines/"><i class="fab fa-searchengin fa-fw"></i> Search Engines</a>
<a class="dropdown-item" href="/providers/social-networks/"><i class="fas fa-expand-arrows-alt fa-fw"></i> Social Networks</a>
<a class="dropdown-item" href="/providers/social-news-aggregator/"><i class="far fa-newspaper fa-fw"></i> Social News Aggregators</a>
<a class="dropdown-item" href="/providers/vpn/"><i class="far fa-eye-slash fa-fw"></i> VPN</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/browsers/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Browser
</a>
<div class="dropdown-menu" aria-labelledby="browserDropdown">
<a class="dropdown-item" href="/browsers/#browser"><i class="fas fa-check fa-fw"></i> Recommendations</a>
<a class="dropdown-item" href="/browsers/#fingerprint"><i class="fas fa-fingerprint fa-fw"></i> Fingerprinting Info</a>
<a class="dropdown-item" href="/browsers/#webrtc"><i class="far fa-eye fa-fw"></i> WebRTC IP Leak Test</a>
<a class="dropdown-item" href="/browsers/#addons"><i class="far fa-list-alt fa-fw"></i> Browser Add-ons</a>
<a class="dropdown-item" href="/browsers/#about_config"><i class="fas fa-wrench fa-fw"></i> Firefox Tweaks</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/software/" id="softwareDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Software
</a>
<div class="dropdown-menu" aria-labelledby="softwareDropdown">
<a class="dropdown-item" href="/software/calendar-contacts/"><i class="fas fa-calendar fa-fw"></i> Calendar/Contacts Sync Tools</a>
<a class="dropdown-item" href="/software/notebooks/"><i class="far fa-sticky-note fa-fw"></i> Digital Notebook</a>
<a class="dropdown-item" href="/software/email/#messaging"><i class="fas fa-random fa-fw"></i> Email Alternatives</a>
<a class="dropdown-item" href="/software/email/"><i class="fas fa-envelope fa-fw"></i> Email Clients</a>
<a class="dropdown-item" href="/software/encryption-tools/"><i class="fas fa-lock fa-fw"></i> File Encryption</a>
<a class="dropdown-item" href="/software/file-sharing/"><i class="fas fa-file-export fa-fw"></i> File Sharing</a>
<a class="dropdown-item" href="/software/passwords/"><i class="fas fa-user-lock fa-fw"></i> Password Manager</a>
<a class="dropdown-item" href="/software/productivity/"><i class="fas fa-briefcase fa-fw"></i> Productivity Tools</a>
<a class="dropdown-item" href="/software/real-time-communication/"><i class="fas fa-comments fa-fw"></i> Real-Time Communication</a>
<a class="dropdown-item" href="/software/file-sync/"><i class="fas fa-copy fa-fw"></i> Secure File Sync</a>
<a class="dropdown-item" href="/software/networks/"><i class="fas fa-user-secret fa-fw"></i> Self-contained Networks</a>
<a class="dropdown-item" href="/software/cloud/"><i class="fas fa-hdd fa-fw"></i> Self-Hosted Cloud Server</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/operating-systems/" id="osDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OS
</a>
<div class="dropdown-menu" aria-labelledby="osDropdown">
<a class="dropdown-item" href="/operating-systems/#os"><i class="fas fa-th-large fa-fw"></i> PC OS Recommendations</a>
<a class="dropdown-item" href="/operating-systems/#live_os"><i class="fas fa-compact-disc fa-fw"></i> Live CD Operating Systems</a>
<a class="dropdown-item" href="/operating-systems/#mobile_os"><i class="fas fa-mobile-alt fa-fw"></i> Mobile Operating Systems</a>
<a class="dropdown-item" href="/operating-systems/#aaddons"><i class="fas fa-th fa-fw"></i> Android Privacy Add-ons</a>
<a class="dropdown-item" href="/operating-systems/#firmware"><i class="fas fa-signal fa-fw"></i> Router Firmware</a>
<a class="dropdown-item" href="/operating-systems/#win10"><i class="far fa-thumbs-down fa-fw"></i> Don't use Windows 10</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html#participate">Participate</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fas fa-language text-danger"></i>
Language
</a>
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
<input type="checkbox" id="nav-toggle" checked />
<label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
<a id="nav-home-mobile" class="nav-anchor" href="/index.html">
<img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
</a>
<div class="menu">
<div id="nav-left" class="position-relative flex-col">
<a class="nav-anchor" href="/index.html">
<span id="nav-home" class="fas fa-home"></span>
</a>
<!-- Provider -->
<details class="nav-details">
<summary>
<span class="nav-summary">
Provider
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a class="dropdown-item" href="/providers/#ukusa"><span class="fab fa-creative-commons-nc fa-fw"></span> Avoid US & UK services</a>
<a class="dropdown-item" href="/providers/cloud-storage/"><span class="fas fa-cloud fa-fw"></span> Cloud Storage</a>
<a class="dropdown-item" href="/providers/dns/"><span class="fa fa-tasks fa-fw"></span> DNS</a>
<a class="dropdown-item" href="/providers/email/"><span class="fas fa-mail-bulk fa-fw"></span> Email</a>
<a class="dropdown-item" href="/providers/hosting/"><span class="fas fa-database fa-fw"></span> Hosting</a>
<a class="dropdown-item" href="/providers/paste/"><span class="fas fa-paste fa-fw"></span> Pastebins</a>
<a class="dropdown-item" href="/providers/search-engines/"><span class="fab fa-searchengin fa-fw"></span> Search Engines</a>
<a class="dropdown-item" href="/providers/social-networks/"><span class="fas fa-expand-arrows-alt fa-fw"></span> Social Networks</a>
<a class="dropdown-item" href="/providers/social-news-aggregator/"><span class="far fa-newspaper fa-fw"></span> Social News Aggregators</a>
<a class="dropdown-item" href="/providers/vpn/"><span class="far fa-eye-slash fa-fw"></span> VPN</a>
</span>
</details>
<!-- Browser -->
<details class="nav-details">
<summary>
<span class="nav-summary">
Browser
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a class="dropdown-item" href="/browsers/#browser"><span class="fas fa-check fa-fw"></span> Recommendation</a>
<a class="dropdown-item" href="/browsers/#fingerprint"><span class="fas fa-fingerprint fa-fw"></span> Fingerprinting Info</a>
<a class="dropdown-item" href="/browsers/#webrtc"><span class="far fa-eye fa-fw"></span> WebRTC IP Leak</a>
<a class="dropdown-item" href="/browsers/#addons"><span class="far fa-list-alt fa-fw"></span> Browser Add-ons</a>
<a class="dropdown-item" href="/browsers/#about_config"><span class="fas fa-wrench fa-fw"></span> Firefox Tweaks</a>
</span>
</details>
<!-- Software -->
<details class="nav-details">
<summary>
<span class="nav-summary">
Software
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a class="dropdown-item" href="/software/calendar-contacts/"><span class="fas fa-calendar fa-fw"></span> Calendar/Contacts Sync Tools</a>
<a class="dropdown-item" href="/software/notebooks/"><span class="far fa-sticky-note fa-fw"></span> Digital Notebook</a>
<a class="dropdown-item" href="/software/email/#messaging"><span class="fas fa-random fa-fw"></span> Email Alternatives</a>
<a class="dropdown-item" href="/software/email/"><span class="fas fa-envelope fa-fw"></span> Email Clients</a>
<a class="dropdown-item" href="/software/encryption-tools/"><span class="fas fa-lock fa-fw"></span> File Encryption</a>
<a class="dropdown-item" href="/software/file-sharing/"><span class="fas fa-file-export fa-fw"></span> File Sharing</a>
<a class="dropdown-item" href="/software/passwords/"><span class="fas fa-user-lock fa-fw"></span> Password Manager</a>
<a class="dropdown-item" href="/software/productivity/"><span class="fas fa-briefcase fa-fw"></span> Productivity Tools</a>
<a class="dropdown-item" href="/software/real-time-communication/"><span class="fas fa-comments fa-fw"></span> Real-Time Communication</a>
<a class="dropdown-item" href="/software/file-sync/"><span class="fas fa-copy fa-fw"></span> Secure File Sync</a>
<a class="dropdown-item" href="/software/networks/"><span class="fas fa-user-secret fa-fw"></span> Self-contained Networks</a>
<a class="dropdown-item" href="/software/cloud/"><span class="fas fa-hdd fa-fw"></span> Self-Hosted Cloud Server</a>
</span>
</details>
<!-- OS -->
<details class="nav-details">
<summary>
<span class="nav-summary">
OS
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a class="dropdown-item" href="/operating-systems/#os"><span class="fas fa-th-large fa-fw"></span> PC OS</a>
<a class="dropdown-item" href="/operating-systems/#live_os"><span class="fas fa-compact-disc fa-fw"></span> Live CD OS</a>
<a class="dropdown-item" href="/operating-systems/#mobile_os"><span class="fas fa-mobile-alt fa-fw"></span> Mobile OS</a>
<a class="dropdown-item" href="/operating-systems/#aaddons"><span class="fas fa-th fa-fw"></span> Android Privacy Add-ons</a>
<a class="dropdown-item" href="/operating-systems/#firmware"><span class="fas fa-signal fa-fw"></span> Router Firmware</a>
<a class="dropdown-item" href="/operating-systems/#win10"><span class="far fa-thumbs-down fa-fw"></span> Don't use Windows 10</a>
</span>
</details>
<a class="nav-anchor" href="/index.html#participate">Participate</a>
</div>
<!-- Language -->
<div id="nav-right">
<details class="nav-details">
<summary>
<span class="nav-summary">
<span class="fas fa-language text-danger"></span>
Language
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a href="https://privacytools.io/" class="dropdown-item">English</a>
<a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
<a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
<a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
@ -88,26 +118,33 @@
<a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
<a href="https://privacytools.ru" class="dropdown-item">Русский</a>
<a href="https://privacytools.dreads-unlock.fr" class="dropdown-item">Français</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/services/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
<a class="dropdown-item" href="https://forum.privacytools.io/"><i class="fab fa-discourse fa-fw"></i> Discourse - Forum</a>
<a class="dropdown-item" href="https://git.privacytools.io/"><i class="fab fa-git fa-fw"></i> Gitea - Git-Repository Manager</a>
<a class="dropdown-item" href="https://social.privacytools.io/"><i class="fas fa-retweet fa-fw"></i> Mastodon - Social Network</a>
<a class="dropdown-item" href="https://chat.privacytools.io/"><i class="fas fa-comment fa-fw"></i> Matrix - Federated Chat</a>
<a class="dropdown-item" href="https://bin.privacytools.io/"><i class="fas fa-clipboard fa-fw"></i> PrivateBin - Encrypted Pastebin</a>
<a class="dropdown-item" href="https://search.privacytools.io/"><i class="fas fa-search fa-fw"></i> Searx - Privacy Friendly Search</a>
<a class="dropdown-item" href="https://write.privacytools.io/"><i class="fas fa-pen-alt fa-fw"></i> Write Freely - Federated Blog</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/donate/">Donate <i class="fas fa-heart text-danger"></i></a>
</li>
</ul>
</span>
</details>
<!-- Services -->
<details class="nav-details">
<summary>
<span class="nav-summary">
Services
<span class="dropdown-toggle"></span>
</span>
</summary>
<span class="nav-dropdown">
<a class="dropdown-item" href="https://forum.privacytools.io/"><span class="fab fa-discourse fa-fw"></span> Discourse - Forum</a>
<a class="dropdown-item" href="https://git.privacytools.io/"><span class="fab fa-git fa-fw"></span> Gitea - Git-Repository Manager</a>
<a class="dropdown-item" href="https://social.privacytools.io/"><span class="fas fa-retweet fa-fw"></span> Mastodon - Social Network</a>
<a class="dropdown-item" href="https://chat.privacytools.io/"><span class="fas fa-comment fa-fw"></span> Matrix - Federated Chat</a>
<a class="dropdown-item" href="https://bin.privacytools.io/"><span class="fas fa-clipboard fa-fw"></span> PrivateBin - Encrypted Pastebin</a>
<a class="dropdown-item" href="https://search.privacytools.io/"><span class="fas fa-search fa-fw"></span> Searx - Privacy Friendly Search</a>
<a class="dropdown-item" href="https://write.privacytools.io/"><span class="fas fa-pen-alt fa-fw"></span> Write Freely - Federated Blog</a>
</span>
</details>
<a href="https://blog.privacytools.io/" class="nav-anchor">Blog </a>
<a href="/donate/" class="nav-anchor">
Donate <span class="fas fa-heart text-danger"></span>
</a>
</div>
</div>
</div>
</nav>
</nav>
</div>

12
_includes/scripts.html
View File

@ -1,18 +1,8 @@
<script src="/assets/js/main.js?v=1"></script>
<script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
<script src="/assets/js/popper.min.js?v=4"></script>
<script src="/assets/js/bootstrap.min.js?v=4"></script>
<script src="/assets/js/sortable.min.js?v=4"></script>
<script>
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
$('.navbar a').not(".dropdown-toggle").click(function (e) {
if ($(".navbar-toggler").is(":visible")) {
$('.navbar-collapse').collapse('toggle');
}
});
</script>
<!--
Matomo is the leading open-source analytics platform:

154
assets/css/style.scss
View File

@ -182,4 +182,156 @@ footer {
i {
margin-right: 1rem;
}
}
}
/*
* Navbar
*/
#navbar {
margin-left: auto;
margin-right: auto;
max-width: 1140px;
padding: .75rem 3rem;
color: rgba(255,255,255,0.5);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#navbar .menu {
position: relative;
}
.menu {
display: flex;
justify-content: space-between;
}
.nav-anchor {
display: inline;
color: inherit;
}
.nav-anchor:hover {
text-decoration: none;
}
.nav-anchor:hover,
.nav-summary:hover,
.nav-details[open] > summary > .nav-summary {
color: rgba(255,255,255,0.8);
}
.nav-dropdown {
color: var(--dark);
background-color: var(--light);
padding: .5rem 0;
margin-top: .5rem;
position: absolute;
border: 1px solid #dee2e6;
border-radius: .25rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
z-index: 10;
}
#nav-right > details > .nav-dropdown {
right: 0;
}
.nav-details {
display: inline;
position: relative;
}
.nav-details > summary {
list-style: none;
}
.nav-details > summary::-webkit-details-marker {
display: none;
}
#nav-right > .nav-details,
#nav-right > .nav-anchor {
padding-left: 0.5rem;
}
#nav-left > .nav-details,
#nav-left > .nav-anchor {
padding-right: 0.5rem;
}
input#nav-toggle,
#nav-toggle-label {
display: none;
}
#nav-home-mobile {
display: none;
}
/* Mobile hamburger menu */
@media only screen and (max-width: 992px) {
.menu,
.nav-details,
.nav-anchor {
display: block;
}
.menu {
margin-top: 0.5rem;
}
#nav-home {
display: none;
}
#nav-home-mobile {
display: inline;
}
input#nav-toggle:checked ~ .menu {
display: none;
}
input#nav-toggle + label {
display: block;
cursor: pointer;
margin-top: 0.25rem;
float: right;
}
.nav-dropdown {
display: block;
position: relative;
max-height: 15.75em;
overflow-y: auto;
left: 0;
right: 0;
}
#nav-right > .nav-details,
#nav-right > .nav-anchor,
#nav-left > .nav-details,
#nav-left > .nav-anchor {
padding: 0 0;
}
#navbar {
padding: 1rem 3rem;
}
}
@media only screen and (max-width: 768px) {
#navbar {
padding: 1rem 2rem;
}
}
@media only screen and (max-width: 575px) {
#navbar {
padding: 1rem 1rem;
}
}
@media only screen and (max-height: 350px) {
.nav-dropdown {
max-height: 8em;
}
}

27
assets/js/main.js Normal file
View File

@ -0,0 +1,27 @@
//
// Navbar dropdowns
//
const navSections = document.querySelectorAll(".nav-details");
navSections.forEach(navSection => {
navSection.addEventListener("toggle", navSectionsToggle);
});
document.addEventListener("click", navSectionsClose);
function navSectionsToggle() {
// When opening next dropdown, hide previous
if (this.open) {
navSections.forEach(navSection => {
if (navSection != this && navSection.open) navSection.open = !open;
});
}
}
function navSectionsClose(event) {
// Hide all dropdowns when clicking in different place
if (event.target.matches(".nav-summary")) return;
navSections.forEach(navSection => {
navSection.open = !open;
});
}