archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Layout and style for new global menu.

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-15 05:41:15 +02:00
parent b0311af6b5
commit 2e9555e160
6 changed files with 124 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/components/_dropdown.sass
View File

@ -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

170
src/styles/components/_navbar.sass
View File

@ -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

11
src/templates/menus/notifications.pug
View File

@ -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

19
src/templates/menus/user_base.pug
View File

@ -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(

4
src/templates/mixins/components.pug
View File

@ -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

12
src/templates/projects/_macros.pug
View File

@ -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 %}