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

Dark Mode and General House Keeping #174

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Dark Mode and General House Keeping #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
20675e6
remove side thick
aeadedoyin May 8, 2021
54424bd
fix header scroll-show
aeadedoyin May 8, 2021
5aa36fe
fix search and scroll ux
aeadedoyin May 8, 2021
1bebbc6
update npm packages
aeadedoyin May 10, 2021
1d27ffa
add night-mode and house keeping
aeadedoyin May 10, 2021
cedcb73
add responsive mode-button-mobile
aeadedoyin May 10, 2021
7913b3d
resolve conflict: package-lock
aeadedoyin Oct 23, 2021
91a45da
Merge branch 'master' into ft-night-mode
aeadedoyin Oct 23, 2021
6a5bf7a
fix: Code scanning - Inefficient regular expression
aeadedoyin Oct 23, 2021
1636ac7
fix: Code scanning - Inefficient regular expression
aeadedoyin Oct 23, 2021
25758b4
fix: Code scanning - Inefficient regular expression
aeadedoyin Oct 23, 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
119 changes: 74 additions & 45 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<html lang="en">

<head>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-icon-72x72.png">
Expand All @@ -17,39 +16,34 @@
<link rel="icon" type="image/png" sizes="96x96" href="images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Primary Meta Tags -->
<title>Nigeria Logos - An open source project</title>
<meta name="title" content="Nigeria Logos - An open source project">
<meta name="description" content="A free logo library for Nigerian companies">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favicon.ico/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://nigerialogos.com/">
<meta property="og:title" content="Nigeria Logos - An open source project">
<meta property="og:description" content="A free logo library for Nigerian companies">
<meta property="og:image" content="https://nigerialogos.com/images/seo_card.jpg">
<meta property="og:site_name" content="NigeriaLogos" />
<!-- Twitter -->
<meta property="og:site_name" content="NigeriaLogos">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://nigerialogos.com/">
<meta property="twitter:title" content="Nigeria Logos - An open source project">
<meta property="twitter:description" content="A free logo library for Nigerian companies">
<meta property="twitter:image" content="https://nigerialogos.com/images/seo_card.jpg">
<!-- Styles -->
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#06DAAF" />
<meta name="theme-color" content="#06DAAF">
<meta name="msapplication-navbutton-color" content="#06DAAF">
<meta name="apple-mobile-web-app-status-bar-style" content="#06DAAF">
<!-- Scripts -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw-dist.js');
navigator.serviceWorker.register('/sw-dist.js');
});
}
</script>
Expand All @@ -60,57 +54,96 @@
<div class="scroll-show">
<div class="white-bg"></div>
<div class="site-logo">
<a href="https://nigerialogos.com/"><img src="images/nigerialogos_logo.svg" alt="NigeriaLogos logo"></a>
</div>
<div class="secondary-alphabet">
<a href="##">#</a>
<!-- Populated by createSecondaryAlphabet() in imageLoad.js -->
<a href="/"><img src="images/nigerialogos_logo.svg" alt="NigeriaLogos logo"></a>
</div>
<div class="secondary-alphabet"><a href="##">#</a></div>
<div class="searchbar">
<div class="select">
<label for="Categories" class="visuallyhidden"><span>Categories</span></label>
<select name="Categories" id="Categories">
<option value="All Categories">All Categories</option>
<!-- OTHER CATEGORIES AUTOGENERATED HERE Format: Same as the option above.-->
<select name="categories" bind="category">
<option value="">All Categories</option>
</select>
</div>
<div class="search">
<label for="search" class="visuallyhidden">
<span>Search</span>
</label>
<input type="text" name="search" id="search" placeholder="search for a company">
<label for="search" class="visuallyhidden"><span>Search</span></label>
<input name="search" placeholder="search for a company" bind="search">
</div>
</div>
</div>
<div class="heading">
<div class="site-logo">
<a href="https://nigerialogos.com/"><img src="images/nigerialogos_logo.svg" alt="NigeriaLogos logo"></a>
<a href="/"><img src="images/nigerialogos_logo.svg" alt="NigeriaLogos logo"></a>
</div>
<h1>NigeriaLogos, an <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open source</a>
collection<br>of high quality, pixel perfect Nigerian<br>company logos for free use.</h1>
<div class="subcopy">
<span>Search through 100+ vector logos from 36+ contributors</span>
<button class="mode-button light" title="light">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon dark-mode">
<path fill="currentColor"
d="M20.354 15.354l.928.373a1 1 0 00-1.3-1.3l.372.927zM8.646 3.646l.928.373a1 1 0 00-1.301-1.301l.373.928zm11.335 10.78c-.92.37-1.925.574-2.981.574v2a9.976 9.976 0 003.727-.718l-.746-1.856zM17 15a8 8 0 01-8-8H7c0 5.523 4.477 10 10 10v-2zM9 7c0-1.056.204-2.061.574-2.981l-1.856-.746A9.975 9.975 0 007 7h2zm-5 5a8.003 8.003 0 015.019-7.426l-.746-1.856A10.003 10.003 0 002 12h2zm8 8a8 8 0 01-8-8H2c0 5.523 4.477 10 10 10v-2zm7.426-5.019A8.003 8.003 0 0112 20.001v2c4.207 0 7.805-2.599 9.282-6.274l-1.856-.746z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round"
class="icon system-mode" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
data-v-49aa6019="">
<rect width="20" height="14" x="2" y="3" rx="2" ry="2" data-v-49aa6019=""></rect>
<line x1="8" x2="16" y1="21" y2="21" data-v-49aa6019=""></line>
<line x1="12" x2="12" y1="17" y2="21" data-v-49aa6019=""></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon light-mode"
data-v-49aa6019="">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3V4M12 20V21M21 12H20M4 12H3M18.364 18.364L17.6569 17.6569M6.34315 6.34315L5.63604 5.63604M18.364 5.63609L17.6569 6.3432M6.3432 17.6569L5.63609 18.364M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
data-v-49aa6019=""></path>
</svg>
<span class="text">Light</span>
</button>
</div>
<div class="cta">
<a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">
<button class="contribute">Contribute on Github</button>
</a>

