Browse Source
Merge pull request #228 from CatalystCode/bugfix/make-menu-responsive
Bugfix/Make menu responsive
pull/216/head
Hiroki Nakayama
5 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
42 additions and
0 deletions
-
app/server/static/assets/css/forum.css
-
app/server/static/pages/index.js
-
app/server/templates/base.html
|
|
@ -31,10 +31,31 @@ strong { |
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, .3); |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-burger, |
|
|
|
.navbar-item { |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
a.navbar-burger:hover { |
|
|
|
background-color: #fafafa; |
|
|
|
color: #3273dc; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-menu.is-active .navbar-item, |
|
|
|
.navbar-menu.is-active .navbar-link { |
|
|
|
color: #4a4a4a; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-menu.is-active .navbar-dropdown .navbar-item { |
|
|
|
color: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-menu.is-active .navbar-dropdown .navbar-item:hover, |
|
|
|
.navbar-menu.is-active .navbar-item:hover, |
|
|
|
.navbar-menu.is-active .navbar-link:hover { |
|
|
|
color: #3273dc; |
|
|
|
} |
|
|
|
|
|
|
|
.topNav { |
|
|
|
border-top: 5px solid #3498DB; |
|
|
|
} |
|
|
|
|
|
@ -12,3 +12,19 @@ new Swiper('.swiper-container', { |
|
|
|
prevEl: '.swiper-button-prev', |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); |
|
|
|
|
|
|
|
if ($navbarBurgers.length > 0) { |
|
|
|
$navbarBurgers.forEach((el) => { |
|
|
|
el.addEventListener('click', () => { |
|
|
|
const target = el.dataset.target; |
|
|
|
const $target = document.getElementById(target); |
|
|
|
|
|
|
|
el.classList.toggle('is-active'); |
|
|
|
$target.classList.toggle('is-active'); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
@ -46,6 +46,11 @@ |
|
|
|
<img src="{% static 'assets/images/logo.png' %}" width="32" height="32"> |
|
|
|
<b>doccano</b> |
|
|
|
</a> |
|
|
|
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="topNav"> |
|
|
|
<span aria-hidden="true"></span> |
|
|
|
<span aria-hidden="true"></span> |
|
|
|
<span aria-hidden="true"></span> |
|
|
|
</a> |
|
|
|
{% block navigation %}{% endblock %} |
|
|
|
</div> |
|
|
|
<div id="topNav" class="navbar-menu"> |
|
|
|