Skip to content

Commit

Permalink
Merge pull request #234 from challengepost/new_nav_2025
Browse files Browse the repository at this point in the history
New nav, 2025
  • Loading branch information
niuage authored Feb 5, 2025
2 parents a9be63e + 79a7a78 commit 569d1f5
Show file tree
Hide file tree
Showing 16 changed files with 435 additions and 140 deletions.
14 changes: 8 additions & 6 deletions app/assets/javascripts/reimagine2/accessible_global_nav.coffee
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
# Addresses the impossibility to reach the dropdown menus in
# the global nav bar with the keyboard (using tab)
@Reimagine2.accessibleGlobalNav = ->
$dropDown = $('#global-nav-user-dropdown')
$dropDown = $('nav.top-bar .has-dropdown')

$dropDown.on 'focus', 'a', ->
$dropDown.on 'focus', 'a', (e) ->
$currentDropdown = $(e.currentTarget).closest('.has-dropdown')
# Foundation4's top-bar styles support the class
# hover to open the menu
$dropDown.addClass('hover')
$currentDropdown.addClass('hover')

$dropDown.on 'blur', 'a', ->
$dropDown.on 'blur', 'a', (e) ->
$currentDropdown = $(e.currentTarget).closest('.has-dropdown')
# need to delay this until after the new element has been focused
setTimeout( ->
# if the newly focused element is not inside the dropdown
if $(':focus').closest('#global-nav-user-dropdown').length == 0
if $(':focus').parents().filter($currentDropdown).length == 0
# hide the menu
$dropDown.removeClass('hover')
$currentDropdown.removeClass('hover')
, 15)
12 changes: 12 additions & 0 deletions app/assets/javascripts/reimagine2/mobile_global_nav.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,15 @@

if !$mobileSearchContainer.hasClass("hide")
$mobileSearchContainer.find("#search").focus()

$("[data-accordion-tab]").on "click", (e) =>
e.preventDefault()

$link = $(e.currentTarget)
$link.toggleClass('expanded')

targetId = $link.attr('href').substring(1)

$targetSection = $("[data-accordion-section='#{targetId}']")
$targetSection.slideToggle()
$('[data-accordion-section').not($targetSection).slideUp();
195 changes: 156 additions & 39 deletions app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass
Original file line number Diff line number Diff line change
@@ -1,15 +1,36 @@
@import "./global_nav_active_states"

$dropdown-links-line-height: 28px

#global-nav
background: white
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
box-shadow: 0px 1px 3px rgba(0,0,0,0.3)
position: relative

.top-bar-section
.has-dropdown > a:after
border-top-color: transparent
border-left-color: $grey-3
.dropdown.main-menu-dropdown
li a
padding: 0
line-height: $dropdown-links-line-height

&:hover
background: none

.has-dropdown
& > a:after
border-top-color: transparent
border-left-color: $grey-3

.fa-angle-up
display: none

&:hover, &.hover
.fa-angle-up
display: inline-block

.fa-angle-down
display: none

.logged-out
@media (max-width: 329px)
Expand Down Expand Up @@ -102,13 +123,18 @@
display: flex
flex-direction: column
padding-top: 3px
padding-left: 53px

&.with-icon-offset
padding-left: 50px

a
padding: 6px 6px
line-height: 16px
color: $primary-1

.resource-title
font-weight: bold

.name
float: left

Expand Down Expand Up @@ -157,8 +183,13 @@
strong
display: inline

@media only screen and (max-width: 1076px)
padding: 0 1.18em
&:after
border: 0 !important

i
margin-left: 4px
position: relative
top: 1px

.alpha
display: none
Expand Down Expand Up @@ -345,13 +376,42 @@
color: $grey-3
font-size: 1.1rem

.accordion-tab
color: $dark
font-weight: 500
display: block
padding: 24px 16px !important
max-height: none
line-height: $dropdown-links-line-height !important
border-bottom: 1px solid $grey-2
font-size: 16px !important
display: flex
align-items: center
justify-content: space-between

.fa-angle-up
display: none

&.expanded
.fa-angle-down
display: none

.fa-angle-up
display: block

.accordion-section
display: none
background: $grey-1

.panel-section
border-bottom: 1px solid #DDE3E6

.ui-autocomplete
max-width: 300px

.dropdown
&.float-left
position: absolute
left: -12.125em
z-index: 1001

.panel-product-content
Expand All @@ -362,42 +422,99 @@
margin-bottom: 0
line-height: 16px

#floating-menu-wrapper
.floating-menu
.floating-menu-wrapper
padding: 32px

.mobile &
padding: 0

.panel-container
flex: 1
margin-right: 32px
font-size: 14px