</div>
<h1>NigeriaLogos, an <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open source</a> collection<br>of
high quality, pixel perfect Nigerian<br>company logos for free use.</h1>
<p class="subcopy">Search through 100+ vector logos from 36+ contributors</p>
<a href="https://github.com/PaystackHQ/nigerialogos" target="_blank"><button class="contribute">Contribute on Github</button></a>


<div class="searchbar">
<div class="select">
<label for="Categories" class="visuallyhidden"><span>Categories</span></label>
<select name="Categories" id="Categories">
<option value="All Categories">All Categories</option>
<!-- OTHER CATEGORIES AUTOGENERATED HERE Format: Same as the option above.-->
<select name="Categories" bind="category">
<option value="">All Categories</option>
</select>
</div>
<div class="search">
<label for="search" class="visuallyhidden">
<span>Search</span>
</label>
<input type="text" name="search" id="search" placeholder="search for a company">
<label for="search" class="visuallyhidden"><span>Search</span></label>
<input name="search" placeholder="search for a company" bind="search">
</div>
</div>
</div>

<a href="https://github.com/PaystackHQ/nigerialogos" target="_blank" class="contribute-mobile">Contribute on Github</a>
<div class="right-nav">
<button class="mode-button-mobile dark" title="dark">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon dark-mode">
<path fill="currentColor"
d="M20.354 15.354l.928.373a1 1 0 00-1.3-1.3l.372.927zM8.646 3.646l.928.373a1 1 0 00-1.301-1.301l.373.928zm11.335 10.78c-.92.37-1.925.574-2.981.574v2a9.976 9.976 0 003.727-.718l-.746-1.856zM17 15a8 8 0 01-8-8H7c0 5.523 4.477 10 10 10v-2zM9 7c0-1.056.204-2.061.574-2.981l-1.856-.746A9.975 9.975 0 007 7h2zm-5 5a8.003 8.003 0 015.019-7.426l-.746-1.856A10.003 10.003 0 002 12h2zm8 8a8 8 0 01-8-8H2c0 5.523 4.477 10 10 10v-2zm7.426-5.019A8.003 8.003 0 0112 20.001v2c4.207 0 7.805-2.599 9.282-6.274l-1.856-.746z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round"
class="icon system-mode" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
data-v-49aa6019="">
<rect width="20" height="14" x="2" y="3" rx="2" ry="2" data-v-49aa6019=""></rect>
<line x1="8" x2="16" y1="21" y2="21" data-v-49aa6019=""></line>
<line x1="12" x2="12" y1="17" y2="21" data-v-49aa6019=""></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon light-mode"
data-v-49aa6019="">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3V4M12 20V21M21 12H20M4 12H3M18.364 18.364L17.6569 17.6569M6.34315 6.34315L5.63604 5.63604M18.364 5.63609L17.6569 6.3432M6.3432 17.6569L5.63609 18.364M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
data-v-49aa6019=""></path>
</svg>
</button>
<a href="https://github.com/PaystackHQ/nigerialogos" target="_blank" class="contribute-mobile">
Contribute on Github</a>
</div>
</header>

<section>
<div class="background">
<div class="background__left">
Expand All @@ -129,13 +162,9 @@ <h1>NigeriaLogos, an <a href="https://github.com/PaystackHQ/nigerialogos" target
</div>
</div>
</section>

<section>
<p class="result">Showing <span id="results"></span> results for "<span class="typed"></span>"</p>
<div class="companies-alphabet">
<!-- Autoload -->
<!-- <a class="companies-alphabet-link" id="alpha-link" href="##">#</a> -->
</div>
<div class="companies-alphabet"></div>
</section>

<main>
Expand Down Expand Up @@ -186,8 +215,8 @@ <h1>NigeriaLogos, an <a href="https://github.com/PaystackHQ/nigerialogos" target
</div>
</a>
</footer>
<!-- Scripts -->

<script src="js/data-binding.js" defer></script>
<script src="js/imageLoad.js" defer></script>
<script src="js/search.js" defer></script>
<script src="js/mobileDownload.js" defer></script>
Expand Down
14 changes: 14 additions & 0 deletions js/data-binding.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const bindedElements = document.querySelectorAll('[bind]');
bindedElements.forEach(propagatingEl => {
propagatingEl.oninput = () => {
bindedElements.forEach(receivingEl => {
if (receivingEl !== propagatingEl && receivingEl.getAttribute('bind') === propagatingEl.getAttribute('bind')) {
if (['SELECT', 'INPUT'].includes(receivingEl.tagName)) {
receivingEl.value = propagatingEl.value;
} else {
receivingEl.innerHTML = propagatingEl.value;
}
}
});
};
});
Loading