From 2e9555e16024701c525b8111d01e0b755e85835e Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Sat, 15 Sep 2018 05:41:15 +0200 Subject: [PATCH] Layout and style for new global menu. --- src/styles/components/_dropdown.sass | 18 +++ src/styles/components/_navbar.sass | 170 ++++++++++++++------------ src/templates/menus/notifications.pug | 11 +- src/templates/menus/user_base.pug | 19 --- src/templates/mixins/components.pug | 4 +- src/templates/projects/_macros.pug | 12 +- 6 files changed, 124 insertions(+), 110 deletions(-) diff --git a/src/styles/components/_dropdown.sass b/src/styles/components/_dropdown.sass index 692534b1..ea302693 100644 --- a/src/styles/components/_dropdown.sass +++ b/src/styles/components/_dropdown.sass @@ -24,3 +24,21 @@ ul.dropdown-menu nav .dropdown:hover ul.dropdown-menu display: block + +nav .dropdown.large:hover + .dropdown-menu + @extend .d-flex + +.dropdown.large.show + @extend .d-flex + + .dropdown-menu.show + @extend .d-flex + +.dropdown-menu-tab + display: none + min-width: 100px + + + &.show // .dropdown-menu-tab.show + @extend .d-flex diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index bbcc934f..cd5a781d 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -2,8 +2,7 @@ .navbar box-shadow: inset 0 -2px $color-background -.navbar, -nav.sidebar +.nav border: none color: $color-text-dark-secondary padding: 0 @@ -19,29 +18,6 @@ nav.sidebar margin: 0 width: 100% - .navbar-item - align-items: center - display: flex - user-select: none - color: inherit - - +media-sm - padding-left: 10px - padding-right: 10px - - &:hover, &:focus - color: $primary - background-color: transparent - box-shadow: inset 0 -3px 0 $primary - text-decoration: none - - &:focus - box-shadow: inset 0 -3px 0 $primary - - &.active - color: $primary - box-shadow: inset 0 -3px 0 $primary - li user-select: none position: relative @@ -80,49 +56,72 @@ nav.sidebar i +position-center-translate - .dropdown - min-width: 50px // navbar avatar size +.dropdown + min-width: 50px // navbar avatar size - span.fa-stack - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) + .navbar-item + &:hover + box-shadow: none // Remove the blue underline usually on navbar, from dropdown items. - ul.dropdown-menu - li - a - white-space: nowrap + ul.dropdown-menu + li + a + white-space: nowrap - &:hover - box-shadow: none // removes underline + .subitem // e.g. "Not Sintel? Log out" + font-size: .8em + text-transform: initial - .subitem // e.g. "Not Sintel? Log out" - font-size: .8em - text-transform: initial + i + width: 30px - i - width: 30px + &.subscription-status + a, a:hover + color: $white - &.subscription-status - a, a:hover - color: $white + &.none + background-color: $color-danger - &.none - background-color: $color-danger + &.subscriber + background-color: $color-success - &.subscriber - background-color: $color-success + &.demo + background-color: $color-info - &.demo - background-color: $color-info + span.info + display: block - span.info + span.renew display: block + font-size: .9em - span.renew - display: block - font-size: .9em + +.nav-link + @extend .d-flex + + +.navbar-item + align-items: center + display: flex + user-select: none + color: inherit + + +media-sm + padding-left: 10px + padding-right: 10px + + &:hover, &:focus + color: $primary + background-color: transparent + box-shadow: inset 0 -3px 0 $primary + text-decoration: none + + &:focus + box-shadow: inset 0 -3px 0 $primary + + &.active + color: $primary + box-shadow: inset 0 -3px 0 $primary /* Secondary navigation. */ @@ -132,19 +131,36 @@ $nav-secondary-bar-size: -2px box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background .nav-link - box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background color: $color-text cursor: pointer - transition: box-shadow 150ms ease-in-out + transition: color 150ms ease-in-out + + &:after + background-color: transparent + bottom: 0 + content: '' + height: 2px + position: absolute + right: 0 + left: 0 + width: 0 + transition: width 150ms ease-in-out .nav-link:hover, .nav-link.active, - .nav-item.dropdown.show .nav-link + .nav-item.dropdown.show > .nav-link // Blue bar on the bottom. - box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary + &:after + background-color: $primary-accent + background-image: linear-gradient(to right, $primary-accent 70%, $primary) + height: 2px + width: 100% + + span + +active-gradient i - color: $primary + color: $primary-accent &.nav-secondary-vertical align-items: flex-start @@ -156,19 +172,24 @@ $nav-secondary-bar-size: -2px // Blue bar on the side. .nav-link - box-shadow: inset 0 -1px 0 0 $color-background, inset -1px 0 0 0 $color-background - &:hover, &.active - box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary + color: $primary + @extend .bg-white - &.nav-main + &:after + background-image: linear-gradient($primary-accent 70%, $primary) + height: 100% + left: initial + top: 0 + width: 3px + +// Big navigation dropdown. +.nav-main + .nav-secondary .nav-link - color: $color-text-dark-secondary - - &:hover - color: $body-color - + @extend .pr-5 + box-shadow: none .navbar-overlay +media-lg @@ -188,15 +209,6 @@ $nav-secondary-bar-size: -2px background-color: $color-background-nav text-shadow: none -.navbar-brand - color: inherit - padding: 0 0 0 3px - position: relative - top: -2px - - &:hover - color: $primary - nav.navbar .navbar-collapse > ul > li > .navbar-item diff --git a/src/templates/menus/notifications.pug b/src/templates/menus/notifications.pug index d6f75e48..f37ca5d2 100644 --- a/src/templates/menus/notifications.pug +++ b/src/templates/menus/notifications.pug @@ -1,10 +1,11 @@ | {% if current_user.is_authenticated %} -li.nav-notifications - a.navbar-item#notifications-toggle.px-0( - title="Notifications", - data-toggle="tooltip", - data-placement="bottom") +li.nav-notifications.nav-item + a.nav-link.px-2( + id="notifications-toggle", + title="Notifications", + data-toggle="tooltip", + data-placement="bottom") i.pi-notifications-none.nav-notifications-icon span#notifications-count span diff --git a/src/templates/menus/user_base.pug b/src/templates/menus/user_base.pug index 79695ac6..8be5bab3 100644 --- a/src/templates/menus/user_base.pug +++ b/src/templates/menus/user_base.pug @@ -12,25 +12,6 @@ li.dropdown ul.dropdown-menu.dropdown-menu-right | {% if not current_user.has_role('protected') %} | {% block menu_list %} - li - a.navbar-item.px-2( - href="{{ url_for('projects.home_project') }}" - title="Home") - | #[i.pi-home] Home - - li - a.navbar-item.px-2( - href="{{ url_for('projects.index') }}" - title="My Projects") - | #[i.pi-star] My Projects - - | {% if current_user.has_organizations() %} - li - a.navbar-item.px-2( - href="{{ url_for('pillar.web.organizations.index') }}" - title="My Organizations") - | #[i.pi-users] My Organizations - | {% endif %} li a.navbar-item.px-2( diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug index 3bea4d78..4202cf4c 100644 --- a/src/templates/mixins/components.pug +++ b/src/templates/mixins/components.pug @@ -35,8 +35,8 @@ mixin jumbotron(title, text, image, url) mixin nav-secondary(title) ul.nav.nav-secondary&attributes(attributes) if title - li.font-weight-bold.px-2 - =title + li.nav-item + span.nav-link.font-weight-bold.pointer-events-none= title if block block diff --git a/src/templates/projects/_macros.pug b/src/templates/projects/_macros.pug index 42ea3351..581f4bb6 100644 --- a/src/templates/projects/_macros.pug +++ b/src/templates/projects/_macros.pug @@ -13,18 +13,20 @@ include ../mixins/components | {% endif %} +nav-secondary() + | {% if project.url != 'blender-cloud' %} li.text-capitalize a.nav-link.text-muted.px-0(href="{{ category_url }}") - | {{ project.category }} + span {{ project.category }} li.px-1 i.pi-angle-right +nav-secondary-link( - class="px-0 font-weight-bold", + class="px-1 font-weight-bold", href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - | {{ project.name }} + span {{ project.name }} + | {% endif %} - | {% if project.nodes_featured %} + | {% if project.nodes_featured and (title !='project') %} | {# In some cases featured_nodes might might be embedded #} | {% if '_id' in project.nodes_featured[0] %} | {% set featured_node_id=project.nodes_featured[0]._id %} @@ -35,7 +37,7 @@ include ../mixins/components href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}", title="Explore {{ project.name }}", class="{% if title == 'project' %}active{% endif %}") - | Explore + span Explore | {% endif %} | {% for link in navigation_links %}