diff options
author | Emir Ribić <ribice@gmail.com> | 2019-10-24 23:46:27 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-10-24 23:46:27 +0300 |
commit | c884d50865d8bc08cbe9e643c4a8543f8ccd090e (patch) | |
tree | b35ef89830642cc85a43f414bc469e0f85f14025 | |
parent | 9c5638bbf3071f216bef76a5c81660d59cce431c (diff) | |
parent | fa45dfcfff2708aa455ca61c1bcdd3c7b8215f84 (diff) |
Added dynamic icon container shifting. (#78)
Added dynamic icon container shifting.
-rw-r--r-- | layouts/partials/nav.html | 11 | ||||
-rw-r--r-- | static/css/style.css | 8 | ||||
-rw-r--r-- | static/js/navicon-shift.js | 24 |
3 files changed, 33 insertions, 10 deletions
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 96993e4..69f6f8d 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,13 +1,13 @@ <section class="section"> <div class="container"> - <nav class="nav"> - <div class="nav-left"> - <a class="nav-item" href="{{ .Site.BaseURL }}"> - <h1 class="title is-4">{{ .Site.Title }}</h1> + <nav id="nav-main" class="nav"> + <div id="nav-name" class="nav-left"> + <a id="nav-anchor" class="nav-item" href="{{ .Site.BaseURL }}"> + <h1 id="nav-heading" class="title is-4">{{ .Site.Title }}</h1> </a> </div> <div class="nav-right"> - <nav class="nav-item level is-mobile"> + <nav id="nav-items" class="nav-item level is-mobile"> {{- $social := ( .Site.Params.social ) -}} {{- range $platform := $social.config.platforms -}} {{- with $username := ( index $social $platform ) -}} @@ -52,4 +52,5 @@ </nav> </div> + <script src="/js/navicon-shift.js"></script> </section>
\ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 21971c8..4688229 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5267,11 +5267,9 @@ a.nav-item.is-tab.is-active { z-index: 2; } -@media (max-width:767px) { - .nav { - display: grid; - grid-template-columns: auto; - } +.nav-shifted { + display: grid !important; + grid-template-columns: auto !important; } .panel-heading, diff --git a/static/js/navicon-shift.js b/static/js/navicon-shift.js new file mode 100644 index 0000000..b87ec9f --- /dev/null +++ b/static/js/navicon-shift.js @@ -0,0 +1,24 @@ +const + nameElement = document.getElementById('nav-name'), + parentElement = document.getElementById('nav-main'); + +let incremented = 0; +function shiftNavIcons() { + + let headingElement = document.getElementById('nav-heading'); + if(nameElement.offsetWidth < (headingElement.offsetWidth+10)) { + parentElement.classList.add('nav-shifted'); + } else { + incremented++; + if(incremented > 5 && parentElement.offsetWidth > 445) { + parentElement.className = parentElement.className.replace(/\bnav-shifted\b/g, ''); + incremented = 0; + } + + } + +}; +window.addEventListener('resize', (event) => { + shiftNavIcons(); +}); +shiftNavIcons();
\ No newline at end of file |