&:last-child, &.mr-0
margin-right: 0

&.mb-4
margin-bottom: 16px

&.bordered
border: 1px solid #DDE3E6
border-radius: 8px

.panel-product
display: flex
height: 226px
width: 768px

.panel-container
flex: 1
padding: 20px 30px 40px
font-size: 14px

.panel-product
display: flex
grid-column-gap: 12px
align-items: flex-start
padding: 10px
border-radius: 3px
font-size: 14px
grid-column-gap: 12px
align-items: flex-start
border-radius: 3px
font-size: 14px
white-space: normal
max-height: initial !important
padding: 0 !important

> *
white-space: normal
max-height: initial

.title
padding-top: 4px
padding-bottom: 4px
.title
margin: 4px 0 6px

.subtitle
color: $blue-grey-6

.subtitle
color: $blue-grey-4
.panel-content
display: flex
flex-direction: column

.panel-content
display: flex
flex-direction: column
&.with-icon-offset
padding-top: 10px
padding-left: 53px
padding-left: 50px

a
padding: 6px 6px
border-radius: 3px
line-height: 16px
color: $primary-1
a
line-height: $dropdown-links-line-height !important
padding: 0 !important
border-radius: 3px
color: $primary-1

.panel-section
display: block
padding: 16px !important
max-height: none !important

&.bordered
border-radius: 8px
border: 1px solid #DDE3E6

&.bordered-hover
&:hover, &:focus
border-color: $anchor-font-color-hover

&.pt-0
padding-top: 0

.fa-arrow-right
float: right
line-height: $dropdown-links-line-height
color: $blue-grey-4

a:hover, a:focus
.fa-arrow-right
color: $anchor-font-color-hover

p:not(.title)
margin-bottom: 0

#join-a-hackathon-dropdown
left: -194px
width: 820px

#host-a-hackathon-dropdown
min-width: 1000px

@media #{$large}
min-width: 1100px

left: -402px

#resources-dropdown
left: -100px
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
@media #{$small}
+align-stretch

.align-start
align-items: flex-start

.flex-column
-ms-flex-direction: column
-webkit-flex-direction: column
Expand Down Expand Up @@ -67,3 +70,6 @@

.flex-columns
+flex(1)

.is-flex-grow-1
flex-grow: 1
4 changes: 0 additions & 4 deletions app/views/reimagine2/devpost/_global_nav_desktop.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@

<div class="right">
<ul>
<li>
<%= link_to 'Host a hackathon', 'https://info.devpost.com', class: 'main-link', data: { role: 'for-orgs' } %>
</li>

<li class="search-expand-container desktop main-link">
<a data-toggle-desktop-search><i class="fas fa-search"></i></a>
</li>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>

<%= content_tag :div, class: ["panel-section", local_assigns[:panel_classes]] do %>
<div class="panel-content">
<p class="title bold">By use case</p>

<%
entries = [
['AI hackathons', 'https://info.devpost.com/product/ai-hackathons'],
['Customer hackathons', 'https://info.devpost.com/product/customer-hackathons'],
['Employee hackathons', 'https://info.devpost.com/product/devpost-for-teams'],
['Public hackathons', 'https://info.devpost.com/product/public-hackathons'],
]
%>

<% entries.each do |entry| %>
<% link_copy, link_url = entry %>
<%= link_to link_url do %>
<%= link_copy %> <%= arrow_icon %>
<% end %>
<% end %>
</div>
<% end %>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>

<div class="panel-section">
<a class="panel-product panel-product-content" href="https://info.devpost.com/product/public-hackathons">
<%= image_tag 'reimagine2/devpost-logo-mobile.svg', alt: 'Devpost' %>
<div>
<p class="title bold">Devpost</p>
<p class="subtitle">Grow your developer ecosystem and promote your platform</p>
</div>
</a>

<div class="panel-content with-icon-offset">
<%= link_to "https://info.devpost.com/product/public-hackathons" do %>
Host a public hackathon <%= arrow_icon %>
<% end %>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>

<div class="panel-section">
<a class="panel-product panel-product-content" href="https://info.devpost.com/product/devpost-for-teams">
<%= image_tag 'reimagine2/dft-logo-mobile.svg', alt: 'Devpost for Teams logo' %>
<div>
<p class="title bold">Devpost for Teams</p>
<p class="subtitle">Drive innovation, collaboration, and retention within your organization</p>
</div>
</a>

<div class="panel-content with-icon-offset">
<%= link_to "https://info.devpost.com/product/devpost-for-teams" do %>
Host an internal hackathon <%= arrow_icon %>
<% end %>
</div>
</div>
Loading

0 comments on commit 569d1f5

Please sign in to comment.