Skip to content

Commit eb62e34

Browse files
elijahkimamygimma
elijahkim
authored and
amygimma
committed
- Updated Nav
 - Nav is white or black depending on page and position - Mobile nav is now clickable across the span - Mobile nav disappears on clicking outside of nav menu - Client sections are centered * Colors change after hero * Modify anchor tags to work with fixed nav
1 parent 5b0176b commit eb62e34

17 files changed

+152
-48
lines changed

‎app/assets/javascripts/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
var bindContactForm = require('./app/contact');
22
var bindToggleNav = require('./app/nav');
3+
var bindColorNav = require('./app/color_nav');
34

45
$(function(){
56
bindToggleNav();
67
bindContactForm();
8+
bindColorNav();
79
});
810

911
// global react components

‎app/assets/javascripts/app/color_nav.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = function colorNav() {
2+
var $nav = $(".navigation");
3+
var $selector = $(".thesis");
4+
if (!$selector.get(0)){
5+
return;
6+
}
7+
8+
var thresholdHeight = $selector.position().top - $nav.height();
9+
var toggled = false;
10+
var toggleNavClass = function() {
11+
var scrollHeight = window.pageYOffset;
12+
var pastThreshold = thresholdHeight <= scrollHeight;
13+
if (pastThreshold === toggled) { return; }
14+
if (pastThreshold) {
15+
$nav.addClass("dark-nav");
16+
toggled = true;
17+
} else {
18+
$nav.removeClass("dark-nav");
19+
toggled = false;
20+
}
21+
};
22+
$(window).on("scroll", toggleNavClass);
23+
};

‎app/assets/javascripts/app/nav.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
module.exports = function bindToggleNav() {
22
var menu = $('.js-nav-menu');
33
$('.js-mobile-menu').on('click', function(e) {
4-
e.preventDefault();
4+
e.stopPropagation();
55
menu.toggleClass('show');
66
});
7+
$('.js-nav-menu').on('click', function(e) {
8+
menu.toggleClass('show');
9+
});
10+
11+
$(window).on('click', function(e){
12+
if(e.target !== menu){
13+
menu.removeClass('show');
14+
}
15+
});
716
};

‎app/assets/stylesheets/_clients.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@
2525
margin-left: 4em;
2626
}
2727
}
28-
padding: 4em 0;
28+
padding: 3em 0 1em;
2929

3030
.quote-card {
3131
@include span-columns(4 of 12);
3232
@include media($client-break) {
3333
@include span-columns(12 of 12);
34+
margin: auto;
35+
text-align: center;
3436
}
35-
width: 300px;
3637
margin: auto;
3738
display: block;
3839
margin-bottom: 1em;
@@ -50,6 +51,9 @@
5051

5152
blockquote {
5253
margin-left: 10px;
54+
@include media($client-break) {
55+
border-left: none;
56+
}
5357
}
5458
}
5559

‎app/assets/stylesheets/_hero.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
margin-bottom: .3em;
2222

2323
@include media($large-screen) {
24-
font-size: 5em;
24+
font-size: 3em;
2525
}
2626
}
2727

‎app/assets/stylesheets/_navbar.scss

+77-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
$navigation-padding: 1em;
2-
$navigation-background: transparentize($wizard-orange, 0.2);
32
$navigation-color: transparentize(white, 0.2);
43
$navigation-background: white;
54
$navigation-color: $wizard-gray;
@@ -9,6 +8,13 @@ $navigation-active-link-color: $wizard-gray;
98
$navigation-submenu-padding: 1em;
109
$horizontal-bar-mode: $large-screen;
1110

