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

Merge pull request #62 from EbookFoundation/foundation/menu 

Update menu with correct links
fix/updatedeps
Nicholas Antonov 2018-02-20 14:59:52 -05:00 committed by GitHub
parent 63ee9ff460 ac860ba1a3
commit 97af3c58f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/templates/base.html
View File

@ -106,22 +106,31 @@
<label for="menu-drilldown-box" toggle-header-menu>
<i class="fa fa-bars"></i>
</label>
<div class="top-menu" style="visibility: hidden;">
<div id="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>
<li>
<a href="#">Account</a>
<ul class="menu vertical nested">
<li><a href="#">Pledges</a></li>
<li><a href="#">Notices</a></li>
<li><a href="#">Profile Settings</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</li>
<li>
<a href="#">About Unglue.it</a>
<ul class="menu vertical nested">
<li><a href="{% url 'about' %}">Concept</a></li>
<li><a href="https://blog.unglue.it/">Blog</a></li>
<li><a href="{% url 'press' %}">Press</a></li>
<li><a href="http://eepurl.com/fKLfI">Newsletter</a></li>
</ul>
</li>
<li><a href="{% url 'faq' %}">FAQ</a></li>
<li><a href="{% url 'feedback' %}?page={{request.build_absolute_uri|urlencode:""}}">Help</a></li>
</ul>
</div>
</div>

14
static/js/sitewide1.js
View File

@ -10,14 +10,14 @@ $j(document).ready(function() {
var work_page = $j(this).attr("href").split("download")[0];
var isDownload =$j(this).attr("href").indexOf("download");
var vars = $j(this).attr("href").split("next=");
$j("#lightbox").load($j(this).attr("href") + " #lightbox_content", function() {
// centering divs of dynamic width: shockingly hard. make sure lightbox is centered on load.
var hijaxWidth = $j('#about_expandable').width() + 28;
var windowWidth = $j(document).width();
var marginWidth = (windowWidth - hijaxWidth)/2;
$j('#about_expandable').css({'margin-left': marginWidth, 'margin-right': marginWidth});
// position div vertically relative to top of viewport, to ensure visibility
// regardless of where on the page the user clicked to activate it
var marginTop = window.pageYOffset;
@ -31,9 +31,9 @@ $j(document).ready(function() {
$j.getScript('https://www.dropbox.com/static/api/2/dropins.js');
$j.cookie('next', work_page, {path: '/'});
}
else {
else {
//need to push next cookie for sign-in links
if (vars.length>1){
next=vars[1];
if(next!='') {
@ -46,7 +46,7 @@ $j(document).ready(function() {
$j('#feedback, #js-page-wrap, #footer').css({"opacity": "0.07"});
$j('#about_expandable').css({'position': 'absolute'});
$j('#about_expandable').fadeTo("slow", 1);
// if we're on a supporter page, personalize our about box
// by writing the supporter's name in
if ($j(location).attr('pathname').slice(0,11) == '/supporter/') {
@ -63,7 +63,7 @@ $j(document).ready(function() {
}
});
});
// fade-in normal page elements on collapse
$j('#about_collapser').on("click", function(){
$j('#js-topsection, .launch_top, .preview, #main-container, #js-rightcol, #js-header, #js-page-wrap, #footer, #feedback').fadeTo("slow", 1);
@ -83,7 +83,7 @@ $j(document).ready(function() {
event.stopPropagation();
});
$j('[toggle-header-menu]').click(function () {toggleVisibility('.top-menu')})
$j('[toggle-header-menu]').click(function () {toggleVisibility('#top-menu')})
function toggleVisibility(selector) {
var element = document.querySelector(selector);

36
static/scss/global.scss
View File

@ -10,23 +10,51 @@
}
}
.top-menu {
position: absolute;
#top-menu {
position: fixed;
background-color: $background-body;
box-sizing: border-box;
}
@include breakpoint (small down) {
.top-menu {
#top-menu {
height: 100vh;
width: 100vw;
top: 0;
left: 0;
&> div {
height: 100vh;
.menu {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100vh;
label {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
}
li {
a {
display: flex;
flex-direction: row;
align-items: center;
font-size: 2vh;
height: 100%;
}
flex: 1;
}
}
}
}
}
@include breakpoint (medium) {
.top-menu {
#top-menu {
width: 143px;
margin-left: -106px;
border: 1px solid $gray;