diff --git a/app/partials/includes/modules/navigation-bar/dropdown-organization-list.jade b/app/partials/includes/modules/navigation-bar/dropdown-organization-list.jade new file mode 100644 index 00000000..49b37952 --- /dev/null +++ b/app/partials/includes/modules/navigation-bar/dropdown-organization-list.jade @@ -0,0 +1,6 @@ +div.navbar-dropdown.dropdown-organization-list + ul + - for (var x = 0; x < 4; x++) + li + a(href="#", title="{{ project.title }}") Organization 1 + a.create-organization-btn.button-green(href="#", title="Create Organization") Create Organization diff --git a/app/partials/includes/modules/navigation-bar/dropdown-project-list.jade b/app/partials/includes/modules/navigation-bar/dropdown-project-list.jade new file mode 100644 index 00000000..e805759a --- /dev/null +++ b/app/partials/includes/modules/navigation-bar/dropdown-project-list.jade @@ -0,0 +1,7 @@ +div.navbar-dropdown.dropdown-project-list + ul + - for (var x = 0; x < 9; x++) + li + a(href="#", title="{{ project.title }}") Project 1 + a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more + a.create-project-btn.button-green(href="#", title="Create project") Create project diff --git a/app/partials/includes/modules/navigation-bar/dropdown-user.jade b/app/partials/includes/modules/navigation-bar/dropdown-user.jade new file mode 100644 index 00000000..a7f2a638 --- /dev/null +++ b/app/partials/includes/modules/navigation-bar/dropdown-user.jade @@ -0,0 +1,19 @@ +div.navbar-dropdown.dropdown-user + ul + li + a(href="#", title="{{ user.fullname }} profile") View Profile + li + a(href="#", title="Edit your profile") Edit Profile + li + a(href="#", title="Edit your organizations") Edit Organizations + li + a(href="#", title="Edit your settings") Settings + li + a(href="#", title="Edit your notifications") Notifications + li + a(href="#", title="Send feedback") Feedback + li + a(href="#", title="Go to support") Help + li + a(href="#", title="Logout") Logout + diff --git a/app/partials/includes/modules/navigation-bar/navbar.jade b/app/partials/includes/modules/navigation-bar/navbar.jade index f22a2230..d89699d2 100644 --- a/app/partials/includes/modules/navigation-bar/navbar.jade +++ b/app/partials/includes/modules/navigation-bar/navbar.jade @@ -7,18 +7,18 @@ nav.navbar div.nav-right a(href="", title="Dashboard") include ../../../../svg/dashboard.svg - div.top-nav-dropdown + div.topnav-dropdown-wrapper a(href="", title="Projects") include ../../../../svg/projects.svg - div.dropdown-project-list - ul - - for (var x = 0; x < 9; x++) - li - a(href="#", title="{{ project.title }}") Project 1 - a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more - a.create-project-btn.button-green(href="#", title="Create project") Create project - a(href="#", title="Organizations") - include ../../../../svg/organizations.svg - a.user-avatar(href="#", title="{{ user.fullname }} profile") - span Sebastián Sanchís - img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture") + include dropdown-project-list + + div.topnav-dropdown-wrapper + a(href="#", title="Organizations") + include ../../../../svg/organizations.svg + include dropdown-organization-list + + div.topnav-dropdown-wrapper + a.user-avatar(href="#", title="{{ user.fullname }} profile") + span Sebastián Sanchís + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture") + include dropdown-user diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index ed5d3ce0..e5b28c0d 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -33,5 +33,5 @@ $star-fill: #edd400; // Top menu values $top-icon-color: #11241f; -$dropdown-width: 500px; +$dropdown-width: 350px; $dropdown-color: rgba(darken($grayer, 20%), 1); diff --git a/app/styles/modules/common/navbar.scss b/app/styles/modules/common/navbar.scss index 4dd0ef99..02d32008 100644 --- a/app/styles/modules/common/navbar.scss +++ b/app/styles/modules/common/navbar.scss @@ -42,7 +42,7 @@ a { padding: .5rem 2rem; } - .dropdown-project-list { + .navbar-dropdown { a { padding: .8rem .5rem; } @@ -82,10 +82,10 @@ transition: all .2s; } } - .top-nav-dropdown { + .topnav-dropdown-wrapper { position: relative; &:hover { - .dropdown-project-list { + .navbar-dropdown { display: block; } } @@ -101,11 +101,18 @@ } } -.dropdown-project-list { +.navbar-dropdown { @extend %dropdown; background: $blackish; border: 1px solid $black; padding: .3rem; + &.dropdown-user { + left: calc(50% - 230px/2); + min-width: 230px; + ul { + margin-bottom: 0; + } + } ul { @include arrow('bottom', $blackish, $blackish, 1, 12); margin: 0; @@ -120,6 +127,7 @@ color: $fresh-taiga; } &.see-more-projects-btn, + &.create-organization-btn, &.create-project-btn { color: $white; padding: .5rem; @@ -133,3 +141,10 @@ } } } + +// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR + +@keyframes dropdownFade { + 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + 100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); } +}