EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Scale and toggle menu correctly

foundation/fix-header-menu
Nicholas Antonov 2018-02-14 19:51:17 -05:00
parent 5c1d3e1a0d
commit ce20ddeb90
4 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/templates/base.html
View File

@ -18,11 +18,10 @@
<script type="text/javascript" src="{{ jquery_home }}"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/sitewide1.js"></script>
<script type="text/javascript" src="/static/scss/foundation/dist/js/foundation.js"></script>
<script type="text/javascript" src="/static/js/watermark_init.js"></script>
<script type="text/javascript" src="/static/js/watermark_change.js"></script>
<script type="text/javascript" src="/static/scss/foundation/dist/js/foundation.js"></script>
<script defer type="text/javascript" src="/static/js/initialize-foundation.js"></script>
<script defer type="text/javascript" src="/static/js/sitewide1.js"></script>
{% block extra_js %}
{% endblock %}
{% if show_langs %}
@ -103,21 +102,27 @@
{% endblock %}
</div>
<div id="header-menu">
<i class="fa fa-bars"></i>
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
<label for="menu-drilldown-box" toggle-header-menu>
<i class="fa fa-bars"></i>
</label>
<div class="top-menu" style="visibility: hidden;">
<ul class="vertical menu drilldown" data-drilldown >
<label for="menu-drilldown-box">
<li toggle-header-menu><a href="#">Back</a></li>
</label>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>

5
static/js/initialize-foundation.js
View File

@ -1,5 +0,0 @@
'use strict';
document.querySelectorAll('[data-drilldown]').forEach(element => {
new Foundation.Drilldown($j(element), {});
});

17
static/js/sitewide1.js
View File

@ -82,4 +82,21 @@ $j(document).ready(function() {
$j('#i_haz_notifications_badge').click(function() {
event.stopPropagation();
});
$j('[toggle-header-menu]').click(function () {toggleVisibility('.top-menu')})
function toggleVisibility(selector) {
var element = document.querySelector(selector);
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}
// Initialize foundation
document.querySelectorAll('[data-drilldown]').forEach(element => {
new Foundation.Drilldown($j(element), {});
});
document.querySelectorAll('[data-dropdown-menu]').forEach(element => {
new Foundation.DropdownMenu($j(element), {});
});
});

24
static/scss/global.scss
View File

@ -1,5 +1,6 @@
@import 'settings/settings';
@import 'foundation';
@import 'variables';
@include foundation-everything;
@include breakpoint(small only) {
@ -7,3 +8,26 @@
display: none;
}
}
.top-menu {
position: absolute;
background-color: $background-body;
box-sizing: border-box;
}
@include breakpoint (small down) {
.top-menu {
height: 100vh;
width: 100vw;
top: 0;
left: 0;
}
}
@include breakpoint (medium) {
.top-menu {
width: 143px;
margin-left: -106px;
border: 1px solid $gray;
}
}