-
Notifications
You must be signed in to change notification settings - Fork 5
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.
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
Sidebar basic structure #102
Merged
Merged
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
11696d7
removed donate button from nav
da96af6
added simple sidebar
d4021e6
added sidebar menu styling
cda1a85
fixed sidebar/content layout
c6cef40
added mobile sidebar dummy
cb1b366
added basic toggling of mobile sidebar menu
03dad1a
added program logo to mobile sidebar
11b8b07
fixed sidemenu resizing breakpoints
909d908
Adding a template tag to check if the page requires a navbar
sanajaved7 48b1e77
Updated the top and side bar menus
sanajaved7 14c4c2a
Updated base with template tags
sanajaved7 3f2c903
PEP8 changes
sanajaved7 0f5b76f
Removing print statements
sanajaved7 61b8bf0
Merge pull request #104 from newamericafoundation/sidebar-basic-struc…
kjacks a4df8e1
fixed sidebar/content container formatting issues
0596855
fixed footer overlap problem
1b5b759
fixed breadcrumb positioning
f296da1
removed media images
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| {% load side_menu wagtailcore_tags static %} | ||
| {% get_site_root as site_root %} | ||
|
|
||
| <div class="mobile-sidemenu"> | ||
| <button class="mobile-sidemenu__toggle">Menu</button> | ||
| <a href= "#"> | ||
| <div class="mobile-sidemenu__program-title"> | ||
| <h1 class="mobile-sidemenu__program-title__title">INTERNATIONAL SECURITY</h1> | ||
| </div> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div class="sidemenu" > | ||
| <a href= "#"> | ||
| <div class="sidemenu__program-title"> | ||
| <h1 class="sidemenu__program-title__title">INTERNATIONAL SECURITY</h1> | ||
| </div> | ||
| </a> | ||
| <div class="sidemenu__link-group"> | ||
| <ul class="menu vertical sidemenu__link-group__content" id="example-menu"> | ||
| <li class="menu-text sidemenu__link-group__title">Initiatives & Projects</li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Future of War</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Cybersecurity Initiative</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">World of Drones</a></li> | ||
|
|
||
| <li class="menu-text sidemenu__link-group__title">Events</li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Current Events</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Past Events</a></li> | ||
|
|
||
| <li class="menu-text sidemenu__link-group__title">Our Work</li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Blog Posts</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Press Releases</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Articles</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Books</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Quoted</a></li> | ||
| <li class="sidemenu__link-group__link"><a href="#">Podcasts</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| from datetime import date | ||
| from django import template | ||
| from django.conf import settings | ||
|
|
||
| from programs.models import Program | ||
|
|
||
| register = template.Library() | ||
|
|
||
| @register.assignment_tag(takes_context=True) | ||
| def get_site_root(context): | ||
| # NB this returns a core.Page, not the implementation-specific model used | ||
| # so object-comparison to self will return false as objects would differ | ||
| return context['request'].site.root_page | ||
|
|
||
|
|
||
| # def has_menu_children(page): | ||
| # return page.get_children().live().in_menu().exists() | ||
|
|
||
|
|
||
| # Retrieves the top menu items - the immediate children of the parent page | ||
| @register.inclusion_tag('tags/side_menu.html', takes_context=True) | ||
| def side_menu(context, parent, calling_page=None): | ||
| # # programs = Program.objects.in_menu().order_by("title").exclude(location=True) | ||
| # programs = [] | ||
| # location_programs = [] | ||
| # all_programs = Program.objects.in_menu().order_by("title") | ||
| # for program in all_programs: | ||
| # if program.location == True: | ||
| # location_programs.append(program) | ||
| # else: | ||
| # programs.append(program) | ||
| return { | ||
| 'calling_page': calling_page, | ||
| # 'programs': programs, | ||
| # 'location_programs': location_programs, | ||
| # required by the pageurl tag that we want to use within this template | ||
| 'request': context['request'], | ||
| } | ||
|
|
||
|
|
||
| # Retrieves the children of the top menu items for the drop downs | ||
| # @register.inclusion_tag('tags/top_menu_children.html', takes_context=True) | ||
| # def top_menu_children(context, parent): | ||
| # subprograms = parent.subprogram_set.all() | ||
|
|
||
| # return { | ||
| # 'parent': parent, | ||
| # 'subprograms': subprograms, | ||
| # # required by the pageurl tag that we want to use within this template | ||
| # 'request': context['request'], | ||
| # } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| import './border-panel/index.js' | ||
| import './header/index.js' | ||
| import './sidemenu/index.js' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import $ from 'jquery' | ||
|
|
||
| import getJQueryObjects from './../../utilities/get_jquery_objects.js' | ||
|
|
||
| var clicked = false; | ||
|
|
||
| function addSidemenuInteractivity() { | ||
| $(".mobile-sidemenu__toggle").on("click", function() { | ||
| clicked = !clicked; | ||
| console.log("clicked!"); | ||
| $(".sidemenu").toggle(); | ||
| $(".content-container").toggle(); | ||
| $("footer").toggle(); | ||
| }) | ||
| } | ||
|
|
||
| $(addSidemenuInteractivity) | ||
|
|
||
| var $window = $( window ); // so you have a "cached" reference | ||
| var breakpoint = 640; | ||
|
|
||
| $window.resize ( function () { | ||
| console.log("calling resize"); | ||
|
|
||
|
|
||
| if ($window.width() > breakpoint ) { | ||
| // if (clicked == true ) { | ||
| console.log("width is greater"); | ||
| $(".sidemenu").css("display", "block"); | ||
| $(".content-container").css("display", "block"); | ||
| $("footer").css("display", "block"); | ||
| clicked = false; | ||
|
|
||
| } else { | ||
| if (!clicked) { | ||
| $(".sidemenu").css("display", "none"); | ||
| } | ||
| } | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
|
|
||
| .sidebar-container { | ||
| width:100%; | ||
| height:100%; | ||
| position:absolute; | ||
| float:left; | ||
|
|
||
| @include desktop-sidemenu { | ||
| width: $max-sidemenu-width; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| .content-container { | ||
| width: 100%; | ||
| height: 100%; | ||
| padding-top:$mobile-header-height; | ||
|
|
||
| @include desktop-sidemenu { | ||
| padding-left: $max-sidemenu-width; | ||
| padding-top:0px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| @import 'wrapper'; | ||
| @import 'section'; | ||
| @import 'containers'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,3 +16,8 @@ | |
| @content; | ||
| } | ||
| } | ||
| @mixin desktop-sidemenu() { | ||
| @include breakpoint(medium) { | ||
| @content; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| $left-pad: 20px; | ||
|
|
||
| .mobile-sidemenu { | ||
| background-color: palette-get(na-black); | ||
| width: 100%; | ||
| height:$mobile-header-height; | ||
| z-index: 1000; | ||
| font-color:palette-get(na-white); | ||
|
|
||
| @include desktop-sidemenu { | ||
| display:none; | ||
| } | ||
|
|
||
| &__program-title { | ||
| position:absolute; | ||
| margin-top: 10px; | ||
| margin-left: $left-pad; | ||
| width: $max-sidemenu-width / 2; | ||
| background-color: palette-get(na-white); | ||
| padding: 7px 7px 1.5px 7px; | ||
|
|
||
| &__title { | ||
| font-size:13px; | ||
| font-color:palette-get(na-black); | ||
| /*padding-left: $left-pad;*/ | ||
| } | ||
| } | ||
|
|
||
| &__toggle { | ||
| position:absolute; | ||
| z-index: 1100; | ||
| top: 30px; | ||
| right: 120px; | ||
| color:white; | ||
| font-weight:bold; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .sidemenu { | ||
| top: 0; | ||
| background-color: palette-get(na-black); | ||
| width: 100%; | ||
| height:100%; | ||
| z-index: 1000; | ||
| font-color:palette-get(na-white); | ||
|
|
||
| display:none; | ||
| /*padding-left: 20px;*/ | ||
|
|
||
| @include desktop-sidemenu { | ||
| display:block; | ||
| padding-top: 20px; | ||
| } | ||
|
|
||
| &__program-title { | ||
| margin-left: $left-pad; | ||
| width: $max-sidemenu-width / 2; | ||
| background-color: palette-get(na-white); | ||
| padding: 7px 7px 1.5px 7px; | ||
| display:none; | ||
|
|
||
| @include desktop-sidemenu { | ||
| display:block; | ||
| } | ||
|
|
||
| &__title { | ||
| font-size:15px; | ||
| font-color:palette-get(na-black); | ||
| /*padding-left: $left-pad;*/ | ||
| } | ||
| } | ||
|
|
||
| &__link-group { | ||
| color: white; | ||
|
|
||
| &__title { | ||
| padding-left: $left-pad; | ||
| font-size:20px; | ||
| } | ||
|
|
||
| &__link { | ||
| padding-left: $left-pad; | ||
|
|
||
| &:hover { | ||
| background-color: palette-get(na-turquoise); | ||
| } | ||
|
|
||
| & > a { | ||
| color: grey; | ||
|
|
||
| &:hover { | ||
| color: white; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @import 'main'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| $max-site-width: 1150px; | ||
| $max-site-width: 1350px; | ||
| $max-body-width: 650px; | ||
| $max-sidemenu-width: 300px; | ||
|
|
||
| $thick-border-width: 4px; | ||
|
|
||
| $mobile-header-height: 60px; | ||
| $mobile-header-height: 70px; | ||
|
|
||
| $mobile-padding: 10px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like you left in a couple print statement, I would go ahead and take these out.