11+
.jumptarget:before {
12+
content: "";
13+
display: block;
14+
height: 60px;
15+
margin: -60px 0 0;
16+
}
17+
1218
.navigation {
1319
position: fixed;
1420
top: 0;
@@ -17,18 +23,7 @@ $horizontal-bar-mode: $large-screen;
1723
height: $navigation-height;
1824
width: 100%;
1925
z-index: 2;
20-
21-
.menu-wrapper {
22-
// @include outer-container;
23-
@include clearfix;
24-
}
25-
26-
.logo {
27-
float: left;
28-
max-height: $navigation-height;
29-
padding-left: $navigation-padding;
30-
padding-right: 2em;
31-
}
26+
@include transition(all .3s ease-in-out);
3227

3328
.navigation-menu-button {
3429
color: $wizard-blue;
@@ -45,23 +40,28 @@ $horizontal-bar-mode: $large-screen;
4540
@include media ($horizontal-bar-mode) {
4641
display: none;
4742
}
43+
}
4844

49-
&:hover {
50-
color: $navigation-color-hover;
45+
.left-nav {
46+
display: inline-block;
47+
float: left;
48+
padding: 10px 0 0 16px;
49+
50+
h1 {
51+
color: $wizard-blue;
52+
font-size: 26px;
5153
}
5254
}
5355

54-
.nav {
56+
.right-nav {
57+
display: block;
5558
float: none;
5659
@include media ($horizontal-bar-mode) {
5760
float: right;
5861
}
5962
}
6063

6164
.navigation-menu {
62-
$dark-orange: shade($wizard-orange, 10%);
63-
background: transparentize($dark-orange, 0.11);
64-
6565
width: 100%;
6666
height: 0;
6767
overflow: hidden;
@@ -87,36 +87,84 @@ $horizontal-bar-mode: $large-screen;
8787
text-align: center;
8888
width: 100%;
8989

90-
&:hover {
91-
background: shade($navigation-background, 20%);
92-
a {
93-
color: $navigation-color-hover;
90+
a {
91+
color: $navigation-color-hover;
92+
&:hover {
93+
background-color: shade($navigation-background, 20%);
94+
@include media ($horizontal-bar-mode) {
95+
background-color: transparent;
96+
}
9497
}
9598
}
9699

97100
a {
98101
font-weight: 600;
99102
text-transform: uppercase;
100-
display: inline-block;
103+
display: block;
101104
color: $wizard-blue;
102105
text-decoration: none;
103106
}
104107

105108
@include media ($horizontal-bar-mode) {
106109
background: transparent;
107-
&:hover {
108-
background: transparent;
109-
}
110110
display: inline;
111111
line-height: $navigation-height;
112112
width: auto;
113113
a {
114+
display: inline;
114115
padding-right: 1em;
115116
}
116117
}
117118
}
119+
}
120+
121+
.active-nav-item a {
122+
padding-bottom: 3px;
123+
}
124+
125+
.dark-nav {
126+
background-color: black;
127+
@include transition(all .3s ease-in-out);
128+
129+
a {
130+
color: white;
131+
&:hover {
132+
color: $wizard-orange;
133+
}
134+
}
135+
136+
137+
.navigation-menu-button {
138+
color: white;
139+
140+
&:hover {
141+
color: $navigation-color-hover;
142+
}
143+
}
144+
145+
ul li {
146+
background: black;
147+
148+
&:hover {
149+
background: shade(white, 20%);
150+
a {
151+
color: $wizard-orange;
152+
}
153+
}
154+
155+
a {
156+
color: white;
157+
}
118158

119-
.active-nav-item a {
120-
padding-bottom: 3px;
159+
@include media ($horizontal-bar-mode) {
160+
background: none;
161+
display: inline;
162+
}
163+
@include media ($horizontal-bar-mode) {
164+
background: transparent;
165+
&:hover {
166+
background: transparent;
167+
}
168+
}
121169
}
122170
}

‎app/assets/stylesheets/application.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
@import "font-awesome-sprockets";
88
@import "font-awesome";
99
@import "navbar";
10-
@import "dark";
11-
@import "light";
10+
@import "home_page_sections";
1211
@import "hero";
1312
@import "thesis";
1413
@import "products";

‎app/controllers/application_controller.rb

+4
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@ class ApplicationController < ActionController::Base
44
def hide_nav
55
@_hide_nav = true
66
end
7+
8+
def black_nav
9+
@_black_nav = true
10+
end
711
end

‎app/controllers/home_controller.rb

+3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ def index
55
end
66

77
def clients
8+
black_nav
89
end
910

1011
def bakecycle
12+
black_nav
1113
end
1214

1315
def winnower
16+
black_nav
1417
end
1518
end

‎app/helpers/application_helper.rb

+3
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
module ApplicationHelper
2+
def nav_class
3+
'dark-nav' if @_black_nav
4+
end
25
end

‎app/views/application/_navbar.html.erb

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
<header class="navigation">
1+
<header class="navigation <%= nav_class %>">
22
<div class="menu-wrapper">
33
<p class="navigation-menu-button js-mobile-menu"><i class="fa fa-2x fa-bars"></i></p>
4-
<div class="nav">
4+
<div class="left-nav">
5+
<h1><%= link_to "WD", root_path %></h1>
6+
</div>
7+
<div class="right-nav">
58
<ul class="js-nav-menu navigation-menu">
6-
<li class="nav-link"><%= link_to "Services", root_path(anchor: "services") %></li>
7-
<li class="nav-link"><%= link_to "Clients", root_path(anchor: "clients") %></li>
8-
<li class="nav-link"><%= link_to "Team", root_path(anchor: "team") %></li>
9-
<li class="nav-link"><%= link_to "Contact", root_path(anchor: "contact") %></li>
10-
<li class="nav-link"><%= link_to "Blog", root_path(anchor: "recent-articles") %></li>
9+
<li><%= link_to "Services", root_path(anchor: "services") %></li>
10+
<li><%= link_to "Clients", root_path(anchor: "clients") %></li>
11+
<li><%= link_to "Team", root_path(anchor: "team") %></li>
12+
<li><%= link_to "Contact", root_path(anchor: "contact") %></li>
13+
<li><%= link_to "Blog", root_path(anchor: "recent-articles") %></li>
1114
</ul>
1215
</div>
16+
</div>
1317
</header>

‎app/views/home/_articles.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section class="light">
2-
<div id="recent-articles" class="recent-articles-container">
2+
<div class="recent-articles-container">
33
<h2 class="recent-articles-title">Recent Articles</h2>
44
<div class="article-entries">
55
<% @latest_articles.each do |article| %>

‎app/views/home/_clients.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section class="light" id="clients">
1+
<section class="light">
22
<div class="clients-container">
33
<div class="featured-client">
44
<h2>Featured Client</h2>

‎app/views/home/_contact_form.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="contact-footer" id="contact">
1+
<section class="contact-footer">
22
<div class="contact-container">
33
<div class="two-col">
44
<div class="coffee">
@@ -26,4 +26,4 @@
2626
<% end %>
2727
</div>
2828
</div>
29-
</div>
29+
</section>

‎app/views/home/_products.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section class="products light">
2-
<div class="products-container" id="services">
2+
<div class="products-container">
33
<div class="product">
44
<div class="product-logo logo-1">
55
<i class="fa fa-terminal"></i>

‎app/views/home/_team.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section id="team" class="team-section dark">
1+
<section class="team-section dark">
22
<div class="team-section-inner">
33
<h2 class="team-title">Our Team</h2>
44
<div class="team-members">

‎app/views/home/index.html.erb

+5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<%= render 'hero' %>
2+
<div class="jumptarget" id="services"></div>
23
<%= render 'thesis' %>
34
<%= render 'products' %>
45
<%= render 'tools' %>
6+
<div class="jumptarget" id="clients"></div>
57
<%= render 'clients' %>
8+
<div class="jumptarget" id="team"></div>
69
<%= render 'team' %>
10+
<div class="jumptarget" id="recent-articles"></div>
711
<%= render 'articles'%>
12+
<div class="jumptarget" id="contact"></div>
813
<%= render 'contact_form' %>
914
<%= render 'footer' %>

0 commit comments

Comments
 (0)