Commit 0b443a06 authored by Robert Knight's avatar Robert Knight Committed by Nick Stenning

New navigation bar for the homepage

Update the style of the navigation bar on the homepage
to the new design from https://trello.com/c/h6kQMQG8/
parent 8ca3615f
/**
* A simple drop-down menu controller.
*
* All elements within 'rootElement' with the class 'js-menu-toggle'
* become dropdown menu toggles that toggle their closest sibling
* element with a 'js-menu' class, or the first element within
* 'rootElement' that matches the selector set by 'data-menu-target'
* on the toggle element.
*/
function DropdownMenuController(rootElement) {
var menuToggles = rootElement.querySelectorAll('.js-menu-toggle');
function setupMenu(menuToggle) {
menuToggle.addEventListener('click', function (openEvent) {
openEvent.preventDefault();
var dropdown = menuToggle;
if (menuToggle.dataset.menuTarget) {
dropdown = rootElement.querySelector(menuToggle.dataset.menuTarget);
} else {
dropdown = dropdown.parentElement.querySelector('.js-menu');
}
if (!dropdown) {
throw new Error('Associated menu not found');
}
var isOpen = dropdown.classList.toggle('is-open');
if (isOpen) {
document.addEventListener('click', function listener(event) {
if (event.target === menuToggle || dropdown.contains(event.target)) {
return;
}
dropdown.classList.remove('is-open');
document.removeEventListener('click', listener);
});
}
});
}
for (var i=0; i < menuToggles.length; i++) {
setupMenu(menuToggles[i]);
}
}
module.exports = DropdownMenuController;
// groups forms
var CreateGroupFormController = require('./create-group-form');
var DropdownMenuController = require('./dropdown-menu');
var ShareGroupFormController = require('./share-group-form');
function setupGroupsController(path) {
......@@ -14,4 +14,6 @@ document.addEventListener('DOMContentLoaded', function () {
if (document.location.pathname.indexOf('/groups') === 0) {
setupGroupsController(document.location.pathname);
}
new DropdownMenuController(document);
});
......@@ -2,6 +2,7 @@
@import 'compass/reset/utilities';
@import "./variables";
@import "./util";
/* Style input placeholders */
@mixin placeholder {
......
@at-root {
$nav-h-padding: 15px;
// desktop
.top-nav {
display: flex;
flex-direction: row;
font-family: $font-family-site-sans;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
max-width: 1130px;
align-items: center;
padding-left: $nav-h-padding;
padding-right: $nav-h-padding;
}
.top-nav-controls {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.top-nav-logo {
display: flex;
flex-direction: row;
font-size: $font-size-heading1;
font-weight: bold;
color: $color-mine-shaft;
align-items: center;
letter-spacing: -0.2;
}
.top-nav-logo__dot {
color: $color-cardinal;
}
.hiring-banner {
font-size: $font-size-body2;
border: 1px solid $color-alto;
border-radius: 2px;
margin-left: 10px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
}
.hiring-banner__arrow-svg {
position: absolute;
left: -5px;
width: 5px;
height: 20px;
}
.hiring-banner__arrow {
fill: white;
stroke: $color-alto;
}
.nav-bar-toggle {
display: none;
}
.nav-bar {
display: flex;
flex-direction: row;
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
}
.nav-bar__item {
font-size: $font-size-body2;
margin-left: 12px;
margin-right: 12px;
color: $color-mine-shaft;
}
.nav-bar-menu__indicator::after {
color: $color-silver-chalice;
content: "\2304"; // 'Down Arrowhead'
// align the cheveron for the drop-down menu
// indicator with the middle of the adjacent
// menu item text
position: relative;
top: -3px;
}
.nav-bar-menu {
background-color: white;
border: 1px solid $color-alto;
border-radius: 2px;
display: none;
margin-top: 3px;
position: absolute;
list-style-type: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 2px;
padding-bottom: 2px;
z-index: 1;
}
.nav-bar-menu.is-open {
display: block;
font-size: $font-size-body2;
}
.nav-bar-menu__item {
padding-top: 3px;
padding-bottom: 3px;
}
.nav-bar-menu__separator {
border-bottom: 1px solid $color-gallery;
margin-bottom: 10px;
margin-top: 10px;
}
.nav-bar__item--login {
color: $color-silver-chalice;
& > a {
color: $color-cardinal;
}
}
// phones and small tablets
@media only screen and (max-width: 700px) {
.top-nav {
flex-direction: column;
align-items: stretch;
}
.nav-bar-container {
overflow: hidden;
margin-top: 10px;
max-height: 0px;
transition: max-height .3s ease-in;
}
.nav-bar-container.is-open {
max-height: 800px;
}
.nav-bar {
display: flex;
flex-direction: column;
background-color: $color-gallery;
padding-left: 3px;
padding-right: 3px;
padding-top: 15px;
padding-bottom: 15px;
position: relative;
top: -400px;
transition: top .3s ease-in;
}
.is-open > .nav-bar {
top: 0px;
}
.nav-bar-toggle {
display: initial;
color: $color-mine-shaft;
font-size: $font-size-heading1;
}
.nav-bar__item {
margin-top: 3px;
margin-bottom: 3px;
font-size: $font-size-heading1;
}
.nav-bar-menu {
background-color: transparent;
position: relative;
border: none;
padding-left: 0px;
padding-bottom: 10px;
}
.nav-bar-menu__item {
font-size: $font-size-heading1;
}
}
}
......@@ -8,7 +8,10 @@
@import './share-link';
// website-specific components
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700);
@import './group-form';
@import './nav-bar';
body {
@extend .noise;
......
// Utility classes for layout
.u-stretch {
flex-grow: 1;
}
......@@ -4,7 +4,9 @@
$white: #fff !default;
$black: #000 !default;
// GRAYS
// Grays
// ---------------------
$gray: #777 !default;
$gray-darker: #333;
$gray-dark: #585858;
......@@ -19,10 +21,14 @@ $color-silver-chalice: #a6a6a6;
$color-silver: #bbb;
$color-alto: #dedede;
$color-mercury: #e2e2e2;
$color-gallery: #ececec;
$color-seashell: #f1f1f1;
$color-wild-sand: #f5f5f5;
//COLORS
// Colors
// ---------------------
$color-cardinal: #bd1c2b;
$brand-color: #bd1c2b !default;
$button-text-color: $gray-dark !default;
......@@ -60,15 +66,19 @@ $mask-end-color: $white !default;
}
}
// Scaffolding
// -------------------------
$body-background: $white !default;
$text-color: $gray-dark !default;
//LINKS
// Links
// -------------------------
$link-color: $brand-color !default;
$link-color-hover: color-weight($brand-color, 700) !default;
// Typography
// -------------------------
$sans-font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
......@@ -92,12 +102,27 @@ $body2-line-height: 1.4em;
$title-font-size: 20px;
$title-font-weight: bold;
//STANCE COLORS
// Front page typography
// -------------------------
// These are part of the new design at https://trello.com/c/h6kQMQG8/187-new-homepage-design)
// and the styles/sizes across the sidebar, site, frontpage and blog need to be
// made consistent
$font-size-body1: 13px;
$font-size-body2: 15px;
$font-size-heading1: 19px;
$font-family-site-sans: "Source Sans Pro", sans-serif;
// Stance Colors
// -------------------------
$positive: #3aab39;
$negative: #d11c2b;
$neutral: #0171ba;
//OTHER VARIABLES
// Other Variables
// -------------------------
$bucket-bar-width: 22px;
$highlight-color: rgba(255, 255, 60, 0.3);
$highlight-color-second: rgba(206, 206, 60, 0.4);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment